Techdegree Journal 4 “Building A Responsive Web Page”

Reading Time: 3 minutes

sausage_dog-rwd

If only we could change our pets sizes like that in real life…

Introduction

I’m on Project 2 of Teamtreehouse’s Front End Design Techdegree and that involved me creating a website that will change depending on the size of the device screen. I had to create it to fit three sizes:

  1. Mobile screens @320px
  2. Tablet screens @769px
  3. Desktop screens @1020px

I was supplied the images & the mock-ups & was told it should be done in under 6 hours. Hang on to your butts…

Thoughts & Takeaways

As a coding newbie, this was initially very daunting… Sure I’ve created static HTML websites, but creating a fully responsive site involved a little more thinking and understanding how all the elements interacted with each other. After a couple of hours of hacking some code  – I did it! Here’s 4 things that I learnt while doing this project.

1) Don’t panic!

When I was initially given the mock ups, I felt like Jeff Goldblum when he saw the mothership in Independent Day – I was terrified and in awe at the same time.

jeff-min(1)

They… They have media queries…

What I did was work through the HTML and make sure that I had all the relevant elements included before I thought about presentation. Also I remembered the “mobile first” approach which was to design a single column layout then add more features for the subsequent sizes. Writing the HTML was laying down the foundation of the site and it made me feel more confident.

2) Breakdown your CSS

After I wrote up all my HTML, I started to address the CSS presentation. What proceeded to do was to create ‘comment headers’ of different parts of my site & add additional comments where necessary.

CSS headers

Having headers using comments makes life so much easier.

Not only did this help to keep my code neat, it proved invaluable later as it help me find where different declarations were quickly and easily especially if I’d left it for an hour or two. Also having my CSS headers help my thinking process as it gave me a structure to work with.

3) Floats

This project really helped me get my head around floats and the way that they effect other elements. One particularly tricky part of designing this page was dealing with collapsing containers. As we know, floats take elements out of the normal flow of the page and place it on the left or right of his parent container. Now if you float a parent element that has nothing but floated elements i.e. the navigation bar, the height of the container will collapse.

non cleared elements

My picture and the blurb should sit within the header where the nav bar is but because they are floated, the header’s height collapsed…

 

This is mind-boggling at first and I got frustrated – but that’s just how floats work. There are a number of ways to deal with this, but the method that are used was the “clearfix” method which which forces the parent element to clear is floated children.

clearfix

The “clearfix” forced the height to open back up… Much better!

Here’s a great explanation on how this works & this was really helpful.

4) Use the Developer Tools

The Chrome Developer Tools to Front End Developer is what x-ray vision is to superman – essential to help us solve problems and save the day!

developer tools

Positioning elements with floats may produce wacky renders. The Developer Tools helped me understand what’s going on behind-the-scenes of my webpage and how my positioning changes are effecting other elements. This insight allowed me to see the tweaks I needed to make to help the page look better.

Key takeaway

This was it very tricky yet enjoyable project. The key lesson I learnt when building a responsive website is, take your time and start with a mobile layout first. Mobile layouts are simple to put together and will give you the confidence to create more complex iterations of the same website. Take your time, take breaks and do it step-by-step – you will get there.

Thank you for reading and please let me know what you thought about my post! Leave a comment or tweet at me!

See you next Thursday!

Karlwebdev

Advertisements

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