Advanced CSS and Responsive Design

Multiple Classes to HTML

Multiple classes let you apply several CSS styles to one HTML element by listing class names separated by spaces in the class attribute. This avoids creating a new class for every combination of styles, keeping the code modular and maintainable.

Intuition

Why not write a single class that does everything? Because you often need different combinations of the same basic styles (color, background, underline) across elements. Defining each style as a separate class and then combining them in the HTML lets you reuse those basic building blocks.

How it works

<p class="standard-color standard-underline standard-highlight">Text</p>

Each class refers to a rule in the CSS. The element gets the union of all rules from its classes.

Examples

Three paragraphs needed different treatments:

Without multiple classes – you would need to create a new class (e.g., .highlight-underline) and duplicate the rules.

With multiple classes – apply existing classes directly:

<p class="standard-highlight">Paragraph 1</p>
<p class="standard-highlight standard-underline">Paragraph 2</p>
<p class="standard-highlight standard-underline standard-color">Paragraph 3</p>

Benefits

• Reusability – each class defined once, used many times.
• Modularity – change a single rule to update every element that uses it.
• Semantic HTML – class names describe the style, not the combination.
• Easier maintenance – no need to hunt for duplicated rules.

Exam tip: This technique is essential for writing DRY (Don’t Repeat Yourself) CSS and will be used heavily with Flexbox, Grid, and frameworks like Bootstrap.

Key takeaways

• Add multiple classes by separating names with a space in the class attribute.
• Eliminates the need for combination-specific classes.
• Reduces code duplication and improves maintainability.
• Fundamental for modular, scalable CSS.

CSS Layouts

Layouts control how elements are arranged on the page. Older methods (tables, inline-block, floats) were not designed for the web’s responsive nature. Modern CSS provides Flexbox and Grid as purpose-built tools.

Evolution of layout methods

Demo: the pain of inline-block

A common layout – sidebar + main content – was attempted with display: inline-block.

.sidebar {
  display: inline-block;
  width: 30%;
  height: 60px;          /* forced to align tops */
  background: aqua;
}
.main-content {
  display: inline-block;
  width: 60%;
  height: 60px;
  background: lightgreen;
}

Problems encountered:

• Alignment – the sidebar and main content did not start at the same vertical position; vertical-align: middle failed.
• Height mismatch – fixed heights caused overflow when content grew; removing heights broke alignment again.
• Responsiveness – fixed percentages did not adapt; on narrower screens the layout broke.
• Spacing – margins had to be manually added; no automatic gap.

Exam tip: The demo highlights why inline-block should not be used for page layouts. Flexbox or Grid are the standard solutions.

Modern solution: Flexbox

Applying display: flex to the parent container solved almost everything in one line.

main {
  display: flex;
  gap: 30px;
}

• Sidebar and main content automatically align at the same height (stretch by default).
• No need for height or vertical-align.
• The gap property creates uniform spacing.
• Removing explicit widths causes elements to fill available space; adding width: 30% on the sidebar and letting the main take the rest works naturally.
• The layout adapts to content length without overflow.

Real‑world usage

• Times of India – inspected cards and found display: flex on parent containers.
• Adidas – product listings use display: grid with grid-template-columns: 1fr 1fr 1fr and a gap.

Why it matters

Flexbox and Grid are the foundation of responsive design. Combined with media queries and frameworks like Bootstrap, they allow layouts to adapt to phones, tablets, and desktops with minimal code.

Key takeaways

• Layouts evolved from tables → inline-block → floats → Flexbox/Grid.
• inline-block is brittle for full-page layouts: alignment, overflow, and responsiveness are hard to control.
• Flexbox excels at one-dimensional layouts (row or column).
• Grid handles two-dimensional layouts with explicit row/column definitions.
• Using display: flex on a parent instantly aligns children, handles spacing with gap, and resizes automatically.

Flexbox

Flexbox (Flexible Box Layout) gives a powerful, one-dimensional layout system for aligning and distributing space among items in a container — even when their sizes are unknown or dynamic. Instead of wrestling with floats, inline‑blocks, or positioning hacks, you set display: flex on the parent and let flex properties handle the rest. Its main strength: responsive arrangements that adapt to screen width without media queries.

