20 Web Projects With Vanilla JavaScript by Udemy
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)
Course Highlights
- 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
Skills you will learn!
Overview
Who can join this course?
Anyone interested in building some enjoyable, simple, intermediate projects.
More About the Course
The projects available in this class are fun, practical and project-based courses for all the skills. The projects you can find in this course will get you building things with the help of HTML5, JavaScript and CSS with no libraries or framework. Every project, from small games, to cost trackers to breathing relaxation apps, is created from the ground up and offers some form of dynamic functionality.
Despite the project-based nature of this course, I will still be providing explanations along the way. These are quick projects that should only take a few hours to finish.
You ought to know the fundamentals of HTML, CSS, and JavaScript. If you're new to the site, I recommend checking out my Udemy courses, Modern HTML/CSS From the Beginning and/or Modern JS From the Beginning. Both are combined in this course.
Things You Will Learn from These Project
- Animation with JavaScript and CSS
- Speech API, HTL5 Canvas, Audio & Video
- Drag & Drop
- Web Speech API
- Arrow Functions
- JavaScript Fundamentals
- DOM Manipulation and Events.
- No CSS or JavaScript Framework
- Beginner Friendly
Curriculum
3 Topics
Welcome To The Course
Getting Setup
The Code
6 Topics
Project Intro
Project HTML
Project CSS
Adding Simple Validation
Check Required & Refactor
Check Length Email & Password Match
6 Topics
Project Intro
Project HTML
Project CSS
Selecting Movie & Seats From UI
Save Data To Local Storage
Populate UI With Saved Data
5 Topics
Project Intro
Project HTML
Project CSS
Play Pause & Stop
Video Progress Bar & Timestamp
5 Topics
Project Intro
Project HTML
Project CSS
A Look at JSON & Fetch
Fetch Rates & Update DOM
8 Topics
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()
5 Topics
Project Intro
Project HTML
Navbar Styling
Header & Modal Styling
Menu & Modal Toggle
7 Topics
Project Intro
Draw Hangman With SVG
Main Styling
Popup & Notification Styling
Display Words Function
Letter Press Event Handler
Wrong Letters & Play Again
5 Topics
Project Intro
Project HTML & Base CSS
Search & Display Meals From API
Show Single Meal Page
Display Random Meal & Single Meal CSS
7 Topics
Project Intro
Project HTML
Project CSS
Show Transaction Items
Display Balance Income & Expense
Add & Delete Transactions
Persist To Local Storage
6 Topics
Project Intro
Project HTML
Music Container & Rotate Animation
Music Info Styling & Animation
Load Play & Pause Song
Next Prev Song & Progress
6 Topics
Project Intro
Project HTML
Project CSS & Loader Animation
Get Initial Posts From API
Add Infinite Scrolling
Filter Fetched Posts
6 Topics
Project Intro
Project HTML
Project CSS
Word Match & Score
Adding The Timer
Difficulty Setting
6 Topics
Project Intro
HTML & Output Speech Boxes
Project CSS
Get Speech Voices
Speech Buttons
Change Voice & Custom Text Box
8 Topics
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
6 Topics
Project Intro
Project HTML & Header Stying
Form Styling
Fetching Songs & Artists
Update DOM & Add Pagination
Get & Display Song Lyrics
4 Topics
Project Intro
Creating The Large Circle
Creating & Animating The Pointer
Breath Animation With JS Trigger
8 Topics
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
4 Topics
Project Intro
Landing Page HTML & Styling
Create The Countdown
Dynamic Year & Spinner
6 Topics
Project Intro
Insert List Items Into DOM
Scramble List Items
Core CSS
Drag & Drop Functionality
Check Order
4 Topics
Project Intro
Project UI
Capture Mic Input
Check Guessed Number
20 Web Projects With Vanilla JavaScript
Related JavaScript Courses
Frequently Asked Questions
Yes, developers can combine both benefits using JavaScript libraries and Vanilla JavaScript.
The course includes about 16 hours of on-demand video.
Anyone can learn about this course who wants to build a project that is fun and easy.
Yes, it does help you in learning JavaScript, HTML and CSS. Not only that but there are several other things which you can also learn here.
The term "VanillaJS" describes the use of simple JavaScript without the need for any extra libraries, similar to jQuery in the past.
Thank You!
Your review has been submitted successfully.