4. Project: About Me Portfolio Site

4. Project: About Me Portfolio Site

Using the HTML and CSS skills you’ve learned, you’ll create a personalized "About Me" site! This project lets you practice coding while sharing a bit about yourself with your fellow scholars. Over the next few days at KWK, you’ll revisit and build on this site: it will grow into a portfolio showcasing all the skills you’ve mastered.

What To Include

  • Your name
  • A basic bio of you
  • An image of something that represents you and your passions
  • A link to something you are interested in
  • At least 3 facts about you
  • Use of color
  • At least 2 HTML pages
  • Navigation to get between the pages

Building Your “About Me” Site: Recommended Steps

To make the process smooth, we’ve broken the "About Me" development down into 3 iterations (or steps) to guide you along the way.

Iteration 1 - Rough Draft

While it’s tempting to dive right into coding, we recommend starting with some planning first, trust us, it’ll make the rest of the process easier and more enjoyable!
In your notebook, first jot down what information you want to share on each page of your About Me site. Draft that all up, so when it’s time to code, you don’t have to think of what that content will be.

Iteration 2 - HTML

Now it’s time to start bringing your ideas to life! Make a new Sandbox and start coding in HTML! Reminder: Select +Create and choose HTML + CSS.
  • Add headings for sections like your name or fun facts.
  • Use <p> for paragraphs, <ul> or <ol> for lists, and <a> for links.
  • Don’t forget to include an image using the <img> tag!
At this stage, focus on getting everything on the page in plain HTML—don’t worry about making it look fancy just yet.

Iteration 3 - CSS

Use CSS to style your site and bring your personality to life. Some ideas:
  • Add colors that reflect your style.
  • Use borders or spacing to organize your content visually.
  • Experiment with fonts or text alignment to make it unique.
As camp progresses, you’ll learn more and more about CSS and can always revisit this site and add on to it. This project is meant to grow with you, so feel free to revisit it later and keep improving!
page icon
For a summary of this lesson, check out the 4. “About Me” Portfolio One-Pager!