Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development JavaScript

20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)
Rating: 4.8 out of 54.8 (4,246 ratings)
24,174 students
Created by Brad Traversy
Last updated 1/2020
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

21 sections • 121 lectures • 16h 7m total length

  • Preview02:25
  • Preview06:34
  • The Code
    00:09

  • Preview01:57
  • Project HTML
    06:20
  • Project CSS
    13:47
  • Adding Simple Validation
    14:43
  • Check Required & Refactor
    09:15
  • Check Length, Email & Password Match
    09:13

  • Preview01:23
  • Project HTML
    05:46
  • Project CSS
    16:06
  • Selecting Movie & Seats From UI
    15:13
  • Save Data To Local Storage
    12:43
  • Populate UI With Saved Data
    08:13

  • Preview02:06
  • Project HTML
    08:21
  • Project CSS
    09:52
  • Play, Pause & Stop
    09:24
  • Video Progress Bar & Timestamp
    06:41

  • Preview01:48
  • Project HTML
    04:29
  • Project CSS
    10:12
  • A Look at JSON & Fetch
    09:19
  • Fetch Rates & Update DOM
    12:57

  • Preview02:07
  • Project UI
    09:19
  • Generate Random Users - Fetch w/ Async/Await
    07:45
  • Output Users - forEach() & DOM Methods
    10:27
  • Double Money - map()
    06:00
  • Sort By Richest - sort()
    05:00
  • Show Millionaires - filter()
    04:26
  • Calculate Wealth - reduce()
    06:16

  • Preview01:05
  • Project HTML
    10:11
  • Navbar Styling
    07:32
  • Header & Modal Styling
    12:08
  • Menu & Modal Toggle
    10:00

  • Preview01:49
  • Draw Hangman With SVG
    11:35
  • Main Styling
    10:55
  • Popup & Notification Styling
    08:35
  • Display Words Function
    11:22
  • Letter Press Event Handler
    08:38
  • Wrong Letters & Play Again
    09:54

  • Preview01:24
  • Project HTML & Base CSS
    10:18
  • Search & Display Meals From API
    20:09
  • Show Single Meal Page
    15:28
  • Display Random Meal & Single Meal CSS
    10:20

  • Preview01:33
  • Project HTML
    05:10
  • Project CSS
    14:00
  • Show Transaction Items
    08:50
  • Display Balance, Income & Expense
    08:19
  • Add & Delete Transactions
    08:53
  • Persist To Local Storage
    05:40

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 Fundamentals

  • DOM Selection & Manipulation

  • JavaScript Events (Forms, buttons, scrolling, etc)

  • Fetch API & JSON

  • HTML5 Canvas

  • The Audio & Video API

  • Drag & Drop

  • Web Speech API (Syth & Recognition)

  • Working with Local Storage

  • High Order Array Methods - forEach, map, filter, reduce, sort

  • setTimout, setInterval

  • Arrow Functions

  • and More!!


Who this course is for:

  • Anyone that wants to build some fun and easy to intermediate projects

Featured review

Brandon Whisnant
Brandon Whisnant
214 courses
20 reviews
Rating: 5.0 out of 5a year ago
Brad is the best. All of his courses are amazing. I've been coding professionally for four years and use his courses to keep up with the pace of modern web development. My favorite part is how thorough he is and how he doesn't forget about the beginners. I always recommend his courses to my friends that are looking to try development out because I know they will be in good hands.

Instructor

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
Brad Traversy
  • 4.7 Instructor Rating
  • 102,640 Reviews
  • 264,072 Students
  • 15 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.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.