IIRF Online > Development > Web Development > JavaScript > JavaScript Web Projects: 20 Projects to Build Your Portfolio

JavaScript Web Projects: 20 Projects to Build Your Portfolio by Udemy

Modern HTML5, CSS3, and JavaScript to build Responsive and Mobile Friendly projects for your dream portfolio and resume!

       
HighlightOverviewCurriculamFAQs
Course Highlights
  • 20 projects with pure JavaScript, HTML5, CSS3 with all code provided
  • Go from a total beginner to a confident JavaScript developer
  • Learn UI/UX practices to build responsive and mobile first web applications
  • Asynchronous programming with AJAX, Fetch API, Promises & Async + Await
  • Write clean, maintainable and performant Javascript code
  • Work with Web APIs (localStorage, DOM, + more)
  • Modern HTML5 (Canvas, Video, Audio + more)
  • Modern CSS3 (Animations, Transitions, Variables + more)
  • Avoid common mistakes other Javascript programmers and beginners make
  • Build 20 beautiful and customizable, real world frontend applications

Overview

What are the Merits of this Course?

  • Become a confident Javascript developer from a total beginner.
  • You will be able to write clean, maintainable and performant Javascript code.
  • Asynchronous programming - Fetch API, AJAX, Promises & Async + Await
  • You will be able to build 20 beautiful and customizable, real-world front-end applications.
  • You will be able to avoid common mistakes that other javascript programmers and beginners make.
  • You will get work with web APIs (local storage, DOM and many more)
  • You’ll get to learn modern HTML5, which includes canvas, video, audio and many more.
  • Learn to build responsive and mobile-first web applications through UI/UX practices.
  • There are 20 projects with pure JavaScript, HTML5, and CSS3 with all code provided

What are the Outcomes of this Course?

This course will guide you on efficiency and get you hired by building your dream portfolio so you can get a job as a freelancer. If you want to become a freelancer or get hired to advance your career, With 20 Javascript projects, you will be able to customize and put on your portfolio right away.

JavaScript is an investment that will pay off many years into the future; you will prove your future yourself by solidifying your JavaScript knowledge and being able to build things without crutches like libraries and frameworks.

Using the latest features of JavaScript and browser APIs, you can also do a code review of each project. This course will teach you and challenge you to go from an absolute beginner in
Curriculum
Expand All

6 Topics
Course Outline
Join Our Online Classroom!
Exercise: Meet Your Classmates and Instructor
The Purpose Of JavaScript
How To Get The Most Out Of The Course
ZTM Resources

8 Topics
Setting Up For The Course
OPTIONAL: MAC/LINUX Setup
OPTIONAL: WINDOWS Setup
Our Visual Studio Code Setup + Templates
Developer Tools + Github Pages
Web Developer Monthly
Bonus resource: Advanced JavaScript Cheatsheet
Monthly Coding Challenges Free Resources and Guides

18 Topics
Quote Generator Project Overview
Setting Up Our Project
Styling and HTML Elements
Creating Beautiful Buttons
Update to API
[NEW] Fetching Data With JavaScript
Different Option for API
[NEW] Manipulating DOM With JavaScript
[NEW] Creating A Loader With JavaScript
Sharing Your Projects
Quick Note: Upcoming Videos
[OPTIONAL] Fetching Data With JavaScript
[OPTIONAL] 429 Error
[OPTIONAL] Build Your Own Proxy Server
[OPTIONAL] Manipulating DOM With JavaScript
[OPTIONAL] Creating A Loader With JavaScript
Code Review
Manipulating The DOM

10 Topics
Infinity Scroll Project Overview
Loader SVG
Centering Elements On The Page
Responsive Layout
Fetching Data
JavaScript To Display Data
Infinite Scroll With JavaScript
Infinite Scroll With JavaScript 2
Code Review
Exercises: Cleaning Up The Code

6 Topics
Picture In Picture Project Overview
Setting Up Our Project
Styling and HTML Elements
Adding Functionality With JavaScript
Code Review
Endorsements On LinkedIN

9 Topics
Joke Teller Project Overview
Styling and HTML Elements
Responsive Layout and Styling
RapidAPI Disclaimer
JavaScript In The Project
JavaScript In The Project 2
JavaScript In The Project 3
Finishing Up The Project
Code Review

9 Topics
Light Dark Mode Project Overview
HTML and CSS Setup
Content In Our Project
Toggle Theme With JavaScript
Toggle Theme With JavaScript 2
LocalStorage To Save User Data
Code Review
Exercise: Imposter Syndrome
Exercise: Making Code More Readable

6 Topics
Animated Template Project Overview
Setting Up Our Template
Setting Up Our Content
JavaScript Inside of HTML
Animation On Scroll
Code Review

7 Topics
Navigation Nation Project Overview
Setting Up Our HTML and CSS
Navigation UI
Animating Menu With JavaScript
Animations CSS
Cleaning Up Our JavaScript
Code Review

9 Topics
Music Player Project Overview
Setting Up Our HTML and CSS
Coding Our Responsive UI
JavaScript To Play Audio
Music Player With JavaScript
Progress Bar
Progress Bar 2
Progress Bar 3
Code Review

