20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)
20 Web Projects With Vanilla JavaScript
File Size :
6.03 GB
Total length :
16h 7m

Category

Instructor

Brad Traversy

Language

Last update

1/2020

Ratings

4.7/5

20 Web Projects With Vanilla JavaScript

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

20 Web Projects With Vanilla JavaScript

Requirements

Basic knowledge in HTML, CSS & JavaScript

Description

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 FundamentalsDOM Selection & ManipulationJavaScript Events (Forms, buttons, scrolling, etc)Fetch API & JSONHTML5 CanvasThe Audio & Video APIDrag & DropWeb Speech API (Syth & Recognition)Working with Local StorageHigh Order Array Methods – forEach, map, filter, reduce, sortsetTimout, setIntervalArrow Functionsand More!!

Overview

Section 1: Introduction

Lecture 1 Welcome To The Course

Lecture 2 Getting Setup

Lecture 3 The Code

Section 2: 1: Form Validator | Intro Project

Lecture 4 Project Intro

Lecture 5 Project HTML

Lecture 6 Project CSS

Lecture 7 Adding Simple Validation

Lecture 8 Check Required & Refactor

Lecture 9 Check Length, Email & Password Match

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

Lecture 10 Project Intro

Lecture 11 Project HTML

Lecture 12 Project CSS

Lecture 13 Selecting Movie & Seats From UI

Lecture 14 Save Data To Local Storage

Lecture 15 Populate UI With Saved Data

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

Lecture 16 Project Intro

Lecture 17 Project HTML

Lecture 18 Project CSS

Lecture 19 Play, Pause & Stop

Lecture 20 Video Progress Bar & Timestamp

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

Lecture 21 Project Intro

Lecture 22 Project HTML

Lecture 23 Project CSS

Lecture 24 A Look at JSON & Fetch

Lecture 25 Fetch Rates & Update DOM

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

Lecture 26 Project Intro

Lecture 27 Project UI

Lecture 28 Generate Random Users – Fetch w/ Async/Await

Lecture 29 Output Users – forEach() & DOM Methods

Lecture 30 Double Money – map()

Lecture 31 Sort By Richest – sort()

Lecture 32 Show Millionaires – filter()

Lecture 33 Calculate Wealth – reduce()

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

Lecture 34 Project Intro

Lecture 35 Project HTML

Lecture 36 Navbar Styling

Lecture 37 Header & Modal Styling

Lecture 38 Menu & Modal Toggle

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

Lecture 39 Project Intro

Lecture 40 Draw Hangman With SVG

Lecture 41 Main Styling

Lecture 42 Popup & Notification Styling

Lecture 43 Display Words Function

Lecture 44 Letter Press Event Handler

Lecture 45 Wrong Letters & Play Again

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

Lecture 46 Project Intro

Lecture 47 Project HTML & Base CSS

Lecture 48 Search & Display Meals From API

Lecture 49 Show Single Meal Page

Lecture 50 Display Random Meal & Single Meal CSS

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

Lecture 51 Project Intro

Lecture 52 Project HTML

Lecture 53 Project CSS

Lecture 54 Show Transaction Items

Lecture 55 Display Balance, Income & Expense

Lecture 56 Add & Delete Transactions

Lecture 57 Persist To Local Storage

Section 11: 10: Music Player | HTML5 Audio API

Lecture 58 Project Intro

Lecture 59 Project HTML

Lecture 60 Music Container & Rotate Animation

Lecture 61 Music Info Styling & Animation

Lecture 62 Load, Play & Pause Song

Lecture 63 Next, Prev Song & Progress

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

Lecture 64 Project Intro

Lecture 65 Project HTML

Lecture 66 Project CSS & Loader Animation

Lecture 67 Get Initial Posts From API

Lecture 68 Add Infinite Scrolling

Lecture 69 Filter Fetched Posts

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

Lecture 70 Project Intro

Lecture 71 Project HTML

Lecture 72 Project CSS

Lecture 73 Word Match & Score

Lecture 74 Adding The Timer

Lecture 75 Difficulty Setting

Section 14: 13: Speech Text Reader | Speech Synthesis

Lecture 76 Project Intro

Lecture 77 HTML & Output Speech Boxes

Lecture 78 Project CSS

Lecture 79 Get Speech Voices

Lecture 80 Speech Buttons

Lecture 81 Change Voice & Custom Text Box

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

Lecture 82 Project Intro

Lecture 83 Project HTML

Lecture 84 Basic Card Styling

Lecture 85 Card Rotation & Slide Effect

Lecture 86 Add Card Container & Form Styling

Lecture 87 Create Cards & Flip Effect With JS

Lecture 88 Prev & Next Button Functionality

Lecture 89 Set & Get Card Data From Local Storage

Section 16: 15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

Lecture 90 Project Intro

Lecture 91 Project HTML & Header Stying

Lecture 92 Form Styling

Lecture 93 Fetching Songs & Artists

Lecture 94 Update DOM & Add Pagination

Lecture 95 Get & Display Song Lyrics

Section 17: 16: Relaxer App | CSS Animations, setTimeout

Lecture 96 Project Intro

Lecture 97 Creating The Large Circle

Lecture 98 Creating & Animating The Pointer

Lecture 99 Breath Animation With JS Trigger

Section 18: 17: Breakout Game | HTML5 Canvas API

Lecture 100 Project Intro

Lecture 101 Creating & Styling The Page

Lecture 102 Canvas Plan Outline

Lecture 103 Draw Ball, Paddle & Score

Lecture 104 Creating The Bricks

Lecture 105 Move Paddle

Lecture 106 Move Ball & Break Bricks

Lecture 107 Lose & Reset Game

Section 19: 18: New Year Countdown | DOM, Date & Time

Lecture 108 Project Intro

Lecture 109 Landing Page HTML & Styling

Lecture 110 Create The Countdown

Lecture 111 Dynamic Year & Spinner

Section 20: 19: Sortable List | Drag & Drop API

Lecture 112 Project Intro

Lecture 113 Insert List Items Into DOM

Lecture 114 Scramble List Items

Lecture 115 Core CSS

Lecture 116 Drag & Drop Functionality

Lecture 117 Check Order

Section 21: 20: Speak Number Guessing Game | Speech Recognition

Lecture 118 Project Intro

Lecture 119 Project UI

Lecture 120 Capture Mic Input

Lecture 121 Check Guessed Number

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

Course Information:

Udemy | English | 16h 7m | 6.03 GB
Created by: Brad Traversy

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top