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.

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.

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 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.

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.

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.

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 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.

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

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.

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.

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.

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.