20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScript, available at $94.99, has an average rating of 4.8, with 121 lectures, based on 7023 reviews, and has 40850 subscribers.

You will learn about 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 APIs HTML5 Canvas, Speech API, Audio & Video Beginner Friendly This course is ideal for individuals who are Anyone that wants to build some fun and easy to intermediate projects It is particularly useful for Anyone that wants to build some fun and easy to intermediate projects.

Enroll now: 20 Web Projects With Vanilla JavaScript

Summary

Title: 20 Web Projects With Vanilla JavaScript

Price: $94.99

Average Rating: 4.8

Number of Lectures: 121

Number of Published Lectures: 121

Number of Curriculum Items: 121

Number of Published Curriculum Objects: 121

Original Price: $99.99

Quality Status: approved

Status: Live

What You Will 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 APIs

HTML5 Canvas, Speech API, Audio & Video

Beginner Friendly

Who Should Attend

Anyone that wants to build some fun and easy to intermediate projects

Target Audiences

Anyone that wants to build some fun and easy to intermediate projects

This is a fun, practical & project based coursefor 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 Curriculum

Chapter 1: Introduction

Lecture 1: Welcome To The Course

Lecture 2: Getting Setup

Lecture 3: The Code

Chapter 2: 1: Form Validator | Intro Project

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Adding Simple Validation

Lecture 5: Check Required & Refactor

Lecture 6: Check Length, Email & Password Match

Chapter 3: 2: Movie Seat Booking | DOM & Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Selecting Movie & Seats From UI

Lecture 5: Save Data To Local Storage

Lecture 6: Populate UI With Saved Data

Chapter 4: 3: Custom Video Player | HTML5 Video API

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Play, Pause & Stop

Lecture 5: Video Progress Bar & Timestamp

Chapter 5: 4: Exchange Rate Calculator | Fetch & JSON Intro

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: A Look at JSON & Fetch

Lecture 5: Fetch Rates & Update DOM

Chapter 6: 5: DOM Array Methods | forEach, map, filter, sort, reduce

Lecture 1: Project Intro

Lecture 2: Project UI

Lecture 3: Generate Random Users – Fetch w/ Async/Await

Lecture 4: Output Users – forEach() & DOM Methods

Lecture 5: Double Money – map()

Lecture 6: Sort By Richest – sort()

Lecture 7: Show Millionaires – filter()

Lecture 8: Calculate Wealth – reduce()

Chapter 7: 6: Menu Slider & Modal | DOM & CSS

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Navbar Styling

Lecture 4: Header & Modal Styling

Lecture 5: Menu & Modal Toggle

Chapter 8: 7: Hangman Game | DOM, SVG, Events

Lecture 1: Project Intro

Lecture 2: Draw Hangman With SVG

Lecture 3: Main Styling

Lecture 4: Popup & Notification Styling

Lecture 5: Display Words Function

Lecture 6: Letter Press Event Handler

Lecture 7: Wrong Letters & Play Again

Chapter 9: 8: Meal Finder | Fetch & MealDB API

Lecture 1: Project Intro

Lecture 2: Project HTML & Base CSS

Lecture 3: Search & Display Meals From API

Lecture 4: Show Single Meal Page

Lecture 5: Display Random Meal & Single Meal CSS

Chapter 10: 9: Expense Tracker | Array Methods & Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Show Transaction Items

Lecture 5: Display Balance, Income & Expense

Lecture 6: Add & Delete Transactions

Lecture 7: Persist To Local Storage

Chapter 11: 10: Music Player | HTML5 Audio API

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Music Container & Rotate Animation

Lecture 4: Music Info Styling & Animation

Lecture 5: Load, Play & Pause Song

Lecture 6: Next, Prev Song & Progress

Chapter 12: 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS & Loader Animation

Lecture 4: Get Initial Posts From API

Lecture 5: Add Infinite Scrolling

Lecture 6: Filter Fetched Posts

Chapter 13: 12: Typing Game | DOM, Intervals, Events

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Word Match & Score

Lecture 5: Adding The Timer

Lecture 6: Difficulty Setting

Chapter 14: 13: Speech Text Reader | Speech Synthesis

Lecture 1: Project Intro

Lecture 2: HTML & Output Speech Boxes

Lecture 3: Project CSS

Lecture 4: Get Speech Voices

Lecture 5: Speech Buttons

Lecture 6: Change Voice & Custom Text Box

Chapter 15: 14: Memory Cards | CSS Effects, Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Basic Card Styling

Lecture 4: Card Rotation & Slide Effect

Instructors

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media

Rating Distribution

1 stars: 13 votes

2 stars: 24 votes

3 stars: 198 votes

4 stars: 1517 votes

5 stars: 5271 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!