26. Taking a look at the rest of the project - Responsive CSS Tutorial

Key Takeaways

we're doing the whole thing we're doing time to build out the rest of the site and we're doing the whole thing we're doing three whole pages for this it's really gonna help reinforce everything and it's gonna also give you a bit of an idea of how it works when you're doing a whole site I'm gonna try and go through naming conventions a little bit as well as just seeing how there's a lot of similarity between the different pages so once you've done the home page you're actually really close to being done which is always really nice we're also gonna be seeing how we can make it responsive so we're gonna be doing these small screens and the big screens I have all three of them done for the big screens only two of them for the small screens just because they're really similar to one another the home page and this recent post page are almost identical so I didn't bother doing a design for it on the small screens for there we are actually going to be building it out from the small screens to the big screens which is the opposite of what we've done so far and but it is the more common way to work it's called mobile first and it's much more common to work that way it's a little bit harder to share these in-depth designs through swimbot I'm gonna have screenshots of them I'm gonna be highlighting the different things that I'm working on to try and explain things as clearly as possible so we have a visual to go along with what we're working on but you can also come to this link this is I designed all of this using Adobe XD and this link will give you all the design specs and it's gonna make it really easy for you to get the text and any information you need so when you first click on that link it will bring you to a page that looks a little bit like this it's a little bit bigger and you can choose which one of the designs you want to start looking at and you can click on it and we'll bring you into that design once you're in the design it will probably be on the comments section and what we want to do is we want to click where that big arrow is which is to get into the assets and they start seeing all the different pieces that are in there so once you're in you can get all the different colors I've used so I am going to list out the colors I'm going to I'm gonna have this as an available slide but with the actual hex codes written out but if you're in here and you click on a color if it's automatically gonna copy it into your clipboard so you can just paste it right into the editor afterwards and there is all the font sizes and everything that I've used here and all the different fonts that I've used so you can get all the different character styles it gives you the font weight the font color the font size all of that stuff the only problem is it also gives it all in pixels if you want to work in pixels because it's going to be easier by all means I'm gonna do it with REM but if you want to do it in pixels there's nothing wrong with you pixels like there used to be with font sizes so if you want to go that route there's no issue with it when you want to get the text what you want to do is actually click on one of those boxes so if I click on this it's gonna show me the size don't worry too much about the exact sizes of things it's gonna give you spacing again I didn't make this a pixel perfect design so if the spacing in your final one isn't exactly the same that is completely fine but when you click on a box it's actually gonna give you all the text that's in there now the only problem is it does not include line breaks so the continued reading and the title of it will sort of be all jammed up in one big paragraph but it makes it a lot easier that you can sort of click through and get the different pieces of text that way I'm also gonna have a file in screen but in the next video where you can get the text from if you don't want to be using the Adobe XD thing here if you're on a page and you want to get back out of there you want to go see one of the other pages you can navigate through them you can't see it at the bottom of the page you can there's a little navigation to go through the different pages at the bottom or you can just click up here where it says the living living the simple life and it'll bring you back to that grid that you started on so then you can choose which other page you want to go and visit so in a little more detail here are the three pages for desktops when I'm writing my markup I'm always focused on looking at the most complicated part of the design when I do my CSS I'm as I mentioned we're gonna start mobile first but when it comes to the markup we need to really see the structure of the website when all the different pieces are in the places that they're going to end up at and it's always a more complicated layout when we're on a desktop screen so when I start writing my HTML I'm going to be looking at these designs and then when I start my CSS I'm gonna actually be looking at the small screens and then we're gonna move on up to these bigger screens so in the next video what I'm gonna do is I'm gonna break down how I analyze the homepage and I'm gonna start writing the mark-up for that and we're gonna make our way and write the mark-up for that I'm gonna get the whole thing done we're gonna make it responsive it's gonna look great and then we're gonna move on to those other two pages because as I mentioned they're gonna go pretty quickly once we've finished everything else here I'm really looking forward to this I think it's gonna be so much fun so I'm looking forward to seeing in the next video where we can start