Build 28 Modern JavaScript Projects - A Practical Guide

Name: Build 28 Modern JavaScript Projects - A Practical Guide
Rating: 5.0 (2 reviews)

Create 28 Practical Projects in JavaScript from scratch to Make You Feel Confident And Gain Mastery - HTML&CSS included

Created byPamch Tutor | M.EdTech | MCE

Last updated 12/2025

English

What you'll learn

You will work on over 25 exciting projects that cover a wide range of applications
Understand control structures like functions, loops and conditionals.
Build interactive applications with constructor functions
Explore arrays and objects in JavaScript.
Empower you to bring your creative ideas to life through JavaScript.
Understand how to apply Arrow functions

Course content

33 sections • 269 lectures • 69h 47m total length

Introduction - Part 115:06
Explore modern JavaScript through more than 20 practical projects built with HTML, CSS, and JavaScript; learn interactive shopping cart, image gallery, modal, carousel, color generator, and responsive UI.
Introduction - Part 213:11
Develop a feature rich web app with a music player and playlist, video album, typewriter effect, text to speech, responsive UI, and calculators using html css and javascript.
Introduction - Part 39:52
Create a responsive search items project that filters by title or author, supports enter-to-search, clear input, and dynamic pagination with next and previous controls, plus a scroll progress bar.
Watch before you purchase this course4:57
Explore a no-framework approach to vanilla JavaScript, HTML, and CSS with thorough explanations of addEventListener, forEach, classList, and disabled attributes, designed for intermediate developers who want portfolio-ready projects.

Downloading royalty free photos and videos5:24
Learn to source royalty-free images and videos for modern JavaScript projects by using Pexels and Pixabay, search and download media in various formats from the project files.
Downloading royalty free music2:10
Discover how to download royalty free music for your projects by navigating music in the explorer, testing playback, and saving files from Pixabay and Pexels.

Basic structure of the tooltip12:12
Explore a responsive clickable tooltip with top, bottom, left, and right placements, featuring toggle behavior and a complete HTML, CSS, and JavaScript structure.
Styling the basics and tooltip buttons15:26
Learn practical css styling from the universal selector to tooltip buttons, including box-sizing border-box, removing margins and padding, flex layouts, centered text, responsive container, hover transitions, and tooltip setup.
Styling the tooltips - Part 123:21
Style tooltips in a modern JavaScript project by creating an absolute-positioned tooltip container inside a relative parent, using z-index, adding transitions, and rendering arrows with after pseudo-elements and triangle borders.
Styling the tooltips - Part 218:50
Explore styling tooltips in CSS by building top, bottom, left, and right tooltips with arrows, precise positioning, pointer events none, and responsive centering for interactive UI.
Responsiveness of tooltip24:48
Learn to toggle tooltip visibility using a visible class, animate opacity and visibility with transitions, and implement responsive tooltip positioning across left, right, top, and bottom with media queries.
JavaScript variable and forEach() method20:46
Declare a const buttons array from document, iterate with for each using an arrow function, and attach click listeners to each button to access tooltip with this and query selector.
Show and hide the tooltip when clicking on the button15:33
Learn to show and hide tooltips by clicking buttons, using classList toggle to manage the visible class, selecting all tooltips with querySelectorAll, and iterating with forEach and arrow functions.
Close tooltip when clicking anywhere outside the buttons19:47
Close tooltips when users click outside the buttons using a document click listener, event objects, and the closest method to identify the trigger and reset the visible state.

Basic structure of the emoji project7:44
Build the emoji reactions project using html, css, and javascript, creating a text container and an emoji container with buttons and count spans, and preview via live server.
Styling the emoji project19:10
Explore styling the emoji project with responsive CSS: center the body, set container widths, add borders, padding, shadows, and a flex emoji layout with hover transitions and counts.
Making the counter work when we click on the emoji21:19
Learn to wire emoji buttons with JavaScript using querySelectorAll and forEach, attach click listeners, increment per-button counts shown via textContent, and toggle the display from none to block on click.
The pop up effect on the clicked emojis15:09
learn to implement a clickable emoji pop-up animation with per-button counters, revealing and updating counts on click, using event listeners, textContent, and a 200ms scale reset.
Working on the count's circle3:26
Refine the user interface by setting a 20px width and height, adjusting padding for balance, and ensuring a circular display of two-digit counts.

