w6d2 - Thinking inside the box

    CSS! I was definitely not prepared to enjoy CSS as much as I did today. We started the day with another small CSS lecture from Jonathan, and then we were tasked with recreating (pixel perfect versions of) the layouts of a few different sites. The first one was a warmup, just a mockup of a basic site with posts consisting of a user name, an avatar, a timestamp and a chunk of text. There were 3 of these lined up vertically, arranged sort of like a twitter timeline, but much simpler. We utilized the basics that we had gathered over the last few days to reproduce the layout, and once we were done we had an exact copy of the layout, which I was pretty proud of for out first attempt at tackling real CSS.

    The next site was another mockup, but a bit more involved. This time we had to deal with a header, navigation bar, a page footer, and a bunch of borders that needed to be in the right places. The trick was to utilize floats and padding in order to create the desired look and spacing. It was also important to utilize the “clear fix”, which involved injecting content at the end of a container that held only floated objects. If this wasn’t done, the container wouldn’t properly shape itself around the floated content, causing layout headaches. This was a bit annoying to have to do each time we started on a new set of CSS, but it makes sense and after doing it a few times, it becomes pretty routine. Once we had the layout finished, we had to add a hidden dropdown menu that only appeared when mousing a link in the header. This seemed like a challenging task, but right when we were about to attempt it, we were treated to CSS lightning lecture #2 of the day, which regarded that very subject. Afterwards, we were able to implement the hidden dropdown without much trouble. We had to take advantage of absolute positioning of the element, but relative to it’s parent. Doing this put the menu in the place that we wanted it, but we also had to give the dropdown a display property of “none” by default, only changing it to “block” display when hovering over it’s parent container (the link). It was surprisingly simple once we understood how it all worked.

    The last task of the day was to recreate the Google homepage. The page may seem pretty basic, but there are actually a lot of subtle elements in play that create the overall look. We didn’t quite finish with this layout by the end of the day, but we DID get far enough to feel proud of our work. We had the Google logo front and center with the search bar, buttons beneath the search bar, the header with header links and footer with footer links. There were some finer points that we ran out of time for, like the links being underlined when you mouse over them, and the apps menu that pops up when you hover over the Apps icon, but overall I was very happy with our day’s work and feel like I learned a great deal about CSS.

    The main takeaway was to take a granular approach when designing a layout, and think in terms of boxes. Work from the outside-in, identifying the largest container, and the boxes that it holds, then look at each of the boxes there and what is contained in them, and so on. Doing it this way really made things easy to dissect and understand, and now I can’t wait to start adding CSS to my own applications!