Learn the fundamentals of HTML by building a small example project that covers the most important HTML elements, including headings, paragraphs, lists, images, and links.

Learn what html is and how it structures web content with elements, opening and closing tags, and content. Explore the anatomy of an html element and how browsers render it.

Explore the essential HTML document structure, including doctype, html, head, and body, and learn to set a page title and visible content with proper indentation.

Learn to markup text using headings from h1 to h6, paragraphs, and semantic formatting with strong and em. Explore comments, bold and italic text, and practical examples for real-world HTML.

Learn to build lists in HTML with ordered and unordered lists using ol, ul, and li elements, and structure content with p elements and clear parent-child relationships.

Learn to embed images with the HTML img element using src and alt attributes, set size with width and height, and declare language with lang and encoding with meta charset.

Learn to create hyperlinks in HTML with the anchor element and href, linking internal pages like index.html and blog.html, or external sites, including opening links in a new tab.

Learn to structure pages with HTML5 semantic elements—nav, header, article, and footer—and group content with container elements to enable meaningful, accessible layouts.

Explore semantic HTML by assigning meaning to elements like nav, header, footer, article, and p, contrast with div, and learn how semantic markup improves accessibility and search engine optimization.

Install essential VS Code extensions for HTML and CSS, including image preview, color highlighter, and auto rename tag, plus live server for instant, auto-reloading pages.

Build semantic HTML for the first coding challenge, organizing images in an img folder and creating an aside with a 75x75 related posts list.

Build a reusable product component in HTML with an article, image at 250 by 250, price, description, details, a link, and an add-to-cart button for an e-commerce shoe store.

Learn the basics of CSS, apply styles to HTML content, continue building your project, and grasp the theoretical concepts behind how CSS works.

Explore cascading style sheets (CSS) and how they style and lay out HTML content. Learn terms like selector, declaration, property, and value, and how CSS rules form styles.

Explore inline, internal, and external CSS, learn when to use each, and connect HTML to a CSS file with the link element in this hands-on project.

Style text using six CSS properties—color, font size, font family, text transform, font style, line height, and text align—applied via external CSS rules and selectors to headings and lists.

Combine selectors to apply the same font-family across elements with a single rule. Use descendant selectors to target nested elements and consider maintainability when encoding HTML structure.

Learn to name elements with id and class attributes and select them in css using hash and dot selectors. Understand why ids are unique and classes are reusable.

Explore how CSS represents colors with the rgb model, hex notation, and rgba, then apply color, background-color, and borders.

Explore css pseudo-classes to style list items and other elements, using first-child, last-child, and nth-child to target children, applying bold, color, or italics on odd or even patterns.

Learn to style hyperlinks in CSS using the link, visited, hover, and active pseudo-classes. Apply color, text decoration, and typography changes to create responsive, accessible link states.

Explore chrome devtools to inspect html and css in real time, using the elements and style tabs to test changes and simulate hover or active states.

Explore how conflicting selectors resolve CSS properties when multiple rules target same element. Learn about cascade and specificity, including id, class, and element selectors, inline styles, and the important keyword.

Learn how inheritance passes color, font-size, and font-family from body to children, while borders and other properties are not inherited; universal selector applies to all elements with the lowest priority.

Tackle challenge #1 by extending your HTML and CSS from the fundamentals, implement hover effects for links and buttons, refine typography, borders, and list styles, and organize code with classes.

Explore the CSS box model, including content, border, padding, and margin, and learn how width, height, and the fill area determine final element size.

Apply the css box model by using padding to create inner space and margins to separate elements, implement a global reset with the universal selector, and explore collapsing margins.

Learn to size elements with CSS by applying height and width, understand the box model, manage padding and vertical centering, and make images responsive with percentage widths and auto height.

Center the page by placing content in a fixed-width container and applying auto margins on both sides. Use a 700-pixel width and ensure children align inside the container.

Apply box model knowledge to center an 825-pixel shoe article, reset global styles, and build a full-width button with a top border for hover effect.

