Responsive design made easy

a lot of people struggle with making websites responsive it doesn't help that we're always given static designs and we're left to fill in the blanks and it also doesn't help that it's hard to accommodate all the possible situations that we can run into but based on my years of teaching and helping out people i think one of the biggest problems is people make it a lot harder than it has to be so in this video i want to show you the easy way to do it hi there my name is kevin and here at my channel i mostly cover how awesome css is because i really think it's an amazing and underappreciated language and i think that responsiveness is one of the many things that frustrates people and it gives css a bad name now we're going to be doing this on a fairly simple layout so we can focus more on the ideas and not to have to you know the video not for it to be too long but at the end i'm also going to talk about how these ideas can scale up into more complex sites so let's go and dive in and take a look so here is the design that we're going to be making and we're going to be making this fully responsive even though we only have a desktop website to be going off of and so to be able to do that the first thing is we do need to write some html first right um because we do need that and i ran a poll recently just to see if people would be interested in having the html first or if you just wanted to see the css for something like this and you guys very much said that you'd want both the html and the css so here we go if you do want to skip ahead and only focus on the css part there are time stamps down below so you can skip to where i start writing css and to start off with here i am in vs code and in here we have emmet already so i can just do an exclamation point and hit tab and i get a nice little starter here with most of the things that i'm going to need and let's just put responsive made easy let's put a capital e for consistency there we go and we can jump on right away to our body here and for the html itself and you always have to be thinking about how you're going to structure things within your html and how to organize things so the first thing is obviously it's a bit of a simple design but i always look at the desktop design when i'm writing my html because i need to see it in its most complex state if you want to call it that when we're creating this part of it because it lets you organize you know i need to know am i using display flex here am i going to wrap that in something to use that display flex whereas if this was the desktop version everything's just stacked up one on top of each other it doesn't really tell you much um so let's go in here on my body and we need this area here we don't have anything uh too complicated so i'm gonna do a header up here at the top because it's the header of my site and in my header we'll do a paragraph with lorem 3 so this is emmet if you're not used to it so i'm saying lorem with three words inside of a paragraph i hit tab and it does it for me look at that it's not exactly the same text but we're close enough and then i want my h1 and i can just copy and paste this i think let's see if this works there we go um so responsive layouts don't have to be a struggle let's just there we go everything is looking good i don't have word wrap on because i'm more worried about the structure right now rather than the text itself so i just think it makes it a little bit easier to look at if i find that we need to turn it off for something i will do that though um so after that we can come down over here and for me this is a section of content it's another section in the site so i'm gonna write section and let's hit uh inside my section what do we have we have two things we have a heading so i'm gonna do an h2 and so that's my h2 right there and then i have two columns over here okay so for my two columns i know that i need flexbox for that so i'm going to do a div with a class of split on it because this is i'm splitting this into two and this split class could work with three four five columns uh anything like that would work so i'm going to do a div class of split and then in my split i need two divs so div times two and inside each one of those or actually let's go back a step we want a div times two and then inside each one of those will be a paragraph and inside each paragraph we will have lorem let's just say 25 so we end up with two paragraphs of about 25 words give or take and that's all done so again we have my h2 that's gonna be quality designs uh so we have my h2 here then i have my split class which is going to wrap all of that it's going to have a display flex on it to create two columns and then this is one column and this is another and you notice i'm not actually putting any class on here because i don't really think i need one um you could call it column you could give it another name but with how i'm going to be doing it as long as i have a div in there or something to organize it it's fine in reality i could do this even without these divs because it's one paragraph in one paragraph but i sort of want to future proof this a little bit just in case what if this turned into two paragraphs that would sort of cause things to break a little bit so the idea here is that i can put as many paragraphs or other things in here and it would still work and now these next two ones are actually very very similar i can come and say section so actually because they're so similar why don't we do section times two inside each one of the sections we have a class of split and inside my split we will do two divs and let's just hit tab and see what that gives us so i have this one here and this one here so then i whoops i made a mistake along the way that's okay we can just duplicate that line and i can duplicate that line there um so this time it's i'm organizing it a little bit differently because here i had a heading that i needed to go across the entire you know it's spanning from one side to the other whereas here this heading is not going across the whole top it's actually aligning itself with over here so in this case my h2 would actually be inside this div so we can do an h2 plus plus a paragraph this text is a little shorter so maybe we'll do a lorem 15. um made custom just or not just for you for you there we go and so we get that text right there and my paragraph and then down over here i'm going to have my image um so in here i do have an image folder and in my image folder i have a nicely named image one and it could be we always put alt text on your images if they are part of the design or they are important so it could be man standing on mountain edge looking at sunset now i can come down and we can look at this one so this one's very similar but it's the other way around so my image would be first here and so this is my image and my image too and in this case it would just be um mountains uh with sun setting behind them behind them not exactly but um i think it's sort of you know that orangey color i think it gives it and maybe you know foggy foggy mountains foggy mountains with sun setting behind them and then over here we could have my h2 as well as my paragraph with lorem 20. i did 29 that's okay we have a bit of extra text that's perfectly fine and now before i go to my css and start having the fun there obviously this is a simple design it has nothing complicated but we'll play with it a little bit just to show you uh at the end how we can sort of manipulate this and do more with it and if you're just wondering about these numbers they're just going down for like the fonts and other things i'll be using over here um but what i want to sort of look at is before we go further you'll see i have different background colors on different areas here and so i think what i'm going to do is come all the way up and let's look at this and say okay my header has a background color on it so you know what let's come here and say class is equal to and let's give that a color and i'm just going to check down here if i gave these colors names or not no okay so we'll call this bg light this one i'm not going to bother but you could say it's like a bg white if you wanted to um but i'm going to call that bg light we'll call this one that's my section here so this one's going to get a class that is equal to bg dark and this final one down here can be my class is equal to bg i'm going to call it just because this color is being reused it's also the color i'm using for my titles so i'm just thinking what i would call that color and naming things is always super hard um but let's just say that's gonna be my bg is it an accent color we're going to go with accent i know it's not much of an accent color but it's that's going to be my accent color um another thing is this text is going to be centered and it's the only oh this area does two so what i'm going to do is um or we need here too whoops just a little side thing created with care so we have text in there um if you notice this is centered this is centered but we have no other centered text right now so i do think the easiest thing to do would be to create a little utility class so on my header itself i'm going to add a text center and i'm going to use that on just my heading over here text oops we need a class class is equal to text center and the reason i like doing this and using a utility in this case is because it's sort of split amongst i could just do header um you know i could say header text align center and it works there but having utility class lets us move it around a little bit and here i'm sort of taking advantage of inheritance um because by putting it on the header these are inheriting it and it's going to work on that and then over here i'm thinking the same here i don't want it to be inherited i only want to apply it to one thing and just makes it a little easier to select this h2 and to center align it rather than you know saying if this was a section something that the heading in there or you know you start getting this weird complicated world sometimes and you get more complex than you have to so for something simple like that i think it works perfectly fine now we might have to jump back up into the html and as i said at the end we will come in here and play around with it a little bit to look at how we can use this to make a more complex site and it's still going to work really well but just for now i'm going to leave it like this and if we need to come in to add a class or something like that that would be fine with me but i'm going to save it and leave it just like this and we do do two other things though so one of them is i am using google fonts here and they are linked over i have the description of them down at the bottom there but what i'm going to do is i have them off screen over here just so we don't have to go and find them on google and then the other thing that i need to add here is my actual link to my css so we're going to say this is link and css and in this case it's in a folder called css and then i called it main so we'll just change that style to main.css and i'm going to be using liveserver for this so this is an extension in vs code so i'm going to click this go live here and it should open it up for firefox in me for me um and this is just a nice thing to get like the immediate changes so if i make a change here we'll see that change happen live in the browser over here and so let's jump over to the main and i'm going to do a few things at the beginning here i'm going to i just want to be able to see my colors and my fonts and what i want to do at the very beginning you'll notice my css i have a little bit set up here not very much um but i've just removed um my margins and my i've put well we don't need this there we go i was copying it from something that had auto prefixer on it so i had the the prefix um but we get uh this just to set my border box to box sizing and just resetting my margins here so nothing too fancy um and then what i want to do is i'm going to come in here and let's come the first first thing actually is i want to set up a few custom properties and if you don't know about custom properties they are absolutely amazing so i'm going to select my root which is where we typically put our custom properties and let's set up some colors first so i'm going to have a color um i'm going to call it a color this goes a little bit against how i usually call things and you know what i know we'll do we'll do a color of um primary 300 which will actually be this light one and maybe the you know this is somewhere where i might have another step in between them usually um but you know it is what it is we only have we have a pretty limited color palette here we'll do a color of primary 400 whoops 400 and that one will be this darker brown right here um and i'm doing this because they're sort of you know shades of each other so we're going to do it like that and then i'm going to have a color it's not really a neutral but i'm still going to go with a neutral and it's really dark so i don't think we'd get darker than this so i'm going to call it 900 and so my naming my my naming convention here is just like it's sort of based like with font weights if you go font weights the bigger the number you go towards the thicker fonts and the the higher the number or the smaller the number the the more thin the font is so in this case i'm doing something similar but it's going from light to dark um so you know what this could actually be like a 200 and this would probably be like a 500 but whatever that'd be my neutral this so this is like always my base one um i'm putting a space in between these two just to say if this project were to get bigger i could have another shade of that brownish color in between the two um and then here i'm also gonna have a color neutral 100 which almost always for me is white but if ever you have a project where it's not actually a white that you're using it's just a really simple like you know it's a barely off-white i think it makes sense to have something like that set up and again if you don't know about custom properties it makes it easier to get your colors than having to remember these but it also makes things really easy to change in the future so let's go back to firefox and see what we have okay uh actually we should set up our fonts as well so i'm going to do that just font family we'll do primary and uh whoops primary is going to be roboto romato and my fun family accent and you could say this is like heading play fair display i'm pretty sure i don't have and this would be a serif i don't have google fonts open so hopefully those work um but uh i'm doing primary and accent just because the primary you know it's being used in the most places and then i have a little accent font to add some flair to my headings and maybe in some other places but this could easily be like body and heading or you know something like that depending on how it's used the problem with saying like font family heading is then when you start using it in places that aren't headings it seems kind of weird sometimes but it's really up to you and how you want to name things um and then we can come over here and we can style my body a little bit so body i already have my body with a margin of zero on this reset so here i'm just going to say that my font family is my font family primary because that's what's being used on all my paragraphs and everything and we want my font weight actually i think it is is it 400 or 300 there we go i think 300 is what i used did i say here regular i use regular okay we'll stick with 400 then and the font size is going to be um i use 21 pixels that comes out to 1.3125 rem and i do like retirement responsiveness and ideally you're not setting your font sizes in pixels i would set them in rem if you're not used to m ram i do have a couple of videos on those so i'll link those down in the description below so there we go that set that and i'm also going to boost my line height because the default line height is always very high on that we hit save and there we go we can get off and running cool i'm going to move this off screen actually but i will move it back on screen whenever there's something important that i need to look at um or anything like that but i've also linked the github repo down below and that includes this pdf so if you'd like to have it as reference while i'm going through the video that option is there for you um so what do we want to do here so the first thing is i'm going to set up some of the utility classes that i created first um so the first thing we had all of my um so we have different types of utility classes i have some that are for like the split which is gonna split things in half and then i have other ones um that are doing a few other things and actually a few other things before we even get to that h1 h2 h3 i'm just gonna put a line height on these line height of one because let's bring this back on this is really close together and in general that's um you know the 1.6 on the headings is going to be a bit too much and at the same time font family and in this case it's going to be the accent so if i hit save we should see those switch um the only weight i think i brought in for those is the font weight of 900 but i'm going to set it anyway just to make sure that we're getting the right font weight on those and font weight and other things like the font sizes you could also definitely create custom properties for but we'll keep it as simple as we can for this video um so that's set up now we can come in i and always do typography first and we're going to see that not only doing typography first we're going to do other things let's set up my background classes i need a dot for that uh so bg you can say bg light is a and i'll just do these actually i have prettier on so it's going to switch it anyway but background uh and i'm gonna do background color because for utility classes i tend to find it's a better idea just in case you try something um a little bit different maybe we could see that a little bit later on uh but let's say we say a background color of i don't want that i want my vars and so which one was it this is my light my light would be this one and so actually we need a light we need the accent i'm going to duplicate that two times there and then we're just going to say this one is my bg primary and then this one is my bg dark and then we'll just make these changes here so this would be my neutral 900 and then my background color here would be a that's my primary would be the primary i think we called it uh we stuck with 400a i thought about changing it but we didn't as you can actually see that background colors come in over there my primary oh i didn't spell dark right with a k with a k with a k there we go that one worked and did i make a mistake when i did that last one bg dark oh i said accent we're going to call it bg primary then because i changed my my mind a little bit on how we'd name things great so i mean it's not fantastic yet but we have something coming together right um so we have some some things coming together now sometimes with utility classes like this we're only going to set the background colors and then you'll use other things to change the font colors but you know what i'm growing more of the mind that even though this is like a utility class it's only doing one thing and one thing only if you have this dark background you probably have specific colors that you're using on top of it so i think personally it's perfectly fine uh my background light by the way i think is fine but my background let's just go look at these two um for both of these i think it's perfectly fine to say that here the color is going to be my var color neutral 100 and we can just copy that line and put it on this one as well so if you like the idea more of like a utility class to also set the font color um overall instead of setting you know writing the code twice that's fine and i get it but sometimes i don't mind doing this and it also makes it so if you do need to change them you can another thing that some people might not like the idea of but i'm going to do a bg primary comma primary h2 and this could even be like an h1 and your h2 and your h3 um depending on how you're setting things up but i'm going to do my primary and my bg dark h2 and we're going to say that the color on those is my var um it was this one here which is that light brownish color oh whoop this shouldn't be my primer uh light this should be my dark here there we go so you can see this one has changed and this one has change color and while you know some people don't like this idea of using these types of selectors i think for utility class like this where everywhere in your design that's what's happening it's not the end of the world if you don't like this idea of using a compound selector here instead of that you could come up with a utility class that's like you know you could use a text light um yeah text light and then you're setting the same color and then you're just adding that um i i like having a lot of my css in the css and what i mean i like having css that's doing this type of job rather than adding utility classes everywhere i think utility classes are super useful but i try and find a certain balance but everybody has a different balance that they're comfortable with some people like the atomic style like tailwind style and other people like me prefer having more in the css and other i was a big bem user and i still am heavily influenced by bem where you might not have any utility classes so there's a bit of a you know a to and fro that goes on uh with these types of things uh so let's keep going and you might be going right now kevin you haven't talked about responsiveness yet don't worry we're getting there but another thing i'm going to do is i'm going to come up all the way to here actually and do a section selector and on the section i'm going to add some spacing and so let's do some and by spacing i mean padding so we're going to add padding top and bottom and let's start with i'm just looking at that design did i say how much spacing we need i don't uh oh i have a typo there no okay so we're good so i'm just going to say padding here is going to be um we're going to start kind of we'll start with three rem uh top and bottom and we'll do a zero left and right like that and you can see that gives me spacing on the top and bottom now i know there's a little white square around my images i just had some issues exporting them from figma that i can't figure out how to get rid of it i don't know what i did but that's okay i could crop it off in photoshop or dive more into figma but um so that's working there and then right now there is the other issues that stuck to the side of the screen so there are a few different approaches you could take for this there's actually ways of doing this without the container but i think i am going to come in and wrap everything in a container and this is something i tend to not i always forget to do it um early on it's just you know a little mistake that i do often because when i'm looking at it i'm not thinking containers but what i'm going to do is i'm going to select everything here and do a shift command and a p and i'm going to choose emit wrap with abbreviation and if you don't see that you just start writing emmet and it's going to show up there emit wrap with abbreviation and i can do dot container and hit enter and it's wrapped it in my container like that and then we can do the same thing on this one shift command p and a dot container and then we can do the same thing over here select that one shift command p wrap dot container and there we go and now we can set up my container and i'll do that here with my section so we have a dot container and again this is a bit of a utility class so we're gonna it's doing one thing in one thing only so i'm gonna say that my margin is a zero auto or you know what we could do we could use a margin in line here which is interesting of uh auto and so a margin in line would be your left and your right margins only this is part of the newer css syntax this is part of the newer css which is looking at logical properties so this you can do margin and padding as inline elements and i think borders have it as well so you have margin inline is left and right and then mar the margin block would be your top and bottom but this also can shift around a little bit depending on the writing mode that's being used so if you have a right to left language it shifts things around or if you had a vertical language you can shift things around a little bit automatically without you having to make any adjustments and to keep pushing newer css and have a little bit of fun with newer css i'm going to do a width and we're going to set a min value on this so the minimum is going to be let's say 90 comma and in the design i did have a specific value of 70.5 um as the the maximum width that we should put and so if we go and take a look we should see that it works here but if we go at smaller screens and this is the responsive mode in firefox and chrome has one too um in firefox it's a shift ctrl m to open it if you're in chrome it's the same shortcut but only if you're in your dev tools you can see it large screen sizes it stops growing and then at small screen sizes we have the padding or that 90 so it's keeping things off the side a little bit so i find that super useful and i'm actually going to stay at small screens now because i'm worrying about the mobile design first um so this is the same as setting width 90 and then max width of 70.5 and if you'd like to know more about min i do have a video on it and once again that will be linked in the description down below where i looked at the min max and clap values and they're super useful and super fun for making websites but there we go so that's working and we have that so awesome this is all good super duper look at that everything is starting to come together um we never did my text center so let's move this that's my background this is all sort of layouty stuff here so i'm going to actually go right here and do my text center so my text center will be a text align whoops not last just text align center and there we go that's centered and i realized i did one thing that i should have done everywhere this should be also my um header and my section so there we go we get something like that um for this case just because it's narrower we could have like a modified narrow um header because if we come and look uh container i should say if we look at the design this area is much narrower than over here so we could do that or you could just put in like a a break after don't the issue with using brs is it will work at one screen size so if we put our br in there for a break um it's working here because you know everything looks perfect now but then when i get to this size all of a sudden like it's not terrible but you get this point where don't ends up on its own line which i don't think is very ideal and it could be even worse depending on the rest of the content that's in there so it you know it depends on your choices here and what you want to do but to me it makes sense to actually come in here we could do a wrap with emmet again and so i'm going to put a container and you could either do two things if this is something that's reappearing in a lot of places on your site you could have a container and then have a modifier class on that that's setting the width to be a little bit smaller maybe so like a container and then a container narrow and the other option is to say that your header container is smaller but it depends on how you want to do how you see your project evolving over time i'm going to do this one because i do think that it allows for more modification over time and this double hyphen it allows for further growth if your project keeps growing so you can use a narrow container if ever you need one and i'm also going to this double hyphen that's here is sort of a remnant of how i do bam so it's saying i'm using my container but i'm just making a modification to something on it so let's hit save and let's come over to here and where i had my container we could just say that my container narrow is has a max width and instead of 70 ram it could be 50 rem and you know what 50s a little bit let's bring that even down even more 40 rem even less 30 we're getting pretty small here there we go uh 35 is probably roughly where we want to be on this one 34 35 there we go so we get this narrow one and it is look at that it's all working it's staying small there and it's getting a little bit uh or it's not getting bigger it's doing what we want it to do here so perfect it's just setting a max width we don't get those weird line breaks because we don't have a br in there and everything just sort of works and we're getting our padding that we had set originally or not ours but we get that min value is still coming in where the content won't actually touch the side so super cool that it sort of all works in conjunction and we're sort of just layering things on top a little bit by doing this now a lot of the time for my spacing i took all my spacing off and this is how i usually work so i'm not going to dive into my usual answer on how i do things um because it's a little bit out of scope for this for this tutorial itself but what i'm going to do is i'm going to go on my i'm just going to add a margin bottom so we've taken the margins off everything so on these i'm going to say they all have a margin bottom bottom of 1m which means the margin will be roughly equal to or will be actually equal to their their actual font size so that gives us our space right there it gives us a little bit of spacing um and then on my paragraphs uh we could do the same thing actually why don't we do it again i don't always work this way but for simplicity's sake right now um we only need it on my h2 actually h2 i i don't have any h3s but since you know i start i wrote h3 and maybe our project would expand um that it could be useful to have them and we'll just say a margin bottom of 1m just so we can keep focusing more on the responsive side of things so we have the margin adding here it's giving us all the spacing that i think we need throughout everything um maybe there's an argument that my images should have something just because it's a little bit stuck there um and overall things are actually working really well on the mobile point of view now like i haven't done any layout stuff yet i haven't created my flexbox to make my i haven't done anything all i've done is add in a few things um i've added padding for spacing i've added a container just to keep content off the side of my screen and i've set up my fonts and you know extra spacing the only thing that's broken right now are my images because here they're overflowing out the side and they're actually causing some side scrolling which is not ideal so the last thing i'm going to do is to come in and say that my images should have a max width of 100 which should be something you do on every project and another thing that can help is just to throw a display uh block on there um which is something that i do most of the time um it does have some consequences but i find it outweighs um the side effects so at large screens the images will not stretch because it's a max width of 100 it just means that they'll shrink if the area is too small and just like that we have our layout is is coming together it's not amazing but it's working at small screens without very much work and then what we can do is when we get to the larger screen sizes that's when we want these two columns to kick in so this is one of the reasons as much as possible i'm going to advocate and this is the whole responsive made easy is do the basic design stuff first look at the big picture and work your way in first of all so when i'm looking at this when i write the html i need to worry about my layout when i start writing the css i'm worried about my colors my fonts my global styles as much as possible start adding utility classes in to style things up as much as possible and then you start adding complexity within media queries i have talked about this before and some people have said well with a navigation or there are some things that are more complicated at small screens than big screens and that's why you can add that complexity through media queries and use a max width i think 95 of the time in min width media query is where you're going to go because you're adding the complexity as you get to the larger screen sizes and again one a few things that i've done here my section and my header padding has been the same throughout everything so i'm worried about it looking good at small screens making sure that everything is working and actually i just realized my h1 is the wrong color as well and my heading here is the wrong color so we could fix those uh just really fast by saying that their color is my color this one right there right um so those will switch these ones won't because we overwrote those with more specific selectors that are lower down so that would work and even if this was just like a utility class it would still it's higher specificity so it would still work and it would still overwrite things so there we go it's working at small screens really well and i haven't had to do anything i've just styled the basic styling of it and then when we get to the larger screens this is when we need to add some complexity as i said at the start i realize that this is taking a look at a very simple site but before i talk about the ideas how this can be scaled up more i just want to let you know that this was actually a project for my free course conquering responsive layouts it's a 21 day drip course and the first week about it is about thinking responsively and using responsive units the second week we're looking at flexbox and in the third week we're exploring media queries it's 100 free and the link to join is just down below so i'm going to stick up here with these my container and we had my split so my split what i want it to do is a display of flex and if i do that everything becomes two columns fantastic but you can see there's a few issues here so the first is we have two columns everywhere which we don't want okay so what we can do is you have two choices here one is if you want the power of flexbox everywhere is you could come in and say that the flex direction is row and or not row i always mix that up when i want to set them column and that way it goes back to normal more or less and this would be really useful if you did reset your margins because if not you end up with double spaced margins because you have no more collapsing margins i personally i like this approach because i like having flexbox whenever possible because you can do extra stuff with it that you can't without flexbox um so i do like this idea of just sort of resetting things back this way and then coming in and saying inside my media query so we'll do a min width of i'm just going to guess it a number and we can always modify that number after um and again i'm not using pixels i am using m here if you're more comfortable using pixels that's perfectly fine um m are more consistent between browsers when people are zooming in and out there's an article by zell that's really old but still applies so you can check that out in the description below if you want more information on that so in here i can say that my split is going to have a flex direction of now i want the row so when we pass that media query it we jump into having two columns so just like that then we get to two columns like that and there's still a few other issues though right now the images are even different sizes and this is you know i want everything to be equal in here so one thing i always always do with my split class inside me like when i have the flex direction row and this is for equal columns as long as you want equal columns this will work what i do is my split whoops uh split and then all the direct children of my split will have a flex basis of 100 and just like magic everything becomes equal width so nice so easy um if you don't know about flex basis it's sort of like setting up it's saying the ideal width that you want something to be um and because both of them want to be 100 they both want to be the same size flex is going to shrink them down to make them fit into columns because it's a flex direction of row and it just makes it balances them out because they're both supposed to be the same size they're both supposed to be 100 flex needs to shrink them to make everything work because the default for flex is it things are allowed to shrink and they always shrink at the same they're both set anyway by default they have a shrink of the same rate so they end up being the same size and then we hit our media query and they stack one on top of each other cool right i think that's pretty cool um and then we do need the space in between because it's obviously ugly when things are stuck i really like using the gap property for this but it is not available in safari so i'm not going to dive into it but like once again i have a video that takes a look at it if you're interested in that but what we can do instead of that i'm going to stay with my media query is i'm going to stick with these interesting ones so it's split and i'm going to say star in this case plus whoops uh star plus star and i'll explain this in a second we're going to say margin left is whatever we want our gap to be 2m and that will put a 2m space between all of our columns like that so this is the adjacent sibling selector so it's saying any sibling that has a sibling before it is or not any element that has a sibling before it so here we have an element we have a div that's here and then before it it has another div does this have a div before it no it just has its parent so in that case it doesn't get a margin added to the left same thing here there's a div here it has a something before it so it creates that gap so that can be really useful just make sure that is in your media query so it's not being applied because if i put this out here um you'll see that now we get a margin on in areas where we don't want a margin so it is important that does end up in your media query there we go and just like that uh i guess one other thing actually we could do is uh on my section here and on my header i'm going to copy this and we could say app media width of 40m to stay consistent with our other one and we could on this one say that my padding is going to go up quite a bit bigger let's say seven just so at larger screens we have a bit more breathing room and it matches the design a little bit and so here it looks really good when we get to there because you're on a phone maybe this could be boosted a little bit but you need less room because we have less room to work with in a smaller space we don't want too much breathing room or it just looks empty but when you have a nice big screen and you have that room to play with we might as well take advantage of it and just like that we start getting this very simple layout coming together so it is simple i won't lie to you but it's very robust too because as simple as it looks i could come in here and i could add another section right here look at that i have a three column section and it's working perfectly fine and it's going to work here it's going to shrink down it's going to switch over on my columns my break point might be a little bit narrow here because those lines of text are getting mighty tiny so that might mean some tweaking but you get the idea i could do that i could even make that four columns i could come on here and we could add some paragraphs and that column is just going to stretch out and it's going to work um we can again we can copy that add a whole another div we get four columns um so this isn't perfect because it is set up completely for having um equal columns so there might be other solutions to other ways and again here even here if we wanted to we could take let's just take this one right here and i could throw that here and we could put it before the first one in this one just like that you get three columns like this an image column there another one there and again it splits and then it falls like that and then it comes back this way so you know it it's not set up right now for columns that are not equal it's set up to work for what we have but it's easy enough to come up with other patterns like this they could work and make it functional with different sets of columns with different sizes of columns and all of that it's not that much more work to keep pushing this and i really think the easiest way to always make any layout and any pattern in any design and any element that you're making is look at the html look at the is to look at the i was looking here i have a webcam here and i have this here so i was looking at my webcam there it's kind of funny but the easiest thing to do is to look at the desktop version or the most complex version when you're writing your html then when you're writing your css you don't worry about that at all you just worry about your colors a little bit of like padding top and bottom to add some spacing and then you just keep going and then you use your media queries to add complexity because if you're adding when you start overwriting a lot of things in your media queries it's like what did i overwrite what else do i need to overwrite and you start running into a bit of a battle whereas if you're adding complexity through that it's always going to be easier and it's always easier if you're looking at the big picture so for a big picture here what i mean by that is what i did from the very beginning is i took a look at how i could set this up in a way that's like oh i have two columns here two columns here and two columns here i'm going to use the same class for all of that i see so many people who will design this and then code that uh they'll do the html for this then they'll do the css for that then they'll do the same thing here then they'll do the same thing here and then once again they'll do the same thing down there again and it just starts they start repeating themselves so much that the code becomes a bit of a mess it becomes a lot harder to maintain so i think any web design not just responsive design made easy is by doing that approach to it of looking at the big picture and then narrower narrowing getting narrower looking focusing on the smaller details as you go in and adding complexity a little bit where you need to and the same thing with the media queries and all of that if you need two columns or if you need to add you know make some interesting things happen only at larger screens add that in afterward do the base styling first get everything working and then start adding in the complexity as you need to now for this site did you realize something i only had a desktop design one of the things i hear all the time is that people code desktop first because that's what they're given and you know fair enough i understand that that gives you that so you're thinking that way first but as we saw in this video by starting with all the things like color typography just spacing things out and then adding the complexity it makes it pretty easy to work mobile first even if the designs that you have are the desktop ones and before there's comments about it i know that some people are building web apps that are only intended to be visited on desktop computers and if that's the case and that's what you need well obviously that's the case and we're not even talking about responsive design anyway in those cases so i really hope that you enjoyed this video if you have any thoughts about responsive design do leave them down in the comments below and of course if you are interested in my conquering responsive layouts course the link for it is down below you can get more information on it through that link and sign up for it 100 free down there as well thank you so much for watching i really hope that you enjoyed this one a massive thank you to my patrons for their support each and every month you guys are the absolute best and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 235,041

Rating: 4.9685946 out of 5

Keywords: Kevin Powell, tutorial, html, css, responsive design, html css tutorial, responsive css, creating a responsive site, css responsive, responsive made easy, how to make a responsive website

Id: bn-DQCifeQQ

Length: 42min 40sec (2560 seconds)

Published: Wed Dec 16 2020