Reading Time: 3 minutes
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:
- Mobile screens @320px
- Tablet screens @769px
- 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.
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.
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.
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.
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.
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!
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.
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!