Assignment #4: Responsive Page

In JobTrain’s Web Developer Coding Bootcamp, we received our forth assignment. Take these wireframes and turn them into CSS/HTML sites.

From Wireframes to html and CSS

— I added the gradient because I think they add a little pizazz for little effort.

I was initially intimidated when I received the wireframes because I was used to using row-divs to separate rows and going from the three column layout to the two column layout would have meant violating one of those rows. (I was also a little irritated because the assignment violated the “content is king” paradigm that was so instilled in me.)

Using the nth-child pseudo selector, I was able to control the right margin on the boxes to give them the spacing the divs needed when and where they needed them.

I coded a few websites two years ago for graphic design school, so a lot of this is review, but there are also some new features/best practices that I was excited to utilize, like HTML5 semantic selectors (ex. article, header, footer, etc.).

I used this code for the nav bar.

border-right:1px solid #ccc;
/* fallback for non-calc() browsers */
width:calc(100% / 4);

For the two column layout:

article:nth-child(odd) {

article:nth-child(even) {
margin-left:3.125%; /* 20 / 640 */

For a pure CSS3/HTML drop down menu, this code worked really well.


Dirty Markup clean that code!
Google Calculator for calculating column widths ((formula: total width minus (margin-width times margin occurence) answer divided by number of columns)) ex. 960px wide layout with 20px margins and three columns (two margins). (960-40)/3= column width.
CSS helper for converting pixel widths into percentages


One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s