Booking options
Price:
BuyContact Us£76.99
Course Images
20 Web Projects with Vanilla JavaScript
By Packt
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
16 hours 7 minutes
All levels
Description
Build 20 mini frontend projects from scratch with HTML5, CSS, and JavaScriptAll 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 Content
- 20 Web Projects with Vanilla JavaScript
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for 20 Web Projects with Vanilla JavaScript yet.Why not be the first one to review this course?