The Two Axes

Every flex container has a main axis and a cross axis, determined by flex-direction:

Exam tip: Properties that align act on one axis or the other. Mixing them up is a classic trap. Remember: justify-content works on the main axis; align-items works on the cross axis.

Container (Parent) Properties

Apply these to the parent element (display: flex).

flex-direction

Sets the direction of the main axis and thus the order items are placed.

• row (default), row-reverse, column, column-reverse

justify-content

Distributes space along the main axis.

align-items

Controls alignment along the cross axis (single‑line containers).

flex-wrap

Decides whether items wrap onto multiple lines when there isn’t enough space.

• nowrap (default) – force all items onto one line (can overflow).
• wrap – items break into new lines from top to bottom.
• wrap-reverse – items wrap from bottom to top.

align-content

Works only when flex-wrap is wrap or wrap-reverse. It distributes space between flex lines along the cross axis (like justify-content does for rows).

Exam tip: align-items aligns items within a single line; align-content aligns multiple lines when wrapping occurs. If flex-wrap is nowrap, align-content has no effect.

Child (Item) Properties

Apply these to the flex children (items) inside the container.

order

Controls the visual order (default 0). Higher values appear later. Items with equal order keep their HTML source order.

/* Moves .b2 to the end, even if it appears first in HTML */
.b2 { order: 1; }

align-self

Overrides align-items for a single item along the cross axis.

• Accepts the same values as align-items (flex-start, flex-end, center, baseline, stretch).

flex-basis

Sets the initial size of an item along the main axis before any growing or shrinking. In a row layout it acts like width; in a column layout like height. It takes precedence over width (or height) but can be overridden by min‑width/max‑width.

flex-grow

A unitless number that defines how the item grows relative to siblings when there is extra space along the main axis.

• Default 0 (no growth).
• If all items have flex-grow: 1, they share extra space equally.
• An item with flex-grow: 2 gets twice the growth of an item with flex-grow: 1 (not twice the total size).

flex-shrink

A unitless number that defines how the item shrinks relative to siblings when space is tight.

• Default 1 (items shrink proportionally).
• Setting flex-shrink: 0 prevents the item from shrinking below its flex-basis or content size.

flex (Shorthand)

Combines three properties in one declaration:

flex: <flex-grow> <flex-shrink> <flex-basis>;
/* Example: */
flex: 1 1 150px;  /* grow, shrink, basis */

Order of precedence for sizing (highest to lowest):

1. min-width / max-width
2. flex-basis
3. width (or height in column)
4. Content size (if none of the above set)

Worked Example: flex-grow in action

Six items with flex-basis: 120px inside a container:

• .b1, .b2, .b4: flex-grow: 1
• .b3: flex-grow: 5

After available space is distributed, each of the three grow:1 items increased by ~77 px, while .b3 increased by ~385 px (5 × 77). The final sizes: – .b1, .b2, .b4: 120 + 77 = 197px – .b3: 120 + 385 = 505px

Quick Visual: Axis and Alignment

Exam tip: The flex shorthand is almost always preferred over setting flex-grow, flex-shrink, and flex-basis separately. A common pattern is flex: 1 (equivalent to 1 1 0%).

Key takeaways

• Flexbox requires display: flex on the parent.
• flex-direction decides the main axis; all spacing/alignment properties depend on it.
• justify-content controls main axis spacing; align-items controls cross axis (single line); align-content controls cross axis (multiple lines when wrapping).
• order, flex-grow, flex-shrink, flex-basis, and align-self are applied to children.
• The shorthand flex: grow shrink basis is the cleanest way to set item flexibility.
• Use the CSS Tricks Flexbox Cheat Sheet for quick reference — even experienced developers rely on it.

CSS Grid

CSS Grid is a two-dimensional layout system designed for complex layouts that need control over both rows and columns simultaneously. Unlike Flexbox (which excels in one dimension – either a row or a column), Grid handles both with equal power.

The core idea: define a grid container (parent) and grid items (children). Using properties on the parent you create the grid structure, and using properties on the children you position or size them within that structure.

