Web Basics — HTML & CSS

2:20 Lesson 1 Your first web page Every page you have ever opened is a file somebody typed. Not drawn, not designed in an app - typed, and… 2:28 Lesson 2 Headings A page of paragraphs all the same size is a wall of text, and a reader bounces off it. Headings are how … 2:07 Lesson 3 Bold, italic, break Until now a tag has wrapped a whole block: this line is a paragraph, this line is a heading. Here is som… 2:17 Lesson 4 Lists Write three items as three paragraphs and the browser has no idea they belong together. Say list, and it… 2:31 Lesson 5 Links Everything you have written so far sits on one page and stays there. One tag turns it into part of the w… 2:18 Lesson 7 A real web page So far you have written pieces of a page. A real page puts them in a frame, and it is the same frame on … 2:29 Lesson 8 Comments and nesting So far every tag has been a neighbour of the last one. Real pages put tags INSIDE tags, and the moment t… 2:17 Lesson 9 Tables This is the tag students most often get wrong, and always for the same reason: they guess the order inst… 2:08 Lesson 10 Forms Everything you have made so far is something to read. A form is different: it is something a visitor use… 2:19 Lesson 11 Sections and classes Small pages are fine as one stack of tags. Bigger ones are not — a visitor sees a title, then the conten… 2:18 Lesson 13 Selectors Last lesson your selector was a tag name, which changes every paragraph on the page. That is often too m… 2:19 Lesson 14 Colours Colour is where a page stops looking like homework. It is also where a beginner picks twelve of them and… 2:16 Lesson 15 Styling text Back in lesson two the browser chose your heading sizes for you. Now you can choose them yourself, with … 2:27 Lesson 16 The box model Two elements refuse to sit where you want them, and nothing you type fixes it. Almost every time, this i… 2:17 Lesson 17 Margin Margin is the space outside a box, and here is the thing about it: on a box with nothing around it, a ma… 2:16 Lesson 18 display You have been watching this since lesson three without a name for it. Some elements take a whole line to… 2:09 Lesson 19 Width and centering Here is something you may not have noticed: a block box is already as wide as the page. It has been all … 1:58 Lesson 20 Flexbox Everything you have built so far stacks downward, because that is what block boxes do. But a navigation … 2:19 Lesson 21 Your profile card Last lesson, and it is a project rather than a new idea. You are building a profile card: a picture at t…