get 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

    Top 12 Certification Courses Offered by IIT Bombay Top 12 Certification Courses Offered by IIT Bombay Updated On 06 Dec, 2024
    The Scope of Artificial Intelligence in India The Scope of Artificial Intelligence in India Updated On 04 Dec, 2024
    150+ UGC Approved Online Degree Courses by Top Universities 150+ UGC Approved Online Degree Courses by Top ... Updated On 29 Nov, 2024
    Top 10 Online Healthcare and Hospital Management Courses Top 10 Online Healthcare and Hospital Managemen... Updated On 19 Nov, 2024
    Top 10 Indian Universities Offering Online Degrees Top 10 Indian Universities Offering Online Degrees Updated On 02 Nov, 2024
    Top 16 IIT Madras Online Degree, Diploma, and Certification Courses Top 16 IIT Madras Online Degree, Diploma, and C... Updated On 11 Oct, 2024
    UGC Guidelines to Pursue Online Courses UGC Guidelines to Pursue Online Courses Updated On 13 Mar, 2024
    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
    Best Programming Languages to Learn in 2024 Best Programming Languages to Learn in 2024 Updated On 13 Feb, 2024

    Latest Articles

    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
    Top 50 Interview Questions for Web Developer With Answers Updated On 15 Feb, 2024
    14+ GitHub Courses to Become a Skilled Web Developer Updated On 15 Feb, 2024
    Top 50 GIT Interview Questions and Answers to Know 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 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 Futurelearn Courses Mindmajix Technologies Courses Vskills Courses NPTEL 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 the Careers360 App on your Android phone

    Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

    Careers360 App
    150M+ Students
    30,000+ Colleges
    500+ Exams
    1500+ E-books