50 Projects in 50 Days - HTML, CSS, and JavaScript
Sharpen your skills by building 50 quick, unique & fun mini projects
Updated on Sep, 2023
Language - English
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
What will you learn in this course:
- 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
What are the prerequisites for this course?
- This course is for beginner and intermediate web developers
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
Day 2 - Progress Steps
3 Lectures
Day 3 – Rotating Navigation
3 Lectures
Day 4 – Hidden Search Widget
2 Lectures
Day 5 – Blurry Loading
3 Lectures
Day 6 - Scroll Animation
2 Lectures
Day 7 – Split Landing Page
3 Lectures
Day 8 – Form Wave Animation
3 Lectures
Day 9 – Sound Board
2 Lectures
Day 10 – Dad Jokes
4 Lectures
Day 11 – Event KeyCodes
3 Lectures
Day 12 – FAQ Collapse
3 Lectures
Day 13 - Random Choice Picker
4 Lectures
Day 14 – Animated Navigation
3 Lectures
Day 15 – Incrementing Counter
3 Lectures
Day 16 – Drink Water
4 Lectures
Day 17 – Movie App
4 Lectures
Day 18 – Background Slider
3 Lectures
Day 19 – Theme Clock
4 Lectures
Day 20 – Button Ripple Effect
3 Lectures
Day 21 – Drag N Drop
3 Lectures
Day 22 – Drawing App
5 Lectures
Day 23 – Kinetic CSS Loader
2 Lectures
Day 24 – Content Placeholder
4 Lectures
Day 25 – Sticky Navbar
3 Lectures
Day 26 – Double Vertical Slider
3 Lectures
Day 27 – Toast Notification
2 Lectures
Day 28 – GitHub Profiles
5 Lectures
Day 29 – Double Heart Click
3 Lectures
Day 30 – Auto Text Effect
2 Lectures
Day 31 – Password Generator
5 Lectures
Day 32 – Good, Cheap, Fast Checkboxes
4 Lectures
Day 33 – Notes App
4 Lectures
Day 34 – Animated Countdown
4 Lectures
Day 35 – Image Carousel
3 Lectures
Day 36 – Hoverboard
3 Lectures
Day 37 – Pokedex
4 Lectures
Day 38 – Mobile Tab Navigation
3 Lectures
Day 39 – Password Strength Background
3 Lectures
Day 40 – 3D Background Boxes
3 Lectures
Day 41 – Verify Account UI
2 Lectures
Day 42 – Live User Filter
3 Lectures
Day 43 – Feedback UI Design
3 Lectures
Day 44 – Custom Range Slider
3 Lectures
Day 45 – Netflix Navigation
3 Lectures
Day 46 – Quiz App
3 Lectures
Day 47 – Testimonial Box Switcher
3 Lectures
Day 48 – Random Image Feed
2 Lectures
Day 49 – Todo List
4 Lectures
Day 50 – Todo List
4 Lectures
Instructor Details
Packt Publishing
Founded in 2004 in Birmingham, UK, Packt's mission is to help the world put software to work in new ways, through the delivery of effective learning and information services to IT professionals.
Working towards that vision, we have published over 6,500 books and videos so far, providing IT professionals with the actionable knowledge they need to get the job done - whether that's specific learning on an emerging technology or optimizing key skills in more established tools.
As part of our mission, we have also awarded over $1,000,000 through our Open Source Project Royalty scheme, helping numerous projects become household names along the way.
Course Certificate
User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.
Our students work
with the Best
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
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now