Learn with IsamLearn to code, step by step
العربية

HTML · Lesson 4 of 4

Build your own personal page

Bring together the heading, paragraph, list, link, and image you have practised. Build a page about yourself. You can look up an element when you need it; leave colours and layout for CSS.

Your task

Finish your personal page: include your name and introduction, three interests, an image with a useful description, and a working link.

Each new lesson builds on your personal page. Your saved lesson draft opens when you return.

The image stays in your browser. Choose it, then use its filename when you add the image to your code.

Your page

Checks use your current code. Try the page yourself too.

Open your page on your computer
  1. Save the page using the link below. Put it in a new folder.
  2. Copy your chosen image into the same folder. Its name must match the filename in src.
  3. Double-click index.html to open it in your browser. Check the image and links.
  4. To edit it locally, open the file in a plain text editor or VS Code. Save your changes, then refresh the browser.
Check your page before CSS

05 · Before CSS

Can you build it and explain it?

Review your own page and tick the things you can do. Looking up a detail is fine; aim to explain what your code does.

If a check is difficult, repeat that exercise. When you can meet these criteria, begin CSS and style the page you already built.

Technical reference: MDN · HTML: Creating the content. Learn with Isam’s exercises and readiness criteria are editorial guidance.

Save your page and open it on your computer. When you can build it and explain your code, move on to CSS to style it.

Next: CSS and Responsive Design
I need help

Start with just your name and a paragraph. Run it, then add a list, a link, and an image one at a time. Earlier lessons are in the lesson menu.

To use a chosen image, write its filename in src. Do not copy a whole finished page; look up just the element you need.

The plain appearance is expected. HTML provides the content; you will style it in CSS.

More explanation
Save the page to your computer
Download the HTML file

If the download does not start, copy the complete code below into a text file named index.html and save it as UTF-8.