We may earn an affiliate commission when you visit our partners.
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.
Read more
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.
Read more
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.
Register for this course and see more details by visiting:
OpenCourser.com/course/q4apzg/20
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
Read more
Syllabus
Introduction
Welcome To The Course
Getting Setup
The Code
Read more
Traffic lights
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
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
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
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.
Web 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.
Software Engineer
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.
Information Technology Specialist
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.
Computer Programmer
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.
User Interface Designer
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.
Technical Writer
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.
Webmaster
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.
Quality Assurance Analyst
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.
Systems 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.
Computer Scientist
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.
Data Analyst
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.
Business 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.
Project Manager
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.
Product 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.
For more career information including salaries, visit:
OpenCourser.com/course/q4apzg/20
Reading list
We've selected 15 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.
Comprehensive reference for JavaScript. It covers everything from the basics to advanced concepts. It valuable resource for developers of all levels.
Series provides a deep dive into the inner workings of JavaScript. It valuable resource for developers who want to understand how JavaScript works under the hood.
Save
Comprehensive reference for JavaScript. It covers everything from the basics to advanced concepts. It valuable resource for developers of all levels.
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.
Provides a collection of advanced JavaScript techniques. It valuable resource for developers who want to learn how to write high-performance, scalable, and maintainable JavaScript code.
Provides a deep dive into the principles of object-oriented programming in JavaScript. It valuable resource for developers who want to write maintainable and extensible JavaScript code.
Provides a practical introduction to functional programming in JavaScript. It valuable resource for developers who want to learn how to write concise, declarative, and testable JavaScript code.
Fast-paced introduction to JavaScript. It good choice for developers who already have some programming experience and want to learn JavaScript quickly.
Provides a collection of reusable design patterns for JavaScript. It valuable resource for developers who want to improve the quality and maintainability of their code.
Save
Provides a comprehensive introduction to Node.js. It covers everything from the basics to advanced concepts. It valuable resource for developers who want to learn how to use Node.js to build scalable and efficient server-side applications.
Save
Provides a comprehensive introduction to React. It covers everything from the basics to advanced concepts. It valuable resource for developers who want to learn how to use React to build interactive and responsive web applications.
Provides a comprehensive introduction to unit testing. It covers everything from the basics to advanced concepts. It valuable resource for developers who want to learn how to write maintainable and testable code.
Save
Concise guide to the essential parts of JavaScript. It valuable resource for developers who want to write clean, efficient, and maintainable code.
Fun and engaging introduction to JavaScript. It good choice for beginners who want to learn the basics of JavaScript in a clear and concise way.
Provides a collection of reusable patterns for writing JavaScript code. It valuable resource for developers who want to improve the quality and maintainability of their code.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/q4apzg/20
Share
Similar courses
Similar courses are unavailable at this time. Please try again later.
Our mission
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
Affiliate disclosure
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
© 2016 - 2025 OpenCourser