 Last week I redesigned the Hippie Chick Noms website, you can see the design right here, I did that with Adobe XD and in this week I'm going to be coding the entire thing up. Hi there, my name is Kevin and here at my channel we learn how to make the web and how to make it look good with weekly tips, tricks and tutorials. You might notice I have a new setup. So my old mic was always getting in the way, so I'm hoping this works better. It should also pick up the audio a little bit better. I have so much trouble with audio, so I'm hoping this improves the quality of my videos a little bit, a bit less banging perhaps when I'm typing as well. I didn't have this when I coded things up so they'll still be maybe a little bit there. So as I said we're going to be coding up this entire page and you might have noticed before you clicked on it that it's a long video. And that's because I'm doing the entire thing in one shot. It's been a long time since I've designed a whole page like this because it does take a while to put together longer ones like this whether it becomes a series or just one long video like I did here. But I think a lot of you guys want us you know are pushing towards being able to do this and maybe some of you it's because you want a freelance. If that's the case for you a while back Kyle came to me and asked if I was willing to promote his freelancing masterclass bundle on my channel to to my audience and then so he gave me access to everything. I went through the whole thing and checked out all the material and I think it could be really useful for my audience. I wouldn't be bringing this to you if I didn't think so. The reason I think it could be useful is first of all it is for a this type of course it is very affordable. A lot of courses if you look at the freelancing stuff can be quite expensive and probably for good reason because as soon as you land a client you know you land one client you've probably paid for it. So in this case the course is only $100 which for this type of course can be really affordable. And it does a nice job for people who are just starting or trying to start in giving you some ideas and ways to do that and different techniques that you might be able to use to get started. So with the course you get an ebook that sort of goes over everything I was just talking about how you can get started how you can start finding your first clients which is always this by far the hardest thing to do for anything is just getting your first couple of clients and it does a few things. He looks at it in ways that it's about building relationships which it always is but how you can make that first contact for the relationship when you don't have people around you that you can contact. So that can be really useful. There's invoicing templates and proposal templates. There's website templates so if you want to use existing templates instead there are existing templates that you can use to sort of spruce up and use those for your own clients as well as a Slack and Facebook community so you can hang it with other people who have been through the course or who are trying to start their freelancing career or have started their freelancing career so that's always super useful being able to talk to other people who have just gone through what you're trying to and getting even more help and advice from them. If this sounds awesome and it sounds like something you want to check out the URL for it is studywebdevelopment.com forward slash freelancing and the really awesome thing here too is if you use the coupon code kev20 which is in the you know showing up on the screen now there's also that in the description below and as is the link if you use that coupon code you will get 20% off full disclosure though you will also it is an affiliate link so I will be getting a little a little bit of that as well but it could be a way to support the channel if if you want to do that so just full disclosure but again I wouldn't be promoting this if I didn't think it could help some people out and at the cost of the course which you know it's a hundred dollars minus the discount of 20% you know one client and you've more than made up for the difference and there is some genuine you know useful information in there that could help you out if this is where you are or the type of thing you want to be doing so if you're trying to start freelancing and I know a lot of people want to do it even if it's just a little side gig it's not a full-time thing but you're just stuck on how to start this can be a nice just little primer to get get the ball rolling a little bit because that's usually all you need at the beginning but back to the what this video is about and the hippie chick noms website so we want to be um so I just want to give full disclosure on it on my short videos or on when I'm looking at a specific topic I'm always I'm scripting things out I'm making sure I know the topic as well as I do when I do these longer builds sometimes they're a little bit um oh just speaking of longer builds I don't know if I mentioned it already but I have put time stamps for sort of the different sections down below in the description so as long as you're on a PC or so as long as you're on a desktop computer you can just click on any of those time stamps and it will bring you there so if you want to come back to the video a few times it's sort of like chapters throughout they can just help if you need to revisit the video at any point because you can't watch it in one sitting but one of the reasons it is longer is because it's a bit more raw it's not like the superscripted ones I do the other times I am going to be making mistakes and fixing my mistakes and a lot of you guys have said you love this this is one of the things you like with my longer builds I get lots of comments saying you'd like this about my videos but usually people are either going to let you know when they really like it or when they really don't like it I'd love to know your opinion on whether you like seeing this or not you're going to see like okay I made a mistake here let's go into the dev tools and this is how I can find how I made the mistake and do stuff like that because I don't want you just to be able to follow through exactly with what I'm doing I want you to be able to learn from what I'm doing as much as possible um I it does mean I jump around a little bit in the code because it's really my thought process I want to share as much as possible the way I'm thinking as I'm going through a design a few little details before we jump into it I didn't worry too much about browser support I'm using CSS custom properties I didn't use grid because I didn't really think it was needed for this layout but I did use flexbox um but we get the whole site done it's looking great uh just if you know um with the custom properties you might want to build in fallbacks and there's some other things maybe using I think I mentioned post css while I'm coding it up so I want to I just wanted to get all through that just to make sure you really know what you're getting into for such a long video before you commit yourself to watching it if this sounds awesome to you and you're all hyped up I'm really hyped up so let's just jump right into it all right so here we are in vs code already get started on our redesign um what I'm going to do is I'm sorry for being overly excited there I'm normally I'm not so hyped up in these things but I'm excited for this project I'm really going to be doing this from scratch so uh I'm going to go and make a new file I'm just going to call this index dot html and in I'm going to be using uh one thing but uh with vs code we do have emit if you don't have emit that's cool you can do this anyway you can install it as an extension in other um browsers if you just do an exclamation mark and then push tab you get your nice starting document there and um we'll just do hcn for now um just because I'm going fast uh I want to add a style sheet here so I'm going to do style and again I'm going to use emit so I'm going to push tab on my keyboard um what was I thinking I don't want a style tag I want a link so let's do link and hit tab and let's just do css slash styles dot css for this um now I want to link to that so let's make a new file and I'm going to call it styles dot scss and I just realized I didn't make a folder for that so make a css folder and we'll drag that right in there super duper um so now I can actually start um you might notice just really quickly when I save a few things sort of changed add some self closing tags and the indentation might have changed I am using prettier as well as an extension so sometimes when I save things might move around a little bit cool so we're going to go and check everything out in a second but I'm going to come over here to my style sheet I'm just going to paste in some code here and rearrange it so this is from the original design and this is the link to all the fonts uh so let's grab that uh and I'm going to bring the fonts as the very first thing that loads in so we just have all the fonts coming in um it's the exact same thing the only thing is he was bringing I think one of these had an svg font and the other one was the eot um we really don't need those these days really if someone's browser's that old um I'm not going to worry about it too much um so I took those off and you know the w of f here is supported like way back to like i nine I think so um you should be okay so we'll leave all that there html I'm just because of how I like doing things I'm going to put this up at the top and I'm going to get rid of that because I'm going to have comments in here but I'm doing this my way uh cool so that is the start now I have a color on there black which we don't actually have all that is looking good let's just come back to here that is good so what I'm going to do is um let's bring up our design actually okay so I'm going to just keep the design there so I can sort of go through as I'm coding it um and I'm not going to have preview the browser yet just because I'm not going to see anything we have no styling and then once we're done that I will open it up in the browser when we start doing our css the other thing just really quickly is um I'm going to be doing this I'm going to put some timestamps down below so if you are following this or you have to come back later because you can watch the whole video in one shot um you can check out the timestamps for when um I'm doing the html the css and maybe I'll break apart a little bit from there as well um so this is actually a font that's being loaded in now we're loading in a whole font just for the logo I'm not sure if it's worth it um but I am going to leave it like that for now but with the idea that maybe we could actually turn that into a just like a nsvg at one point or something I think it'd be a lighter weight than loading in a whole font uh but what we're going to do now is that is a font for now and I'm going to leave it like that so it's an h1 and I'm going to give it a class of logo leaky logo and it's hippie chick noms uh that's right up there now actually all of this should be in a header uh again I'm just a new header push tab for emit there and grab that in my header I'm also going to include what are we going to include in my header we're going to include the navigation so we can do a nav uh we're going to do a ul with an li with an a so this is again emit my a is inside my li is inside of my ul so the multiplied by four because we have four links and I'm just going to put you control or command click you can place your cursor in multiple places and it's home about connect and products cool I'm not going to be typing in all the text as we go I'm going to sort of come back we're just going to be worried about the structure right now so there's the header cool so now we're going to come down and we can do a main here um I don't think I need a class on my main we're just going to put in a main tag because it is good to have that um and then here we can have an h2 of no I'm actually going to look here for a second I have a font size it's all the same there okay so that's going to be a section title you can definitely just style like your h1 your h2 your you know you don't need classes on everything so especially because you know all these are all going to be h2s anyway I like doing it just because when I'm in my css it just makes it so much easier to be able to know what I'm uh styling instead of just like you know what exactly is an h2 well in this case it's my section title um and being a section title I should probably make an actual section in here uh so this will be section intro whoops section I don't even know if this needs something on it but we're going to still we're going to do it uh section we'll just do intro and uh so we have this section my class title we are northern ohio's first oil free and sugar free granola company so we want uh oil free and sugar free so i'm just going to do that uh shift command or come shift control p and uh that brings up this emit wrap with abbreviation so if I do that and I put in span you can see it's wrapping it in my span there and we can do the same thing here span uh cool there we go so save that I might put a different um font on that at one point or a class on these but we'll leave it like that for now um so that's my section title this is my intro and we're actually going to do another section here so section about us we're going to have in here is a little bit different because about us is actually going to end up being flexed so we have like a you know we have to use a display flex to get our two columns here so we need two divs in here that are going to be treated treating our backgrounds and then in there we're going to have our content I'm also wondering if I should use flex or use grid just because of the spacing that's on like to keep I could use fr units which I love um or you know set up a four column grid instead so I might do that but I still need each one of these to be wrapped in a div so I'm just thinking yeah my big one I have my left box and my right box about us so this could be um about us this is emit where you do like a double underscore so it's saying it's something that belongs inside of about us um about us I don't want to put heading just because I mean it is sort of but I'll just do intro because in there I'm going to put my h2 this one hmm the styling of this one is so different from the other ones if I did section title I'm going to leave it as a section title for now but I'm probably going to end up changing that just because the style is completely different on it but I'm going to come back to that when I'm styling it because I might come up with an idea as I'm working I still think it should be an h2 it's sort of the the title for for this and even thinking you this instead of a div this technically could be a header um if you wanted to go with like a bit more semantic um text because in general your heading will be inside a header when you're inside of a section so you don't need just a header that's at the very top of your site you can have headers inside of sections as well so why not we can be a bit more semantic on this side though it's just going to be a div so this div can be about us uh content or body I'm actually going to change it to body because it's content is a bit too vague body body text is like your paragraph text and stuff and we have two paragraphs in there super so that's that section done we're going to have next a section of order online so in there you know again we could do like a header if you wanted to with an h2 of uh section title if I did that there we could do it there there's a paragraph and what I'm going to do for these which are going to be turned into is I'm actually going to make a button group and in my button group and I'm doing this because I want to use display flex to make columns but it's they're also going to have to stack on top of each other when we're on mobile um so I think this is going to be the easiest way to do it so a button group and then I'd have my uh a btn and we'll call it btn primary we'll make that green our primary color and we need three of them so times three that's it for there and then we're going to have our section um product showcase and each two section title and then we need that so that's our there so then here what we'll do is we'll have a products which can then have dot product inside the product there'll be an h3 plus an image with a class of product image plus I'll just do p star two I think that makes sense I'm going to go back just to before I hit tab on that so we need three products so I can put a star three here so it's going to make three products each one of those products will have all this stuff inside of it uh two there we go perfection and last but not least we need our buttons there um because I'm using flex for my button group I think if I do a btn group again I just want to make sure that's what I called it before yeah if I have my button group I'm actually going to make two of them so the first button groups is going to be a btn and I did btn we'll call the purple my accent color and so that one's going to be all by itself and then we're going to have another button group dot btn group that will have our three buttons and I could just copy this button group there because we already did all that work why do it again cool um and last but not least we're going to come down here and we need a footer and the footer I didn't actually do yet which is cool um if we go to the original design we had a bit of content in there so we just had the navigation again uh so I can grab that I'm not actually going to put it in nav tag because the nav is supposed to be reserved for your primary navigation um and we'll put some we'll call this class equals footer nav and I think we might do another list in here for their social media because I think there was a social media in there a how many do we need we need other four we might have to change that and this one will be class equals footer social cool there we have that so now let's actually go and put all the text in here all right so with all of that done what I'm gonna do is I have the live server as an extension inside of vs code so I'll put a link to that in the description below and it's going to launch firefox for me with my site cool there we go so uh let's shrink that down so we can actually go like that and I'm also going to open up my dev tools and we're going to go to responsive just because I want to start with a responsive um let's just do galaxy nine is fine and we're going to actually separate the window just so I can have a bit more room I'm going to keep this off screen but anytime I need it I'll bring it up so we can actually see what I'm doing in there um nice thing with firefox is you can actually close the dev tools too once you're in responsive mode and it stays in there unlike chrome um but we'll put that off just so it's faster for me to pull on and off when we need it um and there we have that's what our current site looks like so nothing too fantastic but it is working which is great um um one thing I've also done is I have brought in the images to the image folder you can see because I actually put the images in and we should see them there we go um so we can actually see the images are working just fine uh so that's good and I've also brought in the fonts so our fonts should be a looking at what we want them to be looking I think because I think we have crimson text set as the default one way if you're not sure if it's actually your font that's loading in or not change the this to like something different and if it still looks the same you know you're uh you're off to that sa serif um but yeah it's working so we know we're good so this should be a serif fallback awesome um now before I really jump into the CSS so if you want to skip this check the time codes below but I'm going to be loading in um all my variables so root and we're going to create some uh some awesome stuff here if you're not used to this I do have some videos on this uh on setting up CSS custom properties and if you have already checked those out I also have an article up on CSS tricks that you can check out that goes into some cool uses and fun things that I'm I don't think I'll be using necessarily on the site maybe for my buttons but I don't think so but you can check it out um so in here I need my colors let's open fxd again I only have three colors um that I want to worry about and I'm actually going to make three boxes here because I didn't load my colors into anywhere but I have them here so I have my purple I have this and I have my gray uh those are the only ones we might end up needing more than that I'm also going to set up some font families and stuff it's the easiest thing here whoops not my layers in my assets select them all new color and there's don't oh I had a border on everything so it brought whoops it brought that border color in along with it um so we can just push that to the side make that a bit oh I can't see it so there we have it's a bit small and actually copy so uh let's just do color call it color text not the best name for it that's my 5a 5a 5a 5a 5a oops we're going to have my color primary which is going to be the green and we're going to have our color accent which is going to be the purple uh so that one I already copied and we can get this one copy and those are the three that I used in my design uh we also have our different fonts that we're going to want to use so I have my font family uh we'll call it title and we have my font family sa I'm just going to put sa's because it's the sauce oh no we use it as serif font we can do serif um and this is what I want here so we can actually cut that out so if ever he wants to change the font we can do it in one place and it's going to go almost everywhere so the font family on here will be my var font family serif cool cool okay and then what we want to do I'm also going to say on here um the color is my var color text I used the wrong one no I didn't that looks too light we might change that uh that color once we see it in the browser my titles my font my font on my titles whoops isn't in my css it is up here and it's this one right there copy that paste that in there and uh we're going to add in which we call this bf narrow I'm just going to do a sa serif fallback on it it is a little bit decorative but if it didn't load in I'd sort of want to saw serif coming in there um instead of some funky font or something simple fallback like that now I am using css variables the browser's or custom properties I should say their browser support is not perfect in these so just be careful with that we could come through and build in some fallbacks for all of this or we could use a plugin or we could do something like post css which I'll be exploring in a future video at one point okay so I think we're ready to get started I'm actually going to leave this off screen so you're not going to see it just because I have I have a bit of limited screen real estate but I'm going to be looking at that while I'm coding up um oh should I why not we're already using custom properties so font family logo because you never know he might want to use it somewhere else we're only doing the homepage but I am going to try and make the um everything I do here um if that doesn't load would we load in I don't like the script font I'm going to do a saucer if you're too uh just because I don't like the default sort of weird stuff that sometimes gets loaded into things um okay cool um uh let's just uh yeah I'm actually I'm just not used to having this on the HTML to be honest but it's all good the color is a little bit too light I'm going to darken this up just a touch uh just a touch I'm going to make it I think we'll do something like that I want to make sure my contrast is high enough especially on the smaller text let's just go on here and font font size is going to be 1.125 rem as a default make it a little bit bigger could maybe even pump that up a little bit but I think we'll we'll stick with that um okay so let's just I'm going to be jumping around a little bit no let's just set up our typography so here let's do uh typo typography um so we already have a lot of it done but we have our I'm actually going to do each one each no h2 h3 uh font family is var font family title line height I'm going to put one for now I know I did it less when I actually designed it oh no we're going to make that a lot smaller 0.8 I think yeah okay that font is a bit weird for the line height so let's find 0.8 is going to work out fine and the font size I could build in some custom properties here I did it 60 pixels um but again I did my design really as just like a template to start from so I'm going to do on here let's do um because even to say I did 60 pixels and I'm gonna switch that off you know what I was wondering if it'd be too big on I'm missing I didn't put the I'm missing some content one second I thought I put it all in oh I got we are we believe I can completely skip to section there sorry about that um so I'm going to put this in the main as my section I wanted this to be my intro section we'll do a section we'll call it hero um h2 section title I got mixed up there while I was doing everything real food I'm going to put a period on real food too I'm not sure if they originally had it there we go okay uh so if I do that 60 pixels uh will be like 5 rem that doesn't actually bother me oh I don't want that on there so let's okay whoops so you might be wondering why I'm putting this on my h's and not on my section classes that I came up with um I like just setting so you might have something it's not a section title that is an h2 and h3 we still want it to have some similarities and now what we're going to do is we're going to start getting a bit more specific uh so let's just say h2 we can do our font size is the 5 rem we'll see if it's too big but I think that might actually work out it might be a little bit too big go for I think that'll work better on mobile okay um I also like to do let's just come up to here h1 h2 h3 I'm going to go up to h4 just in case it's used on other parts of the website um also I forgot my paragraph and whoops paragraph margin of zero um because the default margins really bug me uh and then we can reset those as we go from there so we have my h2 and 3 that's good so this is sort of like some general stylings that I like putting on stuff um it looks all crowded and stuff when you do that with the margin zero but it does fix it a lot of the problems you might run into and you do need to add a margin bottom back into your paragraphs uh so our margin bottom our paragraphs can be like point I usually do a bit smaller than my content that looks pretty good awesome um okay so let's start styling everything up here I think we're good to go and I might have to come back up but I'm gonna come here and we're just gonna say uh home page styles because I think everything I'm doing here is gonna be um some stuff I'm I'm gonna my buttons and stuff so you know we can have some more general things buttons and all of that but I'm gonna style those as we get to them because I find it easier to work that way all right so we have a few things to do actually um I have my buttons and my home page styles but I have a few other general sort of things that I like to do my images display block that I get rid of that annoying like little space if you have an image do I have any and underneath every image you always have a little space uh so I'm gonna do that and max width 100 percent um so there we go at least my images are nice and responsive now and what else can we do we already have my box sizing okay so that's going to work perfectly so I think we can start on my home page styles now um so the first thing is here where we have our no sugar added no oil all real food and that away my navigate I'm gonna come back to the navigation because it's not actually in the way I'm actually well I said we're gonna do that but we should do our navigation right uh navigation I'm so my nav and in my nav we have I'm gonna do a display of flex I just saw I only had one bullet point and I was really confused I think where I did my emit you're probably going Kevin what are you doing I made a little mistake there so we need li and what's the easiest way to do this I'm just gonna do boom boom boom boom and close close li okay and then we don't need this one anymore get rid of that let's save there we go that's more what we were sort of expecting so my nav is not my nav my nav ul will be a display flex so they actually go next to each other and a list style of none I'm just wondering if let's do a nav a I'm gonna do a nav l no nav a display inline blocks we can give them some size padding of I don't know 0.5 m just to give them some size it makes it a bit easier to click on stuff this also needs our margin of zero padding of zero since it's a list we want to get rid of that as a bit of a default and let's do a justify a content space between no space around I think makes more sense for navigation um it's not really a typical mobile nav so we might I didn't plan out the mobile I'm gonna leave it like this because I don't want this to be about building a navigation I want to style the rest of the page if you're after navigation styles I have a few different videos on it and I have another one planned that will have drop downs and stuff like that so um let's keep going the nav a also the color of them will be my var color primary and I had them black in the original design but I think I'd like to give them some color that looks okay text declaration of none I'm going to give them a hover so nav a hover color can be var color accent and so we can get just a little and you know it will add the text declaration of underline and when we have the hover I'm also going to do a focus there we go I can tab through on those perfect this should also actually I didn't put it but I'm also going to make this a link just because people are used to being able to click um on the navigation um the the logo so class should I do it like that no I shouldn't do that like that I'm wrapping so what I was doing wrong there is I was wrapping my a link around my h1 which is a no no because links are inline and this is a block level element so the inline should be here so this would be my um a href can be uh it'd be index dot html and my close a will go right there so that means we should also be we need to change the font anyway uh yeah so let's do that I'm going to come right here for my logo so dot logo yeah I'm going to do logo and then we'll do this as color uh should I do it all here uh no we'll do the color and I'll let's change the font font family is a var font family logo and logo a font uh text declaration of none the font size actually looks pretty good color can be black and text uh we can just do a simple text align center on the h1 there we go um so that works out well I'm going to also let's just come here on my nav itself nav my nav let's do header padding of 1m0 and I'm going to put 2m on the bottom I think we might change that but we might come back so that's just giving me a bit of space on the top and the bottom um good and yeah just really quick I have a bit of padding on the links here just so if you're sort of you know for mobile devices it makes it a little bit easier to click on stuff um okay so homepage styles now so I have my dot hero which has a background image on there so background whoops back yeah background is um if you're putting a background image you can also give a background uh color just so I'm going to do var uh color accent if the image doesn't load for some reason you actually have like uh somewhere that you know something they can load in because we have white text we want to make sure that we can still read that white text I think it's that one my monkey is there oh I didn't do the dark color okay we're gonna do I'm using variables here so I'm also going to use a blending mode because why not uh so background oh so that means my color is actually going to be I'm gonna do like a 333 so if it doesn't load now it's still going to work and then we can also do a background blend mode of multiply probably multiply is always where I start that works and the color can be white and text align center good I forgot something I'm so used to all the way up all the way up all the way up I need to have my body here body margin of zero uh just because everything was off the side of my screen so the background blend mode I do have a video on that if you want to check it out there should be a card popping up for it but it lets us blend the image in with the color so it's always nice um if you used to photoshop blend modes that sort of that's what is going on there's all the different choices there I don't know if safaris updated to support all of them that used to be a few that weren't supported but all the you know the big three usually multiply screen and overlay and they're all supported anyway um text align center we need some padding on this padding 1m no any more than that uh paddings I mean viewport height I think let's do like 25 viewport height zero for left and right too much 15 we might come in with a mobile style after to um on the big screens I think I'll do that uh on the original design we had he had a background attachment fixed so we can try that background attachment fixed and one thing I didn't do but we're going to need it for the large screen sizes is background size of cover um so there we go there's the fix actually it's working out well we'll see what that looks like when we get to the bigger sizes we might need to put in my right click keeps going but I'm not right clicking um so anyway I think that works it sort of keeps that same style that we had before we can always you know if you don't like the background attachment fixed you can turn it off no big deal but our monkey sort of faded away enough in there um I'm wondering if I went with a 555 on this actually you know it's going to show it more because of the way multiply works um and if I went darker I'm going to stick with the 333 I think um in the original design I had if I bring that on screen you can see it's a little bit more like grayed out than what I have here but I think this is actually easier to read the text anyway so we'll stick with that cool I might add a little bit just because you want to make sure that this never touches the side so I'm going to add 1m of padding on the left and right it pushes it on two lines which actually makes it a bit easier and better to read there um but it's also going to uh yeah it just makes sure that we always have a space on the left and the right so our text is never touching right on the sides cool so I think that's done after my hero we have this uh if we come and look it's a really simple section there so if we come and look at the markup again for that um it's my intro I have my section title so this is where my typography does come in a little bit but I'm not gonna it's sort of styled pretty good and I just used a span on that I'm wondering if I should put a class on there I guess I said I would um so class can be text green uh actually text I said green but we'll do primary which will make more sense um I'm using primary instead of green just because green is my primary color but by putting green if ever you change your design and you don't want green as your primary anymore it doesn't make sense if this is called text green and all of a sudden it's yellow over here so by doing corrects primary it just makes it so if you change the color your markup still sort of your class naming and all of that still makes sense uh so we have my intro uh padding in this case and I'm wondering honestly I might do uh sets my navigation logo that's all my typography this is sort of general layout stuff I might just do a section as like a default of padding I don't know we'll do like five m zero left and right and see what that looks like uh this is double here but we're having switching background colors is a little we'll do like a four um just trying to think okay we're gonna do that's our default so for a section it'd keep that off I'm just wondering if we go back to the original design we have text line center text line center not text line center this has text line center should we have it as a default on the whole site even and then we override it no I'm not going to do that I'm just going to do it for this section in that one um that I'm not going to do here because again this would do everything but by doing it if ever you're coming back to make changes to it um you might be able to argue I just find for things like center so the intro padding will stay the same but I will do my text align center this is somewhere where you could also just come in like in your typography and have a text center class sort of like what you see in bootstrap that has the text line center and you just add that anywhere you're using it by all means if that's how you like working it's sort of like an atomic way of working a little bit but it definitely works great I'm jumping around a little bit just because I'm how I see things so I got that working and now we need to come up to my typography section here that's my logo so I'm going to come after my paragraphs I'm logos I'm really my logo there um but this is my text primary it'd be color var color primary there we go cool and now we can come down to this next section now this next section is the weird one a little bit but we're going to play around with it so if I look at the layout of this one what's weird about is the font sizes are all completely different than everywhere else so maybe that was a mistake on my part when I was designing it but I see maybe I could make that in h3 actually uh maybe that would make more sense and keep that as a small I think I might do that because it's I think I also called it the section title let's go check uh I did call it a section title and I'm wondering if I should maybe it would be like section what title I haven't even used this style section title small it could stay as an h2 because I do think it's just as important if you think of the document outline um it would make sense I'm just trying to think like you have the h1 is always the most important thing and you could argue this should be the h1 but I'll leave the name of the company as the h1 um then we have this h2 you always have to think of the document structure a little bit so like is this like a almost like a subsection of this no it's sort of its own section then we get to this we're we are northern Ohio's first oil free and sugar free granola company see this could be an h3 because you could argue like we are in a new section but I don't think the sectioning model thing actually ever took off whatever I'm going to leave it and just do section title small we're just going to stick with that and keep it as an h2 to keep things a little bit simpler so right here I'm going to do it I always do all my like generic tag selectors first and then I sort of go in order of importance I guess so section title small font size will be we'll try three rem to start with and we'll see how that goes save that and save this and that should change that feels about right now my intro so let's go back down to where I was my intro and not my intro now we're into about us so that's my new section the background for the whole thing will be var color accent whoops not text accent good now the padding is going to have to change because I'm doing that for like this whole thing but I'm going to add my background image only to here which I'm going to split my windows actually here because I keep going back and forth and I actually prefer uh I keep going back and forth here let's split this down and I don't need this open as much but I just don't want to have to be jumping back and forth on the files um we have about us intro so this is going to be a display flex for sure display flex and then this will be a flex flex direction row column I always mix those up don't know about you the reason I'm doing that is just I like to find even if it like I just did two lines of CSS to keep it looking exactly the same I just find it a little bit easier to work once you get into your media queries of just redefining flex directions instead of then making it display flex I guess it's just the way I think and the way I work but it also opens up all like the flex possibilities and the different things we can do with flex so I prefer working that way color for this whole section is obviously going to be white it's a little bit tough to read I hmm I might make that purple color a little bit darker I find that hard to read it's also partially the font so maybe because this isn't terrible it's still not super easy to read though um so what if I made the accent color here problem is it also changes um depending on the browser that you're using where's my color picker there we go I make that a little bit darker this is definitely becoming easier to read um this is one section where let's open up chrome where I have this loaded into I have it live previewing there as well one nice thing about chrome is there this little thing it gives you contrast ratios since I it's saying it's high enough contrast maybe it's just me and I can't I have bad eyes uh it's also it would be on a phone so it'd be closer to us a little bit so this font isn't the easiest to read though what I'm actually going to do that's we don't need that right now um is on this font so I'm going to actually come h2h3 I'm also going to do a letter spacing of maybe even like two pixels might be too much probably one it's a tough font to read um but I think that makes it a little bit better let's try adding that background image in there too so that's all the way down at the bottom so that was our about us intro did I change I just want to check something oh it still looks a bit small I'm going to boost my font size a little bit here I like that a bit better about us intro background image was url images I I called it granola bg let's save that my padding is a little bit off so this because all my sections of padding we do have to overwrite that so padding will be zero and then I can bring that same padding onto here padding of 3m1m I believe is what I did cool it's actually not uh I find it a little bit easier to read now um the small I'm going to make even smaller so that would be um I guess I should put that in my section title small uh you'll know I do jump around a lot when I'm doing my css I'm going up and down now and hopefully what you're watching it it's not too annoying but it's really just to try and stay organized as possible if I was in sass instead I'd be jumping between different files um so this whoops I'm so used to doing sass I keep wanting to just come in here and write like small and do a nested thing like that I've become so used to it now but no sass on this one just css title small small it's a little redundant but uh font size will be like 0.7m I don't know what the default is for small actually line height line height of 1 oh it's 0.7 the line height coming from I'm just using my inspector if you remember that's off screen right now but I think I'll bring it up I'm just I'm clicking this thing and then hovering the line height because okay what what if I did a display block on this I know it might look a bit weird that's gonna make it work because it's an inline by default the line height I don't think was actually gonna work so if I turn that off now it should be okay I'm gonna leave it like that for now just so they're always on separate lines but I don't know if that's gonna look good um I might do a text to line center I'm starting to rethink my text to line mint choices uh just because everything on I'm really looking at maybe everything is going to be text to line center at small screens so let's no I'm gonna leave that there there's a few places where I might leave it intro I think I'm gonna actually going to take this off which means I can delete that whole intro thing I don't need anything on it for now um and that means all the way up text align center that I think looks a lot nicer especially with the way this is broken it still gives it like an okay feeling at mobile screens we're so used to everything being like that um and then my intro and my about us body and that padding once again 3m 1m super I think that works um I might do actually 3m 1m 1m and the same thing but the other way around here and then 3m on the bottom so it's gonna be 3m of padding on the top one on the sides one here and then one here one on the sides but then the full three on the bottom just so these feel a bit more linked uh together and these two I'm actually making like a 1.5 it's a little bit tight not sure not sure I definitely want to test this on my phone before I say like this is final because if you're doing it and you're in this responsive view it's fine while you're coding it all up um but definitely definitely definitely be look look at this stuff on your phone at the same time and even this oil free and sugar free I don't like that it's breaking there so I might I'd be tempted to try some different stuff uh for that but overall I think that's gonna work well so let's move on to the order online that actually is working actually you know what I said I wasn't gonna do anything for section title I'm gonna do one thing for my section titles no I'm not oh you know what this one is that color uh but this section title was green this section title was green okay we have we have my helper class I was really tempted to say all section titles are green and then overwrite it for my my first one here but we did create that helper class so we will use it section title and text primary and we can do the same thing down here product showcase no section title oh I never put this some of our products got a spell proc prod cuts products um and text primary there we go so that should whoop scroll down there we go super order online it's the only thing it's missing here is our three buttons that we need and I did the buttons oh man I said I was gonna do everything I missed a few of them right uh that's okay uh order uh I'm gonna start with email actually email I don't know you can Facebook and Instagram and then we have to style the buttons I was like why don't I see my buttons they just look like links we're a whole point of this is so we are actually styling everything right that's why you're watching this video um a little bit tired had a long week okay let's see um so my buttons are gonna be dot btn will be padding I usually do like a one to three ratio ish so 0.75 m to like 2.5 m and we play play it by there um I always tweak these a little bit so we're gonna do that and I'm wondering my font is kind of funky so I might put round corners on it but I'm gonna wait until I see it first I didn't do it in the original design but I might do that here um padding is good the color is always gonna be white for the text text decoration will always be none good and then my button primary will be background of our color primary good I forgot my display inline block oh I made button groups and I'm not using it so we also want my move it right at the top because I'm not doing much with it button group is just going to be a display flex I think I don't need anything else on it uh I do flex wrap is wrap there we go so they're not actually there and we'll do um see by default flex doesn't wrap so it overflowed the side which is really annoying so by default everything ends up getting if it's a flex I'm generally putting a flex wrap on it I'm going to show a cool trick in a second actually let's do it right now um if we have a button plus a button let's add a margin margin left of 0.5 m is that gonna work it does but it's a little broken on this layout um and margin top no that's not gonna work do all my buttons all my buttons get a small margin margin of 0.5 m zero just for now so we can space them out a little bit um so this trick would work on big screens so if I see I like it's giving me my space in between let's do an inline justify content center just so my buttons are always in the middle whoops wrong one over here on my button group so it centers it on the screen um so what this is doing is it saying a button plus a button which means a direct sibling so if there's a button followed by a button the second one will get a margin on the left of 0.5 m so then if there's another one after it this one will get the margin left here but this first one isn't getting any margin on it but at the small screen sizes that's gonna cause a problem except now it's working okay because I'm doing still not going to be perfectly centered though do I just I could just have these as display block and then only do this at large screens maybe we'll do that so by default oh and display block there's still flex children though uh which would mean flex direction is column actually that sort of works by doing that um I don't really need the justify content either it's not doing anything that might be the best thing so they're stretching to fit on the main axis now so they're stretching to fit on the main axis which works really well so if you're not sure flex items always stretch on the main axis and normally the main axis is up and down but because I've changed the flex direction the main axis is left to right now or horizontal and so they're stretching horizontally and I think it sort of makes like a button block a little bit like I want to do with my purple one after so I think that's actually gonna work really well um I also want to change so all the way down at the bottom of here again we need our I just want to know what I called this group order online order online so this should have a background of I didn't make a color for this uh a something probably a f a f a f we'll see that might be too dark that's too dark this is where instead of like messing around or even with I could use my color picker here actually so we can come in I think somebody asked me in another video how I'm doing that it's still a bit too dark I think it's native I don't think I have an extension for this you just have to hover over it for a little while and then it just sort of kicks in I want it to be pretty subtle but just enough so we can actually see that there's a difference there cool that works for me okay so we have some of our products um for the products I still actually let's go look at my buttons for a second am I gonna keep them square should I round them I think I'm gonna round them I'm a little bit ADHD here I really want to show you how I make a site and sort of the thought process that goes into it for me buttons are a little bit lower let's add a little border radius border radius 0.25 m might be too much well that's actually perfect 0.5 is going see I find that a bit too much I'm gonna go I don't know okay we're gonna stick with that 0.35 m for my button border radius looks good so I think I'm still gonna make these into cards so we look here I did like products and then I have in my individual product so just to help separate them a little bit I think what we'll do is my products I don't have anything but my product will or that's not true products is going to be display flex and then we're on mobile so flex direction will be column so we shouldn't see any real change when I do that and then my my product can have a my original design I screen-shotted what he'd originally done with the original design because I thought it worked well but he had the white with like a gray background but because I already have my gray I guess I could switch that to white but I sort of like going white purple group like something difference of white grip anyway it's just me but my individual product here will give it a background of I think we'll just stick with this I could turn that into a variable maybe if I refactor it a little bit um just want to see what that's gonna look like and then padding of 1m it might be too much at the small screen sizes nope I think that's good border radius of I'll stick with the 0.35 and again this could become a variable as well at one point if everything is getting the same border radius on it okay I think that works out okay I'm not I was gonna say I don't I might just change my idea here just because the the images are white bananas for coconuts I might move that what I'm gonna do is I'm actually gonna put this here I'm gonna give those a class too that's gonna be like product title um and I'm gonna take the padding off if I take my pad because what I was gonna do is actually have the image if I do this product let's make this a lot bigger just because it's going to demonstrate something and I'm going to change the color here so we can actually see what I'm going to be doing okay so I'm going to save that I'm sorry the padding that's off but are we really um anyway at the top here we can't see it at all let's put a border is that going to work yeah border one pixel solid red just so we can see okay so you can see my image is actually sticking off of the sides here I'm wondering if this is a good idea because I have a background color border radius just if I do an overflow of hidden it's going to stop the unit now my image is inside of that space and box shadow I'm thinking instead of having a background color on it I might do a box shadow uh 00 or should we move it down a little bit say 10 pixel uh I'll do we'll start with 00 a blur a pretty small blur I'll try 1m and our gba 0 I just go with a black 000.2 which is a pretty strong shadow and we can turn off my border and turn off my background cool I actually think that's going to work okay creates enough of a separation we can see that it's it's sort of like a card that's standing out a little bit the only problem with doing this is I now need to change my markup a little bit because well I could give my text and my title some padding but in this case I'm just going to go into all my cards so I'm just control or command clicking to multi-place my cursor so I can add in a div class equals product content and then 23456 uh we can come all the way down uh it's not scrolling okay that's okay um fine print and then oh no where am I did I do that properly product content yeah and product content good so at the end of each one product product content yeah where's uh I'm so confused now paragraph paragraph fine print okay so after my fine print on each one of those we can do a closed div and this is where prettier is really nice because when I just put a random closed div like that when I hit save prettier fix it for me formats things properly so what I can say here is my product if you're wondering what the whole double underscore thing is about um you can watch my videos on the BEM naming convention so product content padding of 1m I'm gonna do a bit bigger actually white space is your friend everybody oh no what did prod prod cut twice now product there we go uh I don't need on top because of the way the images are never mind yes I do it's uh okay it's because of the margin top maybe on this I didn't realize I think the image has some extra empty space on the bottom of it so maybe I'd have to go and crop some of the images uh so also on all these h3s as I just mentioned I want to add a class of class equals product title I guess you know it could have been probably should be product title like that uh product class name is product title okie dokie so then my product title uh this is where should this be in typography because the way I named it I'm keeping it with my product stuff um yeah that's my explanation anyway and how I like to work so my product title will be color of our color primary font size will be 2.5 rem if you're not used to working in rems or m's it really comes down to um you get used to it pretty much is the the story um margin bottom 0.5 m um you sort of get you start knowing what sizes different things are uh really quickly you just have to practice with it and use it a little bit I just find it nice because then you have your font size then you can do m's which are going to be relative to the font size and you know roughly what what it's going to look like pretty quickly um I know some people really love pixels but I really encourage you to start playing with rems and m's I have a video on it if you don't know the difference or why I'm putting one for font size and one for margins and all of that the fine print fine print that should probably go up because I didn't call it product fine print or maybe I should rename it so it's product fine print uh font size of 0.5 m so it's just half of the normal I guess I could do rem did I not call oh I think I did fine print with a hyphen for some reason how did I do fine print I put fint print I wonder I made so many mistakes in this when I was writing the markup you guys must have all been like watching it so here I'm just going to do a uh fine and replace fint print for fine print because uh why so yeah let's just do a replace all on that and now my fine print should be working oh come on what's going on I have to save both files there we go that's way too small uh point remember and I just said you get an idea I find for smaller font sizes I don't use them enough that's okay and maybe the color can be like our gba 000 0.85 and that's probably getting on pretty borderline for um accessibility purposes but we'll stick with it even the ingredient list I'm wondering if I should do something different with that ingredients should probably be in bold uh this is one thing you could do if you don't want to like scroll up and down which I've been doing I'm doing command f for the for this so I could say anywhere that has ingredients should be changed to a strong ingredients close strong and then just change all and it's going to plug it in for you so if you have a whole bunch of instances where you want to wrap the same word and every single one of them um there we go that just looks a little bit better it sort of breaks up the eye so we know we're reading something a little bit different I could play with the font sizes or something else but I think that's good enough cool um I want to move the name of each one of them so we'll do that really fast see this one has less space there I like this a little bit more I'm going to go and crop that image a little bit later on but these ones are looking good cool so I think that works out well uh let's get down to my bottom here where I hadn't really planned everything out in my original design um and I'm missing a button so it's just I'm missing the text on my buttons so let's do that really quickly uh and even I'm just going to copy my other button group because it was all done okay so uh I just did this quickly uh so you wouldn't have to suffer through me doing more markup the only thing is we can't see one of our buttons because we haven't styled that one yet so button button primary and we have our button accent which will have a background of our color accent now one thing I have not done is put in the hover for either of these and we also don't want them touching the side like that but I don't want that's happening because this is in a section that should be in this section so let's just move all of this into this section because they should be in there there we go okay um this is kind of awkward see all our products and then email facebook instagram uh order via should that just be order order through I'll leave it like that I guess it could it be a little sub thing to see all our products and then order through email facebook instagram should we try that h3 order through I can't read that font at a small screen size and I also not sure let's just say order through one of the following or I think we'll do that um yeah I think we'll do that the only problem is this should be closer to these than that or at least equal space uh so I'm going to do class is equal to margin I'm going to steal from bootstrap here margin bottom zero um I'm not a specific thing this seems to be something that could be reused I'm not saying I'm going to in this project but it could come in handy as just like a little helper class um again I'm organizing this through like this is my layout general laod stuff so and I'll do my helper class here at the bottom margin bottom zero is margin bottom of zero I'm not making all of the classes because I don't know if I need them all I think that makes more sense order through one of the following um and as I said before I didn't make hovers for any of these so I think we need some hovers on those as well um accent so my button primary background is I'm going to cheat for the moment color accent uh whoops this should be hover and let's just copy that and actually we should copy this one accent hover let's just see I'm not sure if I'm going to like this no I don't like it at all that's kind of confusing actually okay um I was just seeing if I get away without making new colors I'm actually going to do them up here I'm going to take these copy primary dark and you can make light variations too I tend to have light and dark variations I'm usually using sass so which makes it a lot easier uh because you can light and dark and stuff but I don't mind doing it this way so darker is going to be dark and the light version or the I put light there but this is going to be accent dark as well dark uh which also opens up these as being something I can use in pretty much anywhere I need which is always handy and my buttons are so this would be axe so we go back to primary but we'll do dark and then accent dark yeah I think that makes a lot more sense for the hovers I could probably make the purple one a little bit darker uh and once again don't forget to add in the uh primary focus just in case someone is navigating via keyboard um it's nice to know what they're what they've selected and even if like even if they are going um by keyboard you know there we go you can see that it has highlighted it so perfect um okay so we want to do our footer nav and our footer in general so the footer can obviously go all the way down here at the bottom so I'm just going to do a footer I'm going to do a background of I'm going to do a dark background padding 3m 0 or 1m just like we've used in a bunch of places and color will be white then my footer oops my footer nav can be list style of none display flex I also screwed up this list when I did it that's so funny unless I copied and pasted maybe li close li uh let's see my background on my footer is not working oh there we go color white that's all looking good I didn't um I'm also going to add in I just want all my footer links footer a to be uh this uh color inherit um so I can actually see them we'll do my footer nav a padding of point uh 0.75m I think text declaration of none then footer nav a hover can have the uh text declaration of underline just so we have some hint that we're we're active we're sort of interacting with it um and I guess flex wrap wrap align items uh no not just is it going to be justified justify content center or is it going to be items now why does it keep moving up it's it's kind of awkward or what I could do instead of this I could do footer is display flex and then I get my social and my other ones my social I haven't uh set up yet I'm gonna and actually I think they only have two for their social networks so I just got the addresses there what they'd originally done is image SRC and I'm going to do the same thing for now I'm just going to leave it as an image and this is even if you have an icon or an SVG or whatever it is um image whoops not image oh yeah image oh no we're in my markup now image uh I believe they had Facebook logo and here it's an image IG Instagram oh I didn't put my alt uh you don't need to put an alt on these because they're logos so you don't have to say like this is what this logo is um but just so you know for accessibility reasons you can come on to these and do an area area label uh so this would be Facebook and area label Instagram so you know a screen reader knows what these are the images are black so maybe I shouldn't have gone I could obviously change out the images and then definitely need to be smaller I'm gonna give these each a class class is equal to social link and so my footer then I have my footer social is list style none social link is I'm not gonna use social link I'm new social icon um max width 75 pixels it's still a bit big 50 and my so this would be my social link class equals social link padding 0.5m because they're links and if I need margin I can add margin to them just to space them out a little bit why are they so spaced out now what's going on so I have my dev tools my list item has a height of 106 pixels so I'm gonna go to computed and see there's nothing setting that oh that is the padding what if I just say like five pixels curious now it's not the padding I'm on my list item it's my why does my a why does a padding of five pixels so I honestly don't know what's happening there because I shouldn't even be getting anything because these are my social links and social links are in line because they're links there's no display flex on my list item so I don't know what this is doing to be honest um but on my social link if I do a display inline block that should make my margins work I shouldn't be able to put a top and margin bottom to begin with oh not word no okay so I'm gonna bring up my dev tools here that's all good so footer social okay one second there's this where's this what is happening to my image why is this one here my facebook logo is an svg and this one's a png aha svgs are weird and it depends on what browser you're in uh so on my social icon I put a max width let's just put a width there we go we can actually see them now okay that makes more sense my inline block that's working this should be just a margin bottom though okay and I'm gonna change the background color of this whole thing to var color accent no color primary I might change that to footer uh it's okay but I'm going to go with accent actually accent dark and then a margin bottom of zero because apparently there's a margin on it what's that from once again dev tools come up I grab this little bugger and start trying to find out what's causing the space here hmm I'm in it okay one thing that we're definitely going to do I'm eventually going to change the color of those but we're just I'm worrying with the layout for the coding stuff right now but I would change the color of these probably inverse the colors just so it works a bit better on the dark background and I did that on my footer's display flex justify content center and is this kind of cheating but I'm gonna do footer uh no I won't uh let's do I'll do it the right way um so let's do my one second footer nav and my wait did I do this already footer nav is here and my social footer social that's I'm just going to combine these together because they're going to behave the same way footer social uh margin zero padding padding zero and I have this mystery space here at the bottom and we're going to have to figure out what is causing that but in the meantime let's do them big I'm going to forget about it if not though right usually my dev tools here save me for this type of stuff but I honestly I'm at a loss my main oh wait I just realized I made a mistake too here my footer is inside my main let's go and fix that while we're here my footer should be outside my main and that actually fixed my problem interesting because it's not adding a giant space there hmm cool whatever I'm happy it worked I literally have no idea why that fixed it but I'm happy it did I'm also going to add a little bit of space here because I just find it's a little bit tight so my footer is going to have a as this changes to margin very new margin top 3m I'm going to double that space up a little bit just to sort of say yeah we're at the end all kidoki and I'm also going to do one more thing product title product content product dot product last of type margin bottom 2m I just want to make sure I get end up with a space here cool so now we get to worry about doing it responsive and making this work at all screen sizes so that becomes fun especially because I have a bit of limited screen space here but basically at one point this is getting too big my image you know that's awkward so we have to decide how we're going to handle that so I think the first thing I'm going to do is just say products here has a max width to start with of about 500 pixels so that's going to be like about something like that let's just see if that works cool and then that would be a margin zero auto now at one point that's also going to be really we're going to have to go through everything here so I think here is working fine we're going to have to put max widths on a few things because they're getting too big this is working okay this the spacing like when we're at a small screen size this spacing here and here is fine but all of a sudden that's really not becoming enough so we're going to have to play with our paddings at larger screen sizes we just have to decide and people get like okay this is where my layout we create breakpoints around like the bootstrap numbers have just become the super standard thing it shouldn't necessarily be the bootstrap numbers it shouldn't necessarily be for this device I'm planning this and for this other device because tablet what's the real size for a tablet these days is there a real size for tablets these days so what we're going to do instead is say when we when our layout starts to look like crap you know is where we're going to build in a breakpoint so that's not bothering me this spacing is really starting to bug me so we're at like 750 width on this right now you can also do this which is the pixel density so you can simulate like higher density things but it's not going to change any of that that's just more for images and stuff um so at like 750 ish pixels our layout is not looking so good so my first breakpoint that I'm going to build is going to be there so I'm going to do at media only screen and min width 750 pixels you might hear that you should use m's and rem's I think the pixel issue has been fixed from everything I understand that was an old issue where or was it rem's there was one unit that would cause problems here um but I'm the browsers have pretty much got back up to par from what I know um so I'm going to go with pixels just because it's easy to look at the numbers here um so on this I'm going to do section section padding is going to become 6 m 1 m I'm still going to keep the left and the right just as like we need to keep that so all of a sudden I'm just adding a lot more white space because we're working on screens that are bigger so when you're on a bigger screen you can have a lot more white space uh which is cool now that was also my about us body and my I guess we should do it first uh dot about us intro we're both padding will become 6 m top and bottom so it matches there 1 m left and right I'm going to do a 4 m on the bottom let's just do like this and see what it looks like or actually at that point maybe we could actually switch the about us to flex direction direction column whoops crap column row row I always mix those up uh cool so that's working let's just see where it's breaking I think that makes sense but obviously the spacing is way off here uh because of the way because of our content so that means for the um about us intro and the about us body um so we're gonna put a flex on this so just flex I'm going to do zero one which is the default usually it's zero and auto which is sort of basing it on the um so this is my flex grow flex shrink and flex basis yeah so it's grow shrink basis the basis is like what's the default um so that should just split it 50 50 there we go um the also we're going to do an align self center oh that's breaking this one oh no I don't want to do that anyway um save I want this one to stretch oh no let's go look at my mark up here for a second the body's okay we're gonna have to remove our margins there let's start with that because that one's easy to fix uh a nice little trick you can do is except we have to do it where's my p so here um p plus p remember that oh no not p plus p p paragraph that is last child so if the paragraph is at the very bottom of something I like giving it a margin bottom of zero so it doesn't create these weird spacing issues so actually this should not see that one has a margin on it now and that one has no margin on it um but I want those two paragraphs centered inside that space which means I'm also going to want to do so this is my about us body so we're going to do a few things here about us okay so that's good I'm going to say my about us body becomes display flex flex direction is row column column column we want to go up and down and then my justify content will be center so it should center it this way why not justify content what did I do wrong about us body is it display flex it is displaying flex just to look here for one second where's my aha that's why it's my padding that's off because I didn't redefine the padding so I just have more padding on the bottom than the top so I don't mean I'm going to take this off just to show you why I was putting that there uh body here let's just do padding is 3m 1m which is going to center it anyway so I really don't need this uh but I'm going to keep it I'm actually let's just take this should this could go on that and my about us I'm just going to try this cut paste delete and let's see wait oh yeah uh there we go okay so if I didn't have this justify content center what would happen is this is staying at the top or if this one was shorter it would stick to the top so the whole point of this justify content center is to center the shorter one inside the space so each one of these little boxes is a flex container that is centering its own content vertically in that space cool um now the problem that's going to happen here is they're going to get way too long that way so what I'm going to do and my text alignment actually I want to switch so what we're going to do now is my about us intro should become a text align right and my about us intro not a fan of the wild card selector but in this case I think it's just the safest so if ever the content in here changes it's always going to apply because what I want to do is give it a max width max width of uh I don't know I'm going to start with like 25 rams and let's just see if that makes sense as that grows perfect so it's stopping there I'm actually going to let that get a little bit bigger so we can actually fit all that on one line and I do want it not to be stuck to that side I want it to be on the right side so right now what's happening let's just give this a border border not this one yeah this one border three picks three pixels solid yellow should stand out on the purple so you can see there's the max width but as that's getting bigger that max width is staying on the left even though we have a text line right here so it's text line right inside that yellow box but I want that whole yellow box to stay on that side so we can also do an align no it won't be align self it'd be justify self no it'd be a line uh line I think it'd be a line align self flex and cross my fingers I got it wrong justify justify justify self no I didn't think that would be right um because this is display flex right oh there I want my title has the border on it whoops oh no you know what that means guys I need to make this a display flex too yeah a display flex the nice thing with this is I won't do the whole like a line whatever I'm just going to say on this uh margin left of auto actually I don't even need display flex for that what was I doing there we go haha um the reason a mar the margin zero auto thing works to center something is it's it's you always think of doing that but if you just put a margin left of auto or a margin right of auto it's going to push it all the way the other way so it's going to fill the left up with empty space effectively which does make me want to do one thing of making this a little bigger just to make that gap a bit bigger there we go um I do want this actually to be that looked a bit too big okay there we go that feels a little bit better okay so we did the intro right so I'm just gonna copy that paste actually we can take all of this copy paste but this one and this one will both become about us uh content or body body the max width will stay the same this will become a margin right so it's pushing it the other way and this will become a text line left there we go and even when we get to really big screen sizes it's going to limit the maximum width of those and keep them centered on the screen cool so I think that works out really well that looks good let's just shrink down and see if it's is it breaking at the right point yeah I think that that's we're that's still looking good and then it breaks there and that's still looking good one thing we should add that I didn't add let's get this out of the way this I'm going to go all the way back up to my original where I originally originally originally said it once I can find it background image background size cover cool yo okay that looks good order online is working but I do definitely um I realized a little bit of a problem that I've created for myself in the way I did my markup is about us is okay let's about us is good order online I don't want to give everything a max width because I think it's going to look weird and I didn't put in containers so I'm actually going to in the media query so it's not going to do this on small devices because we don't need it but we're going to do an order online and I might do this for more than one section display grid just so I can keep my markup really simple so yeah we'll do that uh okay so my order online let's do that let's build in people ask me a lot so let's say order online this is like my basic this is not what we'd want to do um order online not all children the direct descendants um and I'm just going to give it a max width so my max width what did I put it uh for that other thing didn't I give something here a maximum width or no maybe not okay we're going to come up with a new size I'm just going to come up with like some random number here of 40 30 actually you know what a fun way to do max widths is I'm going to say like 55 ch ch is based on the size of the character the width of a character so line length is really important so max width is 55 ch margin of zero auto so if we go smaller so it goes like that then it's going to that's going to happen I'm going to fix this but at least now like if somebody's on an old device that doesn't support grid it won't be the most beautiful thing but it's going to work actually let's fix our buttons I'm going to come all the way up in my media query and put it my button group section let's put my button group here group flex direction will be column I'm going to screw that up again row okay I'm going to make this a little bit bigger than let's do 65 just so I know this I know let's go back to 55 I think we're good there the problem that is coming up is my buttons need space between them so this is that btn plus btn thing that I got rid of and said I need to bring back so that would be margin left of I'll make it pretty small at 0.5 there we go and I'm going to add a margin margin top of 1m why can I not have a margin top on my group oh that makes sense this is causing breaking everything okay so if I do margin zero auto I'm just going to do margin left auto and margin right auto just so I can set top and bottom margin still and then I can fix my button group here okay there we go so that's what it would look like you know what do I need a grid then that works I was going to put in a grid but why do we need a grid that works pretty well there we go I think that's okay it might look kind of weird at really big screens though no you know what it sort of draws the attention it's fine that doesn't bother me I might make the max width on that a little bit bigger still what a thought 50 is that 55 you generally don't want to go above 70 70s like a lines are starting to get a little bit long so you're limiting the maximum length of your line cool so there we go we're limiting the maximum length of our lines which is going to sort of do everything but I think that works out pretty pretty much what I wanted anyway um some of our products okay so now we can do dot products with an s is flex direction row yeah I got it right okay um that also means my dot product is going to be margin if I just did margin zero the this one looks bigger than those ones so I'm just going to make sure they're all the same so I'm going to do a uh flex of the zero one is it one zero one zero zero one and 33 percent so they're all the same size that looks a bit better uh are these kidding that same max width though oh no that's okay so then my products too I'm going to change the max width of this uh to like I'm going to do like 1200 pixels I'm going to let this get pretty big and my product will also do that same trick that we just did before dot product plus dot product is margin left of 1m I think we'll do um the nice thing with this is he could use this again on the actual products page uh whoops not where I wanted that let's put that up here with my products okay so uh run into a little bit of a problem with a couple things here so just if you are in firefox uh responsive mode just be careful because you can make the screen bigger than your window and I was wondering why my button was disappearing there so just be careful with that um and here I was playing around a little bit um just if I I'd turn this off on my button group at one point so just to watch out because I definitely want that on so that stays centered um now the one problem we sort of have left for this layout I need to fix my footer because I really don't like what that looks like right now and we have this order our order our I can't speak or order through one of the following um and it doesn't look good because our flex is putting them all together like that so what I think I'm going to do is um come down to my button group and I'm going to give this a class of a button button group intro maybe not the best don't mind it though um and I'm gonna I want to keep this with all my button groupy stuff um and it sort of goes with my typography but because of the name of it I'm going to keep it over here so my button group intro and uh on that I'm going to what are we going to do we're going to give that a width not a width won't work with um as a flex child um can I give this a flex actually you know what um I'm gonna take this off I'm being a little silly uh this just shouldn't be in my button group a little bit tired now we've been going for a while that would make a lot more sense let's go look there we go so that's there oh I'd turn that off let's turn that back on I thought I'd done that in my dev tools but I'd actually turned it off here uh did I do that for a reason at the small screens no we're okay I don't know why I commented that out as I said I've been doing this for a little while now so um yeah we want to have our justify content center on these are really narrow like really super narrow but I sort of want it I'm going to leave it like that for now um cool cool cool so that's good let's just fix a little bit on our footer um um I think what I'm gonna do is footer footer footer this play effects I did justify content center I might just change this to a space around um so that's a lot though I uh if I look at my footer the reason I wanted space around like space around between would have home here in the facebook icon these two icons like all the way over here I sort of wanted them grouped a little bit um alternatively if I keep this is where a gap them let's just do center a gap on this would be great 3m and I'm wondering I think firefox actually supports this five it does so the gap property is coming the browser support on this is going to be terrible um so just as a warning so this is replacing grid gap and it's for uh grid as well as as well as flex so if you're using flexbox or that you can use gap but again browser support on that's going to be really iffy like it's one of those things where if the browser doesn't support it it's not going to break anything it's just going to look like this instead which I'm being a little bit lazy because I could build this into the navigations to actually build the space in there with some margins between them but I think I'll just do that we could add a little copyright or something like that but I'm going to leave that like that um should we do 320 it's a little bit tight here I'm again as I said I'm not going to do the navigation just because it's going to take a little bit too long for the purposes of this video I wanted to focus more on the layout and the navigation itself would make its own video um the one last thing I'm going to change and a few people suggested it and I think they're right um is people are sort of mentioning the monkey is a little bit confusing um and I tend to agree a little bit I think if you look at pretty much any food sales website when you get onto the site instead of having the monkey um they are or instead of having like well I'm saying instead of having the monkey most of them don't have a monkey but instead of having like a mascot or something that's about the brand they have the product itself so I'm going to switch this out I'm going to go find an image uh to use for that and we're going to switch that out so we'll be right back and we'll look at me doing just that okay so I found a picture to replace uh the hero with so we're going to do that but I also found a mistake in uh something I did and I'm a little bit silly so let's just find my hero here uh background image I'm just going to change this to hero eg we'll save that and there we go um I could probably change this now I don't know 555 or something less dark um at least we see granola it's not perfect I just got this from on splash so I would highly suggest to them to find a picture of their own that they can put in there of their own product because again their instagram page does have some really nice stuff um on there and the mistake I made before we wrap all this up is at one point I was complaining this image appears to be bigger than these other images and no it was my mistake and my fault this happened um so we're actually just going to let's bring we don't need our css right now because it wasn't a css mistake it was a markup mistake and you probably noticed it and again I've made a few mistakes in this um but if you're curious how I found it it was really quite simple because I always like showing you guys um some people don't like when I'm showing the mistakes I make they want they prefer just seeing like something really well done and other people tell me that they really like seeing all the mistakes I make and how I go about fixing them because they learn through that so I'd love your feedback on that do you like you know I sort of been rambling a little bit and going back and forth a lot in this project do you like seeing this and seeing it in a bit more of a raw setting or do you prefer when it's like super polished and I'm just going through explaining the things I'm doing as I try to do most of the time uh but without sort of any back and forth just like here we're going from A to Z and getting it all right off the bat um because I do understand that sometimes the back and forth can get kind of annoying and frustrating um depending on how much I do and all of that so uh all I did was I was using actually to be honest I opened them up in Photoshop to resize them and then I realized they're all the same when I was in Photoshop and I went oh that's weird um so then I came here with my this little dude and said whoops there's padding on here and then I remembered that I'd taken the padding off of those but uh I hadn't updated the markup so yeah nice and uh silly of me there so if we find our products um there is the first one so I have my product showcase my header and then I have my products product and then my product content so I think what I want to do is take my image outside of my product content everywhere and then come back to this one as well and just move my image up save all that and now it's nice and consistent they're all the same size they're all taking up all the space and it helps lead to these being a little bit more balanced um not perfect and you know what there's still one weird thing that this one is a little bit shorter so let's go and do the same thing inspect element and find out what's causing that oh that one has a margin did I did you see that there's a margin bottom on that but not on the other ones why margin left mark product last of type margin bottom oh yes I did that so that's when we're at small screens um I put that in so when we're like this I wanted to make sure we had a space here but we don't want that at the big screens so cool we found another little mistake there uh that I had failed to fix and so let's just go down to my media query product product list product and then here we do our product last of type margin bottom of zero and there we have it the page is done so let's just take a quick final look at the whole thing there we go I think it's looking pretty good and there you have it we are done I really am happy with how that site turned out I'm really glad and proud I think I think it was a nice site a nice redesign a last little minute change there for the hero image so um I'd love your feedback on it what you think of the site uh if you think there's any other changes I should convey to um Sebeck who is the community members this was his site that we that we just went through redesigning so I could always relay any feedback towards him on other little tweaks or fixes that he could do along the way as well if you have any questions comments about anything I did please leave a comment down below if you don't but you just want to say you like the video just hit the thumbs up and let me know that you did enjoy it if you managed to watch this whole thing and you haven't yet subscribed hit that subscribe button because there's lots of goodness like this I make a new video every single week uh they're not all like this one but you know they're always looking at html and css and every now and then a little bit of java script thank you a million times for watching a massive thank you to my patrons who help support everything I do here if you don't know about patreon it is a place where you can support creators who make content that you find valuable so if you want to check that out I have a little bit of bonus stuff there I try and put early releases this one isn't but I try and release my videos a little bit early and there's some voting and other stuff um you can check that out there's a link to it in the description below and a big shout out to Lauren who is my supporter of awesome thank you so much for your very generous contribution one other thing before I let you go did you know I have a newsletter because a lot of people don't um I have articles over on my website where I write an article every week as well that tend to be quite a lot shorter than what I do in my videos um it's usually on little little things that I find along the way sometimes that turns that little topic turns into a big video sometimes it's something I do in a video that I glance over but then I write a little bit more detailed about it in the article and sometimes there's a long article mixed in there as well they come out every single sunday so if you'd like to never miss one of those articles there is a link to the description about my newsletter because I asked you guys if you knew about it and then on like the community thing tab that community tab thing we can do here on youtube whatever it is and a whole bunch of people said they never knew I had that so I probably haven't been doing a very good job of promoting it it just been sort of low down in the description that nobody ever looks at so you can check that out as well also don't forget about the freelancing bundle from Kyle it has a whole bunch of really good stuff in there so if you want to launch your freelancing career or something you're thinking about go and check that out at least check out the page so again that's studywebdevelopment.com forward slash freelancing and make sure when you buy the course to use the coupon code kev20 to get a 20% coupon on that course and again it is an affiliate link so just to give you full disclosure on that you're still here this is a really long video thanks for sticking around all the way to here um if you're looking for something else to watch if you watch this whole thing I guess you got a lot of time to spend so check out one of my other videos there is a I don't know what side it's on one of these sides youtube is going to be suggesting something you could watch and you can always go and check that out it's from me it's probably gonna be really good so you can go and check that out but if you decide not to or just if you do but whenever it is until the next time I do see you don't forget to make your corn on the internet just a little bit more awesome