The HTML & CSS Bootcamp 2026 Edition

Learn the basics of HTML, a markup language that adds structure to text with links and headings. See how browsers render marked-up content into web pages.

Master the HTML workflow by writing a local .html file in VS Code, saving changes, and viewing it in a browser without a server, then refreshing to update the page.

Learn how the paragraph element in HTML creates a block of text by using opening and closing p tags, wrapping text in angle brackets, and ensuring proper separation between paragraphs.

Explore the Mozilla Developer Network (MDN) as a comprehensive HTML and CSS reference, tutorials, and documentation, including the HTML element reference and examples that link code to rendering.

Explore Chrome developer tools and the inspector to view HTML elements and CSS, inspect markup, edit content, and toggle styles for live browser-based experimentation.

Structure html documents with a consistent skeleton: doctype html, html, head, and body with a title; use the exclamation point tab shortcut to generate boilerplate.

Learn how to use HTML comments to annotate markup and temporarily disable code, using the standard HTML comment syntax and VS Code shortcuts to toggle line comment.

Explore how headings from h1 to h6 establish document structure, using a single h1 per page and a logical order with h2 and beyond to designate main topics and subtopics.

practice html basics by turning paragraphs into proper html elements and structuring content with h1 to h3 headings, using the cougars.txt starter file for a semantic page.

Learn how to create unordered and ordered lists with ul, ol, and li, nest lists, and understand when to use each for recipes, navigation, or references.

Explore how em, strong, and b elements encode emphasis, significance, and attention in HTML, including when to use m for stress and how CSS can adjust appearance.

Explore how HTML elements nest inside headings, paragraphs, divs, lists, and anchors, and practice analyzing deep nested structures using browser dev tools.

Explore how to use superscript and subscript in HTML and CSS, elevating text for exponents, ordinal numbers, citations, and chemical formulas.

Learn the difference between block and inline elements in HTML, using paragraphs and headings as block examples and inline elements like emphasis and spans, plus how CSS changes layout.

Create links using the anchor tag and href attribute, pairing link text with a destination URL to navigate internal pages and external sites.

Explore relative links and on-page anchors to connect documents and sections. Learn to use ids and hash hrefs for internal navigation within the same page.

Master creating image elements with the img tag, using src for local or external images, and adding descriptive alt text, with best practices for assets folders and decorative images.

Build a pasta recipe web page using headings, images, bulleted and numbered lists, bold text, paragraphs, and internal anchors to sections like community notes.

learn to create html forms by adding basic form controls like text fields and buttons, using input type text for text fields and the button element with labels.

Demonstrates the form element, how to group inputs, and how action and method attributes send data via HTTP requests such as get, post, patch, put, and delete.

Learn how the name attribute assigns data labels to inputs for submission, and how placeholder text guides users with examples like first name and last name.

Learn to properly label form controls by using the label element with a for attribute that matches each input’s id, ensuring accessible, clickable fields and unique field descriptions.

Explore input types by changing the type attribute, from text to password and number, and learn validation and boolean required attributes, plus fields like email, URL, date, and color.

Explore form controls including text areas, range inputs, and checkboxes, with emphasis on labeling and how rows, columns, and steps configure inputs.

Discover how to build dropdown selects and set up radio button groups in HTML forms. Learn about option and value attributes, naming, labeling, and grouping to submit clear form data.

Master building a course landing page form by creating labeled inputs for title, description, level, and publish, wiring IDs and names, enforcing required fields, and simulating data submission.

Compare spans and divs as generic inline and block containers, and show how to target specific text for styling with CSS. Explore inline versus block elements with practical examples.

Learn how divs serve as generic block containers to group content for styling, borders, and layout, complementing spans and inline elements in real-world card designs.

Explore HTML tables built from table, tr, and td, with a table head, table body, and optional table foot for clear structure and accessibility, like a pricing table.

Adopt semantic markup by using meaningful HTML elements like nav, main, and article to replace generic divs, improving accessibility for screen readers and boosting SEO.

Learn how semantic elements like main, header, footer, and nav add meaning to markup, improve accessibility and SEO, and encourage meaningful markup over divs and spans.

Explore how to include CSS, work with color systems and selectors, and understand inheritance to style a basic HTML document for early foundational learning.

Learn how inline styles embed style attributes directly in HTML elements. See the drawbacks of duplication and hard-to-maintain updates, and why more scalable options will be explored next.

Learn internal CSS by embedding a style element in HTML, using CSS selectors to color paragraphs, reducing inline styles, and preparing for external styles as a scalable option.

Link external CSS files to HTML using the link tag with href and rel=stylesheet, enabling a single style source that updates multiple pages when placed in the head.

