The 2025 JavaScript Course: Build Modern JavaScript Projects

Explore how to use the CSS box-shadow property to create outer and inner shadows, control offset, blur radius, spread radius, and color, including multiple shadows to layer effects.

Explore the justify-content property to align flex items along the main axis using values like flex-start, flex-end, center, space-between, and space-around, with practical demonstrations and a note on outer spacing.

Connect non-standard fonts by hosting fonts locally with @font-face or by using third-party sources like Google fonts. Learn about font formats and browser support for reliable web typography.

Explore arrow functions and compare them with function declarations and expressions, showing how to convert to concise one-line bodies, omit braces and return, and handle single arguments.

Learn how the weather app displays current temperature, humidity, wind, and pressure for a selected city, with a five-day forecast and dynamic imagery.

Create the weather project in vscode by building index.html, style.css, and script.js, adding fonts and images, and implementing a page with a search box, today’s weather, and a five-day forecast.

Learn to style a weather interface using font-face with open sans, gradient background, and a responsive weather block with flex layout, inputs, and placeholders.

Learn to use the before pseudo-element to display humidity, wind, and pressure icons, and build a responsive five-day forecast with flex layout, icon sizing, and subtle transparency.

Connect to the open weather map API to retrieve current weather data and a five-day forecast by city name, using fetch, an API key, and metric units for Celsius.

Bind weather page elements by class names and display city, date, humidity, wind, pressure, temperature, and icon; fetch data on enter and update the page with New York 22°C.

Display humidity, wind direction, wind speed, and pressure data for New York, convert wind degrees to cardinal directions, and format temperature with plus signs and rounding.

Build a five-day weather forecast by city id using API endpoints, fetch data every three hours, filter for daily 12:00 entries, and display icons and updates on the page.

Build a five-day weather forecast by adjusting the day of week logic, handling date objects, and converting seconds to milliseconds. Render forecast items with dynamic icons and city data.

Map weather condition IDs to icons with a weather_images array and update the page’s weather image based on API results for cities like London and New York.

Implement geocoding API to fetch five city suggestions as users type, parse results with JSON, and build a weather query using city, state, and country codes.

Populate a datalist with city options from a geocoding api, wire it to the input, and initialize weather for the selected city with a blur transition and 404 error handling.

Learn to build a piano project from scratch using XHTML and JavaScript. Explore clickable keys, melody selection such as Happy birthday, tempo control, and letter-note options.

Build a virtual piano in HTML and JavaScript, setup project folders, create white and black piano keys, and implement song selection, tempo controls, and play button.

Style a piano interface with CSS and flexbox to center content and use the full viewport height. Apply typography, borders, shadows, and carbon fiber textures while adjusting sizes for resolutions.

Learn to style a piano keyboard with CSS, creating white keys and borders, and position black keys between whites using relative and absolute layouts.

Build a virtual piano in JavaScript by loading seven octaves of A1-A7 note files from the sounds folder, and generate white and black keys with a dynamic init process.

Create an interactive piano with a playSound function that loads audio from the sounds folder using each key's data attribute, and toggle a piano-playing class on mousedown, mouseup, and mouseleave.

Explore building an interactive piano keyboard with three radio buttons that control which tags appear, using a keyboard map to map numbers and letters to notes across octaves.

Map keyboard input to a virtual piano by listening for keydown, extracting the last letter from event.code (with shift), playing the sound, and preventing repeats with event.repeat.

Learn how to optimize JavaScript event handling by unifying mouse down, mouse up, and key down events into a single press key function using the event object, reducing code duplication.

Implement an autoplay piano feature: select a song from a dropdown, set tempo, and press play to hear note sequences with octave handling using intervals and DOM events.

Implement tempo-controlled playback for a browser piano using interval as 300 divided by tempo, switch between jingle bells and happy birthday, and disable the play button during songs.

Build a vanilla JavaScript image slider using HTML and CSS for modern projects. Enable manual and automatic slides, responsive sizing with object-fit images, and icon-based controls via Font Awesome.

Build a JavaScript image slider by managing an images array and a current index, implementing next/prev navigation, a play/pause auto-play with setInterval, and icon toggling for controls.

Create and configure a canvas element with an id, width, and height, then draw on its 2d or 3d context using JavaScript to render lines, circles, squares, and 3d shapes.

Set up a starter web project in Visual Studio Code with a canvas element, assign an id, width, and height, and center it with a border for visibility.

Learn how to draw lines on the canvas by setting the starting point, moving to x1,y1, drawing to x2,y2 with lineTo, and rendering with stroke via the context.

Learn to draw and edit rectangles on a canvas using stroke, fill, and clear operations. Set x, y, width, and height to create outlines and fills, then erase with clearRect.

Apply styles to lines and rectangles using stroke style for color and line width for borders, and use fill style to set rectangle fills on the canvas.

Learn to draw circles and semicircles on the canvas using the arc function with x, y, radius, start angle, and end angle, converting degrees to radians via pi.

Create a cute panda by drawing circles and semicircles on the canvas, using the Begin Path function to practice essential canvas techniques.

Create a panda on a canvas by drawing arcs and circles with begin path, fill, and stroke to form the face, eyes, nose, mouth, and ears.

Explore the global composite operation property on canvas, learn how default source over compares with source in, source out, destination out, and xor to erase or reveal shapes like rectangles.

Save and restore canvas drawings by using get image data and put image data, saving state with the save state button and restoring it with the restore state button.

Build the basic functionality of a graphic editor called Paint using JavaScript and canvas, practicing brush, eraser, circle, line, and rectangle tools with color, size, and save options.

Build a simple paint page with sections: options, toolbar, and canvas, featuring save and undo buttons, tools (brush, line, rectangle, circle, eraser), and a canvas set to 800 by 600.

Split the screen into paint and options areas, style the canvas with 900px width and border, and implement a flex, image-based toolbar for a cohesive UI.

Learn to build a canvas drawing tool in JavaScript by selecting the canvas and drawing lines with mouse events. Adjust size and color via inputs and reflect the tool.

Explore implementing a line tool with smoothing via line cap and line join in a canvas app: manage mousedown, mousemove, and mouseup; save/restore canvas; switch tools with begin path and stroke.

Build a rectangle tool with drag-to-draw, computing width and height from the start point, then add a circle tool using radius distance and an eraser via canvas destination-out.

Implement save and undo features for a canvas: add a safe button to download image via a data URL and manage an undo history with a save-states array and ctrl+z.