Web Project Workshop: 20+ HTML & CSS Websites in Action

Download and install visual studio code for windows, accept the license, and launch the editor to begin web development.

Discover essential Visual Studio Code extensions for web development, including auto complete tag, Prettier code formatter, live server, path IntelliSense, color highlight, and CSS navigation.

Configure your code formatter by selecting the prettier code formatter in settings and enabling autosave on focus change, so changes save automatically when you switch windows.

Create a simple student ID project to kick off web development with HTML and CSS, including a course name, an AI-generated photo, and a sample ID.

Create a new project folder, html and css files, link style.css, and preview with a live server to build a student card with a header and random user photo.

Learn CSS fundamentals by building a centered student card: reset margins, use border-box with flexbox, set a dark background, style header and avatar with borders and shadows.

Create a simple links page that shows a photo with name and role and includes YouTube, GitHub, Instagram, LinkedIn, and email links you can later use to build your page.

Set up a new folder for an html and css powered links page, including index.html, style.css, and an avatar, and preview live while featuring Jane Doe and social links.

Import the inter font from google fonts, reset margins and padding, and apply box-sizing border-box. Build a centered avatar card with a white links panel, rounded corners, and hover styles.

Kick off the Blogger Postcard project by building a blog postcard with image, title, and description. Proceed to coding, noting that no hover effects are included.

Set up index.html and style.css to build a blog post card with an image, a title, and an excerpt, then preview it via a live server.

Apply a CSS reset and border-box, then build a centered blog card layout with a soft background, white content, rounded corners, and hover shadows for read more.

Build a practical timeline to teach positioning concepts, absolute and relative, while tracing a web developer career path from intern to senior frontend developer, grounded in fundamentals.

Code an html timeline project by creating a timeline folder with index.html and style.css, linking css, and previewing changes with a live server in visual studio code.

Import a Google font, reset margins and box sizing, apply the font, center a timeline with a 600px max width, and add circular before bubbles.

Build a simple newsletter sign-up form with a subscribe button and email input, using basic HTML and CSS concepts, illustrating how it fits into future projects.

Create and scaffold newsletter subscription page with index.html and style.css, link the css, build a subscription form with an email input and subscribe button, and preview it with live server.

Reset margins and paddings and apply border-box to control layout. Style a newsletter subscription form with a centered flex layout, theme colors, placeholder styling, and hover effects.

Create a recipe project with a dish photo, name, ingredients, and step-by-step instructions 1 to 5 to show how to make it.

Code an html recipe card by creating index.html and style.css, linking styles, and building a garlic recipe with ingredients and instructions using lists.

Apply CSS styling to create a centered recipe card with a zeroed margin and padding, border-box, image fit, border radius, shadows, and cohesive text and layout.

Create a poetry layout project to learn HTML and CSS by coding around the poem Ice and Fire by Robert Frost.

Create boilerplate HTML, set up index.html and style.css, link the stylesheet, and launch a live server to render Robert Frost's fire and ice with h1 and spans.

Import and embed fonts like Playfair Display and Roboto Slab, ensure a single font import, and apply layout resets, colors, and typography to style headings and poetry with decorative quotes.