27. Setting up the structure - Responsive CSS Tutorial

guess uncertain things okay so we're gonna be focusing on starting the basic structure for our homepage I'm gonna be doing the home page just the mark-up over a few videos just to break it up a little bit because it's gonna make it a bit easier for you to find the parts that you want or to focus on certain things so what I'm going to be doing in this one is we're just doing the homepage and I'm looking at the basic overall structure of my page we already have the navigation I'm gonna be nice to you we're not gonna redo the whole thing we're gonna be continuing from where we left off with that navigation we're gonna be adding this whole section here as well as our footer down at the bottom and I can see that everything here is being held in place by something it's not stretching out so just like we used on our navigation we're going to use the container to hold everything in place there then when I look at that I see this is my big piece that's holding everything okay what's the next step that's the big picture but do I have something smaller than that so yes when I look inside of there I see that there's two columns of content I see there's this main big column on this side and then this column on the other side there's no weird pieces sticking out everything is living inside of a very distinct column so I know I need to set up sort of a main structure area and a sidebar on the side then inside of those areas I have these different pieces so do you explain this color coding that I've done a little bit if we look here this is sort of this unique part of the website this is the featured post it's the one that stands out the most the layout is unique so that is its own component it's going to have its own sort of markup the way the code or the HTML is written for that is going to be a little bit unique it's gonna have its own class name then I have these three that repeat themselves they're all exactly the same thing just the content in them is changing the layout is the same the colors are the same everything is identical I just have to change the text and the image for each one so each one of those will be exactly the same structure just with different text going in so they can all have the same classes on there and they're gonna work fine and then over on this side same thing I have these two components these two little sidebar widget type things they're looking exactly the same from one another the content in them is different but this means styling the heading on them is identical the big parts the important parts of them are the same so I'm gonna give those the same class as well in this video I'm just focusing on that I'm going to do the big picture I'm gonna set everything up then in the next one I'm going to break each one of these up into its own video where we're gonna look at how I'm gonna do the HTML just for this one just for this one and then a third video on the HTML for this one and then we'll start going into the CSS and we'll go back through and do the CSS for each one of those as well starting mobile first and then graduating up to big screens so if you'd like and you want to use that Adobe XD link and you didn't open it before you can click here and open it up or if you prefer I have put text files for everything including all the pages so if you're being very ambitious all the text is currently there the one that isn't there is the recent posts because the text is exactly the same as the home page the Leie will change a little bit but all the text is the same I didn't I put the sidebar and the footer as separate text files so on the home page it's just those articles and for the sidebar you can grab that from this file here I have already included all the images but you're going to notice they're not the right size and I only have one version of all the images even though the images are changing throughout this now you could have two different versions you can have the thumbnail version and a big version you'll notice even the cropping is different in them I'm gonna show you a trick where you can use one image so it just lessens the load a little bit we don't have to do two downloads because we have the same image here and here for example we can do all that with one image even though the cropping is different it might not be the most common practice to do it this way but I want to show you a really neat trick on how we can recross images in a way that is sort of new to CSS actually and is pretty easy to do so all the images are there everything is ready for you to get started and we just have to come right here after our header and get to work so I want you to do as much of this as possible on your own and of course then I'm gonna go through and explain as much as I can as I'm going through it and again I'm really gonna be breaking up my HTML a lot over different videos just to keep the video lens down because I don't want to give you one really long video where you get if you have to come back to it later and you have trouble finding the spot you're looking for I think it'll be a little bit easier this way so let's jump in and start with this main structure here where I just have this big main area and then I have this footer down at the bottom so what I'm going to do and I'm gonna introduce a few new elements here and if you did this on your own I wouldn't have expected you to have these we have our header at the top which often includes things like the logo and the navigation that's sort of what you usually find up in your header now next up if we go and look at our design again we have this yellow box right but this yellow box is pretty much holding in the position of what we have up here where we have our navigation and we use a container for that so we might as well start with a container so we're looking to our div class container because all of that does have to be held in the middle of our page and below all the way at the bottom we can have a footer and close our footer the footer is super simple so we can just throw in a couple of paragraphs right now when we do the footer I might come back and give these classes but for the moment I really want to focus on the structure of what's inside my container here we're going to look at two elements which have a lot of semantic meaning and which are really important for the good structure of a site so I'm going to do a main and close main and after here I'm gonna put an aside and close aside so the main is literally the main content of your website the main the main content of the website with the with the focus of this page is so the focus of this page is all these articles that I have on my home page here inside that we can have all of my articles beside his it's a bit of a weird one um it can fill in different roles depending in the context that it's being used in which can definitely be confusing I've been confused by a side because there's lots of different information out there on it but the main way you can think about it if it's not being used inside of a section of a main sectioning of content so a div is not a main section of content and the side is sort of a secondary information for your whole page so if we come and look at this this is the main content and then I have the secondary stuff which is like these little widgets that are showing up on the side here so this is secondary this is the main content that I want people to do so the aside can be that as we go through and find other situations hopefully we can understand a little bit more how things like aside and do work name is the easy one though because it is the main content and that also means you can only have one main per page main is an important element to use on a page and it can actually affect the accessibility experience of people that are visiting your website because they use assistive technologies and one of the things those can look for is your main there are literally people who are blind that visit websites so there are programs that will read things out to them this can be blind or just have very bad vision and it will read the page out to them or it could be if you have an injury and you're having trouble using a mouse and using keyboard navigation things like that having your header and having a nav and having a main and an aside this really can help the experience some people have on your website now the main has very good browser support but older browsers including Internet Explorer 11 which people still use don't understand it so if you really want to be good you can also add the role of main on there as well it's not required for newer browsers if you do want to support some older browsers such as Internet Explorer then you want to have your role of main on there as well so I'm going to leave it now if this is a little bit too much or you're like this isn't what I'm here for right now that's cool I'm gonna put a link in the notes though for people who are interested to the ally project which is a11y which is short for the accessibility project it has lots of information on accessibility and best steps you can take in putting your website together it is a fantastic resource to keep on learning and learn about part of the web that's super important but then not enough people focus on it with that little sidebar out of the way on my aside and I'm gonna give this a class of sidebar now the reason I'm doing that is I'm not just keeping me aside it is possible for websites have multiple sides unlike the main which you can only have one of and the side can be used for a few different things like I mentioned so because of that just like a div I'm always gonna give it a class and aside I'm also always going to give a class that sort of works out for the main content that we have here because I've put in these two columns now and we have our footer