50 Projects in 50 Days - HTML, CSS, and JavaScript
Sharpen your skills by building 50 quick, unique & fun mini projects
Lectures -163
Duration -18.5 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HTML, CSS, and JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:
- Expanding Cards
- Progress Steps
- Rotating Navigation Animation
- Hidden Search Widget
- Blurry Loading
- Scroll Animation
- Split Landing Page
- Form Wave
- Sound Board
- Dad Jokes
- Event Keycodes
- FAQ Collapse
- Random Choice Picker
- Animated Navigation
- Incrementing Counter
- Drink Water
- Movie App
- Background Slider
- Theme Clock
- Button Ripple Effect
- Drag N Drop
- Drawing App
By the end of this course, you will be thorough with the basics and concepts in HTML, CSS, and JavaScript.
All code files are placed here: https://github.com/PacktPublishing/50-Projects-In-50-Days---HTML-CSS-JavaScript
Audience
This course is for beginner and intermediate web developers who want to build fun and unique projects with HTML, CSS, and JavaScript.
Goals
- Understand the concept of content and circle styling in rotating navigation
- Understand how to load the blur effect
- Learn how to add the hover effect in a split landing page
- Explore how to add the wave effect
- Work with Fetch and HTTP requests/responses
- Fetch data from the API
Prerequisites
- This course is for beginner and intermediate web developers
![50 Projects in 50 Days - HTML, CSS, and JavaScript 50 Projects in 50 Days - HTML, CSS, and JavaScript](https://d3mxt5v3yxgcsr.cloudfront.net/courses/7712/course_7712_image.jpg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Welcome to the Course
3 Lectures
-
Welcome 01:07 01:07
-
Environment and Setup 04:20 04:20
-
Project Starter Boilerplate 07:39 07:39
Day 1 - Expanding Cards
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 2 - Progress Steps
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 3 – Rotating Navigation
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 4 – Hidden Search Widget
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 5 – Blurry Loading
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 6 - Scroll Animation
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 7 – Split Landing Page
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 8 – Form Wave Animation
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 9 – Sound Board
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 10 – Dad Jokes
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 11 – Event KeyCodes
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 12 – FAQ Collapse
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 13 - Random Choice Picker
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 14 – Animated Navigation
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 15 – Incrementing Counter
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 16 – Drink Water
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 17 – Movie App
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 18 – Background Slider
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 19 – Theme Clock
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 20 – Button Ripple Effect
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 21 – Drag N Drop
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 22 – Drawing App
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 23 – Kinetic CSS Loader
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 24 – Content Placeholder
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 25 – Sticky Navbar
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 26 – Double Vertical Slider
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 27 – Toast Notification
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 28 – GitHub Profiles
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 29 – Double Heart Click
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 30 – Auto Text Effect
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 31 – Password Generator
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 32 – Good, Cheap, Fast Checkboxes
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 33 – Notes App
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 34 – Animated Countdown
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 35 – Image Carousel
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 36 – Hoverboard
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 37 – Pokedex
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 38 – Mobile Tab Navigation
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 39 – Password Strength Background
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 40 – 3D Background Boxes
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 41 – Verify Account UI
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 42 – Live User Filter
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 43 – Feedback UI Design
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 44 – Custom Range Slider
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 45 – Netflix Navigation
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 46 – Quiz App
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 47 – Testimonial Box Switcher
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 48 – Random Image Feed
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 49 – Todo List
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Day 50 – Todo List
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Packt Publishing](https://www.tutorialspoint.com/assets/profiles/154467/profile/200_283401-1581924256.png)
Packt Publishing
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)