Lab 3: Styling your Portfolio
20 points
In this lab you will add a CSS graphical theme to your portfolio website of Lab 2. Make your portfolio attractive and usable. We'll look at all of the entries in class next Wednesday.
All of your formatting should be in a CSS stylesheet that is attached to your Web pages. There shouldn't be any formatting in the Web pages themselves.
Your design should have a distinctive header section with at least one image and a left sidebar for navigation that contrasts with the content area. You should use a palette of colors that look nice together. Don't use any colors not in the palette. There are several websites that offer attractive color palattes, for example colorcombos.com.
You should use a background image linked in the CSS file. For the purposes of this assignment you can select one from another website or create your own. If you want to create a background image on the lab machines, you may install and use the image editor called gimp (or anything else you may prefer).
Tasks
- Copy your portfolio directory to portfolio2 with a command such as
cd ~/public_html; cp -r portfolio portfolio2
In the portfolio2 directory, create create a styles.css file. Link it to your portfolio Web pages. - Add default styles for your whole website, e.g. body { font-family:arial; font-size: 110%; color:#321; }
- Make sure your navigation divs have an id attribute, e.g <div id="nav"> and add stylesheet rules for your navigation section, e.g. #nav { background-color:#cde; font-family:Arial; padding: 6pt } Do similarly for the other divs.
- Add a background image with a stylesheet entry like body { background-image: url(mybackground.png) }
- Make sure you use in your stylesheet:
- An attractive, easy-to-read color scheme including different colors for h1, h2, h3 elements
- Use float in some meaningful way
- Use :hover in some meaningful way
- Use a pseudo-element in some meaningful way
- Make sure there is good contrast between your text and any background colors or images so that the text is easy to read.
- Use the W3C's CSS Validation Service to make sure your stylesheet is syntactically correct.
- Publish your revised portfolio to your yourID.calvincs.com website.
Turn In
I will check your website directly on the yourID.calvincs.com/~yourID/portfolio2 URL. Make sure that that URL works.