20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScript

image description

What you will 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

Curriculum

Section 1: Introduction

Section 2: 1: Form Validator | Intro Project

Section 3: 2: Movie Seat Booking | DOM & Local Storage

Section 4: 3: Custom Video Player | HTML5 Video API

Section 5: 4: Exchange Rate Calculator | Fetch & JSON Intro

Section 6: 5: DOM Array Methods | forEach, map, filter, sort, reduce

Section 7: 6: Menu Slider & Modal | DOM & CSS

Section 8: 7: Hangman Game | DOM, SVG, Events

Section 9: 8: Meal Finder | Fetch & MealDB API

Section 10: 9: Expense Tracker | Array Methods & Local Storage

Section 11: 10: Music Player | HTML5 Audio API

Section 12: 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

Section 13: 12: Typing Game | DOM, Intervals, Events

Section 14: 13: Speech Text Reader | Speech Synthesis

Section 15: 14: Memory Cards | CSS Effects, Local Storage

Section 16: 15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

Section 17: 16: Relaxer App | CSS Animations, setTimeout

Section 18: 17: Breakout Game | HTML5 Canvas API

Section 19: 18: New Year Countdown | DOM, Date & Time

Section 20: 19: Sortable List | Drag & Drop API

Section 21: 20: Speak Number Guessing Game | Speech Recognition

Course Description

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)

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