20 Web Projects With Vanilla JavaScript
What you’ll learn
Build 20 Frontend Projects From Scratch
No JS or CSS Frameworks
Modern JavaScript (ES6+) – Arrows, Fetch, Promises, etc
DOM Manipulation & Events
Animations With CSS & JavaScript
Fetch & JSON With 3rd Party API’s
HTML5 Canvas, Speech API, Audio & Video
Beginner Friendly
Requirements
Basic knowledge in HTML, CSS & JavaScript
Description
This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & JavaScript with no frameworks or libraries. Every project is built from scratch and has some kind of dynamic functionality from small games to an expense tracker to a breathing relax app.Although this is a project based course, I will still be explaining everything as I go. These are mini-projects designed for you to complete in a few hours.You should have some basic knowledge of HTML/CSS/JS. If you are brand new, I would suggest my Modern HTML/CSS From The Beginning and/or my Modern JS From The Beginning courses on Udemy. This course is a mix of both.Some Things You Will Learn In These Projects:Create Layouts & UI’s With HTML/CSS ( No CSS Frameworks )CSS Animations (Transitions, Keyframes, etc With JS Triggers)JavaScript FundamentalsDOM Selection & ManipulationJavaScript Events (Forms, buttons, scrolling, etc)Fetch API & JSONHTML5 CanvasThe Audio & Video APIDrag & DropWeb Speech API (Syth & Recognition)Working with Local StorageHigh Order Array Methods – forEach, map, filter, reduce, sortsetTimout, setIntervalArrow Functionsand More!!
Overview
Section 1: Introduction
Lecture 1 Welcome To The Course
Lecture 2 Getting Setup
Lecture 3 The Code
Section 2: 1: Form Validator | Intro Project
Lecture 4 Project Intro
Lecture 5 Project HTML
Lecture 6 Project CSS
Lecture 7 Adding Simple Validation
Lecture 8 Check Required & Refactor
Lecture 9 Check Length, Email & Password Match
Section 3: 2: Movie Seat Booking | DOM & Local Storage
Lecture 10 Project Intro
Lecture 11 Project HTML
Lecture 12 Project CSS
Lecture 13 Selecting Movie & Seats From UI
Lecture 14 Save Data To Local Storage
Lecture 15 Populate UI With Saved Data
Section 4: 3: Custom Video Player | HTML5 Video API
Lecture 16 Project Intro
Lecture 17 Project HTML
Lecture 18 Project CSS
Lecture 19 Play, Pause & Stop
Lecture 20 Video Progress Bar & Timestamp
Section 5: 4: Exchange Rate Calculator | Fetch & JSON Intro
Lecture 21 Project Intro
Lecture 22 Project HTML
Lecture 23 Project CSS
Lecture 24 A Look at JSON & Fetch
Lecture 25 Fetch Rates & Update DOM
Section 6: 5: DOM Array Methods | forEach, map, filter, sort, reduce
Lecture 26 Project Intro
Lecture 27 Project UI
Lecture 28 Generate Random Users – Fetch w/ Async/Await
Lecture 29 Output Users – forEach() & DOM Methods
Lecture 30 Double Money – map()
Lecture 31 Sort By Richest – sort()
Lecture 32 Show Millionaires – filter()
Lecture 33 Calculate Wealth – reduce()
Section 7: 6: Menu Slider & Modal | DOM & CSS
Lecture 34 Project Intro
Lecture 35 Project HTML
Lecture 36 Navbar Styling
Lecture 37 Header & Modal Styling
Lecture 38 Menu & Modal Toggle
Section 8: 7: Hangman Game | DOM, SVG, Events
Lecture 39 Project Intro
Lecture 40 Draw Hangman With SVG
Lecture 41 Main Styling
Lecture 42 Popup & Notification Styling
Lecture 43 Display Words Function
Lecture 44 Letter Press Event Handler
Lecture 45 Wrong Letters & Play Again
Section 9: 8: Meal Finder | Fetch & MealDB API
Lecture 46 Project Intro
Lecture 47 Project HTML & Base CSS
Lecture 48 Search & Display Meals From API
Lecture 49 Show Single Meal Page
Lecture 50 Display Random Meal & Single Meal CSS
Section 10: 9: Expense Tracker | Array Methods & Local Storage
Lecture 51 Project Intro
Lecture 52 Project HTML
Lecture 53 Project CSS
Lecture 54 Show Transaction Items
Lecture 55 Display Balance, Income & Expense
Lecture 56 Add & Delete Transactions
Lecture 57 Persist To Local Storage
Section 11: 10: Music Player | HTML5 Audio API
Lecture 58 Project Intro
Lecture 59 Project HTML
Lecture 60 Music Container & Rotate Animation
Lecture 61 Music Info Styling & Animation
Lecture 62 Load, Play & Pause Song
Lecture 63 Next, Prev Song & Progress
Section 12: 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader
Lecture 64 Project Intro
Lecture 65 Project HTML
Lecture 66 Project CSS & Loader Animation
Lecture 67 Get Initial Posts From API
Lecture 68 Add Infinite Scrolling
Lecture 69 Filter Fetched Posts
Section 13: 12: Typing Game | DOM, Intervals, Events
Lecture 70 Project Intro
Lecture 71 Project HTML
Lecture 72 Project CSS
Lecture 73 Word Match & Score
Lecture 74 Adding The Timer
Lecture 75 Difficulty Setting
Section 14: 13: Speech Text Reader | Speech Synthesis
Lecture 76 Project Intro
Lecture 77 HTML & Output Speech Boxes
Lecture 78 Project CSS
Lecture 79 Get Speech Voices
Lecture 80 Speech Buttons
Lecture 81 Change Voice & Custom Text Box
Section 15: 14: Memory Cards | CSS Effects, Local Storage
Lecture 82 Project Intro
Lecture 83 Project HTML
Lecture 84 Basic Card Styling
Lecture 85 Card Rotation & Slide Effect
Lecture 86 Add Card Container & Form Styling
Lecture 87 Create Cards & Flip Effect With JS
Lecture 88 Prev & Next Button Functionality
Lecture 89 Set & Get Card Data From Local Storage
Section 16: 15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API
Lecture 90 Project Intro
Lecture 91 Project HTML & Header Stying
Lecture 92 Form Styling
Lecture 93 Fetching Songs & Artists
Lecture 94 Update DOM & Add Pagination
Lecture 95 Get & Display Song Lyrics
Section 17: 16: Relaxer App | CSS Animations, setTimeout
Lecture 96 Project Intro
Lecture 97 Creating The Large Circle
Lecture 98 Creating & Animating The Pointer
Lecture 99 Breath Animation With JS Trigger
Section 18: 17: Breakout Game | HTML5 Canvas API
Lecture 100 Project Intro
Lecture 101 Creating & Styling The Page
Lecture 102 Canvas Plan Outline
Lecture 103 Draw Ball, Paddle & Score
Lecture 104 Creating The Bricks
Lecture 105 Move Paddle
Lecture 106 Move Ball & Break Bricks
Lecture 107 Lose & Reset Game
Section 19: 18: New Year Countdown | DOM, Date & Time
Lecture 108 Project Intro
Lecture 109 Landing Page HTML & Styling
Lecture 110 Create The Countdown
Lecture 111 Dynamic Year & Spinner
Section 20: 19: Sortable List | Drag & Drop API
Lecture 112 Project Intro
Lecture 113 Insert List Items Into DOM
Lecture 114 Scramble List Items
Lecture 115 Core CSS
Lecture 116 Drag & Drop Functionality
Lecture 117 Check Order
Section 21: 20: Speak Number Guessing Game | Speech Recognition
Lecture 118 Project Intro
Lecture 119 Project UI
Lecture 120 Capture Mic Input
Lecture 121 Check Guessed Number
Anyone that wants to build some fun and easy to intermediate projects
Course Information:
Udemy | English | 16h 7m | 6.03 GB
Created by: Brad Traversy
You Can See More Courses in the Developer >> Greetings from CourseDown.com