Description

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

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.

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

Audience

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

Approach

A practical course that has mini-projects designed for learners to complete in just a few hours.

Key Features

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

Github Repo

https://github.com/packtpublishing/20-web-projects-with-vanilla-javascript

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Introduction

1. Welcome to the Course

Introduction: Welcome to the Course

2. Getting Setup

Introduction: Getting Setup

2. Form Validator | Intro Project

1. Project Intro

Form Validator | Intro Project: Project Intro

2. Project HTML

Form Validator | Intro Project: Project HTML

3. Project CSS

Form Validator | Intro Project: Project CSS

4. Adding Simple Validation

Form Validator | Intro Project: Adding Simple Validation

5. Check Required & Refactor

Form Validator | Intro Project: Check Required & Refactor

6. Check Length, Email & Password Match

Form Validator | Intro Project: Check Length, Email & Password Match

3. Movie Seat Booking | DOM & Local Storage

1. Project Intro

Movie Seat Booking | DOM & Local Storage: Project intro

2. Project HTML

Movie Seat Booking | DOM & Local Storage: Project HTML

3. Project CSS

Movie Seat Booking | DOM & Local Storage: Project CSS

4. Selecting Movie & Seats From UI

Movie Seat Booking | DOM & Local Storage: Selecting Movie & Seats From UI

5. Save Data To Local Storage

Movie Seat Booking | DOM & Local Storage: Save Data To Local Storage

6. Populate UI With Saved Data

Movie Seat Booking | DOM & Local Storage: Populate UI With Saved Data

4. Custom Video Player | HTML5 Video API

1. Project Intro

Custom Video Player | HTML5 Video API: Project Intro

2. Project HTML

Custom Video Player | HTML5 Video API: Project HTML

3. Project CSS

Custom Video Player | HTML5 Video API: Project CSS

4. Play, Pause & Stop

Custom Video Player | HTML5 Video API: Play, Pause & Stop

5. Video Progress Bar & Timestamp

Custom Video Player | HTML5 Video API: Video Progress Bar & Timestamp

5. Exchange Rate Calculator | Fetch & JSON Intro

1. Project Intro

Exchange Rate Calculator | Fetch & JSON Intro: Project Intro

2. Project HTML

Exchange Rate Calculator | Fetch & JSON Intro: Project HTML

3. Project CSS

Exchange Rate Calculator | Fetch & JSON Intro: Project CSS

4. A Look at JSON & Fetch

Exchange Rate Calculator | Fetch & JSON Intro: A Look at JSON & Fetch

5. Fetch Rates & Update DOM

Exchange Rate Calculator | Fetch & JSON Intro: Fetch Rates & Update DOM

6. DOM Array Methods | forEach, map, filter, sort, reduce

1. Project Intro

DOM Array Methods | forEach, map, filter, sort, reduce: Project Intro

2. Project UI

DOM Array Methods | forEach, map, filter, sort, reduce: Project UI

3. Generate Random Users - Fetch w/ Async/Await

DOM Array Methods | forEach, map, filter, sort, reduce: Generate Random Users - Fetch w/ Async/Await

4. Output Users - forEach() & DOM Methods

DOM Array Methods | forEach, map, filter, sort, reduce: Output Users - forEach() & DOM Methods

5. Double Money - map()

DOM Array Methods | forEach, map, filter, sort, reduce: Double Money - map()

6. Sort By Richest - sort()

DOM Array Methods | forEach, map, filter, sort, reduce: Sort By Richest - sort()

7. Show Millionaires - filter()

DOM Array Methods | forEach, map, filter, sort, reduce: Show Millionaires - filter()

8. Calculate Wealth - reduce()

DOM Array Methods | forEach, map, filter, sort, reduce: Calculate Wealth - reduce()

7. Menu Slider & Modal | DOM & CSS

1. Project Intro

Menu Slider & Modal | DOM & CSS: Project Intro

2. Project HTML

Menu Slider & Modal | DOM & CSS: Project HTML

3. Navbar Styling

Menu Slider & Modal | DOM & CSS: Navbar Styling

4. Header & Modal Styling

Menu Slider & Modal | DOM & CSS: Header & Modal Styling

5. Menu & Modal Toggle

