https://github.com/developer3027/50projects
https://github.com/developer3027/50projects
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/developer3027/50projects
- Owner: Developer3027
- Created: 2021-04-15T19:38:37.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-16T19:48:42.000Z (almost 5 years ago)
- Last Synced: 2025-07-24T00:24:47.723Z (8 months ago)
- Language: HTML
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 50projects
### Overview
This is a Udemy course from Brad Traversy and Florin Pop that is html, css, and javascript. It is laid out as a project a day for 50 days. Both Brad and Florin have Youtube channels that I encourage you to check out.
#### Base Project
This is just the base project files set up to make completing the course easier. This is just the basic html scaffolding that connects the style sheet and script file.
#### Expanding Cards
This is a quick, neat project that is a set of divs with background images. A active class is created with css and either added or removed from the div upon click with javascript. This active class will expand the size of the div and show a h3 placed within the div. Transitions and opacity values are addressed in css.
#### Progress Steps
This is a simple little line movement from one to four steps. Click the next button and the line progress from 1 to 2. Great for forms, carts, tests to indicate the progress being made.
#### Rotating Navigation
This project is a fantastic concept on navigation. It is a mocked up article that has a circle placed just off the top left corner so you only see the pie section with the bars icon. Clicking the bars to open the menu will rotate the article and reveal the menu that slides in at the same angle as the page rotates. The only javascript here is to add and remove the show-nav class! Nearly everything is css.
#### Search Widget
This is a simple hidden input and search button. The search button is 50 pixel square with the search icon. Clicking the button opens and reveals the search input, moving the button right while exposing the input left. Focus is placed on the input once open.
#### Focus
In this project we set a image to full screen in a section. We set a number in the center of that image. We then use javascript to blur the image and bring it into focus while a count down runs and fades out. The image goes from blur to focus in the same time that the count down goes from 0 to 100.
#### Scroll Animation
This project brings in content blocks from the left or right while scrolling. As you scroll down the content blocks will be brought in as room becomes available. On scrolling up the blocks will be removed.