Explore the differences between block-level and inline boxes and how display: block, inline, and inline-block shape width, margins, and line breaks. See practical demos with anchors, images, and text elements.

Explore how css absolute positioning removes elements from the normal flow and places them with top, bottom, left, and right relative to the viewport or a relatively positioned container.

Explore how pseudo-elements style content not present in the HTML, such as the first letter or first line. Learn how after, before, and adjacent selectors function.

Learn practical CSS problem solving by googling effectively and reading documentation, using resources like Stack Overflow and MDN to implement features such as a cursor change and centered nav links.

Learn practical debugging and asking questions skills for web development by identifying HTML and CSS bugs, using validators and diff checkers, and sharing code on CodePen for help.

add a sale label in the product block and create six color swatches beside the price, using absolute positioning, relative containers, inline-block layouts, and letter-spacing.

Learn to build layouts using floats, flexbox, and CSS grid to create structured page layouts.

Explore what layout means in web design and compare three core CSS approaches—float, flexbox, and CSS grid—explaining when to use each for page and component layouts.

Explore how the float property works by building a two-column layout with floated header and sidebar, observe text wrap around floated elements, and compare floats to absolute positioning.

Learn to clear floats using the clearfix hack and the after pseudo-element to fix collapsed header height in float layouts, avoiding the outdated empty div workaround.

Build a simple layout with header, article, aside, and footer inside a 1200px container; float the article and aside (900px and 300px), then clear the footer with clear: both.

Fix layout spacing by applying box-sizing: border-box globally, replacing the default content-box, and use a universal selector reset to ensure consistent width and padding behavior across elements.

Build a float-based layout to align an image, product info, and details in side-by-side boxes, applying box-sizing, margins, and float techniques for a responsive, real-world webpage.

Apply display: flex to a container to arrange eight flex items, then explore vertical and horizontal alignment using align-items and justify-content, including center and space-between.

Explore how flexbox enables one-dimensional layouts, distributes space automatically, and aligns items using the flex container and flex items along the main and cross axes with gap and justify-content.

Learn how to align flex items using align-items and justify-content along the main and cross axes, override with align-self, and control spacing with margins and the gap property.

Explore the flex property in css, including flex grow, shrink, and bases. Learn to use the shorthand flex for sizing flex items and filling container space.

Learn to replace floats with flexbox in a blog post by turning the main header into a flex container, justify content space-between, and use gap.

Build a simple flexbox layout by creating a flex container that places a 300-pixel aside beside the article with a 75-pixel gap, while the header and footer stay fixed.

Apply flexbox to replace floats and create a three-element side-by-side product layout, using gap, justify-content, and align-items to align elements and let widths auto-adjust.

Discover how to build layouts with CSS Grid by turning a container into a grid, defining columns and rows with grid-template-columns, using gaps, and ensuring items stretch to fill cells.

Explore the theory and terminology of css grid, including grid containers, items, lines, cells, gutters, and tracks, and learn key properties to create 2-dimensional layouts alongside flexbox.

Explore how to size grid columns and rows with the fr unit, using repeat to create equal or proportioned tracks, and how auto and explicit/implicit rows affect layout.

Discover how to manually place and span grid items in CSS grid using grid column and grid row, with span and minus one tricks to reach the end.

Master aligning grid items and tracks in CSS Grid using justify content, align content, justify items, and align items to position tracks inside the container and items inside cells.

Build a two-dimensional block post layout with CSS grid, spanning header and footer across two columns, while using flexbox for small components and integrating grid gaps for clean spacing.

Convert a flex-based layout to a CSS grid solution, preserving colors and structure while fixing the first column at 250px and using 1fr for the remaining columns in two-dimensional grid.

Learn a practical web design framework with typography, color, spacing, and images, apply key CSS rules to a small project, and become a developer who can design professional interfaces.

Open the design starter folder to analyze the HTML and CSS, including grid-3-cols and semantic elements, then apply web design rules to improve typography and add green accents.

