- Watch the last video in the Don’t Fear the Internet series on layout:
-
Don’t Fear the Layout
- The last part of the video touches on material that we will cover in Week 8: Responsive Design.
- The week 2 article on designing for the web had 7 steps, the last is a photoshop comp of what you want your website to look like. Last week’s assignment was to try and build that comp, but your skill level did not allow you to realize that assignment.
- Using what you have learned about Layout Strategies, build your photoshop comp using HTML and CSS.
- Many of you may not have caught the intermediate step that was due last week, to test all of your selectors, making sure that you can target each of the elements.
- Just target the elements and color the background.
- The first two sections of the lynda.com video by Chris Coyer of CSS Tricks on Creating a WordPress Template covers turning a photoshop comp to a HTML/CSS web page.
- CSS Tricks is a website by Chris Coyer with lots of good information. He has a video on positioning, where he covers static, relative, absolute and fixed values, if you would like one additional resource:
Grading Criteria
I am looking to see how well you can juggle these boxes, and it takes a while to move them around through the document flow.
It is a lot like when you were a kid, playing with blocks, only here that world is upside-down, as you start on top, and build your way down. You will get the hang of it by doing it.
Validating your work often is a good technique to keep you on the strait and narrow path. Once you get better, you need not check so often, but right now, check every few lines of code.
I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity as you manipulate the elements in the document flow to build your page.