seanred360 Goto Github PK

50-in-50

50 javascript projects in 50 days

audiophile-cms

A Sanity.io headless CMS for the Audiophile ecommerce site

audiophile-fullstack-ecommerce-site

A full stack Next ecommerce app with Stripe checkout and Sanity CMS

bookmark-landing-page

The landing page for a bookmark browser entension. Uses interactive 3D elements to catch the user's attention.

build-a-survey-form

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/VPaoNP.

build-a-technical-documentation-page

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/NdrKKL. Fulfill the below user stories and get all of the tests to pass. Give it your own personal style. You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! User Story #1: I can see a main element with a corresponding id="main-doc", which contains the page's main content (technical documentation). User Story #2: Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5. User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section. User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding id="JavaScript_and_Java"). User Story #5: The .main-section elements should contain at least 10 p elements total (not each). User Story #6: The .main-section elements should contain at least 5 code elements total (not each). User Story #7: The .main-section elements should contain at least 5 li items total (not each). User Story #8: I can see a nav element with a corresponding id="navbar". User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation. User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section. User Story #11: The header element in the navbar must come before any link (a) elements in the navbar. User Story #12: Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world"). User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id and contains the corresponding header. User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user. User Story #15: My Technical Documentation page should use at least one media query. You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

clamr-chat-app

Basically a React dischord clone https://clamr.netlify.app/

crowdfunding-product-page

Sean Red's Frontend mentor challenge solution for a crowdfunding product page

data

donnie-fan-website

A website for the China based comedian Donnie Fan

erik-hoffstad-tribute-page

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.

esl-game-collection

This is a compilation of all the small educational games I created for Smartboards in my ESL classes. There are 14 games all unified under one UI.

keis-weird-and-wonderful-theme

A custom Wordpress theme for keigambit.com

kid-s-beginner-book

A digital version of the textbook I was using in my ESL class. It was created for Smartboards. You can turn the page, zoom in and out, and play the book's audio files with touch input. The school currently uses this app in their classes as of 2/9/2021

mikeys-pizzeria

A website for Mikey's Pizzeria in St Thomas Ontario

planets-fact-site

A visually appealing website that teaches children about the planets in our solar system.

product-feedback-app

The client for my feedback message board.

product-feedback-app-backend

A REST API backend for the Product Feedback App

product-landing-page

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/RKRbwL.

rest-countries-api

A React app that grabs country data from an API and displays it.

sean-red-portfolio

Sean Redmon's portfolio website

seanred360

Sean Red's GitHub profile README

umami

Umami is a simple, fast, privacy-focused alternative to Google Analytics.

waterfillgame

A Smartboard game for my ESL classroom. It is a visual way to keep score on the board. When a student gets a question correct their team's Pikmin gets closer to the top. Whoever gets their Pikmin to the top first wins.