Explore the distinction between web design and web development, and learn how good design boosts trust, value, and user goals, guided by website personalities and core design ingredients.

Explore typography essentials for web design, comparing serif and sans-serif typefaces, choosing safe, popular fonts, and adjusting sizes, weights, line length, and alignment to boost readability.

Apply modern typography to a minimalist chair shop site using Inter from Google Fonts. Set font weights, a type scale, font sizes, and line height for a clean interface.

Design vibrant, accessible websites by selecting a main color and gray palette that match your site personality, using tints, shades, and accent tools to ensure accessible contrast.

Choose a teal green base color from Open Color, apply accessible contrast to text and buttons, and implement reusable button styles with hover effects and a green page accent.

Learn to use four image types—product photos, storytelling photos, illustrations, and patterns—to support your message, crop and pair images with text, and optimize for 2x high-resolution screens.

Choose a single high-quality icon pack and use scalable SVG icons or icon fonts to match your typography. Avoid mixing packs and ensure icons support features, buttons, and bullet lists.

Explore implementing SVG icons in HTML and CSS using heroicons, create feature blocks with 24 by 24 icons, and enhance product cards with icon cues for time, durability, and environment.

Learn how shadows create depth in web design, from skeuomorphic to flat design 2.0, and apply rules for shadows on boxes, buttons, and cards with hover and glow.

Learn to create realistic CSS shadows for product cards using the box-shadow property, including offset, blur, optional spread, color with opacity, and text-shadow for typography.

Explore how border-radius shapes design tone from serious to playful by matching corner roundness to typography, and apply it to buttons, images, icons, and sections.

Apply border-radius to images and sections, testing values like 12px and 50px for consistent rounding. Use corner-specific rules to zero out certain corners and create rounded buttons with large radii.

Explore how white space enhances readability and navigation by spacing sections and groups, applying the law of proximity, avoiding lines, and using a CSS rhythm of multiples of 16 pixels.

Establish visual hierarchy using position, size, color, borders, and shadows to guide attention. Emphasize titles, buttons, and data points, and de-emphasize labels through white space and color contrast.

Analyze and improve visual hierarchy in a small design project by applying white space, a fixed spacing system, and CSS adjustments to sections, headings, and cards.

Learn how ux design shapes the user experience by aligning user and business goals, using familiar patterns, descriptive headlines, simple language, and effective content strategies to create intuitive web interfaces.

Discover the website personalities framework and how seven personalities guide design choices, from typography and colors to images, shadows, and layout, for consistent, high-quality real-world websites.

steal like an artist by drawing inspiration from design sites, adapt the best parts to your startup pages, and apply guidelines, patterns, and components to build responsive websites.

Explore common website components and layout patterns, including sliders, testimonials, pricing tables, and navigations, and build them with CSS flexbox and CSS grid to boost design confidence.

Learn to design web pages by turning basic elements like text, buttons, images, and forms into reusable components and layouts, then assemble final pages with patterns.

Build a beautiful accordion component in HTML and CSS using starter files and inline styles, with a single open state and flexbox gap and column direction for clean spacing.

Build a responsive accordion with css grid and flex, style items with shadows and padding, and reveal content by applying an open class that shows text and green borders.

Build a floating carousel component by recreating a blue carousel with an enlarged image using transform: scale, shadowed navigation buttons, and dot indicators, all inside a centered 800px green-background container.

Develop a responsive carousel controls system using absolute positioning, transform translate centering, and flex containers, with left/right navigation buttons and dot indicators.

Create a semantic HTML table from scratch using table, thead, tbody, tr, th, and td, and explore when tables are appropriate for tabular data versus CSS grid.

Style a fixed-width table, center it in the viewport, and apply borders with collapse for a clean look. Use zebra stripes with nth-child and color the header for readability.

Build a simple pagination component with previous and next buttons, page links, and dots, featuring a hover green background, centered alignment with flexbox, and an active current page style.