Linking our fontawesome CDN4:03
Learn to build an off canvas modal with Font Awesome icons, including linking the Font Awesome CDN, toggling visibility, disabling scrolling, and controlling close behavior.
Basic Structure of the offcanvas19:44
Learn to insert a Font Awesome bars icon into a button and assemble an off-canvas navigation with a header, profile content, navigation links, a sign-up button, and an overlay.
Styling the offcanvas-toggle and offcanvas19:02
Style off canvas toggle and off canvas with css, using box-sizing and a 0.3s left transition. Position the toggle at top-right with a 600px max-width and circular 100px profile image.
Styling the offcanvas-header, close, body, nav19:07
Master styling an offcanvas header, body, and nav with an active class added via classList. Learn left or right reveal, flex layouts, padding, alignment, and hover transitions for nav links.
Styling the signup button and overlay11:59
Learn to style the signup button with hover background, full width, padding, white text, border radius, and spacing. Then build a full-screen overlay with fixed positioning and a semi-transparent background.
Creating the variables and opening the offcanvas18:38
Use const to declare variables, target DOM elements with getElementById, and open the off canvas by adding the active class to the off canvas and overlay via a click handler.
Close offcanvas from x button and overlay14:52
Close the off-canvas with the X or overlay by removing the active class from both the off-canvas and overlay, and control scrolling with overflow hidden and auto.

Basic structure of the project19:06
Learn to build a modal popup in a modern JavaScript project, including overlay dismissal (button, X, overlay click, esc) and auto-stopping video when the modal closes.
Styling the modal and overlay20:47
Style the modal overlay as a fixed, full-screen layer with a semi-transparent background. Center the content and ensure responsive width with border radius, shadows, and animation.
Styling the Modal animation, modal-header, close button21:02
Learn to build a modal with a fade-in animation using keyframes, control open/close with opacity and translateY, and style the header, close button, and content for scrollable text.
Styling the dismiss button6:35
The lecture demonstrates styling the dismiss button to fill container with width 100%, padding, white text, a 4px border radius, and a hover transition, and toggling modal overlay via javascript.
Declaring the variables and Opening and closing the modal18:00
Declare and select controls with const and getElementById, wiring open, close, and dismiss buttons to toggle the modal overlay. Pause the video on close and reset currentTime for consistent playback.
Closing the modal from the overlay and escape key24:12
Close modals from the overlay or via the escape key using event listeners, event.target checks, and conditional logic. Manage overlay clicks, x dismiss, and page scrolling behavior for accessibility.
Adding image to the modal4:50
Learn to insert an image into a modal using a dedicated image class, with an optional border radius, then manage scrolling and pause and reset video time when switching content.
What to do when the modal has long content10:41
Learn to handle long modal content by applying a max height and overflow-y to enable internal scrolling within the modal overlay, and switch to block display centered with margins.

Basic structure and styling of the trigger button11:58
Learn to build a trigger button that opens an alert popup, displays a message for three seconds, auto closes with setTimeout, and can be cleared, using HTML, CSS, and JavaScript.
Styling the alert container and close button14:05
Style a full-width alert container with flex layout, bottom border, and themed text; position it fixed at the top with translateY show/hide animation and a show class.
Creating variables and showAlert() function17:06
Explore selecting elements with querySelector and getElementById, create trigger button and alert pop up, and implement show alert on click with classList and a 3-second timeout to auto-hide.
hideAlert() function and the clearTimeout15:03
Learn to build a dismissible alert with setTimeout to show, and clearTimeout to cancel the timeout with a close button. This covers the hide function, show class, and addEventListener wiring.

Requirements

This is not a beginner course. You should have the good fundamental knowledge of JavaScript (variables, functions, loops, arrays, objects, array methods).
You should have the good knowledge of HTML and CSS
You will need to have a text editor to code along with me - e.g. Visual Studio (which I will be using), Sublime Text, Notepad++, Brackets

Description

