20 Web Projects with Vanilla JavaScript

20 Web Projects with Vanilla JavaScript

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

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top 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.

Who this book is for

This course is for anyone who wants to build beginner-level as well as intermediate-level projects using just HTML5, CSS, and JavaScript.

Publisher resources

Download Example Code

Table of contents

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

Product information

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