---

Grid Container Basics

To create a Grid layout, set the parent container’s display property to grid. The default behavior creates a single-column grid (items stack vertically).

Defining Columns and Rows

Values can be absolute (px, em), percentage, or fractional units (fr). The fr unit distributes available space proportionally:

grid-template-columns: 1fr 2fr 1fr;  /* second column twice as wide as the others */

Repeating Columns/Rows

Use repeat() to avoid typing the same size multiple times:

grid-template-columns: repeat(4, 1fr);  /* four equal columns */

Min and Max Sizes with minmax()

The minmax(min, max) function lets you set a flexible range for a column or row. It will never shrink below min and never grow beyond max.

grid-template-columns: 1fr minmax(100px, 1fr) 1fr;
/* The middle column is at least 100px wide, but can grow equally with the others */

Gap Between Tracks

Use gap (shorthand) or row-gap / column-gap to add spacing between grid cells.

gap: 10px 30px;   /* row-gap 10px, column-gap 30px */
/* or */
row-gap: 10px;
column-gap: 20px;

Using auto for Content-Based Sizing

A column/row set to auto will size itself to fit the content (no extra space).

---

Grid Lines, Cells, Tracks & Inspection

When you define a grid, the browser creates invisible grid lines that separate rows and columns. These lines are numbered starting from 1 (top-left) and also negatively from -1 (bottom-right).

• Grid cell – the area between four adjacent grid lines (one unit of the grid).
• Grid track – the space between two adjacent grid lines, i.e., a full row or column.
• Grid item – a child element placed inside the grid.

Exam tip: Negative line numbers (-1, -2, etc.) let you reference the last line without knowing the total number of tracks – extremely useful for spanning to the far edge.

Chrome DevTools has a built-in Grid overlay (Layout tab → Grid) that shows lines, track sizes, and area names.

---

Auto Flow & Automatic Track Creation

By default, grid items flow left-to-right, top-to-bottom (row-major). This is controlled by grid-auto-flow.

• grid-auto-flow: row (default) – fills rows first, then new rows are added.
• grid-auto-flow: column – fills columns first, then new columns are added.

When you have more items than explicit cells, extra items create implicit tracks. Their size is controlled by:

• grid-auto-rows – height of new rows (when flow is row)
• grid-auto-columns – width of new columns (when flow is column)

grid-auto-rows: 100px;   /* any new row will be 100px tall */

---

Alignment Inside the Grid

Alignment properties work similarly to Flexbox but operate on two axes: inline (horizontal) and block (vertical).

Aligning Items Within Cells (justify-items / align-items)

These are set on the grid container and affect all items:

Values: start, end, center, stretch (default).

Aligning the Entire Grid (justify-content / align-content)

These move the grid tracks themselves within the container:

Values: start, end, center, stretch, space-between, space-evenly, etc.

Exam tip: *-items works inside each cell; *-content works on the whole grid. They are not interchangeable.

Per-Item Alignment (justify-self / align-self)

These are set on a grid item to override the container’s justify-items / align-items for that one item.

.item1 {
  justify-self: start;   /* align only this item left */
  align-self: end;       /* align it to bottom of its cell */
}

---

Positioning Grid Items

By default, each item occupies one cell. You can make items span multiple cells by specifying start and end grid lines using properties on the child.

Longhand Properties

grid-column-start: 1;
grid-column-end: -1;      /* spans all columns */
grid-row-start: 2;
grid-row-end: 4;          /* spans rows from line 2 to line 4 */

Shorthand with span

Use span <number> to indicate how many tracks to cover without specifying exact end lines.

grid-column: span 2;      /* spans 2 columns */
/* Equivalent to grid-column-start: auto; grid-column-end: span 2; */

You can also combine line numbers and span:

grid-column: 2 / span 2;  /* start at line 2, span 2 columns */
grid-row: 1 / 3;          /* start at line 1, end at line 3 */

---

Grid Template Areas – Visual Layout Design

Instead of manually positioning each item, you can name areas and place items into them. This creates a highly readable, visual layout.

