20 Web Projects with Vanilla JavaScript

Focused View

Brad Traversy

16:06:38

5 View

1 - Introduction

001 - Welcome to the Course.mp4

02:13

002 - Getting Setup.mp4

06:34

2 - Form Validator Intro Project

003 - Project Intro.mp4

01:57

004 - Project HTML.mp4

06:20

005 - Project CSS.mp4

13:47

006 - Adding Simple Validation.mp4

14:43

007 - Check Required & Refactor.mp4

09:15

008 - Check Length, Email & Password Match.mp4

09:13

3 - Movie Seat Booking DOM & Local Storage

009 - Project Intro.mp4

01:23

010 - Project HTML.mp4

05:46

011 - Project CSS.mp4

16:06

012 - Selecting Movie & Seats From UI.mp4

15:13

013 - Save Data To Local Storage.mp4

12:43

014 - Populate UI With Saved Data.mp4

08:13

4 - Custom Video Player HTML5 Video API

015 - Project Intro.mp4

02:06

016 - Project HTML.mp4

08:21

017 - Project CSS.mp4

09:52

018 - Play, Pause & Stop.mp4

09:24

019 - Video Progress Bar & Timestamp.mp4

06:41

5 - Exchange Rate Calculator Fetch & JSON Intro

020 - Project Intro.mp4

01:48

021 - Project HTML.mp4

04:29

022 - Project CSS.mp4

10:12

023 - A Look at JSON & Fetch.mp4

09:19

024 - Fetch Rates & Update DOM.mp4

12:57

6 - DOM Array Methods forEach, map, filter, sort, reduce

025 - Project Intro.mp4

02:07

026 - Project UI.mp4

09:19

027 - Generate Random Users - Fetch w Async Await.mp4

07:45

028 - Output Users - forEach() & DOM Methods.mp4

10:27

029 - Double Money - map().mp4

06:00

030 - Sort By Richest - sort().mp4

04:59

031 - Show Millionaires - filter().mp4

04:26

032 - Calculate Wealth - reduce().mp4

06:16

7 - Menu Slider & Modal DOM & CSS

033 - Project Intro.mp4

01:05

034 - Project HTML.mp4

10:11

035 - Navbar Styling.mp4

07:32

036 - Header & Modal Styling.mp4

12:08

037 - Menu & Modal Toggle.mp4

10:00

8 - Hangman Game DOM, SVG, Events

038 - Project Intro.mp4

01:49

039 - Draw Hangman with SVG.mp4

11:35

040 - Main Styling.mp4

10:55

041 - Popup & Notification Styling.mp4

08:35

042 - Display Words Function.mp4

11:22

043 - Letter Press Event Handler.mp4

08:38

044 - Wrong Letters & Play Again.mp4

09:54

9 - Meal Finder Fetch & MealDB API

045 - Project Intro.mp4

01:24

046 - Project HTML & Base CSS.mp4

10:18

047 - Search & Display Meals from API.mp4

20:09

048 - Show Single Meal Page.mp4

15:28

049 - Display Random Meal & Single Meal CSS.mp4

10:20

10 - Expense Tracker Array Methods & Local Storage

050 - Project Intro.mp4

01:33

051 - Project HTML.mp4

05:10

052 - Project CSS.mp4

14:00

053 - Show Transaction Items.mp4

08:50

054 - Display Balance, Income & Expense.mp4

08:19

055 - Add & Delete Transactions.mp4

08:53

056 - Persist To Local Storage.mp4

05:40

11 - Music Player HTML5 Audio API

057 - Project Intro.mp4

01:56

058 - Project HTML.mp4

05:40

059 - Music Container & Rotate Animation.mp4

10:09

060 - Music Info Styling & Animation.mp4

09:20

061 - Load, Play & Pause Song.mp4

08:46

062 - Next, Prev Song & Progress.mp4

12:20

12 - Infinite Scroll Posts Fetch, Async Await, CSS Loader

063 - Project Intro.mp4

02:30

064 - Project HTML.mp4

03:05

065 - Project CSS & Loader Animation.mp4

09:52

066 - Get Initial Posts From API.mp4

07:26

067 - Add Infinite Scrolling.mp4

06:09

068 - Filter Fetched Posts.mp4

05:15

13 - Typing Game DOM, Intervals, Events

069 - Project Intro.mp4

01:45

070 - Project HTML.mp4

04:39

071 - Project CSS.mp4

12:21

072 - Word Match & Score.mp4

08:15

073 - Adding The Timer.mp4

09:20

074 - Difficulty Setting.mp4

08:08

14 - Speech Text Reader Speech Synthesis

075 - Project Intro.mp4

01:57

076 - HTML & Output Speech Boxes.mp4

12:17

077 - Project CSS.mp4

17:18

078 - Get Speech Voices.mp4

07:28

079 - Speech Buttons.mp4

04:58

080 - Change Voice & Custom Text Box.mp4

05:04

15 - Memory Cards CSS Effects, Local Storage

081 - Project Intro.mp4

02:11

082 - Project HTML.mp4

07:16

083 - Basic Card Styling.mp4

10:35

084 - Card Rotation & Slide Effect.mp4

11:03

085 - Add Card Container & Form Styling.mp4

06:27

086 - Create Cards & Flip Effect with JS.mp4

10:23

087 - Prev & Next Button Functionality.mp4

06:23

088 - Set & Get Card Data from Local Storage.mp4

13:16

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

089 - Project Intro.mp4

01:28

090 - Project HTML & Header Stying.mp4

09:46

091 - Form Styling.mp4

07:15

092 - Fetching Songs & Artists.mp4

09:49

093 - Update DOM & Add Pagination.mp4

15:07

094 - Get & Display Song Lyrics.mp4

10:08

17 - Relaxer App CSS Animations, setTimeout

095 - Project Intro.mp4

00:51

096 - Creating the Large Circle.mp4

10:01

097 - Creating & Animating the Pointer.mp4

04:37

098 - Breath Animation with JS Trigger.mp4

09:40

18 - Breakout Game HTML5 Canvas API

099 - Project Intro.mp4

01:01

100 - Creating & Styling the Page.mp4

11:15

101 - Canvas Plan Outline.mp4

06:03

102 - Draw Ball, Paddle & Score.mp4

11:01

103 - Creating the Bricks.mp4

09:27

104 - Move Paddle.mp4

12:51

105 - Move Ball & Break Bricks.mp4

10:29

106 - Lose & Reset Game.mp4

04:59

19 - New Year Countdown DOM, Date & Time

107 - Project Intro.mp4

01:08

108 - Landing Page HTML & Styling.mp4

11:07

109 - Create The Countdown.mp4

11:59

110 - Dynamic Year & Spinner.mp4

07:11

20 - Sortable List Drag & Drop API

111 - Project Intro.mp4

01:39

112 - Insert List Items Into DOM.mp4

09:34

113 - Scramble List Items.mp4

06:42

114 - Core CSS.mp4

12:22

115 - Drag & Drop Functionality.mp4

14:57

116 - Check Order.mp4

05:37

21 - Speak Number Guessing Game Speech Recognition

117 - Project Intro.mp4

01:30

118 - Project UI.mp4

08:51

119 - Capture Mic Input.mp4

08:09

120 - Check Guessed Number.mp4

12:50

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Brad Traversy

Instructor's Courses

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 like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.