Project Step 2: Structure, Links and a Contact Form
- 4 min reading
- 8 min activity
0 of 5 tasks doneup to 105 XP
Project Step 2 of 4. Your page from Unit 1 gets the website layout from the course slides.
- Give your page the five regions: header, nav, main, aside and footer.
- Add a menu with same-page links, social links and an email link.
- Add a picture with alt text, a small table and a labelled contact form.
In lesson 2.5 you met the page template: header, nav, a columns div with main and aside, and a footer. Now you use it for your own website.
Your website at the end
The slides show a personal website: a banner (logo, name, social media), a main menu, the content with a side menu next to it, and a bottom menu. Each part becomes one tag.
Match the layout
What changes in your page
- Columns. A
<div class="columns">holds main and aside, so that CSS can put them side by side in Unit 3. - Sections with ids. The ids
skillsandjourneymove from the lists to their sections. An id is used only once, so the lists lose theirs. - Links. The menu jumps to
#about,#skills,#journeyand#contact. Social links: example addresses are fine; the link text is the name of the network. - Picture, table, form. A picture with a caption in About me (the drawing
avatar.svgis fine), your study week as a table, and a contact form with labels.
A nickname is fine. No home address, no private phone number: an email link is enough, and name@example.com is fine for now. You decide later if you share your website.
If you finished Project Step 1 while logged in, or in this browser, your page loads here. If not, you start from the empty page of Step 1 and fill in your text as you go.
Build it step by step
Tap a place in the code, then a code button. Run and check after each step: the message tells you the next small step.
- Banner
Before your
<h1>: <header>. After the sentence under it: + social links, then </header>. - Menu
After
</header>: + menu. - Content area
After
</nav>: columns + <main>. Before</body>: </main> + </div>. What you open, you close. - Sections
Before each
<h2>: the matching section button, for example <section> about. At the end of each part: </section>. Then change<ul id="skills">to<ul>and<ol id="journey">to<ol>. - Picture
In About me: + picture. Write the alt text and a caption.
- Contact
Under the Contact heading: + email link and + contact form.
- Side area
At the end of the line
</main>: + side area. Write words you like in the quote, and add a row to your study week. - Footer
After
</div>, before</body>: + footer. Write your name after the year.
Your code is saved each time you run it (in your account, or in this browser). You can stop after any step and come back later.
Project Step 2: my website structure
Turn your page into the layout of the course website. Follow the steps above; the code buttons add each part. Run and check after each step.
When all checks pass, you earn the Website Structure badge. One step is left in this mission: the Unit 2 Challenge.
Warm-up for the challenge
Three optional questions, for a little extra XP.
Warm-up for the challenge
Warm-up for the challenge
Warm-up for the challenge
Key words
- Layout
- Where the parts of a page sit: top, side, bottom.
- Same-page link
- A link with
#that jumps to an element with that id.
In short
- Banner, menu, content, side menu and bottom menu become header, nav, main, aside and footer.
- The menu links jump to the ids of your sections; each id is used once.
- Your website now has a picture with alt text, a table and a labelled contact form.
The Unit 2 Challenge: 10 questions, as many tries as you like. Then Unit 3: CSS gives your website colours and puts main and aside side by side.
Sources
- MDN Web Docs (2026). Structuring documents.
- W3C WAI (2024). Page Regions.
- MDN Web Docs (2026). Creating links (links to a part of the same page).
- W3C WAI (2024). Labeling Controls.