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.

wireframes-to-code

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;
width:24.8%;
/* fallback for non-calc() browsers */
width:calc(100% / 4);
box-sizing:border-box

For the two column layout:

article:nth-child(odd) {
margin-left:0
}

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

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

Links:

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

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in Web Design. Bookmark the permalink.

One Response to Assignment #4: Responsive Page

  1. Pingback: Grid Classes Vs. Class Definition | Katablog

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s