20 Web Projects With Vanilla JavaScript

Udemy

Online

₹ 4099

Quick Facts

particular	details
Medium of instructions English	Mode of learning Self study	Mode of Delivery Video and Text Based

Course and certificate fees

Fees information

₹ 4,099

certificate availability

Yes

certificate providing authority

Udemy

The syllabus

Introduction

Welcome To The Course
Getting Setup
The Code

Form Validator | Intro Project

Project Intro
Project HTML
Project CSS
Adding Simple Validation
Check Required & Refactor
Check Length, Email & Password Match

Movie Seat Booking | DOM & Local Storage

Project Intro
Project HTML
Project CSS
Selecting Movie & Seats From UI
Save Data To Local Storage
Populate UI With Saved Data

Custom Video Player | HTML5 Video API

Project Intro
Project HTML
Project CSS
Play, Pause & Stop
Video Progress Bar & Timestamp

Exchange Rate Calculator | Fetch & JSON Intro

Project Intro
Project HTML
Project CSS
A Look at JSON & Fetch
Fetch Rates & Update DOM

DOM Array Methods | forEach, map, filter, sort, reduce

Project Intro
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()

Menu Slider & Modal | DOM & CSS

Project Intro
Project HTML
Navbar Styling
Header & Modal Styling
Menu & Modal Toggle

Hangman Game | DOM, SVG, Events

Project Intro
Draw Hangman With SVG
Main Styling
Popup & Notification Styling
Display Words Function
Letter Press Event Handler
Wrong Letters & Play Again

Meal Finder | Fetch & MealDB API

Project Intro
Project HTML & Base CSS
Search & Display Meals From API
Show Single Meal Page
Display Random Meal & Single Meal CSS

Expense Tracker | Array Methods & Local Storage

Project Intro
Project HTML
Project CSS
Show Transaction Items
Display Balance, Income & Expense
Add & Delete Transactions
Persist To Local Storage

Music Player | HTML5 Audio API

Project Intro
Project HTML
Music Container & Rotate Animation
Music Info Styling & Animation
Load, Play & Pause Song
Next, Prev Song & Progress

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

Project Intro
Project HTML
Project CSS & Loader Animation
Get Initial Posts From API
Add Infinite Scrolling
Filter Fetched Posts

Typing Game | DOM, Intervals, Events

Project Intro
Project HTML
Project CSS
Word Match & Score
Adding The Timer
Difficulty Setting

Speech Text Reader | Speech Synthesis

Project Intro
HTML & Output Speech Boxes
Project CSS
Get Speech Voices
Speech Buttons
Change Voice & Custom Text Box

Memory Cards | CSS Effects, Local Storage

Project Intro
Project HTML
Basic Card Styling
Card Rotation & Slide Effect
Add Card Container & Form Styling
Create Cards & Flip Effect With JS
Prev & Next Button Functionality
Set & Get Card Data From Local Storage

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

Project Intro
Project HTML & Header Stying
Form Styling
Fetching Songs & Artists
Update DOM & Add Pagination
Get & Display Song Lyrics

Relaxer App | CSS Animations, setTimeout

Project Intro
Creating The Large Circle
Creating & Animating The Pointer
Breath Animation With JS Trigger

Breakout Game | HTML5 Canvas API

Project Intro
Creating & Styling The Page
Canvas Plan Outline
Draw Ball, Paddle & Score
Creating The Bricks
Move Paddle
Move Ball & Break Bricks
Lose & Reset Game

New Year Countdown | DOM, Date & Time

Project Intro
Landing Page HTML & Styling
Create The Countdown
Dynamic Year & Spinner

Sortable List | Drag & Drop API

Project Intro
Insert List Items Into DOM
Scramble List Items
Core CSS
Drag & Drop Functionality
Check Order

Speak Number Guessing Game | Speech Recognition

Project Intro
Project UI
Capture Mic Input
Check Guessed Number

Instructors

Mr Brad Traversy
instructor
Freelancer

Articles

Latest Articles

Top 50 Interview Questions for Web Developer With Answers Updated On 12 Jun, 2025

5 Free Web Development Courses for Beginners in 2025: Check Here to Enroll Updated On 23 Feb, 2025

MEAN Stack Developer Salary in India for Freshers & Experienced Updated On 07 Nov, 2024

20 Beginner-Friendly Online Bootstrap Courses for Frontend Development Updated On 07 Nov, 2024

Top 18+ Online Courses to Pursue for a Career in Web Development Updated On 05 Nov, 2024

17+ Courses on HTML5 for Beginners to Become a Web Developer Updated On 05 Nov, 2024

Top 50 MVC Interview Questions And Answers To Prepare Updated On 16 Apr, 2024

50 Best Bootstrap Interview Questions and Answers Updated On 16 Apr, 2024

Top 16 Online Courses on Typescript Development Updated On 07 Apr, 2024

Top 50 Must Know Interview Questions for PHP Updated On 04 Apr, 2024

25 Free Web Development Courses to Pursue in Online Mode Updated On 19 Mar, 2024

14+ GitHub Courses to Become a Skilled Web Developer Updated On 15 Feb, 2024

Trending Courses

Popular Courses

General Management Courses Public Health Courses Teaching and Education Courses Financial Management Courses Web Development Courses Mathematics Courses Data Science Courses Programming Courses Cyber Security Courses Digital Marketing Courses Law Courses Mechanical Engineering Courses Explore all courses

Popular Platforms

upGrad Courses Udemy Courses Edx Courses Swayam Courses Coursera Courses NPTEL Courses Futurelearn Courses Mindmajix Technologies Courses Vskills Courses IIT Kharagpur Courses Emeritus Courses IIT Kanpur Courses Explore all platforms

Learn more about the Courses

10 Reasons to Enrol Yourself in a Digital Marketing Course 8 Must-Have Skills for AWS Cloud Architects Planning to Upskill Yourself? Enrol for a Program in Data Science 25+ Tips for Improving Your Graphic Design Skills Top Universities in India Offering Cyber Security Courses 15+ Courses for Learning Data Mining How to Make a Career in the Field of Artificial Intelligence Top 10 Benefits Of Holding A Certification In Business Intelligence Which are the best certification courses for Photography in India A Beginner's Guide to Pursue Python Programming Want to Pursue a Career in Blockchain Technology? Here is all that you need to Know How Entrepreneurs Can Use Machine Learning to Make their Business Successful? The Scope of Artificial Intelligence in India Top 10 Online Courses for Travel Lovers 10 Best Certification Courses After Hospital and Healthcare Management

Open in App

Get the Careers360 App today!

And never miss an important update

Download Careers360 App

All this at the convenience of your phone

Regular Exam Updates
Best College Recommendations
College & Rank predictors
Detailed Books and Sample Papers
Question and Answers

Popular Searches