11 Topics
Custom Countdown Project Overview
Video Background
Building Our UI Components
Building Our UI Components 2
JavaScript Dates
Form Values
Populate Countdown UI
setInterval And clearInterval
Finishing Up The UI
Caching With LocalStorage
Code Review

11 Topics
Book Keeper Project Overview
Building Our UI
Building Our UI 2
Building Our Modal
Modals With JavaScript
Appending URL Issue
Form Validation
localStorage And Fetch
Building The Bookmarks
Deleting The Bookmarks
Code Review

15 Topics
Video Player Project Overview
Video Source Updated
Build UI - Player Video Mobile Responsive
Build UI - Controls HTML Show Controls on Hover
Build UI - Progress Bar: Width Hover
Build UI - Selection Show CSS Variables
JS - Video Play/Pause
JS - Progress Bar (Dynamic Width)
JS - Populate Current Time / Duration
JS - Progress Bar (Seek)
JS - Volume (Slider)
JS - Volume (Mute/Unmute)
JS - Playback Seed
JS - Fullscreen
Code Review

9 Topics
Form Validator Project Overview
Build UI - HTML Forms Input Labels
Build UI - CSS (Body Container) Google Fonts
Build UI - Form CSS
HTML Form Validation
JS - Validate Form
JS - Validate Passwords Store Data
Code Review
How to Store User Passwords

10 Topics
Spock Rock Project Overview
Build UI - Player Containers FontAwesome
Build UI - CSS Google Fonts
JS - Setup Player Selection
JS - Computer Selection
JS - Check Results
JS - Reset All
JS - Confetti Functionality
JS - Module Refactoring
Code Review

12 Topics
NASA APOD Project Overview
Asset - Custom Loading Animation
Build UI - Navigation
Build UI - Card with Image
JS - NASA API Documentation/Fetch
JS - Create DOM Elements
JS - Save Favourites
JS - Favorites DOM Elements
JS - Delete Favorites
JS - Navigation Loader
Code Review
Optional: Declarative vs Imperative

12 Topics
Math Sprint Game Project Overview
Build UI - Splash Page Countdown
Build UI - Game Page Score Page
JS - Radio Selection & Functionality
JS - Countdown Page
JS - Generate Random Equations
JS - Equations to DOM
JS - Automatic Scrolling & Player Input
JS - Check Score with Timing Events
JS - Score Page
JS - Best Scores in Local Storage
Code Review

10 Topics
Drag n' Drop Project Overview
Build UI - Flexbox Custom Scrollbar
JS - localStorage
JS - Update DOM
JS - Drag and Drop API
JS - Rebuild Arrays
JS - Add Item
JS - Delete Item
JS - Update Item
Code Review

10 Topics
Calculator Project Overview
Build UI - Calculator Display Buttons
Build UI - Display CSS
Build UI - CSS Grid
Build UI - Button CSS
JS - Adding Event Listeners
JS - Reset Value Add Decimal
JS - Operator Functionality
JS - Calculation
Code Review

8 Topics
Splash Page Project Overview
Initial Setup - Figma
Build UI - Adding Image Assets
Build UI - Styling Image Assets
Build UI - Adding Custom Backgrounds
JS - Background Controls
Code Review
Exercise: Memory Leaks And Heap Snapshots

8 Topics
Paint Clone Project Overview
Build UI - Custom Slider JSColor Mobile Message
JS - Canvas Setup
JS - Color/Range Inputs
JS - Drawing on Canvas
JS - Store Drawing Data
JS - localStorage & Downloading an Image
Code Review

5 Topics
Pong Project Overview
JS - Create Canvas
JS - RequestAnimationFrame
JS - Game Over
Code Review

9 Topics
Sharing Your Projects
JavaScript And Beyond
Thank You!
Learning Guideline
LinkedIn Endorsements
Become An Alumni
Coding Challenges
Course Review
The Final Challenge

17 Topics
JavaScript Engine
Exercise: Javascript Engine
Inside the Engine
Exercise: JS Engine For All
Interpreters and Compilers
Inside the V8 Engine
Comparing Other Languages
Writing Optimized Code
WebAssembly
Call Stack and Memory Heap
Stack Overflow
Garbage Collection
Memory Leaks
Single Threaded
Exercise: Issue With Single Thread
Javascript Runtime
Node.js

8 Topics
Git + Github Part 1
Github Update: Master --> Main
Git + Github Part 2
Contributing To Open Source
Contributing To Open Source 2
Exercise: Contribute To Open Source
Installing Node
Create A Portfolio

1 Topic
Solving CORS Issues With Heroku Server

1 Topic
Special Bonus Lecture

  Write a Review

JavaScript Web Projects: 20 Projects to Build Your Portfolio

Go to Paid Course
Related JavaScript Courses
Frequently Asked Questions
JavaScript is object-oriented programming; it supports the concept of Object. By using Object literal, you can create an object.
This course is for those who can’t build JavaScript projects on their own, who want to become web developers, etc.
Lower interaction with the server, Instant feedback to visitors, Increase in interactivity, Less overhead, Versatile
You’ll need to spend 2-3 hours a day learning JavaScript for 6-9 months.
This course will never expire, as you’ll get lifetime access.


Get in Touch with Us
Quick links
Latest Ranking
Popular Specializations
© Copyright IIRF Ranking 2025. All Rights Reserved.