Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Events
Videos
Audiobooks
Packt Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
20 Web Projects with Vanilla JavaScript
20 Web Projects with Vanilla JavaScript

20 Web Projects with Vanilla JavaScript: Build 20 mini frontend projects from scratch with HTML5, CSS, and JavaScript

Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
$134.99
Video Jun 2020 16hrs 7mins 1st Edition
Video
$134.99
Video + Subscription
$24.99 Monthly
Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
$134.99
Video Jun 2020 16hrs 7mins 1st Edition
Video
$134.99
Video + Subscription
$24.99 Monthly
Video
$134.99
Video + Subscription
$24.99 Monthly

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Key benefits

  • 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

Description

All the code and supporting files for this course are available on GitHub at https://github.com/PacktPublishing/20-Web-Projects-with-Vanilla-JavaScript 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 is this book for?

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

What you will learn

  • Build 20 frontend projects from scratch
  • Learn about modern JavaScript (ES6+) - arrows, fetch, promises, and more
  • Explore the HTML5 Canvas, Speech API, audio, and video
  • Implement animations with CSS and JavaScript
  • Get to grips with the concepts of fetch and JSON with third-party APIs

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Last updated date : Jul 02, 2026
Publication date : Jun 29, 2020
Length: 16hrs 7mins
Edition : 1st
Language : English
ISBN-13 : 9781800563049
Languages :
Tools :

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Last updated date : Jul 02, 2026
Publication date : Jun 29, 2020
Length: 16hrs 7mins
Edition : 1st
Language : English
ISBN-13 : 9781800563049
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 261.97
20 Web Projects with Vanilla JavaScript
$134.99
JavaScript from Beginner to Professional
$39.99
C# 9 and .NET 5 – Modern Cross-Platform Development
$86.99
Total $ 261.97 Stars icon

Table of Contents

21 Chapters
Introduction Chevron down icon Chevron up icon
Form Validator | Intro Project Chevron down icon Chevron up icon
Movie Seat Booking | DOM & Local Storage Chevron down icon Chevron up icon
Custom Video Player | HTML5 Video API Chevron down icon Chevron up icon
Exchange Rate Calculator | Fetch & JSON Intro Chevron down icon Chevron up icon
DOM Array Methods | forEach, map, filter, sort, reduce Chevron down icon Chevron up icon
Menu Slider & Modal | DOM & CSS Chevron down icon Chevron up icon
Hangman Game | DOM, SVG, Events Chevron down icon Chevron up icon
Meal Finder | Fetch & MealDB API Chevron down icon Chevron up icon
Expense Tracker | Array Methods & Local Storage Chevron down icon Chevron up icon
Music Player | HTML5 Audio API Chevron down icon Chevron up icon
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader Chevron down icon Chevron up icon
Typing Game | DOM, Intervals, Events Chevron down icon Chevron up icon
Speech Text Reader | Speech Synthesis Chevron down icon Chevron up icon
Memory Cards | CSS Effects, Local Storage Chevron down icon Chevron up icon
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API Chevron down icon Chevron up icon
Relaxer App | CSS Animations, setTimeout Chevron down icon Chevron up icon
Breakout Game | HTML5 Canvas API Chevron down icon Chevron up icon
New Year Countdown | DOM, Date & Time Chevron down icon Chevron up icon
Sortable List | Drag & Drop API Chevron down icon Chevron up icon
Speak Number Guessing Game | Speech Recognition Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How can I download a video package for offline viewing? Chevron down icon Chevron up icon
  1. Login to your account at Packtpub.com.
  2. Click on "My Account" and then click on the "My Videos" tab to access your videos.
  3. Click on the "Download Now" link to start your video download.
How can I extract my video file? Chevron down icon Chevron up icon

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package? Chevron down icon Chevron up icon

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

  1. Video
  2. Format watched (HTML, MP4, streaming)
  3. Chapter or section that issue relates to (if relevant)
  4. System being played on
  5. Browser used (if relevant)
  6. Details of support
Why can’t I download my video package? Chevron down icon Chevron up icon

In the even that you are having issues downloading your video package then please follow these instructions:

  1. Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
  2. Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.
Modal Close icon
Modal Close icon