WDI — Week 1, Day 3

Today we took a quiz about CSS selectors (element, class, id). David lectured about CSS positioning by using margin, padding, float, and clear. Applying these concepts proved to be difficult but definitely doable.

For the first exercise, we had to copy a custom CSS grid that had 5 columns and 5 rows of varies heights and widths. There were also 3 randomly positioned colored squares within the grid.

My first plan was to create each individual square and that didn’t turn out very well. After coming back from lunch, I figured that I needed to create 5 columns of the same height with varying widths with a float: left and 5 rows with the same width and varying heights with a top: (i)px.

After the custom grid was completed, the only thing left was to create 3 squares and use ‘top’ and ‘left’ to push it to the corresponding position.

For the second exercise “busy-hands-lab”, they provided us with all the resources and an image of what the website looked like along with an empty index.html and an empty styles.css and we had to recreate the website.

This proved to be very difficult. It felt like everything that I knew evaporated from my brain. My plan was to build it from the top down. In retrospect, I should have created the grid system like we did in the first exercise. John gave me a really good tip to position the divs by using margin-top: 0 and margin-left: 0; inspect element; and increase the values using the up-arrow to visually see the divs move in real time.

After a few hours of painstakingly creating the container div, nav bar div, all the div wrappers, and sub divs, I finally finished the website only to discover there was a footer that I had missed.

After eating a few pizzas, I said bye to Ladan, Calvin, Eunice, and John.