Learn JavaScript by Creating 10 Practical Projects

build a to-do list app featuring add, complete, delete tasks with local storage persistence; learn to design a card-like ui and a linear gradient background using html.

Build the HTML portion of a to-do list app in Visual Studio Code by creating index.html, linking style.css and script.js, and wiring up image assets for checked and unchecked states.

Style a to-do list app with css to center the card, apply a gradient background, and craft responsive rows with hover effects, inputs, buttons, and checked states using before pseudo-elements.

Learn to build a dynamic to-do list with JavaScript by manipulating the DOM, storing tasks in local storage, and implementing add, show, check/uncheck, and remove interactions.

Build a note taking application with multiple sticky notes that save to browser local storage and persist after refresh, with html structure and css styling.

Apply CSS to reset margins, set box-sizing to border-box, implement a left-to-right gradient background, style a fixed add button, and design a note card with a toolbar and text area.

Build a note taking app in HTML, wiring index.html, styles.css, and script.js, integrate font awesome icons, and create a fixed add button, note container, tools, and a textarea.

Learn how to build a dynamic note taking application in JavaScript by creating nodes, handling user input, and persisting data with browser local storage.

Build a password strength checker using JavaScript and HTML in this preview, featuring a password input, show/hide toggle, and real-time strength updates (weak, medium, strong).

Build a password strength checker UI using HTML, CSS, and JavaScript in Visual Studio Code. Import the password arrow PNG and set up the container, input, button, and strength display.

Style a password strength checker using a reset CSS, a centered flex container, and a 400px password input with an icon button; prepare the message display for JavaScript control.

Implement a client-side password strength checker in JavaScript by binding input, message, and strength elements; listen for input, compute strength by length thresholds, and add a show/hide password toggle.

Learn to build a random password generator app with generate and copy features, and options to include uppercase, lowercase, numbers, and symbols, with adjustable lengths up to 30.

Build a random password generator interface with html, css, and javascript. Include length range slider (10–30), length display, checkboxes for lowercase, uppercase, numbers, symbols, and google icons copy button.

Explore css styling for a password generator app: reset and box sizing, center layout, a 500px card with rounded corners, inputs, range, copy icon, and a hoverable generate button.

Learn how to build a JavaScript password generator by wiring DOM elements, sliders, and checkboxes for lowercase, uppercase, numbers, and symbols; generate and copy passwords with a click.

Build an age calculator app with HTML, CSS, and JavaScript by creating a container, form with birth date input, a calculate age button, and a dynamic weeks result display.

Build an age calculator app by entering a date of birth in the required format, tapping calculate age, and viewing age in months, weeks, days, hours, minutes, and seconds.

Learn CSS styling for the age calculator app by editing style.css, resetting defaults with the universal selector, centering a 600px container, and styling inputs, buttons, and the result card.

Build a javascript age calculator by wiring a form with id age calculator, preventing default submit, parsing a birth date input, and computing age in years, months, and days.

Build the random paragraph generator app in JavaScript, with a generate button that outputs five, nine, or ten paragraphs and alerts on zero; an 11 value shows one random paragraph.

Create a random paragraph generator with HTML, CSS, and JavaScript by building a card layout, an input, a generate button, and a dynamic display using DOM methods.

Learn to build a random paragraph generator interface by styling with CSS resets, typography, a gradient background, a card layout, and input and button styles.

Develop a random paragraph generator in JavaScript by wiring up user interface elements, implementing a shuffle algorithm, and rendering 1–N shuffled paragraphs in the data container with input validation.

Build a digital piano application that plays notes via piano keys using an external sound file and styles the user interface, starting with the html part.

Create a functional digital piano app using HTML, CSS, and JavaScript by setting up files, importing sound assets, and wiring buttons to play mp3 notes with a playsound function.

Build a background color changer using HTML, CSS, and JavaScript that updates the body color on click by generating a six-digit hexadecimal color and applying it.

Build a hex color generator using HTML, CSS, and JavaScript. Create a color container, display the six-digit hex code, and generate random colors with a button.