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

20 Web Projects With Vanilla JavaScript

Brad Traversy

4.6

Based on 7,257 ratings

, see reviews

Brad Traversy

This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using Every project is built from scratch and has some kind of dynamic functionality from small games to an expense tracker to a breathing relax app.

Although this is a project based course, I will still be explaining everything as I go. These are mini-projects designed for you to complete in a few hours.

You should have some basic knowledge of HTML/CSS/JS. If you are brand new, I would suggest my Modern HTML/CSS From The Beginning and/or my Modern JS From The Beginning courses on Udemy. This course is a mix of both.

Some Things You Will Learn In These Projects:

Create Layouts & UI's With HTML/CSS ( No CSS Frameworks )
CSS Animations (Transitions, Keyframes, etc With JS Triggers)
JavaScript Fundamentals
DOM Selection & Manipulation
JavaScript Events (Forms, buttons, scrolling, etc)
Fetch API & JSON
HTML5 Canvas
The Audio & Video API
Drag & Drop
Web Speech API (Syth & Recognition)
Working with Local Storage
High Order Array Methods - forEach, map, filter, reduce, sort
setTimout, setInterval
Arrow Functions
and More.

Enroll now

Or start a personal plan

And upskill with Udemy

What's inside

Learning objectives

Build 20 frontend projects from scratch
No js or css frameworks
Modern javascript (es6+) - arrows, fetch, promises, etc
Dom manipulation & events

Animations with css & javascript
Fetch & json with 3rd party api's
Html5 canvas, speech api, audio & video
Beginner friendly

Build 20 frontend projects from scratch
No js or css frameworks
Modern javascript (es6+) - arrows, fetch, promises, etc
Dom manipulation & events
Animations with css & javascript
Fetch & json with 3rd party api's
Html5 canvas, speech api, audio & video
Beginner friendly

Syllabus

Introduction

Welcome To The Course

Getting Setup

The Code

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Develops hands-on JavaScript skills which are core skills for any web developer

Incorporates dynamic functionality for user interactions and responsiveness

Covers a wide range of JavaScript fundamentals, DOM manipulation, and event handling

Utilizes a project-based approach, providing practical experience in building real-world applications

Taught by Brad Traversy, who is recognized for his expertise in web development and JavaScript

Suitable for both beginners and intermediate learners looking to enhance their JavaScript skills

Save this course

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

Save

Reviews summary

Build practical web projects with vanilla js

According to learners, this course offers a largely positive experience, serving as an excellent hands-on foundation for web development. Students praise the practical projects approach, which provides 20 diverse web projects to build using pure Vanilla JavaScript, HTML, and CSS. Many find the instructor's explanations clear and engaging, making complex topics accessible. It's seen as ideal for beginners and intermediate students aiming to solidify their understanding and build a strong portfolio. While it builds significant practical skills, some note it focuses more on 'how to build' rather than 'deep theoretical insights', suggesting it might require supplemental study for advanced theory.

Instructor actively updates content based on feedback.

"A few minor errors in older projects were noted, but the instructor seems to update some, which is great."

"I appreciate that the instructor keeps the course content relevant and addresses reported issues."

"Some older reviews mentioned minor bugs, but it looks like those have been fixed or addressed in newer versions of the projects."

Well-suited for those with basic JS knowledge, fostering confidence.

"As a beginner, I found this course incredibly helpful. The projects are bite-sized and well-explained, making them easy to follow."

"I struggled with bridging the gap between theory and actual building. This course provided that bridge."

"For absolute beginners, some initial setup might be a bit quick, but overall, it's very accessible and builds confidence quickly."

Instructor provides clear, easy-to-follow, and engaging guidance.

"The instructor's explanations are clear and concise."

"I appreciate how the instructor explains concepts as he goes, rather than assuming prior in-depth knowledge."

"The instructor has a great teaching style, easy to listen to and follow."

Strong emphasis on Vanilla JS builds core understanding.

"Excellent for practical application. It pushes you to code along and really understand how things work without relying on frameworks. The focus on Vanilla JS is a huge plus..."

"I loved that this course stuck to pure JavaScript, HTML, and CSS. It's essential for understanding the basics before diving into complex libraries."

"Learning without frameworks helped me truly grasp DOM manipulation and event handling."

Focus on building 20 real-world projects enhances learning.

"This course is absolutely fantastic for learning vanilla JavaScript through practical projects. The hands-on approach really helped solidify my understanding..."

