Dev Diary: ITP Day 8

Today I am focusing on the body content of the site. This means designing, testing (desktop), testing (tablet), testing (mobile) and fixing any problems that crop up. Yeah, so you want to be a web designer?

I didn’t make too much progress today. I managed to style the H1 (or article title), article info block (author, publish date, short url, view count), the primary article image and paragraphs. Each of these were styled across the various sizes from desktop wide, desktop narrow, to tablet and mobile phone as you can see in the screen captures below (widest to narrowest window).

Safari Wide - Two Column

Safari browser window showing two columns.

Safari Wide - One Column

Safari browser window at its widest, one column width.

Safari Narrow - 1 Column

Safari browser window at a middle width, one column.

Safari - 1 Column

Narrowest Safari browser window.

There’s still work to be done on the header, especially when the screen size is in between a mobile phone and a tablet - around 750 pixels. Well, at least I have some direction for my next session.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins