Project Step 1: Your Page in HTML
- 4 min reading
- 7 min activity
0 of 6 tasks doneup to 125 XP
Mission 1, the big step: today you build the first version of your own website, My Website. You use everything from lessons 1.2 to 1.5.
- Build the HTML of your own page: the basic structure, the head, headings in order, paragraphs with emphasis, a skills list and a learning journey list.
Your learning journey has steps in a clear order. Which list do you use for it, <ul> or <ol>? Think first, then open the answer.
Show the answer
<ol>, the numbered list, because the order matters. Your skills have no order, so they go into a <ul>.
Your website at the end
The course slides show the layout of a personal website: a banner, a main menu, the content with a side menu next to it, and a bottom menu. You build it in four steps, one in each unit. Today is step 1: the content in HTML.
Your website at the end
The layout from the course slides. Tap each number to see which unit adds which part.
The slide gives fixed sizes: 600 pixels for the content and 300 for the side menu. On a phone that is too wide. In Unit 3 your two columns sit side by side on a computer and one below the other on a phone.
Plan your page
Plan before you build. Think about 2 or 3 sentences about you. Life skills count: organising, explaining, staying calm, speaking two languages.
A nickname is fine. Do not write your home address or a private phone number: your page may be public one day. You can add an email address in Unit 2.
Plan your page
Your answers are private, and any answer is fine. You use them in the next exercise.
Build it
- Head
Give the page a title with your name or nickname, for example "Ayla K. | About me and my skills".
- Heading and first line
Write your name or nickname in the
<h1>. Below it, one sentence about you. - About me
Two short paragraphs. Mark one important part with
<strong>or a stressed word with<em>. - Lists
Three skills in
<ul id="skills">and three steps of your learning journey in<ol id="journey">. Keep the ids: the next project steps use them. - Comment
A note with today's date, for example
<!-- Step 1: 7 October 2026 -->.
Every check message tells you the next small step. Your code is saved when you are logged in, and Unit 2 continues from it.
My page in HTML
Milestone 1 of My Website. Replace the example text with your own: a title, your name or a nickname, a few sentences about you, three skills and three steps of your learning journey. Use your plan from above.
Warm-up for the challenge
Optional: three questions to get ready for the Unit 1 challenge.
Warm-up for the challenge
Warm-up for the challenge
Warm-up for the challenge
- Milestone
- A big step of your project. This is step 1 of 4.
- Layout
- Where the parts of a page sit: banner, menu, content, side menu, bottom menu.
- Portfolio
- A collection of your work that you can show to others.
In short
- Your page has a full head, one
<h1>, four sections with<h2>and text about you. - Skills go into
<ul id="skills">, your learning journey into<ol id="journey">. - A nickname is fine; no home address and no private phone number.
The Unit 1 challenge: 10 questions. Then Unit 2 adds a banner, a menu, links, a picture and a contact form to your website.
Sources
- MDN Web Docs (2026). Creating the content.
- MDN Web Docs (2026). Basic HTML syntax.
- MDN Web Docs (2026). Lists.
- MDN Web Docs (2026). id.