JavaScript Web Projects: 20 Projects to Build Your Portfolio

Learn how to set up your Mac or Linux environment for JavaScript web projects by installing Git, Visual Studio Code, and Homebrew, then configure GitHub hosting.

Install and configure Git and Visual Studio Code on Windows, including Git Bash, default editor setup, and open with code and terminal-in-folder workflows.

Master Visual Studio Code basics by creating a template project with live server and color highlight extensions, using Emmet for html boilerplates.

Learn to test JavaScript with console.log and dev tools, including the network tab, then publish for free using GitHub pages by initializing a repo, pushing changes, and enabling master/main branch.

Build a random quote generator that fetches quotes asynchronously from a REST API, handles CORS with a proxy, and uses a responsive UI with loader, new quote button, and Twitter.

Duplicate the template to Desh Generator, open it in Visual Studio Code, go live, then apply a circuit board background from pattern dot com and import Montserrat to center UI.

Create a styled quote container using Emmet-based HTML, with a quote, author, and social buttons, and implement responsive styling using rem units, rgba colors, borders, and a mobile media query.

Configure the button container with flexbox and top margin to space buttons apart, then style each button with rem sizing, rounded corners, hover brightness, and active press effects.

Fetch quotes from an API or a local quotes array, store the results, and display a random quote with text and author using async fetch and try-catch.

Populate the UI with dynamic quote text and author using DOM manipulation in JavaScript. Wire up new quote and Twitter buttons and adjust font size for long quotes.

Learn to build a reusable loader in JavaScript by toggling a loader and quote container with loading and complete functions, fetching quotes from an api or a local array.

Fetch quotes from API with an async getQuote function, build a URL with method, lang, and format JSON, and handle errors via try-catch while using a proxy to bypass CORS.

Bind API data to DOM elements for quote and author, showing unknown when blank. Resize long quotes and enable Twitter sharing via event listeners.

Add a loading animation using a div with class loader and id loader from a W3Schools example. Use the hidden attribute to toggle visibility during get function, revealing the quote.

Improve code readability by using self-explanatory names like show loading spinner and remove clutter from comments. Review recursion and error handling to prevent infinite loops, and test edge cases.

Learn to implement an infinite scroll gallery with a customizable loading animation, fetch UN flash API images, and reveal descriptions on hover with mobile-friendly responsive design.

Create a custom animated loader using an svg cube, customize colors and size, download the animated svg, and integrate the code or image into your JavaScript web project.

Learn to center elements on the page, implement a loader overlay, and set up a project while applying Google fonts and styling the title.

Create a responsive image layout by styling the image container, adjusting margins and font size, and applying a mobile media query, then prepare API integration.

Learn to fetch random photos from the Unsplash API with fetch, build the request using an API key and count, and implement getPhotos to load images on page load.

Fetch photos from an API, populate a global photos array, and render a dynamic gallery with anchor and image elements. Add a reusable setAttributes helper to keep code DRY.

Learn to implement infinite scroll in JavaScript by using the window scroll event and inner height to load more photos near the bottom, and refine when loads occur.

Implement an infinite scroll feature in JavaScript by loading images with a load event, tracking images loaded and total images, and using a ready boolean to trigger further loads.

Analyze web performance with developer tools to spot slow image loading and poor user experience. Optimize by shipping only necessary data and adjusting initial loads for faster, readable code.

Explore picture-in-picture by triggering requestPictureInPicture on a video element and using the screen capture API getDisplayMedia to share a screen or window, staying on top.

Duplicate the template to start the project, rename it, and set up a video element with id video, height 360, width 640, with controls, and hide it initially.

Explore practical styling of HTML elements, focusing on a button container and button with borders, padding, border radius, 3D box shadows, gradients, and hover and active states.

Learn to add functionality with JavaScript by wiring a video element to display a user-selected screen stream via get display media, then trigger picture in picture with a button.

Explore how async/await works in JavaScript, why await requires an async function, and how top-level await and ECMAScript proposals shape cross-browser code.

Build a joke teller with JavaScript by calling a joke API to fetch a random joke and using a text-to-speech API to narrate it when you press a button.

Style and build a JavaScript web project using a project-specific template, with a container, button, and dynamic audio, and apply a flexbox-centered layout and a left-aligned robot gif background.

Learn to build a responsive layout by adding a tablet-or-smaller media query, center and cover the background, and style a button with hover, active, and disabled states, including box-shadow.

Demonstrate wiring a button to fetch a random joke through a text-to-speech API and play the audio. Learn to obtain an API key, test endpoints, and use a JavaScript SDK.

Explains how to fetch jokes from the Joke API, handle single and two-part jokes, and implement async/await with try/catch to unify responses for a text-to-speech project.