Learn how code pen enables sharing and forking of html, css, and javascript projects, with a body-only structure and implicit linking between html and css, contrasting it with file linking.

Explore the anatomy of css by learning how to select elements and write property:value pairs inside curly braces; apply properties like color, width, and display: flex.

Learn how the element selector targets all tags by type, like p and a, to apply colors and styles, and preview class, ID, adjacent sibling, descendant, and pseudo selectors.

Complete a quick CSS basics exercise: style h1 with inline color, h2 with internal CSS, and h3 with external CSS, linking styles.css. Explore color systems, hexadecimal, rgba, and opacity.

Learn how the background-color property complements color, applying backgrounds to block-level elements like headings and paragraphs, versus inline elements like anchors, and inspect results with devtools.

Learn to use the MDN CSS reference to explore properties like color and try live previews, and master CSS comments for toggling code and notes.

Explore named colors in CSS, covering the roughly 140 predefined color options for color and background-color, and note readability and future use of hex or rgb.

Learn how rgb color works as an additive system, combining red, green, and blue to produce millions of colors from 0 to 255 per channel, via rgb(r,g,b) syntax.

Explore hexadecimal colors, a compact hex code starting with a pound sign that encodes red, green, and blue in six digits, with three-digit shorthand and color picker conversions to rgb.

Learn how rgba colors and the alpha channel control transparency from 0 to 1, and compare transparent backgrounds with element-wide opacity.

Take a fast color quiz that reinforces RGB and hex concepts, choosing rendered colors from swatches, recognizing hex shorthand, and identifying RGBA transparency using a color picker.

Explore css inheritance by seeing how colors inherit from parent elements, while borders do not; learn when to rely on inheritance to style containers like divs and lists.

Apply CSS color concepts via hands-on exercise: style h1 with RGB red, h2 with RGB blue, h3 with hex green, and use rgba and hex colors with selectors in CSS.

Learn to control text appearance with font-family, size, weight, and alignment, and explore direction, decoration, spacing, and font stacks for cross-machine consistency.

Explore how font size controls text with pixels as the default unit, and how font weight and font style create bold and italic text, including inheritance for nested elements.

Explore how the text-align property controls text alignment, including center, left, right, and justify. Learn how alignment is applied within elements and adapts to direction, such as left-to-right and right-to-left.

Master line-height, letter-spacing, and word-spacing to control text rhythm and readability, using pixel values and scalable multipliers to adapt to font size.

Learn to include custom fonts with Google Fonts, download font files, and apply font weights from 100 to 900 via HTML or CSS, with proper font stacks.

Practice CSS text basics through a code pen exercise, styling h1, h2, and h3 with Indy Flower from Google Fonts, and a paragraph featuring line height and letter spacing.

Learn how the text-shadow property creates magenta neon shadows by offsetting text with x and y pixel values, optional blur, and flexible orders for multiple shadows.

Build a cantilever marketing page to practice typography and layout, using space mono from google fonts, text shadows, line height, a container with percent width, and margins.

Explore text transform and text decoration in CSS, applying uppercase, lowercase, or capitalize, plus underlines, line-throughs, colors, and thickness with shorthand and longhand forms.

Learn how id attributes uniquely label elements and how to target them with the hash syntax in CSS, using the featured review example to highlight single elements.

Learn to use the CSS class selector to target multiple elements with a shared style via dot notation, and compare with one-time ids for unique targets.

Style HTML lists using list-style-type, choosing markers like disk, circle, square, or decimal, and control marker position and images with list-style-position and list-style-image, including none.

Learn how to style anchor elements in HTML and CSS, including visited and hover states, using text decoration, color, and cursor to meet user expectations.

Learn how the font shorthand property can set font family, size, weight, and line height in one line, with examples using Montserrat and a fallback font stack.

Apply practical CSS styling to a leafy sea dragon page by practicing fonts, weights, alignment, and color with IDs, classes, and hover effects, using a starter code pen.

Master the universal selector, using the star to style every element and reset browser styles, while exploring color inheritance and borders across the page.

Explore the attribute selector in CSS to target elements by attribute values, using exact, contains, begins with, and ends with patterns, with practical examples for inputs and links.

Learn to group multiple selectors with the comma to style h1, h2, and h3 together, and reuse rules across classes like tag and score and an id such as featured.

Learn how the descendant combinator uses a space to select elements nested inside another selector, and how the child (direct) combinator uses the greater-than sign to target only direct children.

Explore compound selectors in CSS by combining element, class, and id selectors, note how a space means a descendant, and target multiple classes like score on h2 or h4 elements.

Practice CSS selectors and syntax through a hands-on exercise that targets elements by id, class, attributes, and end-of-link patterns with one rule for color changes.