The Web Developer Bootcamp 2026

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.

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.

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 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.

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.

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.

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

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.

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 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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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 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.