20 Web Projects: HTML, CSS & Javascript

Preview a CSS-only animation project built with HTML and CSS, featuring three moving items, and learn how to showcase it in your portfolio for clients, family, or friends.

Create an HTML file and structure for a CSS animation project, using a live server extension to auto-refresh, and set up a container with ring elements for animation.

Learn to style with CSS by linking a style.css file to HTML, applying a reset, flexbox centering, and animated ring elements with before pseudo-elements.

Preview introduces a login form project with fast-moving line animation on the button and elegant input field effects, all rendered in glass styling over a background image.

Create a functional login form in HTML by building a login box, title, and form with username and password inputs, plus an anchor and four spans for animations.

Create a CSS-driven login page with a full-viewport background and a centered login box. Implement animated floating labels, responsive input styling, and a hoverable button to enhance interactivity.

Design a creative food website using HTML and CSS, featuring navigation, a defined font family, circular elements, and a button, ideal for showcasing a portfolio.

Open the food website project, create index.html, and build a four-link navigation with hash anchors; import the emetic font from Google fonts and set up the initial page content.

Learn to create and connect style.css to HTML, use rem units and Google Fonts, center content with flex, position images, build circular elements, and style navigation links.

Create a flip card using HTML and CSS and learn a 3D hover effect. The card reveals ninja traits like strength, endurance, willpower, speed, and teamwork with a fill animation.

Begin the html portion of the flip card project by creating index.html, setting up a container with front and back sides, and using divs with aria-label and role='image' for accessibility.

Master a 3d flip card with front and back faces using css transforms, perspective, and hover effects, and implement animated progress lines plus a centered circular image.

Preview the fifth project in the 20 web projects course as you build a playful text color effect, with selective colored letters set in red, while following along with me.

Build the HTML basics by creating an index.html, setting a writing effect title, adding a heading and paragraph, and using a span to color some words with CSS later.

Learn CSS basics by creating and linking style.css, styling a heading with flexbox centering, and animating a gradient before element for a dynamic heading.

Explore a water animation project built with html and css, featuring the word water with moving water inside. Learn to create this engaging effect without javascript.

Start the water animation project by opening the folder, creating index.html, and building a basic HTML structure with a content div and two water elements to be styled in CSS.

Create a CSS-driven water wave effect using clip-path polygons, animate with keyframes, and style text with transparent color and a blue WebKit text stroke, while centering content with flexbox.

Learn to implement a hover effect with HTML and CSS in project seven, featuring a circular button with moving colors that you can reuse on websites and apps.

Create index.html and apply the basic HTML structure. Set the title to hover effect and add a div with class order, a hover me button, and two span elements.

Learn to create and style a CSS file, connect it to HTML, and build a centered circular button with hover effects, gradients, and hue-rotate animation.

build an email sender form using html, css, and javascript, featuring a styled background, inputs, and a submit button, and learn how to send an email within a web project.

Build an index.html with a container, building image, and a form for sending emails, including inputs for full name, email, device, and a message textarea with placeholders and required attributes.

Style the project with a linked css file, gradient backgrounds, and a flex layout. Implement a vertical form inside a white container with a purple rounded button and hover effects.

Learn to send an html form as an email via formspree, configure the endpoint and post method, and implement a fetch-based ajax flow with javascript.

Create a simple QR code generator with HTML, CSS, and JavaScript that turns any URL or text into a QR code and verify it by scanning with a phone camera.

Build the html scaffold for a qr code generator: create index.html with a container, a title, a text or url input, a qr image box, and a generate button.

Create and link a CSS file, reset defaults, apply a two-color linear gradient, center content with flex, and style a vertical container with a JavaScript-driven image box.

Create a JavaScript QR code generator by wiring script.js to HTML, fetching DOM elements, and generating the QR image from the input using a QR server URL on button click.