Explore layout patterns and section components for web design, including navigation, hero sections, footers, call-to-action areas, and feature rows, with patterns like rows, grids, z-patterns, f-patterns, and responsive single-column layouts.

Build a full-viewport hero section with a background image, centered content, and a call-to-action button using CSS basics such as flex layout, a container utility, and viewport height units.

Build a responsive hero section by vertically centering the content with absolute positioning and translate, use a cover background image with a dark gradient overlay for contrast.

Build a practical web app layout using HTML and CSS grid to arrange nav, menu, section, main, and aside. Explore a two-column inbox-style interface with a responsive viewport layout.

build a responsive web app layout by marking up a five-button menu, styling with flexbox and grid, and organizing ten email cards with vertical gaps and scrollable content.

Apply your HTML, CSS, and design skills to build a real-world website, combining theory and practice with CSS techniques and best practices to elevate your toolkit to an intermediate level.

Define the project and audience, plan content and sitemap, sketch layouts, design in the browser with HTML and CSS, test, optimize, launch, and maintain the live site.

Define and plan a real-world marketing website for Omnifood using HTML and CSS, mapping audience goals, content, and a one-page layout with hero, sections, and a call-to-action.

Sketch the initial page by defining hero, logos, how it works, meal cards, testimonials, and a gallery, following content with a z pattern and iterative sketches.

Begin the design and development phase by structuring HTML and CSS folders, wiring up style.css, establishing a typography and color system, and embracing responsive design basics.

Explore responsive design principles to make webpages adapt to any screen size using fluid layouts, responsive units, flexible images, and media queries; compare desktop-first and mobile-first approaches.

Discover how max-width and rem enable responsive layouts by adapting to container size and the root font size. Use the 62.5% value to respect user browser settings and simplify calculations.

Build the two-column hero for the Omni food project with a right image and left text, using CSS Grid, responsive image sizing, and rem-based width.

Style a hero section with typography, color palette, and spacing using rem units; center content with a grid, and implement hover transitions and inner-border button effects.

Select Rubik with weights 400–700 to shape an approachable hero, assemble a delivered meals component with six overlapping customer images, and ensure accessibility through contrast checks.

Build a responsive header with a left Omnifood logo and right navigation using semantic HTML5 elements, flexbox, and padding to support a future sticky, scroll-friendly layout.

Learn to build semantic navigation with a ul and li structure, style anchors with flex, hover transitions, and a call-to-action button, ensuring accessible, responsive navigation.

Design a reusable css grid system by exporting grid variations like grid two cols and grid three columns, paired with a centered container for responsive layouts.

Build the how-it-works section using a responsive grid that alternates text and image in a Z pattern, with big step numbers, structured headings, step boxes, and reusable containers.

Increase the impact of the how-it-works section by styling large text, light gray colors, and precise spacing, while organizing reusable CSS in a general.css file. Center visuals using flexbox and absolute positioning with before and after pseudo elements to create decorative circles and subtle layering with z-index.

Add a featured-in section between the hero and the how it works section, centered in a 1200-pixel container with five logos; grayscale them with filter brightness and opacity.

Build a responsive meals section with two card components featuring images, meal names, icons for calories, NutriScore, and rating, tags for vegetarian, vegan, and paleo, and a three column grid.

Continue building the meals section by styling icons and flexbox-aligned cards. Add meal-tags with color variations and ensure consistent image aspect ratios for responsive cards.

In part three of building the meals section, implement a diet list with icons, style with flex and grid, and add a centered all recipes link with a subtle hover.

Create a full-bleed testimonials section using a two-column layout: left a 2x2 grid of testimonials and right a photo gallery, with figure, blockquote, and responsive spacing.

Build a responsive testimonials gallery, part 2, with 12 images in a three-column grid using figure elements, hover scale with overflow hidden, and tuned spacing and color contrast.

Build the pricing section with two side-by-side pricing tables, features grid, and a reusable plan-header, plan-name, plan-price, and plan-text. Highlight the call-to-action and per-month, per-meal pricing.