"Highly recommend for anyone wanting to build a strong foundation in JS. The 20 projects cover a wide range of topics, from simple form validation to more complex API integrations."

"I appreciated that I could build something concrete and immediately see the results. Each mini-project felt like a significant step forward in my skills."

Focuses on practical building; less on deep theoretical concepts.

"The course delivers on its promise of 20 projects. However, it's more about building than in-depth explanation of *why* certain things are done."

"While the projects are useful, for someone looking for deep dives into JavaScript internals or advanced design patterns, this course might require supplementary theoretical learning."

"It's a very practical course, but I sometimes wished for more detailed explanations of the underlying theory or complex considerations."

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 20 Web Projects With Vanilla JavaScript with these activities:

Attend a local meetup or conference related to web development

Show steps

Expand your network and learn from others in the field by attending a local meetup or conference.

Browse courses on Web Development

Show steps

Research local meetups or conferences
Register and attend the event
Engage with other attendees and speakers
Follow up with potential connections

Build a simple photo gallery using HTML, CSS, JavaScript, and a photo gallery library

Show steps

Apply your skills to create a functional photo gallery that showcases your understanding of HTML, CSS, JavaScript, and a photo gallery library.

Browse courses on Web Development

Show steps

Choose a photo gallery library and familiarize yourself with its features
Create the HTML structure for the photo gallery
Style the photo gallery using CSS
Implement the photo gallery functionality using JavaScript
Test and refine the photo gallery

Create a basic HTML5 canvas game

Show steps

Build a simple game to apply your understanding of HTML5 canvas and JavaScript fundamentals.

Browse courses on HTML5 Canvas

Show steps

Plan your game's concept and mechanics
Set up the HTML and CSS for the game
Create the game logic and event handling in JavaScript
Debug and test your game

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow tutorials on advanced CSS animations

Show steps

Deepen your understanding of CSS animations by following guided tutorials that cover advanced techniques.

Browse courses on CSS Animations

Show steps

Find tutorials on specific animation techniques you want to learn
Follow the tutorials step-by-step, experimenting with different values
Apply what you've learned to your own projects

Solve JavaScript coding challenges

Show steps

Challenge yourself by solving JavaScript coding challenges to hone your problem-solving skills and deepen your understanding of the language.

Browse courses on JavaScript

Show steps

Find coding challenge websites or platforms
Select challenges that align with your skill level
Attempt to solve the challenges on your own
Review solutions and learn from others' approaches

Write a blog post or article summarizing key concepts from the course

Show steps

Reinforce your understanding by writing a blog post or article that summarizes the key concepts you've learned in the course.

Browse courses on Front-End Development

Show steps

Identify the main concepts and topics covered in the course
Research and gather information to support your writing
Write a clear and concise summary of the concepts
Proofread and publish your blog post or article

Design and implement a fully responsive website using HTML, CSS, and JavaScript

Show steps

Showcase your skills by creating a fully responsive website that adapts to different screen sizes and devices.

Browse courses on Responsive Web Design

Show steps

Plan the website's structure and layout
Create the HTML markup for the website
Style the website using CSS and make it responsive
Add interactive elements and functionality using JavaScript
Test and refine the website's performance

Career center

Learners who complete 20 Web Projects With Vanilla JavaScript will develop knowledge and skills that may be useful to these careers:

Front-End Developer

A Front-End Developer typically works to design, develop, and maintain the user-facing side of websites and applications. This course would be helpful for someone who wants to become a Front-End Developer because it would teach them important skills like HTML, CSS, JavaScript, and DOM manipulation. These skills are essential for a Front-End Developer to be successful, so taking this course would be a great way to get started on the path to this career.

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

Web Developer

A Web Developer is responsible for the design, development, and maintenance of websites and web applications. This course could be useful for a Web Developer because it would teach them important skills like HTML, CSS, JavaScript, and DOM manipulation. These skills are essential for a Web Developer to be successful, so taking this course would be a great way to get started on the path to this career.

See salaries and explore the career path for Web Developer

Software Engineer

A Software Engineer is responsible for the design, development, and maintenance of software systems. This course could be useful for a Software Engineer because it would teach them important skills like JavaScript, DOM manipulation, and HTML/CSS. These skills are essential for a Software Engineer to be successful, especially in the field of web development or front-end development. Taking this course would be a great way to get started on the path to this career.

See salaries and explore the career path for Software Engineer

Information Technology Specialist