Connect the joke API with a text-to-speech flow in a JavaScript project, fetch jokes, pass them to a Voice RSS speech call, and play the resulting audio to narrate jokes.

Wire the joke button to call the get jokes function on click, toggle the button's disabled state during playback, re-enable after the audio ends, and hide the audio element.

Review two practical topics: organizing JavaScript with a separate voice.js file for the voice RSS API, and protecting API keys by moving requests to a server to keep keys hidden.

Learn to build a light/dark mode web site with a toggle that changes background, a primary orange-to-purple color shift, and icons, while ensuring smooth navigation and updating illustrations.

Explore setting up an HTML/CSS project in VS Code, implementing light/dark themes with CSS variables, applying a hero patterns background, and creating a fixed, smooth-scrolling navigation.

Learn to customize a JavaScript web project by integrating Google fonts like Oswald, applying fonts to headings and navigation, using undraw SVG illustrations, and enabling light/dark mode with icons.

Build a custom toggle switch in JavaScript to switch between light and dark modes by listening for a checkbox change event, then set the data-theme attribute on document.documentElement.

Build a JavaScript theme toggle that updates navigation, text, and images for dark and light modes via a switch theme function, with a refactored image mode using template strings.

Learn how to persist user theme preferences with local storage by setting and getting a theme value, defaulting to dark, and syncing UI switches across sessions.

practice the dry principle by refactoring repetitive JavaScript code into a single toggle dark/light mode function, improving readability and maintainability in a code review.

Recognize imposter syndrome as a natural sign of growth and use practice and time to gain experience. Teach others on Discord to reinforce learning and stay kind while you progress.

Modify a modern website built from a Creative Tim template by adding text, images, and font awesome icons, with animate on scroll effects, staggered card entrances.

Set up a project template from a Tailwind CSS starter kit, download and unzip the package, choose the landing page, and customize HTML, assets, and components for a JavaScript portfolio.

Set up and customize project content by editing the nav title, swapping Font Awesome icons, and adding Unsplash images for background, cards, and team avatars.

Integrate JavaScript in HTML, use the AOS animate-on-scroll library, and manage script load order to avoid AOS not defined errors and improve perceived speed.

Learn to add animation on scroll using the AOS library, configuring delay and duration to animate the title, paragraph, cards, images, and sections with staggered fades and flips.

Learn how script loading and execution order affects performance, exploring script tags, the aos library, and nav bar code; compare async and defer, and optimize above-the-fold rendering.

Create a mobile-friendly, responsive navigation with sliding CSX animations, centralize colors using CSX variables and a color tool, and integrate Google fonts and toggle-ready JavaScript.

Set up an HTML/CSS project using CSS variables and custom properties to apply a cohesive color scheme, and implement an animated hamburger navigation with a toggle in JavaScript.

Design a full-screen navigation overlay with a dark semi-transparent backdrop, fixed position and 100vw by 100vh, using a nav, ul, li, and anchor links with interactive hover effects.

Learn to build an animated hamburger menu that toggles navigation using a change class, a translate X overlay, and smooth slide-in and slide-out transitions for a responsive UI.

Learn to implement staggered CSS animations with JavaScript triggers, using animation shorthand, duration, delay, linear timing, and animation-fill-mode to slide navigation items in from top to bottom and out.

Refactor to dry up code by using a reusable nav animation function, class replace, and template strings, while driving listeners from arrays for efficient overlay and navigation transitions.

Understand how JavaScript runs at load, then uses event listeners to react to actions, updating the user interface as data changes, with frameworks like React or Angular simplifying patterns.

Create a web music player with album artwork, song title and artist, current time and duration, and play, next, previous controls with scrub and infinite looping.

Set up HTML and CSS music player in VS Code using template and image and music folders. Implement styling with border radius, box shadow, object fit cover, Spartan fonts.

Add a progress bar with current time and duration and play, previous, and next buttons using Font Awesome icons, styled with CSS and wired to JavaScript.

Learn to control audio playback in JavaScript by implementing play and pause for a custom icon, using the audio element's play and pause methods, DOM querying, and icon swaps.

Build a JavaScript music player that loads songs from an array of objects, updates image, title, artist, duration, and audio on startup, and enables previous and next with wrap-around.

Populate a functional progress bar by syncing current time and duration from an audio element, using the timeupdate event and destructuring to dynamically display progress in JavaScript.

Format the current time and duration by converting seconds to minutes and seconds with Math.floor and the remainder operator, then update the DOM and enable click-to-seek on the progress bar.

Click the progress bar to jump to song positions with an event listener, width, and offset. Calculate percentage from offset x and width in the audio, then set current time.

Explore a code review that contrasts text content vs innerText and how reflow impacts performance, using dev tools paint flashing to visualize updates.