29. The home page. HTML for the recent articles - Responsive CSS Tutorial

Key Takeaways

they've closed in our recent articles here as I mentioned right at the end of the last video we actually have two columns oh my goodness that complicates matters now doesn't it so I'm gonna come in here and create two divs one for each column they've closed div but this first column here is going to have a class on it of article recent main and I'm gonna give this one a class is equal to article recent secondary so it's like my main content and the secondary content of my article now if you don't really like those names I maybe could come up with a better name for them a lot of people don't like the idea that I'm repeating article recent I don't like the idea of just using main and secondary because maybe I you have a main and I have a secondary for something else too that is completely different could you instead of doing it this way I have an article recent and then use a descendant selector your compound selector to say like article recent main space main and article recent space secondary yes you 100% could but again I like trying to avoid those descendant or those compound selectors when I can so I'm gonna use my main and my secondary on this it does create a long class named I have to write when we get to our CSS but it does also make my CSS really easy to read and understand when I'm working in it so I do like that even if it does mean being a little bit more verbose the main content here this is where I'm gonna have my h2 which can have the same class as I have here sometimes a featured article will have a different like font settings but right now it's the same font size the same font color the same font everything if these two different articles had different font sizes I'd be looking at this in a completely different way I'd be giving this one like featured article title and this one recent article title or something like that it's the same they're both the exact same styles on them I'm gonna stick with the same class because I think that makes a lot of sense inside of there I also have my body and I also have the continued reading so you know what we can copy all this and pasted in here and exactly like before these have the exact same styling on it as they do up here so we can keep the same class names once we've styled it once we've styled the whole thing the main difference between our featured article and this one is just the structure of them is a little bit different so we can have the two columns in one whereas the other one doesn't have the two columns in it these I can grab and I can throw in this secondary over here because they really are the secondary secondary information and now that I have one of those built well I can just copy that whole thing and paste it right here there's all the structure of that in the next video I'll take a look at the aside