Wine Store CSS Assignment

From Knowledge Kitchen
Jump to navigation Jump to search

Background story

You are creating a web site for a wine store. Your information architect has given you wireframes of what the client told the project manager they would like on their home page. Your job is now to convert it into good HTML and CSS code, using the latest responsive design trends and techniques.

Since you aren't really up-to-date with the latest trends and techniques, you must fudge it as best you can, knowing what you do about cross-browser compatible CSS. The client probably won't notice the difference anyway.

The end goal

Convert this wireframe diagram into HTML 5 and CSS 3 code.

Wine store wireframe.png

How to start

The best practice is to first code simply the skeleton of the layout, using the standard float & clear layout technique.

Wine store wireframe skeleton.png

How to finish

Once you have the skeleton layout complete, start to fill in the content within each section of the page.


  • fill in the logo, links, and search fields. Align them as best you can using what you know.

Main content

  • fill in the section and aside with their respective content.


  • Fill in the footer info using simple links and images.

How to beautify the page once the layout is done

To spruce up the design, try playing with fonts, colors, and images. See some common graphic design considerations

What links here