Web Projects With Vanilla Javascript

  1. Home
  2. Javascript
  3. Web Projects With Vanilla Javascript

Tags: JavaScript

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

Last updated 2022-01-10 | 4.7

- Build 20 Frontend Projects From Scratch
- No JS or CSS Frameworks
- Modern JavaScript (ES6+) - Arrows
- Fetch
- Promises
- etc

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

* 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 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!!


Who this course is for:

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

Course content

21 sections • 121 lectures

Introduction 3 lectures

Welcome To The Course Preview 02:25

Getting Setup Preview 06:34

The Code Preview 00:09

1: Form Validator | Intro Project 6 lectures

Project Intro Preview 01:57

Project HTML Preview 06:20

Project CSS Preview 13:47

Adding Simple Validation Preview 14:43

Check Required & Refactor Preview 09:15

Check Length, Email & Password Match Preview 09:13

2: Movie Seat Booking | DOM & Local Storage 6 lectures

Project Intro Preview 01:23

Project HTML Preview 05:46

Project CSS Preview 16:06

Selecting Movie & Seats From UI Preview 15:13

Save Data To Local Storage Preview 12:43

Populate UI With Saved Data Preview 08:13

3: Custom Video Player | HTML5 Video API 5 lectures

Project Intro Preview 02:06

Project HTML Preview 08:21

Project CSS Preview 09:52

Play, Pause & Stop Preview 09:24

Video Progress Bar & Timestamp Preview 06:41

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

Project Intro Preview 01:48

Project HTML Preview 04:29

Project CSS Preview 10:12

A Look at JSON & Fetch Preview 09:19

Fetch Rates & Update DOM Preview 12:57

5: DOM Array Methods | forEach, map, filter, sort, reduce 8 lectures

Project Intro Preview 02:07

Project UI Preview 09:19

Generate Random Users - Fetch w/ Async/Await Preview 07:45

Output Users - forEach() & DOM Methods Preview 10:27

Double Money - map() Preview 06:00

Sort By Richest - sort() Preview 05:00

Show Millionaires - filter() Preview 04:26

Calculate Wealth - reduce() Preview 06:16

6: Menu Slider & Modal | DOM & CSS 5 lectures

Project Intro Preview 01:05

Project HTML Preview 10:11

Navbar Styling Preview 07:32

Header & Modal Styling Preview 12:08

Menu & Modal Toggle Preview 10:00

7: Hangman Game | DOM, SVG, Events 7 lectures

Project Intro Preview 01:49

Draw Hangman With SVG Preview 11:35

Main Styling Preview 10:55

Popup & Notification Styling Preview 08:35

Display Words Function Preview 11:22

Letter Press Event Handler Preview 08:38

Wrong Letters & Play Again Preview 09:54

8: Meal Finder | Fetch & MealDB API 5 lectures

Project Intro Preview 01:24

Project HTML & Base CSS Preview 10:18

Search & Display Meals From API Preview 20:09

Show Single Meal Page Preview 15:28

Display Random Meal & Single Meal CSS Preview 10:20

9: Expense Tracker | Array Methods & Local Storage 7 lectures

Project Intro Preview 01:33

Project HTML Preview 05:10

Project CSS Preview 14:00

Show Transaction Items Preview 08:50

Display Balance, Income & Expense Preview 08:19

Add & Delete Transactions Preview 08:53

Persist To Local Storage Preview 05:40

10: Music Player | HTML5 Audio API 6 lectures

Project Intro Preview 01:56

Project HTML Preview 05:40

Music Container & Rotate Animation Preview 10:09

Music Info Styling & Animation Preview 09:21

Load, Play & Pause Song Preview 08:46

Next, Prev Song & Progress Preview 12:20

11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader 6 lectures

Project Intro Preview 02:30

Project HTML Preview 03:05

Project CSS & Loader Animation Preview 09:52

Get Initial Posts From API Preview 07:26

Add Infinite Scrolling Preview 06:09

Filter Fetched Posts Preview 05:15

12: Typing Game | DOM, Intervals, Events 6 lectures

Project Intro Preview 01:45

Project HTML Preview 04:39

Project CSS Preview 12:22

Word Match & Score Preview 08:15

Adding The Timer Preview 09:20

Difficulty Setting Preview 08:08

13: Speech Text Reader | Speech Synthesis 6 lectures

Project Intro Preview 01:57

HTML & Output Speech Boxes Preview 12:17

Project CSS Preview 17:18

Get Speech Voices Preview 07:28

Speech Buttons Preview 04:58

Change Voice & Custom Text Box Preview 05:04

14: Memory Cards | CSS Effects, Local Storage 8 lectures

Project Intro Preview 02:11

Project HTML Preview 07:16

Basic Card Styling Preview 10:35

Card Rotation & Slide Effect Preview 11:03

Add Card Container & Form Styling Preview 06:27

Create Cards & Flip Effect With JS Preview 10:23

Prev & Next Button Functionality Preview 06:23

Set & Get Card Data From Local Storage Preview 13:17

15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API 6 lectures

Project Intro Preview 01:29

Project HTML & Header Stying Preview 09:46

Form Styling Preview 07:15

Fetching Songs & Artists Preview 09:49

Update DOM & Add Pagination Preview 15:07

Get & Display Song Lyrics Preview 10:08

16: Relaxer App | CSS Animations, setTimeout 4 lectures

Project Intro Preview 00:51

Creating The Large Circle Preview 10:01

Creating & Animating The Pointer Preview 04:37

Breath Animation With JS Trigger Preview 09:40

17: Breakout Game | HTML5 Canvas API 8 lectures

Project Intro Preview 01:01

Creating & Styling The Page Preview 11:15

Canvas Plan Outline Preview 06:03

Draw Ball, Paddle & Score Preview 11:01

Creating The Bricks Preview 09:27

Move Paddle Preview 12:51

Move Ball & Break Bricks Preview 10:29

Lose & Reset Game Preview 04:59

18: New Year Countdown | DOM, Date & Time 4 lectures

Project Intro Preview 01:08

Landing Page HTML & Styling Preview 11:07

Create The Countdown Preview 11:59

Dynamic Year & Spinner Preview 07:11

19: Sortable List | Drag & Drop API 6 lectures

Project Intro Preview 01:39

Insert List Items Into DOM Preview 09:34

Scramble List Items Preview 06:42

Core CSS Preview 12:22

Drag & Drop Functionality Preview 14:57

Check Order Preview 05:37

20: Speak Number Guessing Game | Speech Recognition 4 lectures

Project Intro Preview 01:30

Project UI Preview 08:51

Capture Mic Input Preview 08:09

Check Guessed Number Preview 12:50