Lesson 1 / 7

Welcome to HTML & CSS: The Building Blocks of the Web

Every web page you have ever visited is built from two languages working together: HTML (HyperText Markup Language) describes the content and structure of a page — headings, paragraphs, images, forms — and CSS (Cascading Style Sheets) describes how that content should look. Neither is a “programming language” in the sense Python or JavaScript are — there are no loops or variables here (well, CSS has a limited form of variables, covered later) — but they are the absolute foundation everything else on the web sits on top of, including the JavaScript course on this site.

Your first HTML page

<!DOCTYPE html>n<html lang="en">n<head>n    <meta charset="UTF-8">n    <title>My First Page</title>n</head>n<body>n    <h1>Hello, Tutoline!</h1>n    <p>This is a paragraph.</p>n</body>n</html>

Save this as index.html and open it directly in any browser — no compiler, no server, no installation required. This is one of the most beginner-friendly things about web development: your very first file is immediately viewable.

Anatomy of a tag

Most HTML elements come in pairs — an opening tag like <p> and a matching closing tag </p>, with content in between. A few elements, like <img> and <br>, are “self-closing” and never wrap content at all.

Adding CSS

<style>n    h1 {n        color: teal;n        font-size: 32px;n    }n</style>

CSS can live inside a <style> tag in the page itself, inline on a single element via a style attribute, or — the standard, recommended approach for anything beyond a quick test — in a completely separate .css file linked with <link rel="stylesheet" href="styles.css">. Keeping structure (HTML) and appearance (CSS) in separate files is a core best practice you will see followed throughout this course and in virtually every real project.

What you will build across this course

By the end of this course you will understand semantic HTML structure, forms, the CSS box model, modern layout with Flexbox and Grid, and how to make a page look right on both a phone and a desktop monitor — the exact skills the JavaScript course assumes you already have when it starts manipulating the DOM.