• Ê
  • Â

5 Day 3

í Assignment 5: Create a one page web poster

This past spring, I taught a course that sponsored about 10 conversations between myself and designers who initiated project ideas and found funding, sponsors or distribution. Think books, products, furniture, website aggregrators, and more. Although I produced the posters in inDesign, I can imagine these in html and css … made for the screen, with a printout being extra. So, let’s do that. Create a single page website for one of the lecture posters — Danielle Aubert’s lecture.

You may make the design your own. But given that this is a half-day assignment, I’d suggest working with the design concept provided, but altering some details as needed/wanted. Use Helvetica as a typeface.


b Add comment    

Leave a Reply

í Assignment 4: Make a Scandinavian flag with CSS

Choose one of the Scandinavian countries (link to Non-Swedish flags at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to assignment 1. The size of the flag is up to you.


  1. Exercise solution with Float
  2. Exercise solution with absolute positioning


b Add comment    

Leave a Reply


  1. Review Padding, Margin, Background, Border, Width, Height
  2. divs and spans to create non-semantic elements
  3. The natural flow of a page
  4. Floats and Clear
  5. Code an 8×8 black and red checkboard
  6. Absolute, Relative and Fixed Positioning (z-index)
  7. View source and Inspector

Floats and Class example from class


Positioning example

Positioning demo from class
Link here


4 Day 3 / Lessons   b Add comment

Leave a Reply

í Review your classmates’ navigations

Comment on your own post from yesterday

– What was your thinking/approach in changing the existing menu? What were you hoping to do from a visual/interactive sense?
– What was something you wanted to do but couldn’t? Whether it was because of time or css knowledge?

Comment on the two posts below yours

– How does your classmate’s design improve or alter the original?
– What more does it need (or need to be removed) to be more effective? You can describe this in English and/or in CSS speak?

b Add comment    

Leave a Reply