Your Homepage & Personalizing It
We're going to list all of our exercises here, so the one thing you must include is the following list. (You can turn them into links once you've done and published the exercise.) Just copy and paste this:
- First Page (you're looking at it)
- Using CSS
- Scannable Text
- Typography
- 2-Column Layout
- 3-Column Layout
- Toaster Uprising
- Big Red Dot
- Externalized CSS
- Dropdown Menu
- Mini-Site
- Hybrid Art
- Bonus: Responsive Design
Make it your own!
Add some personality to the page. Things you can include:
- A short bio
- Your favourite websites, with links
- Lists of things you're a fan of such as movies, books, music, sports, etc.
- Other pictures
Optional: simple CSS
You may want to add a bit more style to the page. We'll get into CSS next week, but for now, within the <style></style>
tag in the <head> of the document, add these two bits of code:
body {font-family: Gill Sans,Gill Sans MT,
Calibri,sans-serif;
font-size: 16px; color: #444; background-color: #ccc;}
#box {width: 700px; padding: 25px; margin: 0 auto;}
Now, within the <body></body>
tag, you'll need to add one more tag and an attrribute. This goes right after the opening <body> tag:
<div id="box">
And this goes right before the closing </body>
tag:
</div>
Republish
Remember to republish the whole thing (including any new images) when you're done!
How do you change the colors and font?
In that body style body { ...}
you can replace the font-family with another font stack. This site has a list of them.
For colors, use hexidecimal values for now (they have the # in front of them.) You can find a fun color tool here, at Kuler.