50 HTML CSS JavaScript projects - HTML5, CSS3, vanilla JS

Create a digital clock using JavaScript to fetch the computer's current time and display it on a beautifully designed webpage with a background image and title.

Build HTML5 clock app in VS Code by creating index.html with boilerplate, setting language and meta tags, and structuring a clock with div.clock and spans for hours, minutes, seconds, am/pm.

Style a digital clock with CSS by linking a stylesheet, centering content, and applying an Unsplash background; design digits with flex, colors, and shadows, then use JavaScript for real-time updates.

Create a JavaScript file, link it in HTML, and manipulate hour, minute, second, and AM/PM elements to build a live digital clock.

Build a dynamic new year countdown with JavaScript that reads the computer's current time and updates a timer inside a container, then begin the HTML part of the project.

Open a new project folder new year countdown in visual studio code, create index.html from the html5 boilerplate, set meta tags and title, and build a countdown updated by JavaScript.

Learn how to style a new year countdown with css by creating a stylesheet, linking it to html, centering content with flexbox and typography, and using pseudo elements.

Create and link a JavaScript file to a web page, get elements by ID, and implement a real-time new year countdown showing days, hours, minutes, and seconds with setTimeout.

Create an analog clock that shows the current browser time with a Rolex logo, using JavaScript to convert time into degree values for the hands.

Set up a clock project in Visual Studio Code, create index.html with an HTML5 boilerplate, and build a clock with numbers, arrows, and a Rolex logo, previewing with Live Server.

Learn to create and style a css clock with a circular clock face, border, shadow, positioned numbers and hands, and prepare for a JavaScript section to sync with real time.

Use JavaScript to fetch the browser date and time, convert hours, minutes, and seconds to degrees, and rotate clock hands with transform, updating every second via setInterval.

Create a full month calendar using HTML, CSS and JavaScript with a header showing the month and date and a shadowed 1–30 day grid dynamically generated by the browser.

Set up a month calendar project in HTML5 with Visual Studio Code, creating index.html, applying HTML5 boilerplate, meta tags, and a dynamic 30-day grid with weekdays and today highlight.

Learn to style a month calendar with CSS by linking a stylesheet, resetting margins, centering the container, and styling header, weekdays, and day cells with colors and hover borders.

Build a dynamic month calendar with vanilla JavaScript by linking index.html to index.js, computing the current month and date, and rendering days with proper alignment and today highlighting.

Create a rotating image gallery that automatically changes every 3 seconds, with next and previous buttons, using JavaScript timers, event listeners, and CSS transforms.

Create an HTML5 page with an image container of eight span-wrapped images for CSS transform rotation, then add prev and next buttons to control the gallery using Lauren Pick photos.

Master creating a CSS-driven rotating image gallery by linking a style.css, centering with flex, applying 3D perspective and rotateY transforms, and styling absolute-positioned images and navigation buttons.

Create a rotating image gallery with JavaScript by linking an image container, applying transform and perspective, and using next and previous buttons plus a setTimeout slideshow with timer reset.

Create a blurred background pop up that appears from the top with a transition, including an email input, join button, and close icon, restoring the page on close.

Explore css foundations for a background image scroll effect: link a stylesheet, style the body, set a fixed center image, and prepare for zoom and opacity on scroll.

Implement a JavaScript driven background image scroll effect by linking a script, selecting the background image element by its id, and updating its opacity and background size on window scroll.

Create a real-time character counter for a text area with a 50-character limit using JavaScript, displaying total and remaining characters as you type.

Build a real-time character counter with html, css, and vanilla js. Use an html5 boilerplate in visual studio code, add a text area with max length 50, and display remaining.

Discover how to create a css real-time character counter by linking a css file, centering a container, styling a text area, and building a left-right counter layout.

Create a real-time character counter with JavaScript by linking a script, reading the text area value, and updating total and remaining characters against the max length.

Create a mini calendar that displays the current date by using JavaScript to fetch the computer's date and update the page. Start with the HTML structure in the next section.

Set up an HTML5 calendar page in Visual Studio Code, create a calendar container with month, day, date, and year placeholders, and prep for CSS styling and JavaScript rendering.

Create and link a style.css file, reset margins, center a calendar container, then style the body with slate blue and calendar with white background, rounded corners, and a box-shadow.

Add JavaScript interactivity to the mini calendar by linking index.js, selecting elements by ID, and updating month name, day name, day number, and year from a date object using toLocaleString.

Build a random password generator with a display, a copy icon, and a generate button. Learn to copy to clipboard and show a copied notification.

Create a random password generator project in Visual Studio Code, implement an HTML5 boilerplate, container, input, copy icon, and generate button for future CSS styling.

Create and link a CSS file to style a random password generator, center content, design a pink container with inputs, icons, a button, and a bottom-right alert.

build a vanilla javascript random password generator: create and link a script, generate a 14-character password from chars, display in an input, and copy to clipboard with a notification.