You'll start to see a pattern with these HTML projects: first we'll show you what you'll be making, then we'll walk you through actually making it!
In this course, you'll be creating your own social networking profile. Check out our profile for
King Kong in index.html and the Result tab to the right.
You have the power!
Have you ever seen your page on a social networking site load really slowly, then come through with only the HTML skeleton? (If not, it looks like this . Crazy, right?)
Under its fancy skin, a social networking profile is just a list of text, images, and links. And you know all about those!
We've set up your profile page with the basics, but the details are up to you. First off, let's make this page about you!
A bit about you
Great! Now we know your name and what you look like, but that's about it. Your profile page should include a little bit about you! (After all, that's the point of a profile in the first place.)
Profile sections
Nice! It's starting to look like a profile page already.
Most profile pages are divided up into sections: your interests, favorite quotes, where you work, where you went to school, where you live, and so on. We can do this with an unordered list! Below the paragraph about yourself, create an unordered list. Each list item should be a category: for example,
Interests
,
Jobs
,
Favorite Quotes
,
Where I've Lived
, and so on.
Lists within lists
Now that you have your profile sections set up, it's time to add in your favorite things!
You can do this by creating additional lists within your unordered list's
<li>
tags, like this:
<ul>
<li> Interests
<ol> <li> Learning to code
</li>
<li> Watching basketball
</li>
<li> Playing music
</li>
</ol>
</li> </ul>
Within the
<li>
tag for Interests, we created an ordered list (
<ol>
) with three interests.
Fancy up your font
Perfect. Your profile's really coming along!
It still