The past week and a half for 100Devs has involved making several layouts. Initially, we just wrote the HTML code for popular sites already in existence. I wrote the HTML for the BBC homepage, TechCrunch, and a few other sites. Then Leon brought in CSS, and we were instructed to go back and use CSS (CSS floats specifically) to update the websites we had already written HTML for, and we had some new layouts given to us to create brand new with both HTML and CSS. Below are some lessons I learned from these layout projects.
Make your layout before adding content
What made the BBC and TechCrunch projects hard was that I already had my HTML content and images there. The words and pictures were more of a distraction while I was trying to set up my float containers and figure out which containers needed to be inline and which needed to be block.
The result was site layouts that were about 80–90% there, but they were not exact matches. What they did help achieve was getting me comfortable using floats to align my content side-by-side on a page, or use nested floats to get a 2x2 build (for the BBC site).
It’s not too bad! I was pretty happy by the way it turned out, but you can also see that it is not what the real BBC site looks like. The finer points of the design are rougher than the real thing. But doing this project, as well as updating the TechCrunch site, taught me that it’s harder to add the layouts after you add the content. Instead, I should add the layouts and frame everything out and get it just right before adding the HTML content.
Make sure your page margins are also set and good before adding content
Leon assigned two new layouts for us to work on as well: Source Inc. and Level Ground MMA. With my newfound knowledge in hand about framing out my layouts before adding content, I did exactly that and started with Source. What I did NOT do was make sure my page margins were set. This would have made it much easier to ensure all my containers and content was aligned on the right and left of the page. I could have used one CSS rule and one selector to handle this, but instead I used several rules and selectors to handle it and had to make sure all of them had the same margin declaration.
On my second site, the Level Ground MMA site, I remembered to set the margins at the same time as getting the layout framework set up. This made it much easier. You can check out the finished Level Ground MMA clone here, since I made this one a public repo on my Github: https://kyaaron.github.io/Level-Ground-Company-Site/. As a note, I did not make a media query for this for mobile, so it’s best viewed on a laptop or desktop. This leads me to my last lesson learned.
Make sure you ALSO write your layout media queries before adding content
Yep. I didn’t do this. And it’s on my to-do list to add a mobile media query to the Level Ground site, however now I feel it’s going to be more of a challenge due to the distracting words and content on the page. Doing a media query for mobile devices, or vise-versa doing a mobile-first layout then adding desktop media queries, would be best to code before adding content. That way, I can test out the layout changes using just a simple border: 1px solid black declaration on every container to make sure the layouts are responding correctly, then add content.
To sum all of this up, I need to make sure everything about my layouts are complete before adding content including my media queries and page margins. Once I have all of that working, then it’s time to add the HTML content and style it up to make it look nice!
Let me know how you prefer to framework your pages when creating them in the comments.
Top comments (0)