Learn to style pricing tables with background colors, border radius 11px, padding, and centered grid items; build a best-value ribbon with pseudo elements and fine-tune spacing.

Finish building the pricing section with four feature blocks, icons, titles, and descriptions. Style circular icons, refine the grid, and add a plan-details aside with tax and cancellation messaging.

Build a centered call-to-action section with a 2/3 content area for the signup form and a 1/3 image panel, including accessible image role.

Build and style the call-to-action form with text and email inputs, labeled via id and for, a select with options, and a two-column grid with padding and color-contrast.

Style the cta-form elements with a descendant selector, resizing labels, inputs, selects, and button; enforce font and color inheritance, and implement hover and accessible focus states.

Build a professional five-column footer for the Omnifood site with the footer element, a five-column grid, logo, social links, contact info, and multi-section navigation (account, company, resources).

Style the footer headings, navigation blocks, and links using flexbox and grid, refine colors and typography, adjust spacing and borders, and create a balanced, responsive footer.

Continue building the Omni Food Project and make it fully responsive using media queries, building on fluid grids and responsive units to create a truly responsive real-world website.

Learn how media queries use max-width to create responsive css that adapts across viewports, with examples of breakpoints, conflicting rules, and device testing.

Explore bad, good, and perfect breakpoint strategies, then apply content-driven decisions by using device width ranges and media queries at points where the design breaks.

Apply the mobile viewport tag, organize queries.css, and set em-based breakpoints to adapt the Omnifood layout from desktop to small laptops, switching from three to two columns.

Learn to make real-world websites responsive for landscape tablets by defining breakpoints around 1200px, using rem-based sizing, and strengthening a fluid grid with responsive images and units.

Add a tablet breakpoint around 940–944 pixels to switch to a one-column hero using CSS grid. Adjust padding and typography for logos and inputs, preparing mobile navigation.

Transform the navigation into a mobile menu at a breakpoint by swapping a menu button for a close icon via name attributes, revealing overlay main-nav sliding in from the right.

Improve responsive design for smaller tablets by adding a 44em breakpoint at 704px, converting media queries to ems, and restructuring grids from three and four columns to two, centering content.

Learn to make a real world website responsive for phones by adding mobile breakpoints, switching to a single column, and ordering grid items with css grid and transforms.

Finish the Omni Food website by adding JavaScript for scrolling and mobile navigation, compressing images for better performance, and applying final finishing touches, then launch the project to the internet.

Discover a short introduction to JavaScript and add dynamic web page effects, such as mobile navigation and scrolling animations, using variables, query selector, text content, and event listeners.

Make the mobile navigation work by toggling the header's nav open class on button clicks, using classList.toggle, and ensuring the button stays above the navigation with a high z-index.

Master smooth scrolling by implementing html anchors with id-based links and optional JavaScript enhancements, including cross-browser fixes for Safari and mobile navigation behavior.

Implement a sticky navigation bar with position: fixed and a high z-index, toggled by an intersection observer as the hero section scrolls out of view, with margins adjusted.

Explore browser support, use Can I Use to verify grid and Flexbox support, and apply vendor prefixes; fix Safari flexbox gap with a body class and margins fallback.

Test site performance with Lighthouse in dev tools on desktop and mobile; fix width/height attributes, alt text, color contrast, image sizes, and update the SEO meta description before deployment.

Add a meta description and favicon to your html, create a better page title, and implement iOS, Android icons, and a web manifest for home screen shortcuts.

Master image optimizations for responsive sites by resizing to the largest display size, compressing file sizes, and serving WebP with a PNG fallback using a picture element.

Deploy your project to Netlify by signing up, dragging and dropping your site folder, and configuring a free Netlify subdomain with HTTPS, and optionally custom domains.

Learn to build a signup form using Netlify forms, adding a form name and input names, then deploy to Netlify and manage submissions in the dashboard.

Continue practicing HTML and CSS by recreating sites and tackling more complex interfaces. Build on your skills with JavaScript, React, Node.js, and Jamstack tools like Next.js and 11ty.