Menu Slider & Modal | DOM & CSS: Menu & Modal Toggle

8. Hangman Game | DOM, SVG, Events

1. Project Intro

Hangman Game | DOM, SVG, Events: Project Intro: Project Intro

2. Draw Hangman with SVG

Hangman Game | DOM, SVG, Events: Draw Hangman with SVG

3. Main Styling

Hangman Game | DOM, SVG, Events: Main Styling

4. Popup & Notification Styling

Hangman Game | DOM, SVG, Events: Popup & Notification Styling

5. Display Words Function

Hangman Game | DOM, SVG, Events: Display Words Function

6. Letter Press Event Handler

Hangman Game | DOM, SVG, Events: Letter Press Event Handler

7. Wrong Letters & Play Again

Hangman Game | DOM, SVG, Events: Wrong Letters & Play Again

9. Meal Finder | Fetch & MealDB API

1. Project Intro

Meal Finder | Fetch & MealDB API: Project Intro

2. Project HTML & Base CSS

Meal Finder | Fetch & MealDB API: Project HTML & Base CSS

3. Search & Display Meals from API

Meal Finder | Fetch & MealDB API: Search & Display Meals from API

4. Show Single Meal Page

Meal Finder | Fetch & MealDB API: Show Single Meal Page

5. Display Random Meal & Single Meal CSS

Meal Finder | Fetch & MealDB API: Display Random Meal & Single Meal CSS

10. Expense Tracker | Array Methods & Local Storage

1. Project Intro

Expense Tracker | Array Methods & Local Storage: Project Intro

2. Project HTML

Expense Tracker | Array Methods & Local Storage: Project HTML

3. Project CSS

Expense Tracker | Array Methods & Local Storage: Project CSS

4. Show Transaction Items

Expense Tracker | Array Methods & Local Storage: Show Transaction Items

5. Display Balance, Income & Expense

Expense Tracker | Array Methods & Local Storage: Display Balance, Income & Expense

6. Add & Delete Transactions

Expense Tracker | Array Methods & Local Storage: Add & Delete Transactions

7. Persist To Local Storage

Expense Tracker | Array Methods & Local Storage: Persist To Local Storage

11. Music Player | HTML5 Audio API

1. Project Intro

Music Player | HTML5 Audio API: Project Intro

2. Project HTML

Music Player | HTML5 Audio API: Project HTML

3. Music Container & Rotate Animation

Music Player | HTML5 Audio API: Music Container & Rotate Animation

4. Music Info Styling & Animation

Music Player | HTML5 Audio API: Music Info Styling & Animation

5. Load, Play & Pause Song

Music Player | HTML5 Audio API: Load, Play & Pause Song

6. Next, Prev Song & Progress

Music Player | HTML5 Audio API: Next, Prev Song & Progress

12. Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

1. Project Intro

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project Intro

2. Project HTML

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project HTML

3. Project CSS & Loader Animation

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project CSS & Loader Animation

4. Get Initial Posts From API

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Get Initial Posts From API

5. Add Infinite Scrolling

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Add Infinite Scrolling

6. Filter Fetched Posts

Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Filter Fetched Posts

13. Typing Game | DOM, Intervals, Events

1. Project Intro

Typing Game | DOM, Intervals, Events: Project Intro

2. Project HTML

Typing Game | DOM, Intervals, Events: Project HTML

3. Project CSS

Typing Game | DOM, Intervals, Events: Project CSS

4. Word Match & Score

Typing Game | DOM, Intervals, Events: Word Match & Score

5. Adding The Timer

Typing Game | DOM, Intervals, Events: Adding The Timer

6. Difficulty Setting

Typing Game | DOM, Intervals, Events: Difficulty Setting

14. Speech Text Reader | Speech Synthesis

1. Project Intro

Speech Text Reader | Speech Synthesis: Project Intro

2. HTML & Output Speech Boxes

Speech Text Reader | Speech Synthesis: HTML & Output Speech Boxes

3. Project CSS

Speech Text Reader | Speech Synthesis: Project CSS

4. Get Speech Voices

Speech Text Reader | Speech Synthesis: Get Speech Voices

5. Speech Buttons

Speech Text Reader | Speech Synthesis: Speech Buttons

6. Change Voice & Custom Text Box

