Web Design 2026 with HTML & CSS (2026) - Real-World Websites

Master the basics of HTML elements, including start and end tags and empty elements like br. Learn how the browser renders content and standard document structure (HTML, head, title, body).

Create your first web page by writing Hello world in an HTML file, saving with an .html extension in a project folder, and previewing in a browser.

Learn to structure a valid HTML document with doctype, html root, head and body, set the page title, and apply CSS with meta information for fonts and resources.

Learn to structure an HTML document with heading tags from h1 to h6, establish a single h1, avoid using headings to style text, and ensure a clear hierarchy.

Learn to structure content with paragraphs using p tags, insert horizontal rules for breaks, and manage line breaks with br tags. Explore pre-formatted text to preserve spaces.

Learn to format text using HTML elements, including bold/strong, italic/em, mark and small, and inserted or deleted content, plus subscript and superscript.

Learn how comments document your web code, hide from the browser, and help you remember formatting concepts in HTML while writing real-world websites.

Learn how span and div group related HTML content, using a car menu example to show semantic structure and color styling, and understand the index file as the browser's page.

Explore the semantic HTML structure, including header, nav, section, article, aside, and footer, and learn how these elements organize content, layout, and search engine considerations.

Explore how to embed code and quotes in HTML using block code and q tags. Annotate content with abbr, address, and bidirectional direction attributes to control layout.

Learn to create links with the anchor tag and href, open them in a new tab with target, and use the title attribute to guide users.

Learn how to insert images in HTML using the image tag with src and alt attributes, manage file structure, relative paths, and responsive width considerations, including Unsplash sources.

Learn to add a favicon using a link tag with rel icon and type, pointing to an icon file in the icon folder, and convert png to ico online.

Explore building and styling data tables in HTML and CSS, with job title, base pay, and location columns, borders, and border collapse. Use colspan and rowspan to merge cells.

Explore how to implement HTML lists, including unordered and ordered lists with list items, the start attribute, and style types (disc, circle, square), plus descriptor lists.

Explore how forms collect user input in HTML by using the form container, input types such as text, password, radio, and checkbox, and labels linked by for and id attributes.

Learn to create and configure form elements in HTML, including select menus with options, textareas, inputs, and datalists, focusing on value versus label and server data handling.

Learn how block elements start on a new line and occupy full width with margins, while inline elements fit content on the same line.

Identify HTML elements with class and id, apply styles via style sheets, and prefer class over id for styling, using dot to denote classes and hash to denote ids.

Embed content with iframes to display pages, videos, and maps inside your site, using generated embed code and tweaking width, height, src, and fullscreen attributes.

Explore how HTML entities preserve special characters with named or numeric forms for symbols like <, >, and &. Learn how emojis and the utf-8 character set ensure correct rendering.

Learn how to embed audio and video in HTML using the audio and video tags, add controls, provide multiple sources mp3 and ogg, and address browser support and autoplay considerations.

Explore how CSS styles website elements to shape appearance, using hover effects, gradients, grids, borders, and typography as demonstrated on Apple and PlayStation pages.

Explore CSS syntax by defining selectors and declarations, apply color, font-size, and other properties, and use simple selectors, combinator selectors, pseudo-classes, pseudo-elements, and attribute selectors to style HTML.

Learn the three main ways to insert CSS in web pages—inline styles, internal CSS with a style tag, and external stylesheets—and how each method affects scope and reuse.

Declare colors in multiple ways to style backgrounds and borders, using predefined names, rgb/rgba, hex, and hsl, then adjust alpha and border style.

Explore how padding adds space inside an element and how margins create space outside, then define width and height with top, right, bottom, left values or CSS shortcuts.

Explore css specificity and the battle among inline styles, ids, classes, and elements, and master unit types from pixels to viewport-based units while noting the !important override risks.

Explore the CSS box model, including content, padding, border, and margin, and learn how box-sizing: border-box changes width and height calculations.

Explore how different text properties control alignment, decoration, transformation, spacing, and flow, including text align, justify, direction, vertical align, subscript and superscript, wrap behavior, and text shadow.

Master changing font family and font weight with CSS, including bold and lighter options. Learn to use Google fonts and embed fonts through CSS links for web pages.

Design a page with a link and a table, styled via CSS to show link states, hover effects, and transitions. Apply table formatting: width, borders, padding, and alternating row colors.

Master Sass as a CSS preprocessor with features like variables and inheritance, compiled into browser-ready CSS, and leverage Node.js and npm to run a local server for modern web development.

Master Sass fundamentals—variables, mixins, functions, and nesting—while building a modern sign-in form with validation states and a live CodePen preview.

Prepare the seven cars project by extracting assets, opening the folder in code, and initializing npm to create a package.json with dev dependencies for node-sass.

Adopt the seven one architecture for Sass, organizing base, layout, abstracts, components, pages, things, and vendors, with a main file that imports partials to compile a single css.

Apply base styles and typography using lato from Google fonts, set up Sass partials with a main file, and run a live server with parallel npm scripts.

Design and structure a responsive header with a fixed logo, header text, and an explore button, using absolute and relative positioning, clip-path shapes, and iterative styling.

Learn to create a header animation with CSS keyframes move to right with skew, using transforms and translate, and implement interactive buttons with hover, focus, and an after element.

Implement a responsive background video for the header with absolute positioning, using object-fit: cover and overflow hidden, while updating variables and adding icons and utilities for layout.

Create a manual image slider for a car gallery with specs and model text, using radio button navigation, a wide slides container, icons from font awesome, and gradient text styling.

