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 […]

HTML Structure, Elements and Semantic Tags

Common elements <h1>Main Heading</h1>n<h2>Subheading</h2>n<p>A paragraph of text.</p>n<ul>n <li>First item</li>n <li>Second item</li>n</ul>n<img src=”photo.jpg” alt=”A description of the photo”>n<a href=”https://tutoline.com”>Visit Tutoline</a> Headings run from <h1> (most important, generally used once per page) down to <h6>. The alt attribute on <img> is not optional in any serious sense — it is read aloud by screen readers for visually […]

Forms and Links

A basic form <form method=”post” action=”/submit”>n <label for=”name”>Name</label>n <input type=”text” id=”name” name=”name” required>nn <label for=”email”>Email</label>n <input type=”email” id=”email” name=”email” required>nn <button type=”submit”>Send</button>n</form> Every <input> should have a matching <label> connected via for/id — this is not decoration, it is what lets a screen reader announce what a field is for, and it also makes clicking […]

CSS Selectors and the Box Model

Selectors p { color: navy; } /* every <p> */n.highlight { background: yellow; } /* any element with class=”highlight” */n#main-title { font-size: 40px; } /* the one element with id=”main-title” */nnav a { text-decoration: none; } /* <a> elements inside <nav> */ A class (.name) can be reused on many elements; an ID (#name) should […]

Flexbox and Grid Layout

Flexbox — one dimension at a time .nav-links {n display: flex;n gap: 24px;n align-items: center;n justify-content: space-between;n} Flexbox arranges items in a single row or column and distributes space between them — it is the right tool for a navigation bar, a row of buttons, or centering one thing inside another, which used to require […]

Responsive Design and Media Queries

The viewport meta tag <meta name=”viewport” content=”width=device-width, initial-scale=1″> Without this single line in your <head>, mobile browsers render your page at a fake desktop-width viewport and then zoom it out to fit — making everything technically visible but tiny and unusable. This tag is not optional for any page meant to work on a phone, […]

Common Mistakes and What’s Next

Mistake: nesting divs instead of using semantic tags A page built entirely from generic <div> elements works visually but tells a screen reader (and a search engine) nothing about its structure. Reach for <header>, <nav>, <main>, and <article> wherever they genuinely apply, covered back in Lesson 2. Mistake: relying only on color to convey meaning […]