Day 3: Lots of Coding. Getting Really Into This!

Woke up at 6:30 a.m.  Started coding from 6 a.m. to 7:30 a.m., then headed out to the coffee shop for three hours, but only coded without interruption for one hour in those three hours at the coffee shop.  Went home, had lunch, then coded the rest of the day, socialized, and worked on this blog.  Ended up racking up 8 hours of solid coding today.

We're getting into adapting websites for optimization on various devices (smartphones, tablets, desktops, and TV-sized screens or larger). We are learning media queries which instruct the website as to what to display, depending on the device used to access it.

Media Queries:

@media screen and (min-width: 480px) {} is for anything larger than an average smartphone.

@media screen and (min-width: 660px) {} is for larger desktop screens.

We learned a line of code that goes like this:

":nth-child(4n)"

What the code above does is select every 4^th item. In a large screen, the website had three columns filled with images, but the problem was that the 4^th image was not clearing to the left because it's a floating item, and the 2^nd item (in the first row) was too tall, so it “blocked” the 4^th item from going all the way to the left on the second row, leaving an undesired blank space where two images should be. The presenter had us do this:

#gallery li:nth-child(4n) {
clear: left;
}

The presenter stated that this would fix the issue with every 4^th image going forward. That statement didn't make sense to me, though, because, although the solution worked for a site with only 6 images, a site with more than 6 images will end up with more than two rows, and the “leftover” image on the third row is not the 4^th (8^th) image, it is the 7^th, and on the forth row, the 1^st image to carry over would be the 10^th image, not the 12^th, image, which is the image that line of code would target. I wrestled with the code for a while, repeating the video over and over, then thought perhaps the code “resets” itself at the start of each row.

In fact, that's not the case. The presenter made a mistake in making that statement, so I was correct! I caught the error in his math! I only found this out when I was taking the code challenge later on, and I went back to the video to look at the notes under the video, and there was a note concerning the error in the video!

This is what Treehouse said about the error in the video:

Code Correction

In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.  Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.

Sweet!

I also learned about W3C validation (CSS 3 and HTML5 standards).

SUMMARY OF CODING SKILLS

Total Treehouse Points: 526
Treehouse Points by Subject Matter: HTML 219, CSS 267, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 45% of all students."

Badges Earned Today: 
Adding Pages to a Website

Responsive Web Design and Testing

Hours Spent Coding Today: 8
Total Hours Coding: 22