Lesson 001
Your first page on the internet
Today you are going to make a page about yourself. A real one – it opens in a browser and looks the way you decide.
You will not be starting from nothing. There is already a small page below: it works, but so far it is about nobody. You will change it piece by piece, and every change appears in the preview window straight away.
Try it on your own first. If you get stuck a hint will open – but give yourself a few minutes.
Look at it first
On the left is the code of the page. On the right is what comes out of it.
Find the words "Hello, world!" in the code. Now find those same words in the preview. It is one and the same text: on the left it is written down, on the right it is drawn by the browser.
Task 1
Replace "Hello, world!" with your own name. Leave the angle brackets alone – change only the text between them.
The hint for task 1 will open if you need it.
Press "Check". Your name should be standing in the heading.
Say something about yourself
Further down the code there is a line <p>Some words about me will go here.</p>. The p is short for paragraph – one block of text.
Task 2
Write one or two sentences about yourself in place of that text. Anything you like: where you are from, what you enjoy, what you are learning right now.
The hint for task 2 will open if you need it.
The paragraph should hold words of your own.
Three things you like
Next comes a list. For now it has one item in it:
<ul>
<li>First</li>
</ul>ul is an unordered list – a list with bullets instead of numbers. li is a list item, one entry in it. An item always lives inside a list.
Task 3
Make three items in the list – three things you like. Games, music, football, a cat, whatever they are.
The hint for task 3 will open if you need it.
The list should have at least three items of your own.
Now the way it looks
Everything you have changed so far is HTML: what is on the page. How it looks is described separately. Look at the top of the code, inside <style>. There is a rule there:
h1 {
color: #888888;
}It reads simply: "h1 headings – colour #888888". That is grey. And #888888 is a colour written down as digits.
Task 4
Make the heading your favourite colour. Try writing color: teal; – or crimson, orange, hotpink, rebeccapurple. The browser knows those names by heart, no dictionary needed.
The hint for task 4 will open if you need it.
The heading colour should be different from the grey it started with.
What just happened
You did two different things, and they are worth telling apart.
HTML is what is on the page: a heading, a paragraph, a list. You mark pieces of text with tags, and the browser understands what each piece is.
CSS is how it looks: colour, size, spacing. A single CSS rule can change every heading at once.
The split is not an accident. Content in one place, appearance in another – that is how a whole page gets repainted without touching a single word of the text.
And one more thing: the page you have just made is real. It is not a trainer and not a simplified version. The same HTML and the same CSS run every site you opened today.
Explain it in your own words
In your own words, the way you would explain it to a friend: what does HTML do, and what does CSS do? Two sentences are enough.
There is no right answer here to be guessed. In a real lesson the teacher reads this one – it is what shows how much has actually landed.
Words you met today
- tag a marker like
<p>that says what a piece of text is - paragraph one block of text
- unordered list a list with bullets, not numbers
- list item one entry in a list
- color colour, spelled the way CSS spells it
- style how something looks