An Information Technology Specialist is responsible for the planning, implementation, and maintenance of computer systems and networks. This course may be useful for an Information Technology Specialist who wants to learn more about web development or front-end development, which involves the design, development, and maintenance of websites and web applications. Taking this course would be a great way to gain the skills necessary for a career in this field.

See salaries and explore the career path for Information Technology Specialist

Computer Programmer

A Computer Programmer is responsible for the design, development, and maintenance of software systems and applications. This course may be useful for a Computer Programmer who wants to learn more about web development or front-end development, which involves the design, development, and maintenance of websites and web applications. Taking this course would be a great way to gain the skills necessary for a career in this field.

See salaries and explore the career path for Computer Programmer

User Interface Designer

A User Interface Designer is responsible for the design of user interfaces for websites and applications. This course may be useful for a User Interface Designer who wants to learn more about web development or front-end development, which involves the design, development, and maintenance of websites and web applications. Taking this course would be a great way to gain the skills necessary for a career in this field.

See salaries and explore the career path for User Interface Designer

Technical Writer

A Technical Writer is responsible for creating technical documentation, such as user manuals, white papers, and tutorials. This course could be useful for someone who wants to become a Technical Writer because it would teach them important skills like HTML, CSS, JavaScript, and DOM manipulation. These skills are essential for a Technical Writer to be successful in creating user-friendly documentation.

See salaries and explore the career path for Technical Writer

Webmaster

A Webmaster is responsible for the maintenance and administration of websites. This course could be useful for someone who wants to become a Webmaster because it would teach them important skills like HTML, CSS, JavaScript, and DOM manipulation. These skills are essential for a Webmaster to be successful in maintaining and updating websites.

See salaries and explore the career path for Webmaster

Quality Assurance Analyst

A Quality Assurance Analyst is responsible for testing and evaluating software systems and applications to ensure they meet quality standards. This course may be useful for someone who wants to become a Quality Assurance Analyst because it would teach them important skills like testing and debugging, which are essential for a Quality Assurance Analyst to be successful.

See salaries and explore the career path for Quality Assurance Analyst

Systems Analyst

A Systems Analyst is responsible for analyzing and designing software systems and applications. This course may be useful for someone who wants to become a Systems Analyst because it would teach them important skills like systems analysis and design, which are essential for a Systems Analyst to be successful.

See salaries and explore the career path for Systems Analyst

Computer Scientist

A Computer Scientist is responsible for the design, development, and analysis of computer systems and applications. This course may be useful for someone who wants to become a Computer Scientist because it would teach them important skills like computer science fundamentals and algorithms, which are essential for a Computer Scientist to be successful.

See salaries and explore the career path for Computer Scientist

Data Analyst

A Data Analyst is responsible for collecting, analyzing, and interpreting data to identify trends and patterns. This course may be useful for someone who wants to become a Data Analyst because it would teach them important skills like data analysis and visualization, which are essential for a Data Analyst to be successful.

See salaries and explore the career path for Data Analyst

Business Analyst

A Business Analyst is responsible for analyzing business needs and requirements and developing solutions to meet those needs. This course may be useful for someone who wants to become a Business Analyst because it would teach them important skills like business analysis and process improvement, which are essential for a Business Analyst to be successful.

See salaries and explore the career path for Business Analyst

Project Manager

A Project Manager is responsible for planning, organizing, and managing projects. This course may be useful for someone who wants to become a Project Manager because it would teach them important skills like project management and stakeholder management, which are essential for a Project Manager to be successful.

See salaries and explore the career path for Project Manager

Product Manager

A Product Manager is responsible for managing the development and launch of products. This course may be useful for someone who wants to become a Product Manager because it would teach them important skills like product management and customer research, which are essential for a Product Manager to be successful.

See salaries and explore the career path for Product Manager

Reading list

We've selected 13 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 20 Web Projects With Vanilla JavaScript.

Eloquent JavaScript, 3rd Edition

Save

Provides a comprehensive introduction to JavaScript, covering everything from the basics to advanced concepts. It valuable reference for both beginners and experienced developers. This book is in the same language as the course and is widely used as a textbook at academic institutions.

20 Web Projects With Vanilla JavaScript

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Build practical web projects with vanilla js

Activities

Career center

Reading list

Share

Similar courses

Udemy Buyer Protection & Guarantee

Free Lecture Previews

30-Day Money-Back Guarantee

Verified Academic & Industry Partner