20 Web Projects with Vanilla JavaScript

20 Web Projects with Vanilla JavaScript

by Brad Traversy
Released June 2020
Publisher(s): Packt Publishing
ISBN: 9781800563049

Explore a preview version of 20 Web Projects with Vanilla JavaScript right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Video description

Build 20 mini frontend projects from scratch with HTML5, CSS, and JavaScript

About This Video

  • Gain proficiency in building frontend projects from scratch using HTML 5
  • Explore different concepts of modern JavaScript (ES6+) such as Arrows and Fetch
  • Create animations using CSS and JavaScript

In Detail

This course will show you how to design projects with HTML5, CSS, and JavaScript without using additional frameworks or libraries. You’ll build every project from scratch and explore dynamic functionalities in each apps ranging from simple games and an expense tracker to a breathing relaxation app.

The course starts with an introduction to Project HTML and Project CSS along with a brief on how to check the length, email, and password match. In the next section, you’ll build a project for movie seat booking and learn how to save data to local storage and then populate the UI with the saved data. As you advance, you’ll work on several other projects such as creating a custom video player, creating an exchange rate calculator, hangman game, and much more!

By the end of the course, you’ll be able to build your own mini frontend projects from scratch confidently using HTML 5, CSS, and JavaScript.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Welcome to the Course 00:02:13
    2. Getting Setup 00:06:35
  2. Chapter 2 : Form Validator | Intro Project
    1. Project Intro 00:01:58
    2. Project HTML 00:06:20
    3. Project CSS 00:13:48
    4. Adding Simple Validation 00:14:43
    5. Check Required & Refactor 00:09:15
    6. Check Length, Email & Password Match 00:09:14
  3. Chapter 3 : Movie Seat Booking | DOM & Local Storage
    1. Project Intro 00:01:23
    2. Project HTML 00:05:46
    3. Project CSS 00:16:07
    4. Selecting Movie & Seats From UI 00:15:14
    5. Save Data To Local Storage 00:12:44
    6. Populate UI With Saved Data 00:08:14
  4. Chapter 4 : Custom Video Player | HTML5 Video API
    1. Project Intro 00:02:06
    2. Project HTML 00:08:21
    3. Project CSS 00:09:52
    4. Play, Pause & Stop 00:09:25
    5. Video Progress Bar & Timestamp 00:06:42
  5. Chapter 5 : Exchange Rate Calculator | Fetch & JSON Intro
    1. Project Intro 00:01:49
    2. Project HTML 00:04:29
    3. Project CSS 00:10:12
    4. A Look at JSON & Fetch 00:09:20
    5. Fetch Rates & Update DOM 00:12:57
  6. Chapter 6 : DOM Array Methods | forEach, map, filter, sort, reduce
    1. Project Intro 00:02:07
    2. Project UI 00:09:20
    3. Generate Random Users - Fetch w/ Async/Await 00:07:45
    4. Output Users - forEach() & DOM Methods 00:10:27
    5. Double Money - map() 00:06:01
    6. Sort By Richest - sort() 00:05:00
    7. Show Millionaires - filter() 00:04:27
    8. Calculate Wealth - reduce() 00:06:16
  7. Chapter 7 : Menu Slider & Modal | DOM & CSS
    1. Project Intro 00:01:06
    2. Project HTML 00:10:12
    3. Navbar Styling 00:07:33
    4. Header & Modal Styling 00:12:08
    5. Menu & Modal Toggle 00:10:00
  8. Chapter 8 : Hangman Game | DOM, SVG, Events
    1. Project Intro 00:01:50
    2. Draw Hangman with SVG 00:11:35
    3. Main Styling 00:10:55
    4. Popup & Notification Styling 00:08:35
    5. Display Words Function 00:11:23
    6. Letter Press Event Handler 00:08:38
    7. Wrong Letters & Play Again 00:09:55
  9. Chapter 9 : Meal Finder | Fetch & MealDB API
    1. Project Intro 00:01:25
    2. Project HTML & Base CSS 00:10:18
    3. Search & Display Meals from API 00:20:09
    4. Show Single Meal Page 00:15:28
    5. Display Random Meal & Single Meal CSS 00:10:21
  10. Chapter 10 : Expense Tracker | Array Methods & Local Storage
    1. Project Intro 00:01:34
    2. Project HTML 00:05:10
    3. Project CSS 00:14:00
    4. Show Transaction Items 00:08:50
    5. Display Balance, Income & Expense 00:08:20
    6. Add & Delete Transactions 00:08:53
    7. Persist To Local Storage 00:05:41
  11. Chapter 11 : Music Player | HTML5 Audio API
    1. Project Intro 00:01:57
    2. Project HTML 00:05:41
    3. Music Container & Rotate Animation 00:10:09
    4. Music Info Styling & Animation 00:09:21
    5. Load, Play & Pause Song 00:08:46
    6. Next, Prev Song & Progress 00:12:20
  12. Chapter 12 : Infinite Scroll Posts | Fetch, Async/Await, CSS Loader
    1. Project Intro 00:02:31
    2. Project HTML 00:03:06
    3. Project CSS & Loader Animation 00:09:52
    4. Get Initial Posts From API 00:07:26
    5. Add Infinite Scrolling 00:06:09
    6. Filter Fetched Posts 00:05:16
  13. Chapter 13 : Typing Game | DOM, Intervals, Events
    1. Project Intro 00:01:45
    2. Project HTML 00:04:39
    3. Project CSS 00:12:22
    4. Word Match & Score 00:08:16
    5. Adding The Timer 00:09:21
    6. Difficulty Setting 00:08:09
  14. Chapter 14 : Speech Text Reader | Speech Synthesis
    1. Project Intro 00:01:57
    2. HTML & Output Speech Boxes 00:12:17
    3. Project CSS 00:17:19
    4. Get Speech Voices 00:07:28
    5. Speech Buttons 00:04:59
    6. Change Voice & Custom Text Box 00:05:04
  15. Chapter 15 : Memory Cards | CSS Effects, Local Storage
    1. Project Intro 00:02:11
    2. Project HTML 00:07:16
    3. Basic Card Styling 00:10:35
    4. Card Rotation & Slide Effect 00:11:03
    5. Add Card Container & Form Styling 00:06:27
    6. Create Cards & Flip Effect with JS 00:10:24
    7. Prev & Next Button Functionality 00:06:23
    8. Set & Get Card Data from Local Storage 00:13:17
  16. Chapter 16 : Lyrics Search App | Fetch, Pagination, Lyrics.ovh API
    1. Project Intro 00:01:29
    2. Project HTML & Header Stying 00:09:47
    3. Form Styling 00:07:15
    4. Fetching Songs & Artists 00:09:49
    5. Update DOM & Add Pagination 00:15:07
    6. Get & Display Song Lyrics 00:10:09
  17. Chapter 17 : Relaxer App | CSS Animations, setTimeout
    1. Project Intro 00:00:51
    2. Creating the Large Circle 00:10:02
    3. Creating & Animating the Pointer 00:04:37
    4. Breath Animation with JS Trigger 00:09:41
  18. Chapter 18 : Breakout Game | HTML5 Canvas API
    1. Project Intro 00:01:02
    2. Creating & Styling the Page 00:11:15
    3. Canvas Plan Outline 00:06:03
    4. Draw Ball, Paddle & Score 00:11:02
    5. Creating the Bricks 00:09:28
    6. Move Paddle 00:12:51
    7. Move Ball & Break Bricks 00:10:29
    8. Lose & Reset Game 00:05:00
  19. Chapter 19 : New Year Countdown | DOM, Date & Time
    1. Project Intro 00:01:08
    2. Landing Page HTML & Styling 00:11:07
    3. Create The Countdown 00:11:59
    4. Dynamic Year & Spinner 00:07:11
  20. Chapter 20 : Sortable List | Drag & Drop API
    1. Project Intro 00:01:39
    2. Insert List Items Into DOM 00:09:34
    3. Scramble List Items 00:06:43
    4. Core CSS 00:12:23
    5. Drag & Drop Functionality 00:14:58
    6. Check Order 00:05:38
  21. Chapter 21 : Speak Number Guessing Game | Speech Recognition
    1. Project Intro 00:01:31
    2. Project UI 00:08:52
    3. Capture Mic Input 00:08:10
    4. Check Guessed Number 00:12:51

Product information

  • Title: 20 Web Projects with Vanilla JavaScript
  • Author(s): Brad Traversy
  • Release date: June 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800563049