get app
    Download Careers360 App

    20 Web Projects With Vanilla JavaScript

    BY
    Udemy

    Brochure Enquire
    Mode

    Online

    Fees

    ₹ 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

    Mr Brad Traversy
    instructor
    Freelancer

    Articles

    Popular Articles

    UGC Guidelines to Pursue Online Courses UGC Guidelines to Pursue Online Courses Updated On 04 Jul, 2025
    IGNOU Online Courses Approved by UGC IGNOU Online Courses Approved by UGC Updated On 03 Jul, 2025
    Top 10 Indian Universities Offering Online Degrees Top 10 Indian Universities Offering Online Degrees Updated On 09 Jun, 2025
    150+ UGC Approved Online Degree Courses by Top Universities 150+ UGC Approved Online Degree Courses by Top ... Updated On 03 Jun, 2025
    Best Programming Languages to Learn in 2025 Best Programming Languages to Learn in 2025 Updated On 09 May, 2025
    Top 10 Online Healthcare and Hospital Management Courses Top 10 Online Healthcare and Hospital Managemen... Updated On 04 Apr, 2025
    Top 12 Certification Courses Offered by IIT Bombay Top 12 Certification Courses Offered by IIT Bombay Updated On 24 Jan, 2025
    The Scope of Artificial Intelligence in India The Scope of Artificial Intelligence in India Updated On 09 Jan, 2025
    Reasons to Enroll for an Online Content Writing Course Reasons to Enroll for an Online Content Writing... Updated On 29 Feb, 2024
    Top 10 Online Animation Certificate Courses for a Better Career Top 10 Online Animation Certificate Courses for... Updated On 27 Feb, 2024

    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

    Digital Marketing Courses Fashion Design Courses Data Science Courses Interior Design Courses Graphic Designing Courses Cyber Security Courses Nursing Courses Tally Courses Data Analysis Courses Web Designing Courses Artificial Intelligence Courses Ethical Hacking Courses Free Digital Marketing Courses And certifications Free Artificial Intelligence Courses And Certifications Free Data Analysis Courses And Certifications Free Cyber Security Courses And Certifications Free Data Science Courses And Certifications Free Cloud Computing Courses And Certifications Free Python Courses And Certifications Free Fashion And Textiles Courses And Certifications Free Graphic Designing Courses And Certifications Free Web Designing Courses And Certifications

    Popular Courses

    General Management Courses Public Health Courses Teaching and Education Courses Financial Management Courses Web Development Courses Mathematics Courses Cyber Security Courses Programming Courses Data Science 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
    Providers
    Close
    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

    google play
    students
    400M+ Students
    Colleges
    36K+ Colleges
    Exams
    500+ Exams
    eBooks
    3K+ eBooks
    Certification
    16K+ Certifications
    mobile