HTML & CSS | ctrl + Q Academy

Interface Architecture: HTML5 & CSS

From your first tag to responsive, accessible, production-quality layouts.

Tier 1: Foundations

Basic HTML

Document Structure & Semantic Elements

Every web page is an HTML document: a tree of nested elements. Semantic elements (<header>, <nav>, <main>, <article>, <footer>) describe the meaning of content, not just its appearance — this helps browsers, search engines, and screen readers understand your page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <header><nav>Navigation links</nav></header>
  <main>
    <h1>Page Heading</h1>
    <p>Body content goes here.</p>
  </main>
  <footer>© 2026</footer>
</body>
</html>

Basic HTML

Text, Links, Lists & Media

Content elements form the vocabulary of a page:

<a href="..."> creates a hyperlink.
<ul>/<ol> with <li> create unordered and ordered lists.
<img src="..." alt="..."> embeds an image — the alt attribute is required for accessibility.
<form> with <input>, <select>, and <button> collects user input.

Tier 2: Styling Fundamentals

CSS Core

Selectors, Specificity & the Box Model

Every rendered element is a rectangular box made of content, padding, border, and margin, from the inside out. CSS selectors target elements to style: element selectors (p), class selectors (.card), ID selectors (#header), and combinators. When rules conflict, specificity decides which wins: inline styles > IDs > classes/attributes > elements.

box-model.css

.card {
  box-sizing: border-box; /* padding & border included in width */
  width: 320px;
  padding: 20px;
  border: 1px solid #cbd5e1;
  margin: 16px;
}

CSS Core

Flexbox: One-Dimensional Layout

Flexbox lays out children of a container along a single axis. Set display: flex on the parent, then control alignment with justify-content (main axis) and align-items (cross axis). It's ideal for navbars, toolbars, and centering content.

flex.css

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

Tier 3: Advanced Layout

Critical Spec

2D Layout with CSS Grid

CSS Grid controls layout on two axes at once, using grid-template-columns and grid-template-rows to define a coordinate system that child elements can be placed into. It's the right tool whenever rows and columns both matter, like page layouts and card galleries.

Interactive Viewport Container Workbench

Live interface output displays here...

Critical Spec

Responsive Design with Media Queries

Responsive design adapts layout to screen size using @media queries, relative units (%, rem, vw), and flexible layout systems like Flexbox/Grid instead of fixed pixel widths. The convention is to design mobile-first, then add rules for larger viewports.

responsive.css

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Tier 4: Professional Practices

Professional

CSS Custom Properties & Theming

CSS variables (--name) let you define values once and reuse them everywhere, and update them dynamically — this exact site uses them to switch between light and high-contrast themes via [data-theme] attribute selectors.

Professional

Accessibility (a11y) Basics

Accessible sites use semantic HTML, meaningful alt text, sufficient color contrast, visible focus states, and ARIA attributes (aria-label, role) only when semantic HTML isn't enough. Accessibility isn't optional polish — it determines whether real users can use your site at all.

Tier 5: Real-World Practice

Applied

Building a Responsive Card Layout

A card grid is one of the most common real-world layout patterns — product listings, blog previews, dashboards. Combine grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) with a consistent card component so the number of columns adapts automatically to the available width, with no media queries needed for the common case.

cards.css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

Applied

CSS Transitions & Simple Animations

transition smoothly animates a property change (like a hover color or size change) between two states. For more complex, multi-step animation, @keyframes combined with the animation property defines a sequence that can loop, reverse, or run once on page load.

motion.css

.button {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover { transform: translateY(-2px); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.4s ease-out; }

Quiz: Which CSS property changes the direction elements are laid out inside a flex container?

Final Assessment

Ready to test what you've learned?

Take the HTML & CSS certification exam — 8 questions, 70% to pass. Passing unlocks a downloadable certificate with your name on it.