30. Home Page. HTML for the aside - Responsive CSS Tutorial

Key Takeaways

now if the sidebar is actually gonna be pretty easy to set up pretty much because we have just two different things to create they're really really simple we only have one thing to actually create in all of this which is I'm gonna call it div class equals sidebar widget now if you are going Kevin just call it a widget go for it you can call it just a widget I just want to be super explicit that this widget is meant to live in my sidebar I don't think I'd have a widget that would live somewhere else but when I'm styling it up and when I have it I just want to be really clear what this widget is actually being used for we have two widgets so the widget if we come and look back at the design the widget is this thing with a big gray background on it and then inside my two widgets so it's one and two there's a little bit of content but it's really not that much let's just separate things a little bit the first widget here is going to have a h2 on it and the class will be I'm just gonna call it widget title because I think if I put sidebar widget title people would start getting mad at me I think widget title is fine it's very straightforward to what it's being used for I do have an image in here so we have our SRC and our alt that we need and then in this case I have a paragraph so you probably guessed it I want a class on this too let's call it widget body closed paragraph and then I have my other widget over here now this widget is a little bit different I have the same styling on this as I do on this one but the contents a little bit different I just have an image and a title so what I'm gonna say is this widget sidebar here so we're gonna start off with one thing which will be in h2 just like before to have the class of widget title closed h2 and then instead of having an image in a paragraph we have a few late they're sort of like articles but they're not really articles so I don't think they deserve to be called an article so I'm just gonna use this a div class and it's going to be called a widget recent post close div and we have three recent posts I'm just going to do one of them will copy and paste it a few times for my recent poke my widget recent posts the reason I'm doing a widget recent post is if I come and look at it I sort of I have a name I have a title and then I have another line image title underlying image title and that last one doesn't actually been underlined so we'll have to figure out how we can turn off the underline on the last one it's not something hard to do but it's something new and really cool that you can do with CSS I always get excited about the CSS parts these markup parts aren't as exciting but I digress let's go and look so what I would do here is I'm gonna put my h3 in this case and the reason I'm doing an h3 is because they are a title it's a title for the post but it's a subsection to this a recent post this is like the category recent posts and then I have these three different recent posts that are in there then once again I'm putting my h3 before the image and one part of it is because I really want to practice that thing with flexbox where we can change the visual order of things and I do think it does make more sense to have it structured this way with the title followed by an image if you did it the other way around though it probably wouldn't be the end of the world so this do we give it the really long title of widget recent post title I'm gonna keep the widget recent post title if you wanted to shorten it up if you're doing your own site and you said widget post title I think that would be perfectly fine I don't think there's any issue with that and the reason I wouldn't want just post title or with yeah the reason I wouldn't want something that doesn't have the word widget in it is because I wouldn't want people to get it confused with this article recent because we have article recent but then just article title here so if we only put something in here that involve the word recent say recent post title that can really get confused and when you're looking at it you'd think it actually belongs up with my recent articles means very verbose but what's wrong with being a little bit verbose it just makes your code much easier in the long run when to know exactly what it's being used for so I don't mind being a little bit verbose if you have a shorter way of writing it or you can come up with a better name there's nothing wrong with that by all means come up with shorter ways of writing it I might be a little if this was a personal site that I was doing I might try and come up with things that are a little bit shorter just because I don't like typing but when we're learning especially I think it's super useful to being super clear what things are being used for and it is a good habit to build up when you're coming up with your class names anyway it does make class naming a little bit harder sometimes but it's usually worth the trouble so my image has source on it it will have an alt on it and it will have a class on it and you know what I forgot to put an image I forgot to put a class on this one now I think both images are gonna be treated the same way so I'm going to call this one widget image and would would this widgets but with addy man which it's a weird word eh I was thinking maybe it was only widget but it's with JIT all of a sudden after looking at a whole bunch of time so I went oh my goodness I just spelled it wrong throughout this entire thing so yeah I think we can take this class here and put the same one on this because the two images will be behaving or the four images will behave behaving in a super similar way and once I mentioned we have our widget recent post once that is finished we can just copy that one and paste it a few times and now we have everything we need for our homepage intact or ready to go I'm not gonna make you go through and put all the text into everything here but if you want to and you're adventurous go through right now and put all the text in and just see what you can do with it see if you can start styling this up and organizing things at least on a basic level I know we haven't looked at how we can reorganize things visually when the order and the mark-up is wrong we will be looking that in the videos we're also gonna see a little bit more on the images and how we can crop them properly but you have most of the tools you have to be able to do this site if you don't want to do the text I'm gonna do it all off camera when you start the next video all of the text will be in place and all the images will be there so if you just want to start with all of the content already in place hit pause right at the start and then you could try and style it up from there I don't blame you I'd probably do