60 HTML CSS JS projects - HTML5, CSS3 and vanilla JavaScript

Build a modern age calculator using HTML, CSS, and vanilla JavaScript. Learn to create the HTML structure, style with CSS, and dynamically compute ages from a date input.

Create the age calculator html5 scaffold with an html5 boilerplate, a container form, and a date input for birthday. Show results in a paragraph and note upcoming css styling.

Style the project with CSS by creating and linking style.css, center a shadowed container, and build a labeled input with a calculate button and an age result area.

Create a JavaScript age calculator by wiring index.js, attaching a click event, validating birth date, computing age with current date methods, and displaying the result.

Create a tip calculator with bill amount and tip percentage inputs, use JavaScript and a button to calculate the total, and style it with CSS for a modern design.

Set up the tip calculator html structure in a new project folder, add inputs for bill amount and tip percentage, a calculate button, and a total display.

Create style.css and link it to index.html, then style the tip calculator container, inputs, and button, including hover effects and a bold total display.

Build a JavaScript tip calculator by wiring index.js, linking it to HTML, and using an event listener to read bill and tip inputs and display the computed total.

Build a recipe book app that fetches recipes from a free API, obtains an API key, and displays different recipes with varying ingredients on each refresh.

Create an index.html in Visual Studio Code, set up an HTML5 document with meta tags, and build a recipe list with images, ingredients, and a review link, planning responsive design.

Style the recipe book app with css, creating a header, shadowed recipe items, image on the left, hoverable buttons, and a flexible, mobile-friendly layout using media queries.

Turn a static recipe book into a dynamic JavaScript app by fetching ten random recipes from the Spoonacular API and rendering images, titles, ingredients, and links.

Create a dice roll simulator with a central dice, a roll button, animation, and a history list. JavaScript generates a random number, updates an array, and displays results with CSS.

Learn to build the html structure for a dice roll simulator, including a heading, dice display, roll button, and roll history, with html boilerplate and a live server preview.

Learn to add and link a new CSS file for the dice roll simulator and style the body, h1, dice, button, and roll history list with colors, borders, and transitions.

Create a JavaScript dice roll simulator by wiring index.js to the HTML, triggering a roll animation on click, generating a 1–6 random result, updating the dice face and history list.

build a pomodoro timer with start, stop, and reset, counting down from 25 minutes and alerting when time is up, using css styling, event listeners for buttons, and javascript setInterval.

Build the Pomodoro timer interface by creating HTML structure, applying CSS styling, and adding JavaScript functionality, including a timer display and start, stop, and reset buttons.

Style the pomodoro timer with a centered container, prominent title and timer, and start, stop, and reset buttons featuring hover effects and smooth transitions.

Learn to build a functional pomodoro timer with vanilla JavaScript by wiring DOM elements, setting up index.js, and using setInterval to update a 25-minute timer with minutes and seconds formatting.

Build a rock, paper, scissors game using html, css, and vanilla JavaScript, with clickable rock, paper, or scissors, randomized computer choices, and tracks user and computer scores.

Create the HTML portion of a rock, paper, scissors game, including an H1 title, a three-button controls, and a scores display, with boilerplate and viewport setup.

Learn to style a rock paper scissors game with CSS by creating a style.css, linking it in HTML, centering content, and applying colors and hover effects.

Build a rock paper scissors game with vanilla JavaScript by wiring up buttons, generating a random computer choice, and implementing a playRound function to determine winners and update scores.

Create a stopwatch with start, stop, and reset controls that show milliseconds, seconds, minutes, and hours. Use setInterval and clearInterval, style with CSS, and update the display with JavaScript.

Create an HTML stopwatch page with a timer div and three buttons (start, stop, reset) inside a stopwatch folder. Learn the HTML structure and prepare for CSS and JavaScript interactivity.

Create a CSS file linked to HTML to center content, style a pink timer with shadow, and craft responsive buttons with hover, transitions, and disabled states.

Build a JavaScript stopwatch by wiring an HTML page with index.js, linking timer elements and start/stop/reset buttons, and using setInterval to format elapsed time into hours, minutes, seconds, and milliseconds.

Build a weather app with an input and a get weather button, fetch weather data from open weather API, display temperature, description, icon, humidity, and wind speed, with error handling.

Build a weather app UI using HTML, CSS, and vanilla JavaScript by scaffolding an index.html file in Visual Studio Code and constructing a container, form, and weather data sections.

Learn to style a weather app UI with CSS: create and link style.css, design a centered, shadowed container, inputs, button, icon, temperature, and responsive details using flexbox and media queries.

Build a weather app with JavaScript by creating a script file, linking it to HTML, and fetching city weather from the open weather map api using async/await and try-catch.

Create a responsive image search app using the Unsplash API, featuring a search input, show more button to fetch additional images, and image descriptions that open on Unsplash.

Create an html5 boilerplate for an image search app in Visual Studio Code, add a header and a search form with input and button, plus an image results area.

Style the image search app with a linked style.css, then implement a responsive, flex-based layout for the search form and results, including hover zoom and media-query breakpoints.

Learn to build a vanilla javascript image search app that queries the Unsplash API with user input and displays results. Use a show more button to load additional pages.