1. On each grid item, give it a name using grid-area:

   .header  { grid-area: header; }
   .sidebar { grid-area: sidebar; }
   .main    { grid-area: main; }
   .footer  { grid-area: footer; }
   

2. On the grid container, define the layout with grid-template-areas:

   .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 100px 1fr 100px;
     grid-template-areas:
       "header header header"
       "sidebar main   main"
       "footer footer footer";
   }
   

Each row of the string corresponds to a row in the grid. The same name repeats across columns to make an item span multiple cells. A period (.) leaves a cell empty.

Exam tip: grid-template-areas is the most intuitive way to build page layouts (e.g., header, sidebar, main, footer). It’s also easier to modify than number-based positioning.

---

Making Grids Responsive with autofit and autofill

Instead of hard-coding a fixed number of columns, you can let the grid decide how many columns fit the container width.

• autofill – creates as many tracks as will fit, including empty ones (good for predictable spacing).
• autofit – creates as many tracks as will fit, but collapses empty tracks (so items stretch to fill the space).

Use with repeat() and minmax() for a fully responsive grid without media queries:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* Each column at least 100px wide, grows equally; extra tracks are collapsed */

As the container width changes, columns adjust their count automatically. This is a CSS-only solution for fluid card layouts.

---

Key Takeaways

• Set display: grid on the parent; use grid-template-columns and grid-template-rows to define structure.
• The fr unit distributes available space proportionally. minmax() and repeat() are essential for flexible grids.
• Grid lines are numbered positively (1,2,3…) and negatively (-1,-2,…); use them to position items precisely.
• Alignment: *-items aligns inside cells, *-content aligns tracks inside the container. *-self overrides on a single item.
• Grid items can span multiple cells using grid-column / grid-row with line numbers or span.
• grid-template-areas provides a visual, easy-to-maintain layout method.
• repeat(auto-fit, minmax(min, 1fr)) creates responsive grids without media queries.
• Always inspect grids using Chrome DevTools Layout tab for debugging track sizes and lines.

Flexbox vs Grid: Overview

Flexbox (Flexible Box) and CSS Grid are modern layout systems that replace older methods like float and positioning. Both make it easy to create responsive designs — containers and items adjust based on available space. Both provide alignment properties along main and cross axes (e.g., justify-content, align-items for Flexbox; justify-items, align-items, justify-content, align-content for Grid).

But they differ in dimensions, control, and content flow.

Key Differences

Live demonstration behavior

• Grid with fixed columns (e.g., grid-template-columns: 1fr 1fr 1fr): items occupy cells in order; the seventh item wraps to the next row within the defined column structure.
• Flexbox with flex-wrap: wrap: items flow seamlessly into new lines, but each line is independent — there’s no “row” alignment across lines. Odd numbers of items distribute space per line.

Exam tip: Flexbox is ideal for distributing a set of items along one axis and letting them wrap naturally. Grid is for aligning items across both axes in a predictable grid.

When to Use Each

• Use Flexbox for simple one-dimensional layouts: nav bars, footers, rows of buttons, cards in a single row/column. Its strength lies in alignment and distribution along one direction (justify-content, align-items, flex-wrap).
• Use Grid for full page layouts where you need control over both rows and columns simultaneously: header, sidebar, main content, footer. Grid defines the overall structure; items are placed into named areas.

Working Together (Complementary)

Flexbox and Grid are not mutually exclusive. Use Grid for the big picture (page structure) and Flexbox for the details (alignment within each grid cell).

Worked Example: Page Layout with Grid + Flexbox

A typical responsive page structure:

Page Container (display: grid)
├── Header (display: flex → justify-content: center, align-items: center)
├── Sidebar (display: flex → flex-direction: column, justify-content: flex-start)
├── Main Content (display: flex → flex-direction: column, align-items: center)
└── Footer (display: flex → justify-content: center, align-items: center)

Grid setup for the page container:

• grid-template-columns: repeat(3, 1fr) — three equal columns
• grid-template-rows: 10% auto 10% — header 10%, main content auto, footer 10%
• grid-template-areas:

  "header header header"
  "sidebar main  main"
  "footer footer footer"
  

• Each child gets a grid-area name matching the template.

Flexbox inside each area:

• Header: display: flex; justify-content: center; align-items: center; gap: 2em → navigation links centered.
• Sidebar: display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 10% → buttons stacked vertically.
• Main content: display: flex; flex-direction: column; align-items: center → paragraphs centered.
• Footer: display: flex; justify-content: center; align-items: center → centered text.

Result: a full-page layout built in seconds, responsive by default (relative units like 1fr and %).

Key Takeaways

• Flexbox is one-dimensional; Grid is two-dimensional.
• Flexbox is content-driven; Grid is structure-first.
• Use Flexbox for alignment and distribution within a container; use Grid for overall page layout.
• They complement each other: Grid for the macro layout, Flexbox for micro alignment inside cells.
• Flexbox wraps items naturally; Grid forces items into defined rows/columns.
• Properties like justify-content behave differently: in Flexbox it aligns items along the main axis; in Grid it aligns the entire grid tracks (use justify-items for aligning items within cells).

Media Queries

Media queries are CSS rules that apply styles conditionally based on properties of the user's device — most commonly screen width, but also orientation, resolution, and more. They are the backbone of responsive design: they let a single HTML page change layout, font sizes, visibility, and other styles at specific breakpoints (width thresholds where the page restructures).

Intuitively: a website that looks great on a 27‑inch monitor would be unusable on a phone. Media queries are the switch that flips the design at the right screen sizes — no JavaScript needed.

---

Syntax and Key Properties

A media query starts with @media, followed by a condition in parentheses, then a block of normal CSS rules.

@media (condition) {
  /* CSS rules go here */
}

Two width‑based conditions are most common:

Exam tip: max-width = “up to and including”. min-width = “starting at and above”. Think of max as a ceiling and min as a floor.

Combining Conditions with and

You can write a range by joining min-width and max-width with the and keyword:

@media (min-width: 800px) and (max-width: 1000px) {
  body { background-color: brown; }
}

This style is active only when the viewport is at least 800 px AND at most 1000 px.

---

How Real Sites Use Breakpoints

Inspecting live responsive sites (e.g., Adidas, Mokobara) reveals multiple breakpoints:

• At ≈1150 px: navigation restructures (menu collapses into a hamburger icon).
• At ≈700 px: search bar moves, layout switches from multi‑column to single column.

These thresholds are defined with media queries in the site’s CSS. The design “breaks” at specific widths and reassembles — hence the term breakpoint.

---

Worked Example: Responsive Grid Layout

Goal: a grid of items that shows 4 columns on wide screens, 2 columns on tablets, and 1 column on phones.

HTML

<div class="grid-container">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

CSS – start with a default (any rules outside media queries apply unless overridden):

.grid-container {
  display: grid;
  justify-items: center;
}

Now add media queries targeting specific ranges:

/* Phone: max-width 750px → 1 column */
@media (max-width: 750px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* Tablet: between 800px and 1000px → 2 columns */
@media (min-width: 800px) and (max-width: 1000px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

/* Wide desktop: min-width 1200px → 4 columns */
@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

What happens when the viewport shrinks:

• ≥1200 px → four equal columns.
• 800–1000 px → two columns.
• ≤750 px → single column.
• Gaps between breakpoints (e.g., 751–799 px) apply no media‑query rules, so the default grid-template-columns (if any) or fallback behaviour takes effect.

The same pattern is used on real e‑commerce sites like Adidas: product grids change from 4‑column → 3‑column → 2‑column at different breakpoints.

Exam tip: Avoid overlapping breakpoints. Use max-width for “up to”, min-width for “from”, and and for ranges. Plan breakpoints at natural content thresholds, not arbitrary pixel values.

---

Other Common Uses

• Images – make images full‑width on mobile, side‑by‑side on desktop.
• Typography – increase font size on larger screens.
• Visibility – hide/show elements (e.g., a hamburger menu icon) based on width.
• Padding and margins – reduce whitespace on small screens.

---

Key Takeaways

• Media queries apply CSS only when a condition (usually viewport width) is met.
• max-width: X = applies to widths ≤ X; min-width: X = applies to widths ≥ X.
• Use and to combine conditions for a range: (min-width: A) and (max-width: B).
• Breakpoints are the width values where the design restructures; inspect real sites to find common ones (e.g., 768 px, 992 px, 1200 px).
• Media queries are purely CSS — no JavaScript required for responsive behaviour.
• They can control grids, images, navigation, colours, and any other CSS property.

Bootstrap

A CSS framework is a box of ready-made tools – pre-written CSS components and classes that speed up styling. Bootstrap is the most widely used CSS framework, especially on older sites. Among sites that use a framework, Bootstrap dominates (Tailwind CSS is gaining on newer projects).

Adding Bootstrap via CDN

• Copy the CDN (Content Delivery Network) link into <head> before your own stylesheet (so your custom CSS overrides Bootstrap).
• Copy the JavaScript bundle <script> into <body> after all content – required for interactive components (dropdowns, carousels, navbars).

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JS (at end of body) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Layout Grid System

Bootstrap’s layout is based on a 12-column grid under the hood (it uses Flexbox, not CSS Grid). Three layers: container → row → col.

• Container (.container) gives a responsive fixed-width wrapper; its max-width changes at predefined breakpoints.
• Row (.row) is a Flexbox container with negative margins to offset column padding.
• Column (.col) automatically takes equal width. Specify width with .col-{number} (sum to 12). Use responsive variants: .col-md-6, .col-lg-4.

Example: three equal columns

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

To control width ratios, use numbered classes: .col-4, .col-3, .col-5 (4+3+5=12). Or mix with .col-auto (width based on content).

Utility Classes

Bootstrap provides shorthand classes for spacing, borders, colors, alignment, etc. Notation: {property}{sides}-{size}.

Examples: mt-3 (margin-top 1rem), px-5 (padding-left/right 3rem), mx-auto (auto horizontal margin for centering).

Borders: .border, .border-top, .border-0, .border-primary, .border-5 (width 5px). Colors: predefined color classes – primary (blue), secondary, success (green), danger (red), warning (orange), etc. Alignment: text-center, justify-content-center, align-items-start, etc. (equivalent to Flexbox properties).

Components

Bootstrap ships with pre-styled components – copy HTML from the docs and modify classes.

• Buttons: use classes .btn, .btn-primary, .btn-warning, etc.
• Cards: .card with .card-img-top, .card-body, .card-title, .card-text, .btn.
• Navbar: .navbar, .navbar-expand-lg, .nav-item, .nav-link. Responsive hamburger menu requires JavaScript.
• Hero sections, forms, icons – all available as examples in the Bootstrap docs.

Exam tip: You do not need to memorise every class; learn how to navigate the documentation and copy‑paste components. The power of Bootstrap is rapid prototyping using pre‑built, professional styles.

Pros and Cons of Frameworks (like Bootstrap)

Key Takeaways

• Bootstrap is a CSS framework: a set of ready‑made classes for layouts, utilities, and components.
• Always link via CDN: CSS in <head>, JavaScript bundle at end of <body>.
• The grid system uses container > row > col with a 12‑column flexbox layout; responsive breakpoints control width.
• Utility classes (m-*, p-*, border-*, etc.) replace hand‑written CSS for spacing, borders, colors.
• Components (buttons, cards, navbar) are copied from docs and customised; interactive ones need the JS bundle.
• Underneath, all Bootstrap styles use standard CSS properties (Flexbox, media queries, colors). Understand the fundamentals to troubleshoot and customise.

Module Summary: Advanced CSS and Responsive Design

Module 5 covered advanced CSS layout and responsiveness — specifically Flexbox, CSS Grid, media queries, and a brief introduction to the Bootstrap framework. The core expectation is to apply these tools to create a well‑structured, responsive website that works seamlessly on mobile and desktop.

Looking Ahead

The next two modules will cover JavaScript — introducing interactivity and dynamic behaviour into websites.

---

Key takeaways

• Module 5 focuses on Flexbox, Grid, media queries, and Bootstrap.
• Responsive design uses media queries to support mobile-friendly layouts.
• Bootstrap components and grid can accelerate responsive implementation.
• JavaScript (interactivity) is the next major topic.