50 Projects, 50 Days
Following the guidance of Brad Traversy's Udemy Course, I completed one project a day for 50 days. Throughout this project-based journey, I strengthened my HTML, CSS, and JavaScript skills, and built up a great reference catalog of awesome features and effects! Below you will find a list of each project, as well as a short description of it.
Progress So Far
Day 1: Expanding Cards
In this project, collapsed panels which contain cropped images are displayed. Using Javascript, when the user clicks on a panel, it slowly expands and presents the full image.
Originally Completed: 8/7/2021
Day 2: Progress Steps
A basic progress bar that adjusts to whichever "Step" in a fictitious process the user is on. The user can move onto the next step via a button, as well as return to the previous step -- and the progress bar and other styling adjust accordingly.
Originally Completed: 8/8/2021
Day 3: Rotating Navigation
Demonstrates how to hide a navigation menu until the user clicks an "open" icon. Once clicked, the main content of the webpage rotates, revealing the once-hidden navigation menu.
Originally Completed: 8/9/2021
Day 4: Hidden Search Widget
A simple "Search" widget. The user can click on the search icon, at which point an input box slowly stretches out from the icon, allowing them to type in it. They can click the icon again to close the input box.
Originally Completed: 8/10/2021
Day 5: Blurry Loading
Demonstrates having a background image start blurry and slowly become focused as the webpage loads.
Originally Completed: 8/11/2021
Day 6: Scroll Animation
Simple page where content animates into view upon scrolling the window
Originally Completed: 8/12/2021
Day 7: Split Landing Page
A basic split landing page showcasing the Playstation 5 and Xbox Series X consoles. Whichever of the two products has the focus of the mouse will have its contents grow in size, as the other console's shrinks.
Originally Completed: 8/13/2021
Day 8: Form Wave Animation
A nice little animation effect occurs on a form's input labels when the user clicks the input field.
Originally Completed: 8/14/2021
Day 9: Sound Board
User can click on various buttons and have that button's corresponding audio play. Simple test of using the HTML audio tag.
Originally Completed: 8/15/2021
Day 10: Dad Jokes
Using a fetch request to "canihazdadjokes" API, the user can click a button and be presented with a random -- and amazing -- dad joke!
Originally Completed: 8/16/2021
Day 11: Event KeyCodes
Simple page where a user can type a character and see the Key and KeyCode that correspond to that character.
Originally Completed: 8/17/2021
Day 12: FAQ Collapse
An FAQ section to a website, where each question can be collapsed and expanded to reveal its contents.
Originally Completed: 8/18/2021
Day 13: Random Choice Picker
Enter in a collection of "choices" and have the webpage randomly select one for you!
Originally Completed: 8/19/2021
Day 14: Animated Navigation
When the user opens or closes the navigation bar, the open/close icon and the links inside animate into place.
Originally Completed: 8/20/2021
Day 15: Increment Counter
Displays fake counters for various social media statistics (like Subscribers).
Originally Completed: 8/21/2021
Day 16: Drink Water
Keep track of your water-drinking! Select how much water you've consumed throughout a day and see a visual representation of how close you are to your daily goal.
Originally Completed: 8/22/2021
Day 17: Movie App
Using a movie API, this webpage displays a list of movies based on the user's Search input. Each movie has its cover art, rating, and description available for viewing.
Originally Completed: 8/23/2021
Day 18: Background Slider
Click left and right arrows to scroll through a series of images. The image currently being viewed also shows up in the background, creating a cool effect with the image in the foreground.
Originally Completed: 8/24/2021
Day 19: Theme Clock
A clock that updates in real-time with the user's current time. A dark / light mode is also available.
Originally Completed: 8/25/2021
Day 20: Button Ripple
A ripple animation accompanies a button being clicked. The animation originates from the exact spot on the button that the user clicks on.
Originally Completed: 8/26/2021
Day 21: Drag-N-Drop
Simple page that allows the user to drag an image element into an empty box, which it will then be placed inside of.
Originally Completed: 8/27/2021
Day 22: Drawing App
A drawing app using Canvas! Includes basic functionality for increasing/decreasing brush size, changing color, and clearing the drawing.
Originally Completed: 8/28/2021
Day 23: Kinetic Loader
A spinning loader effect constructed using triangles and keyframes.
Originally Completed: 8/29/2021
Day 24: Content Placeholder
A neat effect that's rendered onto a user's profile card until the user's actual profile data is fetched and can be displayed on the webpage
Originally Completed: 8/30/2021
Day 25: Sticky Navigation Bar
A navigation bar that sticks to the top of the webpage. It also transitions into a different color scheme, and smaller size, after the user scrolls down a set distance.
Originally Completed: 8/31/2021
Day 26: Double Vertical Slider
Navigate through description/image pairs by pressing up and down buttons. When the buttons are clicked, the text panel on the left scrolls one direction into view, while its corresponding picture panel on the right scrolls into view from the other direction.
Originally Completed: 9/01/2021
Day 27 - Toast Notification
Originally Completed: 9/02/2021
Stackable notifications that display for a few moments before disappearing.
Day 28 - Github Profile
Originally Completed: 9/03/2021
Using the Github API, users are able to search for a Github user and retrieve their profile information. The information is displayed in a card-like element and shows their name, biography, Followers/Follows, and their last 5 repositories.
Day 29 - Double Heart Click
Double-click on an image to "Heart" it. Doing so will cause a heart icon to animate where the image was clicked, and a counter tracking your "Likes" to increase.
Originally Completed: 9/04/2021
Day 30 - Auto Typing Effect
Very simple project that showcases text that is looks as if it is being automatically typed onto the page. The user can increase and decrease the speed at which the typing occurs.
Originally Completed: 9/05/2021
Day 31 - Password Generator
A password generator! Customize the parameters of the password by selecting whether it should include uppercase, lowercase, numbers, or symbols. Also choose the desired number of characters. The password will then be randomly generated. The user can also copy the password to their clipboard by pressing the clipboard icon.
Originally Completed: 9/06/2021
Day 32 - Good, Cheap, Fast Checkboxes
A simple, silly project that uses stylized input checkboxes to allow the user to select 3 attributes he wishes his project to be: Good, Cheap, and Fast. However, only two of the inputs are allowed to be toggled "On" at any given time.
Originally Completed: 9/07/2021
Day 33 - Notes App
An app that lets the user creates notes! The user can add notes, delete notes, and edit them. The notes are saved to local storage so they can persist upon page refresh. Using a third-party markdown library, notes can even take advantage of markdown for features like bold text, italics, bulleted lists, etc.
Originally Completed: 9/08/2021
Day 34 - Countdown Animation
An animated countdown! A timer counts down from 3 using various fun animations, at which point a "GO!" text is presented to the user. A "Replay" button allows the countdown to begin again.
Originally Completed: 9/09/2021
Day 35 - Image Carousel
A standard image carousel. Click the Previous and Next buttons to have the next image transition into view. Or let the page idle and have the carousel handle scrolling through each image on its own every few seconds.
Originally Completed: 9/10/2021
Day 36 - Hoverboard
Simple but neat looking color effects! A colorful series of squares form a grid that react to the user hovering in and out of them.
Originally Completed: 9/11/2021
Day 37 - Pokedex
A Pokedex! Using the fetch API to grab data from pokeapi, the first 150 pokemon are displayed in a nice, clean format. The images are a bit unpleasant, as the old resource for getting Pokemon images seems to have stopped existing.
Originally Completed: 9/12/2021
Day 38 - Mobile Tab Navigation
A mobile phone UI, with tabs on the bottom of the 'phone' that the user can click to browse through various images.
Originally Completed: 9/13/2021
Day 39 - Password Strength Background
An email/password form with a background image. The background image starts out blurry, and slowly becomes more clear as the user enters a password that meets the minimum length requirements.
Originally Completed: 9/14/2021
Day 40 - 3D Background Boxes
A cool image effect created by positioning an image / gif over a series of 3D boxes. This makes the image look like it's scattered across multiple boxes, and once the user presses the button the boxes animate and slide together to show the image in its normal state.
Originally Completed: 9/15/2021
Day 41 - Verify Account UI
A UI for a typical "Verify Your Account" form. The user must enter a 6-digit code in order to pass verification. Note that this is just the foundations of the UI, and the functionality for sending a unique code to the user's email, and verifying that they type in the correct code, are not present.
Originally Completed: 9/16/2021
Day 42 - Live User Filter
Using the RandomUser API, we generate a list of users. Using the search field, you can search the user list for a specific name or location, and the list will add / remove results appropriately with the search criteria provided.
Originally Completed: 9/17/2021
Day 43 - Feedback UI Design
A simple feedback form with "Unhappy", "Neutral", and "Satisfied" options. The user can select one of the three options, submit their decision, and receive a message thanking them for their rating.
Originally Completed: 9/18/2021
Day 44 - Custom Range Slider
As simple as the title: Just a custom range slider! The slider's value (1 to 100) changes appropriately as the user moves the slider left and right. The position of that value is always aligned with the slider's thumb.
Originally Completed: 9/19/2021
Day 45 - Netflix Navigation
A Netflix-like animation accompanies the navigation bar being open and closed. This consists of a series of divs, each a different color, transitioning from being visible to not being visible at various transition-delay timings, which gives way to the staggering effect.
Originally Completed: 9/20/2021
Day 46 - Quiz App
A simple UI for a multiple-choice quiz. The user is presented one question at a time and must select an answer before moving on to the next question. When all the questions have been answered, the user sees what they scored. A button is then pressed to start the quiz anew.
Originally Completed: 9/21/2021
Day 47 - Testimonial Box Switcher
A UI for customer testimonial -- each one having the testimonial itself, the customer's name, the customer's role, and their image. After a set period of time (which is shown by an ever-increasing progress bar) the current testimonial is replaced with that of the next customer.
Originally Completed: 9/22/2021
Day 48 - Random Image Feed
A very simple use of flex-box and flex-wrap that displays 3 rows of random images. The img elements are added dynamically through Javascript.
Originally Completed: 9/23/2021
Day 49 - Todo List
With only one day remaining, it's finally here: The Todo List! Nothing too fancy here -- you're able to write Todos, left-click them to mark them as completed (visualized with a strike-thru) and right-click them to mark them as complete. Using LocalStorage, the Todos are able to persist through refreshes and visits.
Originally Completed: 9/24/2021
Day 50 - Insect Catch Game
✨🎉🎈 The final project of the course! 🎈🎉✨
This is a silly game where the user clicks at insects to make them go away. Each successful click of an insect increases the user's score. But it also makes two more insects spawn -- so there is no real way to win!