What is the project?

Next in my Front-End Web Development journey through Treehouse was the Responsive Layout Project. This time around the training wheels were off as I had to create an entire HTML and CSS document from scratch. The project requirements entailed using a mobile first approach to create the HTML and CSS document so it may be viewed in mobile, tablet and desktop views. A mockup of mobile, tablet and desktop views were given to me and it must be correctly followed when the creating the site. Meta tags must be added correctly and google fonts must be added to the document.

How was it put together?

I first created a simplistic version of the HTML and CSS document so it would correctly match the mockup for mobile phones (320px). This was my first time using Chrome Devtools in a project so it took a bit of time to get used to it. I continually checked my work on Chrome DevTools through spacing and placement in my CSS. Next was tablet view (768px) in which I used DevTools once again with constant checking of placement. I used my first Media Query so I could properly style the document to match the mockup without changing the mobile phone view. The same was applied to the desktop version. I also included nav links using IDs for the first time to correctly take the user to the corresponding section of the page.

What were the challenges?

The first time I got my project back I had an issue with file structure. The footer navigation didn’t perfectly match the mockup in mobile view and the desktop view didn’t match. This was also the first time I used floats that took some time to learn the correct declarations in CSS. I made the necessary adjustments in the CSS files and passed the second time around. Formulating an HTML document from scratch seemed daunting at first but got easier as I got more experience. Chrome DevTools took some finessing as well with a new program but I just needed to get more experience in order to get comfortable with it.

What did I learn?

Making sure a website is responsive to mobile, tablet and desktop views is essential to front-end web development. This project definitely allowed me to learn the concept of mobile first web design and gave me the tools I needed to properly space out my project in multiple views.

View Project Page!

View Project on Github!