Udemy

20 Web Projects With Vanilla JavaScript

Enroll Now
  • 42,681 Students
  • Updated 2/2024
4.6
(7,272 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
16 Hour(s) 6 Minute(s)
Language
English
Taught by
Brad Traversy
Rating
4.6
(7,272 Ratings)
1 views

Course Overview

20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)

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 HTML5, CSS &  JavaScript with no frameworks or libraries. 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!!


Course Content

  • 10 section(s)
  • 121 lecture(s)
  • Section 1 Introduction
  • Section 2 1: Form Validator | Intro Project
  • Section 3 2: Movie Seat Booking | DOM & Local Storage
  • Section 4 3: Custom Video Player | HTML5 Video API
  • Section 5 4: Exchange Rate Calculator | Fetch & JSON Intro
  • Section 6 5: DOM Array Methods | forEach, map, filter, sort, reduce
  • Section 7 6: Menu Slider & Modal | DOM & CSS
  • Section 8 7: Hangman Game | DOM, SVG, Events
  • Section 9 8: Meal Finder | Fetch & MealDB API
  • Section 10 9: Expense Tracker | Array Methods & Local Storage

What You’ll Learn

  • 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

Reviews

  • H
    Henry Tan
    5.0

    I follow the course and type along. My programming skill has improved. Quite an enriching course.

  • K
    Kishan Patel
    5.0

    Thanks

  • L
    Lawin Paul
    5.0

    dear: sir Brad mouth speak is so clear, easy understand, and he explained all details so structural, but should be make time to practic ,,,,,overall ,it is a good course at all. Thank you ,Udemy academy and Brad,,,. Your: Lawin lawin42600@gmail.com

  • M
    Mahmoud Ahmed
    4.0

    Nice, but the project's idea is not related to the world 100%, I prefer to be 2-3 real-world projects rather than 20 mini.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed