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