Speech Text Reader | Speech Synthesis: Change Voice & Custom Text Box

15. Memory Cards | CSS Effects, Local Storage

1. Project Intro

Memory Cards | CSS Effects, Local Storage: Project Intro

2. Project HTML

Memory Cards | CSS Effects, Local Storage: Project HTML

3. Basic Card Styling

Memory Cards | CSS Effects, Local Storage: Basic Card Styling

4. Card Rotation & Slide Effect

Memory Cards | CSS Effects, Local Storage: Card Rotation & Slide Effect

5. Add Card Container & Form Styling

Memory Cards | CSS Effects, Local Storage: Add Card Container & Form Styling

6. Create Cards & Flip Effect with JS

Memory Cards | CSS Effects, Local Storage: Create Cards & Flip Effect with JS

7. Prev & Next Button Functionality

Memory Cards | CSS Effects, Local Storage: Prev & Next Button Functionality

8. Set & Get Card Data from Local Storage

Memory Cards | CSS Effects, Local Storage: Set & Get Card Data from Local Storage

16. Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

1. Project Intro

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Project Intro

2. Project HTML & Header Stying

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Project HTML & Header Stying

3. Form Styling

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Form Styling

4. Fetching Songs & Artists

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Fetching Songs & Artists

5. Update DOM & Add Pagination

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Update DOM & Add Pagination

6. Get & Display Song Lyrics

Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Get & Display Song Lyrics

17. Relaxer App | CSS Animations, setTimeout

1. Project Intro

Relaxer App | CSS Animations, setTimeout: Project Intro

2. Creating the Large Circle

Relaxer App | CSS Animations, setTimeout: Creating the Large Circle

3. Creating & Animating the Pointer

Relaxer App | CSS Animations, setTimeout: Creating & Animating the Pointer

4. Breath Animation with JS Trigger

Relaxer App | CSS Animations, setTimeout: Breath Animation with JS Trigger

18. Breakout Game | HTML5 Canvas API

1. Project Intro

Breakout Game | HTML5 Canvas API: Project Intro

2. Creating & Styling the Page

Breakout Game | HTML5 Canvas API: Creating & Styling the Page

3. Canvas Plan Outline

Breakout Game | HTML5 Canvas API: Canvas Plan Outline

4. Draw Ball, Paddle & Score

Breakout Game | HTML5 Canvas API: Draw Ball, Paddle & Score

5. Creating the Bricks

Breakout Game | HTML5 Canvas API: Creating the Bricks

6. Move Paddle

Breakout Game | HTML5 Canvas API: Move Paddle

7. Move Ball & Break Bricks

Breakout Game | HTML5 Canvas API: Move Ball & Break Bricks

8. Lose & Reset Game

Breakout Game | HTML5 Canvas API: Lose & Reset Game

19. New Year Countdown | DOM, Date & Time

1. Project Intro

New Year Countdown | DOM, Date & Time: Project Intro

2. Landing Page HTML & Styling

New Year Countdown | DOM, Date & Time: Landing Page HTML & Styling

3. Create The Countdown

New Year Countdown | DOM, Date & Time: Create The Countdown

4. Dynamic Year & Spinner

New Year Countdown | DOM, Date & Time: Dynamic Year & Spinner

20. Sortable List | Drag & Drop API

1. Project Intro

Sortable List | Drag & Drop API: Project Intro

2. Insert List Items Into DOM

Sortable List | Drag & Drop API: Insert List Items Into DOM

3. Scramble List Items

Sortable List | Drag & Drop API: Scramble List Items

4. Core CSS

Sortable List | Drag & Drop API: Core CSS

5. Drag & Drop Functionality

Sortable List | Drag & Drop API: Drag & Drop Functionality

6. Check Order

Sortable List | Drag & Drop API: Check Order

21. Speak Number Guessing Game | Speech Recognition

1. Project Intro

Speak Number Guessing Game | Speech Recognition: Project Intro

2. Project UI

Speak Number Guessing Game | Speech Recognition: Project UI

3. Capture Mic Input

Speak Number Guessing Game | Speech Recognition: Capture Mic Input

4. Check Guessed Number

Speak Number Guessing Game | Speech Recognition: Check Guessed Number

Course Images

20 Web Projects with Vanilla JavaScript

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews