We may earn an affiliate commission when you visit our partners.

50 Projects In 50 Days - HTML, CSS & JavaScript

Brad Traversy and Florin Pop

4.6

Based on 12,664 ratings

, see reviews

Brad Traversy and Florin Pop

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 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
Kinetic Loader
Content Placeholder
Sticky Navbar
Double Vertical Slider
Toast Notification
Github Profiles
Double Click Heart
Auto Text Effect
Password Generator
Good Cheap Fast
Notes App
Animated Countdown
Image Carousel
Hoverboard
Pokedex
Mobile Tab Navigation
Password Strength Background
3d Background Boxes
Verify Account UI
Live User Filter
Feedback UI Design
Custom Range Slider
Netflix Mobile Navigation
Quiz App
Testimonial Box Switcher
Random Image Feed
Todo List
Insect Catch Game

Enroll now

Or start a personal plan

And upskill with Udemy

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Through project-based learning, course builds strong foundation for beginners and strengthens existing one for intermediate developers

Includes mix of media, such as videos, discussions, and interactive materials

Brad Traversy and Florin Pop are experienced instructors who are recognized for their work in the field

Develops core skills for web development roles: HTML5, CSS3, JavaScript, and React.js

Course teaches skills, knowledge, and tools that are highly relevant to industry standards

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Practical front-end project building

According to learners, this course offers an exceptionally hands-on approach to mastering HTML, CSS, and JavaScript fundamentals through 50 practical mini-projects. Students frequently highlight its effectiveness for solidifying core concepts and building coding confidence, making it ideal for daily practice and creating a strong portfolio. While highly praised for its practical application and clear instruction, some caution that it's best for those with existing basic knowledge, as it prioritizes building over deep theoretical explanations. Intermediate learners may find some projects too foundational, yet still valuable for practice.

Instructor provides clear and easy-to-follow explanations.

"Instructor explains concepts clearly, project ideas are creative."

"The instructor is clear and easy to follow."

"The instructor's approach is straightforward."

Projects are diverse, keeping learners engaged throughout the course.

"The projects are varied and keep you engaged."

"Each one is short enough to feel achievable."

"Some projects are more engaging than others. Overall, a good experience."

Helps learners gain significant self-assurance in coding.

"As a beginner, this course was perfect! I gained a lot of confidence."

"I feel much more confident now after applying what I learned."

"My coding speed and confidence improved significantly."

Great for reinforcing HTML, CSS, and JavaScript basics.

"Perfect for daily practice... My coding speed and confidence improved significantly. Highly recommend for anyone who needs to solidify their front-end fundamentals."

"My understanding of vanilla JavaScript and CSS styling definitely improved. Highly recommend for intermediate learners wanting to practice."

"It's not about groundbreaking new techniques, but about repetition and getting comfortable with the basics."

Excellent for hands-on experience and skill reinforcement.

"This course is absolutely fantastic for solidifying your basic HTML, CSS, and JavaScript skills. The hands-on project approach is incredibly effective."

"The best way to learn is by doing, and this course proves it. I loved the constant coding."

"I've been struggling to apply what I learned from theory courses, and this made all the difference. The projects are well-explained and varied."

Emphasizes building projects over deep conceptual explanations.

"My only minor gripe is that sometimes the explanations feel a bit rushed, or could delve deeper into *why* certain things are done the way they are."

"However, it doesn't teach the 'why' behind the code. I felt like I was copying rather than truly understanding at times."

"Don't expect deep dives, but do expect to write a lot of code."

Requires some prior basic HTML, CSS, and JavaScript understanding.

"I found this course somewhat challenging for an absolute beginner... I struggled without a solid grasp of JS fundamentals. Not truly for someone with zero experience."

"A word of caution: if you are a complete novice, make sure to brush up on HTML, CSS, and JS basics beforehand."

"While it's project-based, it assumes you have a foundational understanding already."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 50 Projects In 50 Days - HTML, CSS & JavaScript with these activities:

Join a study group for the course

Show steps

Studying with peers can help you understand the material better and stay motivated.

Show steps

Find a study group for the course.
Meet regularly with the group to discuss the material.
Help each other with difficult concepts.

Solve CSS coding challenges

Show steps

Solving coding challenges can help you improve your problem-solving skills and learn new CSS techniques.

Browse courses on CSS

Show steps

Find a website or platform that offers CSS coding challenges.
Choose a challenge and try to solve it.
If you get stuck, seek help from online resources or forums.
Once you solve the challenge, analyze your solution and see how you can improve it.

Follow a tutorial on responsive web design

Show steps

Tutorials can provide a structured and guided approach to learning new skills.

Browse courses on Responsive Web Design

Show steps

Find a tutorial on responsive web design that suits your level.
Follow the tutorial step-by-step.
Test your responsive design on different devices.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Build a CSS Flexbox playground

Show steps

Start building projects early on to reinforce the skills you're learning in the course.

Show steps

Create a new HTML file and link a CSS file to it.
Add a container div and style it using Flexbox.
Create child divs and style them using Flexbox properties.
Experiment with different Flexbox properties to see how they affect the layout.

Attend a local meetup for web developers

Show steps

Networking events can help you connect with other developers and learn about new technologies.

Show steps

Find a local meetup for web developers.
Attend the meetup.
Introduce yourself to other developers and ask questions.

Build a social media dashboard using a CSS framework

Show steps

Building projects using a CSS framework can help you learn how to use the framework and improve your web development skills.

Show steps

Choose a CSS framework to use.
Find a tutorial on how to build a social media dashboard using the framework.
Follow the tutorial step-by-step.
Customize the dashboard to your liking.

Write a blog post about a CSS animation you created

Show steps

Writing about what you've learned helps you retain the information more effectively.

Browse courses on CSS Animations

Show steps

Choose a CSS animation you've created.
Write a blog post describing the animation, how you created it, and what you learned from the process.
Share your blog post on social media or your personal website.

Create a personal website

Show steps

Creating a personal website can help you showcase your skills and learn more about web development.

Browse courses on Web Development

Show steps

Choose a domain name and web hosting provider.
Install a content management system (CMS) or use a website builder.
Design and develop the website.
Publish the website.
Promote the website.

Career center

Learners who complete 50 Projects In 50 Days - HTML, CSS & JavaScript will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front-end developers are responsible for designing and developing the user interface of a website or application. This course can help you build a strong foundation in HTML, CSS, and JavaScript, which are essential skills for front-end developers. By learning how to create responsive designs, animations, and interactive elements, you can make websites and applications more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for Front-End Developer

Web Developer

Web developers are responsible for developing and maintaining websites and applications. This course can help you build a strong foundation in the essential technologies used for web development, including HTML, CSS, and JavaScript. By learning how to create responsive designs, animations, and interactive elements, you can make websites and applications more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for Web Developer

UI Designer

UI designers are responsible for designing the user interface of a website or application. This course can help you build a strong foundation in the essential principles of UI design. By learning how to create responsive designs, animations, and interactive elements, you can make websites and applications more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for UI Designer

UX Designer

UX designers are responsible for designing the user experience of a website or application. This course can help you build a strong foundation in the essential principles of UX design. By learning how to create responsive designs, animations, and interactive elements, you can make websites and applications more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for UX Designer

Software Engineer

Software engineers are responsible for designing, developing, and maintaining software applications. This course can help you build a strong foundation in the essential technologies used for software development, including HTML, CSS, and JavaScript. By learning how to create responsive designs, animations, and interactive elements, you can make software applications more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for Software Engineer

Data Analyst

Data analysts are responsible for analyzing data to identify trends and patterns. This course can help you build a strong foundation in the essential tools and techniques used for data analysis, including HTML, CSS, and JavaScript. By learning how to create responsive designs, animations, and interactive elements, you can make data visualizations more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own projects.

See salaries and explore the career path for Data Analyst

Product Manager

Product managers are responsible for overseeing the development and launch of new products. This course can help you build a strong foundation in the essential principles of product management. By learning how to create responsive designs, animations, and interactive elements, you can make products more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own products.

See salaries and explore the career path for Product Manager

Project Manager

Project managers are responsible for planning, executing, and closing projects. This course can help you build a strong foundation in the essential principles of project management. By learning how to create responsive designs, animations, and interactive elements, you can make project plans and deliverables more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own project plans.

See salaries and explore the career path for Project Manager

Business Analyst

Business analysts are responsible for analyzing business processes and recommending improvements. This course can help you build a strong foundation in the essential tools and techniques used for business analysis, including HTML, CSS, and JavaScript. By learning how to create responsive designs, animations, and interactive elements, you can make business presentations and reports more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own business presentations and reports.

See salaries and explore the career path for Business Analyst

Marketing Manager

Marketing managers are responsible for developing and executing marketing campaigns. This course can help you build a strong foundation in the essential principles of marketing. By learning how to create responsive designs, animations, and interactive elements, you can make marketing materials more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own marketing materials.

See salaries and explore the career path for Marketing Manager

Sales Manager

Sales managers are responsible for leading and motivating sales teams. This course can help you build a strong foundation in the essential principles of sales management. By learning how to create responsive designs, animations, and interactive elements, you can make sales presentations and proposals more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own sales presentations and proposals.

See salaries and explore the career path for Sales Manager

Customer Success Manager

Customer success managers are responsible for building relationships with customers and ensuring their satisfaction. This course can help you build a strong foundation in the essential principles of customer success management. By learning how to create responsive designs, animations, and interactive elements, you can make customer onboarding materials and support documentation more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own customer onboarding materials and support documentation.

See salaries and explore the career path for Customer Success Manager

Technical Writer

Technical writers are responsible for writing and editing technical documentation. This course can help you build a strong foundation in the essential principles of technical writing. By learning how to create responsive designs, animations, and interactive elements, you can make technical documentation more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own technical documentation.

See salaries and explore the career path for Technical Writer

Instructional Designer

Instructional designers are responsible for designing and developing learning materials. This course can help you build a strong foundation in the essential principles of instructional design. By learning how to create responsive designs, animations, and interactive elements, you can make learning materials more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own learning materials.

See salaries and explore the career path for Instructional Designer

User Experience Researcher

User experience researchers are responsible for conducting research to understand how users interact with products and services. This course can help you build a strong foundation in the essential principles of user experience research. By learning how to create responsive designs, animations, and interactive elements, you can make research findings more user-friendly and engaging. With 50 mini projects in this course, you'll be able to apply your skills directly and create some of your own research findings.

See salaries and explore the career path for User Experience Researcher

Reading list

We've selected 12 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in 50 Projects In 50 Days - HTML, CSS & JavaScript.

You Don't Know JS Yet

Save

This series of books provides an in-depth exploration of JavaScript, suitable for those seeking a deeper understanding of its inner workings. It covers topics such as types, closures, scope, and debugging, offering a comprehensive reference for experienced developers.

50 Projects In 50 Days - HTML, CSS & JavaScript

Traffic lights

Save this course

Reviews summary

Practical front-end project building

Activities

Career center

Reading list

Share

Similar courses