Design and implement a custom grid system by calculating column widths with gutters and margins, applying floats and clear fixes, and then use CSS grid, which is much faster.

Create the in demand deal section using card flip effects, hover-rotate interactions, and front/back panels with car logos, models, specs, and a buy now link to another page.

Design a stylized card by setting a 50rem height, blue typography, and overflow hidden; position the image and logo, and display specs in a two-column grid with icons.

Learn to build interactive 3d flip cards with front and back faces that rotate on hover, using perspective, backface-visibility, and smooth transitions with linear gradient backgrounds.

Craft a top models gallery section with three equal-width car model cards featuring responsive images, model names, prices, and action buttons, with hover effects and centered layout.

Refine web design by styling modals and models with precise positioning, typography, and interactive buttons. Implement hover, active, and focus states, transitions, borders, and box shadows to enhance real-world websites.

Design and implement the racing nature section of a real-world HTML and CSS project, configuring slides, car entries (Huracan Evo Spider, Aventador LP 780-4, Urus), labels, and gradients.

Create a four-service card section in HTML and CSS with icons, titles, and descriptions, featuring a gradient background and a Range Rover image.

Design and refine a service box in a web layout by sizing the icon, using inline-block, applying padding and margins, and adding hover effects with translate, scale, shadow, and transitions.

Design a find us section on the home page with a map image as a centered background, 80% width, 50px vertical padding, 85vh height, cover sizing, and a box shadow.

Design a polished contact section with a validated contact form, including full name and email inputs, validation borders, and a background video for a dynamic front-end experience.

Build and style a contact us form with 85% width, centered layout, formatted inputs and labels, and a custom checkbox with transitions.

Learn to build a testimonials section with a reusable testimonial component, combining image, description, owner, and icon, and cover layout, styling, and responsive alignment.

Design a four-column footer with a centered logo, a footer menu, and a social media icons row. Apply borders, border radius, shadows, typography tweaks, and hover colors using font awesome.

Design a popup modal for car details with left image gallery and right content, including price, buy button, close control, and multiple payment method icons over a blurred overlay.

Learn to build and style a popup with left-aligned images, 100% width, and in-page navigation to section models, including a close icon and payment services layout.

Develop interactive popups by using the css target pseudo-class, hover effects, and transitions to reveal popup content and images for car models like Lamborghini Urus.

Develop a no-javascript, CSS-driven menu with a hamburger icon, a fixed navy background, and a car background, toggled by a checkbox and label, with hover effects and pseudo elements.

Develop a responsive css navigation menu by toggling a checkbox, transforming the hamburger into X with before and after rotations, and styling overlay nav with transitions and gradient hover effects.

Learn how CSS and HTML create responsive web design that resizes, hides, and rearranges content for any screen. Use viewport, media queries, and breakpoints to tailor layouts across devices.

Develop a responsive header and slider using media queries at key breakpoints, including turning the header red below 800px, and implement rem-based typography with a pixel-to-rem function.

This lecture demonstrates building responsive cards by adjusting typography and padding at breakpoints, and refining grid layouts, image sizing with object-fit, and conditional margins to ensure cards display across widths.

Implement responsive models by adjusting the width to 50% to display two cars at larger sizes, then switch to a single-column layout as the viewport shrinks.

Implement responsive behavior for the racing by nature slide by adjusting the breakpoint to keep icons at the bottom around 800–850 px, and set navigation to 30% on home page.

Implement responsive service boxes in a four-column grid, switching to two columns as space allows, with breakpoints at 600px and 650px, and fine-tune margins, padding, and typography for readability.

Implement a responsive map section centered on the page, fix the 100% viewport height, and set a starting width of 720 pixels with a 60% viewport height.

Implement a responsive contact us form that expands to fill available space as the viewport resizes, keeping the background video playing, with widths set to 70% and 100% at 600px.

Explore how to build a responsive testimonial by adjusting font sizes at breakpoints, using root font size, and tweaking transforms for mobile layouts.

Learn to build a responsive footer that adapts the logo size, padding, and two-, four-, and one-column layouts across breakpoints like 750px and 1100px.

Learn to build a responsive popup by adjusting font size, padding, and breakpoints to align content and images across viewports.

Make the menu responsive by tweaking margins, icon box size, and font scaling with ems and rem units. Demonstrate a first page's practical responsive design for real-world websites.

Build a header for the shows page by creating a new HTML5 boilerplate and designing a full-viewport header with a centered background, a logo, navigation, and a reusable down-arrow component.

Build a description box with headings, engine details, and interactive buttons and links to explore specs, styled with a background and Font Awesome icons.

Create a fixed background between the header and next section by wrapping an after-header container, setting full width and 80vh height, and applying a background image with fixed attachment.

Design a car specs section by building left and right spec groups, detailing engine specs, fuel consumption, CO2 emission, acceleration, transmission, and price for a real-world website.

Develop a two-column grid layout for engine specs, with 50%/50% columns, padding, and layout adjustments to refine the specs UI.

Build the car design section by adjusting the background container and section heading, centering content, and integrating images, videos, and a nav button for a cohesive web design.

Create a reusable same brand models section that organizes car models into a grid with image, title, and body, applying gradient text, hover effects, and responsive styling.

Build the same brand models by making car images 100% width and styling the name, title, and body with responsive font sizes, uppercase text, and green right borders.

Build shopping tools section with icons and interactions, including a car icon, a location tool, hover transitions, and typography rules like uppercase text, font size 1.3 rem, and bold weight.

Build the footer by reusing components in your HTML and CSS, refining existing code without reinventing the wheel. Practice responsive design, clone and redesign interfaces, and learn online solutions.