Web Basics — HTML & CSS

2:11 Lesson 1 Your first web page A web page is made with HTML, and HTML is just text — text with tags around it. You write the text on one side, and the browser reads it and draws the page on… 2:20 Lesson 2 Headings A heading is a title on your page, and it works exactly like the paragraph you already know: an opening tag, your words, a closing tag. The tag is h one. Press… 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 something new — a tag that wraps just one word in the… 2:10 Lesson 4 Lists A list takes two different tags, and that is the new idea here. The outer one, u l, holds the whole list — it says "a list starts here and ends there". Then… 2:23 Lesson 5 Links The link tag is a, short for anchor, and it brings something genuinely new with it. Inside the opening tag there is extra information: href, followed by an… 2:16 Lesson 6 Images To put a picture on a page you use the img tag, and everything it needs lives in its attributes — you met your first one last lesson. Src says which file to… 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 essentially every website in the world, so it is worth… 2:20 Lesson 8 Comments and nesting A comment is a note you leave for yourself inside the file. Open the brackets with an exclamation mark and two dashes, write anything you like, and close it… 2:10 Lesson 9 Tables A table needs three tags nested inside each other, and getting the order right is most of the work. Table wraps the whole thing. Inside it, t r is one row… 2:08 Lesson 10 Forms Everything you have made so far is something to read. A form is different: it is something a visitor uses. Write an input with type text and you get a real box… 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 content, then a note at the bottom, and if your HTML is just… 2:21 Lesson 12 Your first CSS Halfway through the course, a second language arrives. HTML says what each thing IS — this is a paragraph, that is a heading. CSS says how it looks — this… 2:18 Lesson 13 Selectors Last lesson your selector was a tag name, which changes every paragraph on the page. That is often too many. So there are two more. Write a name with a dot in… 2:11 Lesson 14 Colours The simplest way to write a colour is to name it. Red and blue you would expect; there are also tomato, gold, teal, steel blue, orchid — about a hundred 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 font-size, measured in pixels. Forty pixels for a… 2:19 Lesson 16 The box model CSS treats every single element as a box, and every box has four layers. In the middle is the content — your text or your picture. Around that is padding… 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 margin changes nothing you can see. Put two boxes… 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 themselves and stretch across the page: a div, a… 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 along — you just could not see the edges without a… 1:58 Lesson 20 Flexbox Everything you have built so far stacks downward, because that is what block boxes do. But a navigation bar, a row of cards, a toolbar — those need to sit… 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 the top, a name in a colour you choose, and one line…