Structure and accessibility · Lesson 16 of 16

Project: your profile page

Put everything together in one page.

10 minutes1 games

Time to build! Make a page about you with: a heading with your name, a photo, a short bio, a list of your skills and a link to your profile. Use semantic tags.

HTML

<header>
  <h1>Youssef Ali</h1>
</header>
<main>
  <img src="https://picsum.photos/seed/me/160" alt="Youssef smiling" width="160">
  <p>I'm learning web development at SeaCode.</p>
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</main>
<footer>
  <a href="https://github.com">My GitHub</a>
</footer>

This is an example. Change it to your own details.

Exercise

Build your page: a header with an h1, a main with an image that has alt and a list of at least 3 skills, and a footer with a link.

HTML

<header>

</header>
<main>

</main>
<footer>

</footer>

Learn more from

Played 0 of 1 games

HTML

Structure and accessibility · Lesson 16 of 16

Project: your profile page

Put everything together in one page.

10 minutes1 games

Time to build! Make a page about you with: a heading with your name, a photo, a short bio, a list of your skills and a link to your profile. Use semantic tags.

HTML

<header>
  <h1>Youssef Ali</h1>
</header>
<main>
  <img src="https://picsum.photos/seed/me/160" alt="Youssef smiling" width="160">
  <p>I'm learning web development at SeaCode.</p>
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</main>
<footer>
  <a href="https://github.com">My GitHub</a>
</footer>

This is an example. Change it to your own details.

Exercise

Build your page: a header with an h1, a main with an image that has alt and a list of at least 3 skills, and a footer with a link.

HTML

<header>

</header>
<main>

</main>
<footer>

</footer>

Learn more from

Played 0 of 1 games