Welcome to Modern JavaScript Projects - A Practical Guide, an immersive course designed to take your JavaScript skills to the next level through hands-on, real-world projects! Throughout the course, you will work on 28 exciting projects that cover a wide range of applications. Whether you're a looking to solidify your understanding or you are aiming to expand your portfolio, this course provides the perfect blend of theory and practice. In this course, you will learn key JavaScript concepts and techniques essential for modern web development. You will gain the expertise needed to build JS applications. You will also learn how to write clean, maintainable code and debug effectively, setting a solid foundation for your coding journey.

Here’s a taste of what you’ll create:

Responsive Clickable Tooltips: Create Responsive Clickable Tooltips with a user-friendly interface.
Emoji reactions counter: Create Emoji reactions counter that counts how many time an emoji is clicked.
Offcanvas menu: Build an Offcanvas menu that has an overlay effect.
Pop up Modal Box: Build a Pop up Modal Box that is scrollable with long content.
Alert Pop up: Create an Alert Pop up that can be invisible after some seconds.
Toast Pop up: Build a Toast Pop up project.
Expandable Image Cards: Build an Expandable Image Cards with smooth layouts.
Filterable Image Gallery: Develop a Filterable Image Gallery with modern responsive gallery layout.
Text Typing Project: Create a Text Typing Project with dynamic typing and deleting effect.
Type writer (Text-To-Speech) Project: Implement a Type writer (Text-To-Speech) Project.
Text To Speech Converter App: Build a Text To Speech Converter App that can toggle between accents.
Video Album Player: Create a Video Album Player that allows you to click on thumbnail video.
Accordion Project: Create an open and close accordion project
Image carousel: Create an Image carousel project that can either move to next by clicking or by autoplay.
Image overlay album: Develop a Image overlay album with modern technique.
Web Pagination: Display pages of the web using Web Pagination technique.
Music Player App: Build a Music Player App that has a playlist modal and can change background colours randomly.
Scroll Progress Bar: Create a scroll progress bar that increases in width when you scroll down and decreases in width when you scroll up with a smooth transition
Horizontal Sliding Offset: Create a layout that scroll to the left and right using scrollLeft, offsetWidth and scrollWidth properties
BMI Calculator: Create a tool to calculate BMI with a modern way of displaying the results.
Loan Payment Analyzer: Develop a Loan Payment Analyzer for analyzing your loan terms and interests.
Arithmetic Calculator: Build an Arithmetic Calculator app to perform simple arithmetic calculations.
Scientific Calculator: Create a scientific Calculator app to perform sine, tan, cosine, sqrt, cubic root, log, etc.
Analogue Wall Clock with Digital Clock: Build a Analogue Wall Clock with Digital Clock capability
Form With Validation: Build a form element that checks the validation of the input, e.g. if passwords match or if email is properly typed, etc.
Random Colour Generator for Hexadecimal/RGB Colors: Generate random hexadecimal colours and get its equivalent RGB() value and colour
Shopping Cart Project: Create a responsive shopping cart project with Add To Cart feature and accurate total calculations
Search Items Project: Create a responsive search items project that allows the user to type a search term and the function searches through the array of items either by the title or author and returns the filtered items.

By the end of this course, you will have a diverse portfolio showcasing your projects, demonstrating your ability to create functional applications. Join us in Practical JavaScript Projects and unlock your potential as a developer! This course will not only enhance your coding skills but also empower you to bring your creative ideas to life through JavaScript. Whether you aim to pursue a career in tech or simply want to develop your hobby further, this course is your gateway to success.

Who this course is for:

JavaScript developer who wants to learn how to apply JavaScript to projects
A creative mind who enjoys building projects
Freelancers who want to expand their portfolio with dynamic projects.

Build 28 Modern JavaScript Projects - A Practical Guide

What you'll learn

Explore related topics

Course content

Course overview [This part shows what you will get from the course]4 lectures • 43min

Tools to use for this course2 lectures • 9min

Downloading royalty free media2 lectures • 8min

Where to place script tag and why1 lecture • 9min

Creating our Project folder1 lecture • 6min

Responsive Clickable Tooltips8 lectures • 2hr 31min

Emoji reactions counter5 lectures • 1hr 7min

Offcanvas menu7 lectures • 1hr 47min

Pop up Modal Box8 lectures • 2hr 5min

Alert Pop up4 lectures • 58min

Requirements

Description

Who this course is for: