The Web Developer Bootcamp 2026

Identify what truly matters in the section by focusing on core web concepts, essential tools like VS Code and Chrome, and the distinct roles of HTML, CSS, and JavaScript.

Explore how the internet connects billions of devices via a global network of networks. Learn how data travels over cables and routing infrastructure, enabling services like email and the web.

Explore how the web fits inside the internet, using URLs and HTTP to request and receive web resources through a browser, with clients and web servers handling requests and responses.

Explore the request/response cycle: a browser sends an HTTP request, receives HTML, CSS, and JavaScript instructions from a server, and renders the webpage; view page source reveals the underlying code.

Compare front end and back end roles by tracing http requests and responses, and learn that every webpage uses html, css, and javascript across client and server sides.

Learn what HTML, CSS, and JavaScript do and how they work together to create webpages, describing content, styling, and interactivity in a browser.

Set up your cross-platform developer environment for the web development bootcamp by installing Chrome and VS Code, plus optional tools like Spectacle, and follow a basic code workflow.

Master the basics of HTML, including paragraphs, headings, lists, anchor tags, and images, plus MDN, HTML boilerplate, Chrome inspector, and a VSCode tip for practical web development.

Learn how HTML marks up documents, defining the structure of web pages with elements and tags, including headings, links, bold and italic text, while distinguishing from CSS and JavaScript.

Create your first html page in VS Code, save it with a .html extension, and view it in a browser with proper opening and closing tags, including bold text.

Discover MDN, a developer-written, open-source encyclopedia of web technologies. Use it for HTML basics, tutorials, and the element reference to understand tags, attributes, and rendering.

Explore the paragraph element (p tag) in HTML, learn how it groups related content, creates block-level spacing, supports nesting, and can wrap text and include bold elements.

Explore the six heading elements (H1–H6) and their role in creating a structured, semantic outline with one H1 per page, using H2–H6 for subtopics.

Explore the Chrome inspector to view underlying HTML, select elements like h1 and the b tag, inspect nested content, and experiment with live edits in the browser.

Explore the HTML boilerplate and skeleton, including the doctype, html, head, body, and title elements, and learn how metadata and assets like CSS and scripts belong in the head.

Discover how to auto-format HTML in VS Code using the format document command and keyboard shortcut, improving indentation and readability. Optionally enable format on save for HTML, JavaScript, and CSS.

Learn to build unordered and ordered lists with ul, ol, and li, and explore nesting li items to create hierarchical bullet and numbered lists.

Master anchor tags by building hyperlinks with href attributes to links, emails, files, or page sections, using absolute and relative urls to navigate the web.

Learn how the image element, the img tag, embeds pictures with a single self-closing tag, set the src attribute to local or web images, and use alt text for accessibility.

HTML comments hide notes from the browser, letting you annotate code. Use <!-- ... --> and toggle with Command + / in VS Code to comment or uncomment.

Explore HTML5 basics, block vs inline elements, and span and div, along with semantic elements like header, nav, main, section, and article for accessibility, plus Emmet tips in VS code.

HTML5 is not a downloadable upgrade but the latest evolution of the HTML standard, introducing new elements and a set of technologies that enable in-browser storage and 3D graphics.

Explore the difference between block and inline elements and learn how divs and spans function as generic containers to group and style content with CSS.

Explore an assortment of HTML elements, including hr as a horizontal rule and divider, br for explicit line breaks, and sup and sub for superscript and subscript in practical examples.

Discover how HTML entities work, using ampersand and semicolon notation to render reserved characters and symbols like less than, greater than, copyright, and card suits via entity codes.

Explore semantic markup in HTML by using meaningful elements such as main, header, nav, section, article, and footer to replace generic divs, and see how this improves crawlability and accessibility.

Explore core semantic elements like main, nav, section, article, aside, header, and footer to replace generic containers, improve accessibility, and optimize SEO with practical examples.

Learn how screen readers use semantic elements like nav, main, header, and footer and landmarks to locate navigation and content, demonstrated with a live screen-reader comparison.

Explore Emmet, a built-in VS Code extension, that speeds html markup with shortcuts for nested and sibling elements, multiplication, numbering, and dynamic text.

Master the basics of HTML tables and forms, outlining table elements (table, tr, td, th, thead, tfoot, tbody) and form essentials like labels, inputs, buttons, and accessibility.

Explore when to use HTML tables, their historical use, and the elements that build them, then design modern accessible forms with validations and labels for e-commerce, authentication, and signups.

Explore how HTML tables organize tabular data into rows and columns with headers. Learn their history for layout and why they should be tabular.

Learn to build a table using table, tr, td, and th to display heaviest living birds with columns for animal, average mass, maximum mass, and flighted status.

Learn how to structure tables with thead, tbody, and tfoot to clearly define headers, body data, and footers; use semantic markup to improve accessibility and readability in complex tables.

Learn to create table headers that span columns or rows using colspan and rowspan, and build a two-row header with kilograms and pounds under the average mass.

Discover how the form element acts as a container for inputs—text, email, password, buttons, and radios—and learn how its action attribute directs submitted data to a destination via http requests.

The input element powers many form controls by changing the type attribute—from text to color or time—while placeholders guide users and set up future labels.

Explore how the label element links to inputs using id and for, boosting accessibility for screen readers and clickability, and learn an alternative nesting method for labeling form controls.

Understand how HTML buttons behave inside and outside forms, including the button element and input type='submit'. Learn to prevent form submission with type='button', and that outside forms, buttons do nothing.

Understand how the name attribute on inputs defines form data keys, with examples like username, password, and color, and how get requests reveal these name=value pairs in the URL.

Create and submit custom search forms for Reddit, Google, and YouTube by aligning input names with each site's query parameter, and examine how form action affects search results.

Explore checkboxes, radio buttons, selects, and text areas, label them for accessibility, group radios by name, assign values for submissions, and use placeholder and selected options to guide user choices.

Explore range and number inputs, including min, max, and step attributes, with examples like cheese_level, and learn to add a textarea with rows, cols, and placeholder for multi-line input.

Learn how to implement HTML5 form validations using built-in browser constraints like required and min length. Explore pattern validation, email, url, and server-side checks that safeguard data.

Create a marathon registration form that shows core structure and labeling, including first name, last name, email, password, a race radio group, an age group dropdown, and a submit button.

Build a marathon registration form from scratch using HTML inputs, radio groups, a select for age, and accessible labels, with required fields and proper value attributes for form data.

Learn the basics of CSS after HTML, including linking CSS files and styling existing elements, while exploring color systems, text properties, and font-family in CSS.

Explore how CSS describes the visual appearance of HTML content using selectors and properties. Style elements such as h1 and inputs to transform pages and understand cascading style sheets.

Navigate CSS vastness without fear by focusing on core patterns, using the MDN CSS reference for properties like gradients, shadows, and borders, and researching when needed.

Learn how to include css in html, comparing inline styles, style elements, and external stylesheets, and connect a .css file with a link tag in the head.

Explore how the color property styles text using named colors, hex, rgb, and hsl values. Compare background-color with background and apply color and background to h2, buttons, and paragraphs.

Discover how named colors and RGB color systems drive web styling, using additive RGB with 0–255 channels, and color pickers to choose colors before hex.

Explore hexadecimal color codes and the RGB model, learning how red, green, and blue channels map 0–255, with six-digit hex and three-digit shorthand, preceded by #.

Learn why the semicolon at the end of every CSS property declaration is essential, and how omitting it hides styles from rendering.

Learn how to manipulate text using text-align, font-weight, text-decoration, line-height, and letter-spacing, and explore font size and unit concepts that affect typography.

Explore the font-size property and the range of units from pixels to ems, rems, and percentages, noting that pixels are absolute and not recommended for responsive websites.

Use the font-family property to change an element’s font with a comma-separated font stack and fallbacks, relying on web-safe and browser fonts.

Explore advanced CSS selectors beyond basic element styling, including classes, IDs, descendant, adjacent, and attribute selectors, plus pseudo-class and pseudo-elements, and CSS specificity to debug and write better styles.

The lecture introduces key css selectors, including the universal selector, the element selector, and comma-separated grouping, with examples using h1 and h2 and an attribute selector and nth-of-type.

Discover the id selector and how to use the id attribute to connect labels with inputs for accessibility, and to target a single element in CSS with a unique identifier.

Learn the class selector in CSS, using dot notation to group elements and style them collectively as tags. Compare this to the id selector for single elements.

Discover how the descendant selector uses a space to target anchor tags nested inside li, unlike comma-separated selectors, and apply it with a post class to style specific links.

Explore the adjacent and direct descendant selectors in CSS, using the plus sign and the greater-than sign to target elements, with examples like h1 + p and footer > a.

Demonstrates the attribute selector to target elements by attributes like type and href, using square-bracket syntax and variations such as [type='text'], [attr*=''], [attr^=''], and [attr$=''], plus case-insensitive matching.

Learn how pseudo classes act as css modifiers to target element states, applying :hover, :active, :checked, and :nth-of-type to anchor tags, buttons, and post sections.

Explore pseudo elements as modifiers to selectors that select specific parts of elements, such as the first letter, first line, or selection, with browser behavior notes.

Explore how the css cascade uses the order of declarations and style sheets to determine colors for h1s and h2s, with specificity covered next.

Discover how CSS specificity decides which rules apply when conflicts occur, comparing id, class, and element selectors. Use hover and post styles examples and a specificity calculator to diagnose issues.

Explore Chrome DevTools to inspect elements, tweak CSS with real-time edits, and test hover states while understanding specificity and order.

Explore inline styles and the !important rule, and see how inline styling outranks IDs and classes due to specificity. Learn why practices are discouraged and when they appear in code.

Learn how CSS inheritance passes color from the body to child elements, with examples showing when sections, headings, and form controls inherit, or require explicit color or inherit usage.

Explore the CSS box model—border, padding, margin, width, height, and border radius—and see how display and units like pixels, percentages, ems, and rems shape layout.

Explore the CSS box model and how width and height define the inner content area. See divs set to 200 by 200 pixels and observe border-box sizing impact.

Learn how borders define element edges using border-width, border-color, and border-style, with per side controls. Use border-radius to create rounded corners and the border shorthand to set multiple properties.

Explore padding in the box model by learning how padding creates space between an element's content and its border, using padding left, right, top, bottom, or the shorthand padding.

Explore how margin creates outside spacing around an element's border, and how padding differs, using margin top, right, bottom, and left, plus the shorthand and body margins.

Explore the display property, including inline, block, and inline-block behavior, and see how width, height, padding, and margins affect layout.

Revisit css units to understand relative units, especially how percentages relate to the parent for width and height, and how line height uses the element's font size; ems and rems.

Explore ems, a relative unit tied to element’s font size, and see margins and padding scale with it. See how buttons adapt as font size changes, with rems covered next.

Learn how ems can nest and scale with their parent elements, while rems base sizing on the root html font size for predictable document-wide sizing.

Explore a mixed bag of CSS properties, including opacity, transitions, Google Fonts, transforms, the background property, and the position property, and learn when each matters in styling.

Learn how the alpha channel in RGBA colors governs background transparency from 0 to 1, and how this differs from the element-wide opacity.

Master the position property in CSS, including static, relative, absolute, fixed, and sticky values, and learn how top, right, bottom, left, and positioned ancestors shape layout.

Explore css transitions by animating property changes on hover, from background color to border radius, with duration, delay, and timing functions like ease, linear, and cubic Bezier curves.

Explore the power of CSS transforms, learning rotate, scale, translate, and skew, with transform-origin and 3D options like rotateX and rotateY, plus combining multiple transforms for dynamic effects.

Learn to build a simple css hover button effect using transforms and transitions, centering a button with flexbox, styling with a Roboto font, borders, colors, and a glowing hover state.

Explore how the background property acts as a shorthand for background color, image, size, position, repeat, and more, and learn how to use center, cover, and no-repeat to control visuals.

Explore Google Fonts, a free resource of font families, by embedding a link and applying font-family in css to achieve Roboto headings and Montserrat body.

Style top navigation bar with a 2px bottom border, uppercase text, and 30% width; embed railway from Google fonts, set weight 800, and tune size and padding with Ms.

Master flexbox concepts in css to lay out and distribute space, and use media queries for responsive websites, focusing on understanding over memorizing.

Master CSS flexbox to distribute space inside a container and create flexible layouts, with elements that flex, resize, and align in rows or columns.

Explore flexbox basics by applying display: flex to a container and using flex-direction to control the main axis and cross axis, including row, row-reverse, column, and column-reverse.

Explore justify-content in flexbox to control how items distribute along the main axis, from flex-start to flex-end, center, space-between, space-around, and space-evenly, depending on flex-direction.

Learn to use flex-wrap with wrap and wrap-reverse to wrap items along the main axis in rows or columns, and map the main and cross axes.

Explore how align-items controls cross-axis alignment in flexbox, using flex-start, flex-end, center, and baseline, with row and column layouts and wrap behavior.

Explore how align-content and align-self control space on the cross axis in wrapping flex layouts, using space-between, space-around, flex-start, flex-end, and center.

Explore how flex-basis sets the initial size, and how flex-grow and flex-shrink control proportional growth and shrinkage of items in a flex container, with wrap and min/max width examples.

Explore the flex shorthand for setting flex grow, shrink, and basis in one declaration, with a demo featuring a main content area and sidebars.

Learn to build a single responsive site that adapts to screen size and orientation using CSS media queries, shaping layouts from four-up to two-up and stacked cards.

Learn how media queries power responsive design by using min-width and max-width, combining ranges with and, and targeting orientation to adapt layouts.

Apply media queries and flexbox to build a responsive navbar that stacks at breakpoints around 768 pixels and centers middle links while keeping left and right sections.