50 unique mini-projects to sharpen your HTML, CSS & JavaScript skills
-
Updated
Jan 8, 2021 - HTML
50 unique mini-projects to sharpen your HTML, CSS & JavaScript skills
A 50 day journey to recreate Brad and Florin's mini projects - 50projects50days.com
Day-3 Rotating Navigation made using HTML, CSS, JS. Created with CodeSandbox
Day-6 Scroll Animation made using HTML, CSS, JS. Created with CodeSandbox
Day-9 Sound Board. Created with CodeSandbox
Day-12 FAQ Collapse. Created with CodeSandbox
Day-18 Background Slider. Created with CodeSandbox
Day-26 Double Vertical Slider. Created with CodeSandbox
50 projects in 50 days using HTML, CSS and JavaScript!
Day-38 Mobile Tab Navigation. Created with CodeSandbox
Day-39 Pwd strength background. Created with CodeSandbox
50 mini web projects using HTML, CSS & JS
This expanding cards project features five different images of beaches in my area. When clicked, an image card expands while the other cards remain inactive. This is part of Brad Traversy's Udemy Course "50 Projects in 50 Days."
This project involves having the entire website rotate when the hamburger icon is clicked and bringing in the navigation on the bottom left. The page shown was recreated from my Etsy Shop, Sadie Bloom Designs.
I have made expanding cards using HTML, CSS and JS. It is a mini-project which can be used in any major project for testimonials, FAQs or whatever you wish to use it for.
I have created a rotating navigator using HTML, CSS and JS which can be used in various projects to show or hide the navigation bar.
This scroll animation has been made using HTML, CSS and JS. The elements move into the screen from the right and the left side of the screen alternatively.
Sections on a page transition in from alternating sides when scrolling down. The opposite happens when scrolling up the page.
The expanding cards project is part of Brad Traversy's Udemy course, 50projectsin50days.
Add a description, image, and links to the 50projects50days topic page so that developers can more easily learn about it.
To associate your repository with the 50projects50days topic, visit your repo's landing page and select "manage topics."