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

20 Web Projects With Vanilla JavaScript

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 your team with Udemy

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Use code at checkout. Valid until January 1, 2025

New customers offer

Visit Udemy from OpenCourser as a new customer and claim these savings on your first order.

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

Form validation with events & DOM manipulation

Project Intro

Project HTML

Project CSS

Adding Simple Validation

Check Required & Refactor

Check Length, Email & Password Match

Build a seat picking widget that uses local storage

Selecting Movie & Seats From UI

Save Data To Local Storage

Populate UI With Saved Data

Build a video player with custom controls using the HTML5 Video API

Play, Pause & Stop

Video Progress Bar & Timestamp

Use the Fetch API to get exchange rate data and place into DOM

A Look at JSON & Fetch

Fetch Rates & Update DOM

Learn about DOM & array methods like forEach(), map() & filter()

Project UI

Generate Random Users - Fetch w/ Async/Await

Output Users - forEach() & DOM Methods

Double Money - map()

Sort By Richest - sort()

Show Millionaires - filter()

Calculate Wealth - reduce()

Create a collapsable menu slider and modal box

Navbar Styling

Header & Modal Styling

Menu & Modal Toggle

Build a hangman game with html, svg, css and js

Draw Hangman With SVG

Main Styling

Popup & Notification Styling

Display Words Function

Letter Press Event Handler

Wrong Letters & Play Again

Fetch meals from themealdb API

Project HTML & Base CSS

Search & Display Meals From API

Show Single Meal Page

Display Random Meal & Single Meal CSS

Build an expense tracker with array methods and local storage

Show Transaction Items

Display Balance, Income & Expense

Add & Delete Transactions

Persist To Local Storage

Create a beautiful music player with the Audio API

Music Container & Rotate Animation

Music Info Styling & Animation

Load, Play & Pause Song

Next, Prev Song & Progress

Fetch new posts from API on scroll and filter posts

Project CSS & Loader Animation

Get Initial Posts From API

Add Infinite Scrolling

Filter Fetched Posts

Build a typing game with html, css and js

Word Match & Score

Adding The Timer

Difficulty Setting

Text to speech app using the HTML5 Speech API

HTML & Output Speech Boxes

Get Speech Voices

Speech Buttons

Change Voice & Custom Text Box

Animated memory cards saved to local storage

Basic Card Styling

Card Rotation & Slide Effect

Good to know

Know what's good

, what to watch for

, 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

Save 20 Web Projects With Vanilla JavaScript to your list so you can find it easily later:

Save

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

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

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

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

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

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

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

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

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.

JavaScript The Complete Reference 3rd Edition

Save

Comprehensive reference for JavaScript. It covers everything from the basics to advanced concepts. It valuable resource for developers of all levels.

20 Web Projects With Vanilla JavaScript

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses