The Foundations of Modern Web Development: A Complete Guide to HTML, CSS, and Sass

—

by

vadiq_23
in

Whether you’re just starting out in web development or looking to solidify your foundational knowledge, understanding HTML and CSS is the essential first step. In a lecture from Harvard’s Web Programming with Python and JavaScript course, instructor Brian Yu walks through the core building blocks of every website on the internet — from your very first “Hello, World!” page to fully responsive, styled web applications.

What Is HTML?

HTML (HyperText Markup Language) is the language used to describe the structure of a web page. It tells the browser what content to display — buttons, text, images, forms, tables — and how that content is organized. Every HTML document is composed of nested elements, each defined by opening and closing tags like <h1> and </h1>.

A basic HTML page always starts with <!DOCTYPE html>, which tells the browser the page uses HTML5, the latest version. Inside the <html> element, there are two main sections:

  • <head> — Contains metadata about the page, such as the title shown in the browser tab.
  • <body> — Contains all the visible content the user sees on the page.

The Document Object Model (DOM)

Browsers interpret HTML as a tree-like structure called the Document Object Model (DOM). Each HTML element is a node in this tree, with parent and child relationships. Understanding the DOM is crucial — especially later when JavaScript is used to dynamically modify page content.

Common HTML Elements

HTML offers a rich set of elements for organizing and displaying content:

  • Headings — <h1> through <h6>, from largest to smallest, used to structure content hierarchically.
  • Lists — <ol> for ordered (numbered) lists and <ul> for unordered (bulleted) lists, both using <li> for each item.
  • Images — <img src="photo.jpg" alt="description"> displays images. The alt attribute provides text for screen readers or when the image fails to load.
  • Links — <a href="https://example.com">Click Here</a> creates hyperlinks, connecting pages together — the foundation of the web.
  • Tables — Built with <table>, <tr> (rows), <th> (header cells), and <td> (data cells) for structured data display.
  • Forms — <form> elements with various <input> types (text, password, radio, submit) allow users to provide information.

Styling with CSS

While HTML defines structure, CSS (Cascading Style Sheets) defines presentation — the colors, fonts, spacing, and layout that make a page visually appealing. CSS works by selecting HTML elements and applying style properties to them.

Three Ways to Add CSS

  1. Inline styles — Applied directly to an element: <h1 style="color: blue;">. Highest specificity but least reusable.
  2. Internal stylesheet — Written inside a <style> tag in the <head>. Applies to the whole page.
  3. External stylesheet — A separate .css file linked with <link rel="stylesheet" href="styles.css">. Best practice for larger projects since one file can style many pages.

CSS Selectors

CSS selectors determine which elements get styled:

  • Element selector — h1 { color: blue; } styles all <h1> tags.
  • ID selector — #header { ... } styles the unique element with id="header".
  • Class selector — .highlight { ... } styles all elements with class="highlight".
  • Descendant selector — ul li { ... } targets list items inside unordered lists.
  • Attribute selector — a[href="facebook.com"] { color: red; } targets links with a specific URL.
  • Pseudo-class — button:hover { background: orange; } changes style when hovering.

CSS Specificity

When multiple CSS rules could apply to the same element, specificity determines which one wins. The order of precedence from highest to lowest is:

  1. Inline styles (highest)
  2. ID selectors
  3. Class selectors
  4. Element type selectors (lowest)

The Box Model: Padding vs. Margin

Every HTML element on the page is essentially a box. Two key CSS properties control spacing:

  • Padding — Space inside the element’s border, between the content and the edge.
  • Margin — Space outside the element’s border, separating it from other elements.

Responsive Design

Modern websites must look great on screens of all sizes — from large desktop monitors to small smartphones. This is called responsive design, and CSS provides several tools to achieve it.

Viewport Meta Tag

Adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> to your HTML <head> tells mobile browsers to use the actual device width rather than pretending to be a desktop screen. This one line alone dramatically improves mobile rendering.

Media Queries

Media queries allow you to apply different CSS rules based on screen size. For example, you can display a red background on wide screens and a blue one on narrow screens — or more practically, rearrange columns, adjust font sizes, or hide elements entirely on mobile.

@media (min-width: 600px) {
  body { background-color: red; }
}
@media (max-width: 599px) {
  body { background-color: blue; }
}

Flexbox

Flexbox is a CSS layout model designed for arranging elements in a row or column. Its key superpower is the flex-wrap property, which allows elements to wrap onto new lines when there isn’t enough horizontal space. This makes it ideal for grids of cards or galleries that need to look good at any width.

CSS Grid

The CSS Grid layout provides precise control over rows and columns. You can define fixed-width columns alongside auto-sizing ones, and control the gaps between them — perfect for dashboard-style layouts.

Bootstrap: CSS Made Easy

Bootstrap is the world’s most popular CSS framework. By linking a single CDN stylesheet, you instantly gain access to beautifully styled components: alerts, buttons, navigation bars, carousels, and more — all pre-built and mobile responsive.

Bootstrap uses a 12-column grid system. You assign each element a column width (e.g., col-lg-3 for 3 units on large screens, col-sm-6 for 6 units on small screens). Bootstrap then automatically handles wrapping and reflowing as the screen size changes.

Supercharging CSS with Sass

Sass (Syntactically Awesome Style Sheets) is an extension language for CSS that adds powerful programming features. Sass files use the .scss extension and must be compiled into standard CSS before the browser can use them. The sass --watch command automates this process.

Key Sass Features

  • Variables — Define values once and reuse them everywhere: $primary-color: red;. Change the variable, and every element using it updates automatically.
  • Nesting — Write CSS selectors inside other selectors to mirror your HTML structure, making stylesheets easier to read and maintain.
  • Inheritance (@extend) — Create a base “template” of shared styles (like a generic message box), then extend it for specific variations (success, warning, error) — each inheriting the shared properties while adding their own unique ones.

The Bigger Picture

HTML and CSS are the entry point into a much larger world of web development. From here, the journey continues with:

  • Git — Version control for tracking changes and collaborating.
  • Python & Django — Back-end logic and database interaction.
  • SQL — Structured data storage and retrieval.
  • JavaScript — Making pages interactive and dynamic in the browser.
  • Testing & CI/CD — Ensuring code quality and reliable deployment.
  • Scalability & Security — Building applications that can grow and stay safe.

As Brian Yu puts it: “HTML is a language we’ll use to describe the structure of a web page, and CSS is a language we’ll use to describe the style.” Mastering this distinction — and the tools built around it — is the foundation every web developer needs before tackling the full stack.

This post is based on the introductory lecture of Harvard’s Web Programming with Python and JavaScript course, taught by Brian Yu.