Coding a responsive webpage from start to finish

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 gonna 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 set up so my old Mike 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 I'm 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 gonna 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 wanna 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 I 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 and 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 a good reason because as soon as you land a client you know you'll have 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 a an e-book 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 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 are have been through the course or who are trying to start their freelancing career who 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 get even more help and advice from them if this sounds awesome that sounds like something you want to check out the URL for it is study web development comm forward slash freelancing and the really awesome thing here too is if you use the coupon code keV 20 which is in the you know showing up on the screen now there's also that in the description below and as as is the link I've used 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 make 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 you know one client and you've more than made up for the difference and there's 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 to 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 Nam's website so we want to be 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 when I do these longer builds sometimes they're a little bit oh just speaking of longer builds I don't know if I mentioned it already but I have put timestamps 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 timestamps 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 that 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 super scripted 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 like this about my videos but usually people are either gonna 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 we're gonna 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 to just 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 I it does me and 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 but we get the whole site done it's looking great just if you know with the custom properties you might want to build in fall backs and there's some other things maybe using I think I mentioned post CSS while I'm coding it ups so I wanted 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 alright so here we are in vs code writing it started our redesign and 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 gonna be doing this from scratch so I'm gonna go and make a new file I'm just gonna call this index.html and in I'm gonna be using one thing but we vs code we do have Emmet if you don't have Emmet that's cool you can do this anyway you can install it as an extension in other browsers if you just do it exclamation mark and then push tab you get your nice starting document there and we'll just do agency and for now I'm just goes I'm going fast I want to add a style sheet here so I'm gonna do style and again I'm going to use Emmet so I'm going to push tab on my keyboard what was I thinking I don't want a style tag I want it linked so let's do link and hit tab and let's just do CSS slash Styles dot CSS for this now I want to link to that so let's make a new file and I'm gonna call it styles dot s CSS 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 SuperDuper so now I can actually start and you might notice just really quickly when I save a few things sort of change to add some self closing tags and the indentation might have changed I am using prettier as well as an extension so sometimes when I say if things might move around a little bit cool so we're gonna go and check everything out in a second memory come over here to my stylesheet I'm just gonna paste in some code here and rearrange it so this is from the original design and this is the link to all the fonts so let's grab that and I'm gonna bring the fonts as the very first thing that loads in so we just have all the fonts coming in 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 and we really don't need those these days really if someone's browsers that old I'm not gonna worry about it too much um so I took those off and you know the WOFF here is supported like way back to like IE 9 I think so you should be okay so we'll leave all that there HTML I'm just because of how I like doing things I'm gonna put this up at the top and I'm gonna get rid of that because I'm gonna have comments in here but I'm doing this my way 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 let's bring up our design actually okay so I'm gonna just keep the design there so I can sort of go through as I'm coding it and I'm not gonna 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 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 so you can watch the whole video in one shot you can check out the timestamps for when I'm doing the HTML the CSS and maybe I'll break apart a little bit from there as well 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 but I'm gonna leave it like that for now but with the idea that maybe we could actually turn that into a just like a an SVG at one point or something I think it would be a lighter weight than loading in a whole font but what we're gonna do now is that is a font for now and I'm going to leave it like that so it's in h1 and I'm gonna give it a class of logo League logo and it's hippie chick noms that's right up there now actually all of this should be in a header again I'm just a new header push tab for Emmet there and grab that in my header I'm also going to include what are we gonna include in my header we're going to include the navigation so we can do a nav we ran into a UL with an li with an A so this is again Emmet my is inside my allies inside of my UL so the x 4 because we have 4 links and I'm just going to put few ctrl or command click you can place your cursor in multiple places and its 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 word you're worried about the structure right now so there's the header cool so now we're gonna come down and we can do a main here I don't think I need a clasp on my main we're just gonna put in a main tag because it is good to have that um and then here we can have an h2 of now I'm actually gonna look here for a second I have a font size it's all the same there okay so that's gonna 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 gonna 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 am styling instead of just like you know what exactly is an h2 well in this case it's my section title and being a section title I should probably make an actual section in here so this will be section intro whoops section I don't even know if this means something on it but we're gonna still we're going to do it a section I'll just do intro and so we have this section my class title we are northern Ohio's first oil free and sugar free granola company so we want oil free and sugar free so I'm just going to do that shift command or come shift ctrl P and that brings up this Emma track 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 and cool there we go so save that I might put a different font on that at one point or a class on these but we'll leave it like that for now 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 gonna have in here is a little bit different because about us is actually going to end up being flex 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 gonna be treated treating our backgrounds and then in there we're gonna 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 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 and div so I'm just think yeah my big one I have my left box in my right box about us so this could be about us and this is Emmett where you do like a double underscore so it's saying it's something that belongs inside of about us about us I don't wanna put heading just because I mean it is sort of but I'll just do intro because in there I'm gonna put my h2 this one mm-hmm the styling of this one is so different from the other ones if I did section title I'm gonna leave it as a section title for now but I'm probably gonna end up changing that just because the style is completely different on it but I'm gonna 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 title for for this and even thinking you this instead of a div this technically could be a header if you wanted to go with like a bit more semantic text cos in general your heading will be inside a header and 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 gonna be a div so this div can be about us content or body I'm actually going to change it to body because it's content is a bit too big body body text is like your paragraph text and stuff and we have two paragraphs in there super so that's that section dent we're gonna have next a section of order online so in there you know get we could do like a header if you wanted to with in h2 of section title if I did that there we can do it there there's a paragraph and what I'm gonna do for the V's which are gonna be turned into buttons is I'm actually gonna 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 so I think this is gonna be the easiest way to do it so a button group and then I'd have my 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 gonna have our section product showcase and h2 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 they'll be in each three plus an image with a class of product image plus I'll just do P star too I think that makes sense I'm gonna 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 gonna make three products each one of those products will have all this stuff inside of it - there we go perfection and last but not least we need our buttons there 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 make two of them so the first button groups is going to be a BTN and I did BT and will call the purple my accent color and so that one's gonna be all by itself and then we're gonna have another button group got BTN group that will have our three buttons and I could just copy this button group there yes we already done all that work why do it again cool and last but not least we're gonna come down here and we need a footer and the footer I didn't actually do yet which is cool if we go to the original design we had a bit of content in there so we just said the navigation again so I can grab that I'm not actually gonna put it in map tag because the nav is supposed to be preserved for your primary navigation 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 hey how many do we need we need I'll do four I 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 going to do is I have the live server as an extension inside of es 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 let's shrink that down so we can actually go like that I'm also going to open up my dev tools and we're gonna go to responsive just because I want to start with a responsive let's just do galaxy 9 it's fine and we're going to actually separate the window just so I can have a bit more room I'm gonna 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 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 but we'll put that off just so it's faster for me to pull on and off when we need it and there we have that's what our current site looks like so now nothing too fantastic but it is working which is great 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 so we can actually see the images are working just fine 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 it or not change the dislike something different and if it still looks the same you know you're you're off to that saw serif but yeah it's working so we know we're good so this should be a serif fallback awesome now before I really jump into the CSS so if you want to skip this and check the time codes below but I'm gonna be loading in all my variables so root and we're gonna create some some awesome stuff here if you're not used to this I do have some videos on this 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 and fun things that I'm I don't think I'll be using necessarily on this site maybe for my buttons but I don't think so but you can check it out so in here I need my color so let's open up XD again I only have three colors that I want to worry about and I'm actually going to make three box this year 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 great 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 theirs don't oh I had a boarder on everything so I've brought it brought that border color in along with it and so we can just push that to the side make it a bit I can't see it so there we have it's a bit small and actually choppy so let's just do color I'll call it color text not the best name for it that's my 5 a5 a5 a5 a5 a whoops we're gonna have my color primary which is going to be the green and we're gonna have our color this accent which is going to be the purple so that one I already copied and we can get this one copy and those are the three that I used in my design we also have our 4 different fonts that we're gonna want to use so I have my font family we'll call it title and we have my font family saw I'm just gonna put sauce because it's a sauce I don't know we use a serif font we can do serif 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 gonna go almost everywhere so the font family on here will be my VAR fun family surf cool cool okay and then we want to do I'm also going to say on here the color is my bar alert text I use the wrong one no I didn't that looks too late we might change that 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 we're gonna add in which we call this bf narrow I'm missing two ace serif fall back 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 I'm 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 they're 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 can 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 gonna see it just cuz I have a bit of limited screen real estate but I'm gonna be looking at that while I'm coding up 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'm gonna try and make the everything I do here if that doesn't load we load in I don't like the script font I'm gonna do a sauce error here too just because I don't like the default sort of weird stuff that sometimes gets loaded into things okay cool I'm just yeah I'm actually I'm just not used to having this on the HTML to be honest but it's all good the colors a little bit too light I'm gonna darken this up just a touch just a touch I'm gonna 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 in 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 okay so let's just I'm gonna be jumping around a little bit no let's just set up our typography so here let's do type our typography so we already have a lot of it done but we have our I'm actually doing H one H no H 2 H 3 font family is our font family title line height I'm gonna put one for now I know I did it less when I actually designed it no no we're gonna make that a lot smaller point eight I think yeah okay that font is a bit weird for the line height so let's find point eight is going to work out fine and the font size I could build in some custom properties here I did it sixty pixels but again I did my design really as just like a template to start from so I'm gonna do on here let's do because even it's added sixty pixels and I must switch that off you know what I was wondering if it would 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 completely skipped a section there sorry about that so I'm gonna put this in the main as my section I wanted this to be my intro section I'll do a section we'll call it hero it's to section title I got mixed up there while I was doing everything real food I'm gonna put a period on real food - I'm not sure if they originally had it there we go okay so if I do that 60 pixels will be like five 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 I like just setting so you might have something it's not a section title that is in h2 and h3 we still want it to have some similarities and now what we're gonna do is we're gonna start getting a bit more specific so let's just say h2 we can do our font size is the five Ram we'll see if it's too big but I think that might actually work out maybe 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 gonna go up to h4 just in case it's used on other parts of the website also I forgot my paragraph and whoops paragraph margin of zero because the default margins really bugged me and then we can reset those as we go from there so we have my age two and three that's good so this is sort of like some general stylings that I like putting on stuff and 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 so our my margin bottom my paragraphs can be like point I usually do a bit smaller then my content that looks pretty good awesome okay so let's start a 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 home page styles because I think everything I'm doing here is gonna be um some stuff I'm one of 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 I have my buttons and my home page styles but 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 always have a little space so I'm going to do that and Max with 100% so that we go at least my images are nice and responsive now and now 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 so the first thing is here where we have our no sugar added no oil all real food and that way might not to come back to the navigation because it's not actually in the way I'm actually a little I said we're gonna do that but we should do our navigation right 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 have one bullet point and I was really confused I think Ryan did my Emmet 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 you're out of that it save there we go that's more what we were sort of expecting so my nav is nothing that my now you well we'll 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-block so we can give them some size padding of I don't know point 5m just to give them some size it makes it a bit easier to click on stuff this also needs our margin of 0 padding of 0 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 or round 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 dropdowns and stuff like that so let's keep going then I have 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 ok text decoration of none I'm gonna give them a hover so nav a hover color can be var color accent M so we can get just a little and you know what we'll add the text declaration of underline and when we have the hover I'm also going to do a [Music] 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 you you to being able to click on the navigation um the the logo so class 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 link around my h1 which is a no-no because links are in line and this is a block level element so the inline should be here so this would be my a href can be it'd be index.html and my close a will go right there so that means we should also be we need to change the font anyway yeah so let's do that I'm gonna come right here for my logo so dot logo yeah I'm gonna do logo and then we'll do this as color should I do it all here no we'll do the color and I'll let's change the font font family is of our font family logo and logo a a text declaration of none the font size actually looks pretty good color can be black and text look we can just do a simple text-align:center on the h1 there we go so that works out well I'm gonna also let's just come here on my nav itself nav my nav let's do header padding of one m0 and I'm gonna put two em 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 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 okay so home page Styles now so I have my dot hero which has a background image on there so background whoops yeah background is if you're putting a background image you can also give a background color just so I'm gonna do var color accent if the image doesn't load for some reason you actually have like somewhere that I think it's 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 and so I'm also gonna use a blending mode cuz why not duh 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 always 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 0 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 if you used to photo shops 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 the old the big three usually multiply a screen and overlay and they're all supported anyway mmm text-align:center we need some padding on this padding:1em no any more than that padding Zameen viewport height I think let's do like 25 viewport height 0 for left and right too much 15 we might come in with a mobile style after 2 on the big screens I think I'll do that on the original design we had he had a background attachment so we can try that background attachment fixed and one thing I didn't do what we're gonna need it for the large screen sizes is background size of cover so there we go there's the fixed 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 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 I'm wondering if I went with a high 5 5 on this actually you know it's gonna show it more because of the way multiply works and if I went darker I'm gonna stick with the 3 3 3 I think in the original design I had if I bring that on screen you can see it's a little bit more like greyed 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 gonna add one M of padding on the left and right it pushes it onto lines which actually makes it a bit easier and better to read there but it's also going to 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 if we come and look it's a really simple section there so if we come and look at the mark-up again for that 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 to span on that I'm wondering if I should put a clasp on there I guess I said I would so class can be text green actually text I said green but we'll do primary which will make more sense 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 is 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 pricks primary it just makes it so if you change the color your markups still sort of your class naming and all that still makes sense so we have my intro padding in this case and I'm wondering honestly I might do so that's 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 will do like 5 M 0 left and right let's see what that looks like this is double here but we're having switching background colors a little really good for just trying to think yeah we're gonna do that's our default so for a section it keep that off I'm just wondering if we go back to the original design we have text-align:center text-align:center not text-align:center this has text-align:center should we have it as a default on the whole site even and then we override it no I'm not gonna do that I'm just going to do it for this section in that one 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 then you might be able to argue I just went for things like center so the intro padding will stay the same but I will do with 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 align 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 gonna come after my paragraphs I'm logos my movie my logo there but this is my text primary 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 gonna 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 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 I did call it a section title and I'm wondering if I should maybe it would be like section what hmm title I haven't even used this style section title small if it stays in h2 because I do think it's just as important if you think of the document outline it would make sense I'm just trying to think like yeah 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 is the h1 then we have this h2 you always have to think of the document structure a little bit so like is this like 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 gonna leave it and just do a 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 gonna 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 that means right now we're into about us so that's my new section the background for the whole thing will be of our color accent whoops in that text accent good now the padding's going to have to change because I'm doing that for like this whole thing but I'm gonna add my background image only to here which I'm gonna split my windows actually here because I keep going back and forth and I actually I prefer 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 I'm 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 a flex so I prefer working that way color for this whole section is obviously gonna be white it's a little bit tough to read mm-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 so what if I made the accent color here problem is it also changes 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 and this is one section where let's open up Chrome 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 it's saying it's high enough contrast maybe it's just me and I have bad eyes 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 gonna do let's we don't need that right now is on this font so I'm gonna actually come h2 h3 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 it still looks a bit small I'm gonna 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's 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 3m 1m I believe is what I did cool it's actually not I find it a little bit easier to read now um the small I'm gonna make even smaller so that would be I guess I should put that in my section title small you'll know I I do jump around a lot when I'm doing my CSS I'm going up and down now and hopefully while 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 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 font size will be like 0.7 m I don't know what the default is for small actually line height line height of one oh it's good point seven 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 if I did a display:block on this I know I might look a bit weird that's gonna make it work because it's an in line by default the line height I don't think was actually going to 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 I might do a text-align:center I'm starting to rethink my text-align Mint choices just because everything on I'm really looking at maybe everything is gonna be text-align:center at small screens so let's I'm gonna leave that there there's a few places where I might leave it intro I think I'm actually going to take this off which means I can delete that whole intro thing I don't need anything on it for now 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 were so used to everything being like that and then my intro and my about us body and that padding once again 3m one in super I think that works I might do actually three m1 m1 M and the same thing but the other way around here and then three I'm on the bottom so it's gonna be three M 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 together and these two I'm actually making a one point five 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 you it's fine while you're coating it all up 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 for that but overall I think that's gonna work well so let's move on to the order on the line 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 but this section title was green this section title was green or actually okay we have we have my helper class I was really tempted to just say all section titles are green and then override it for my first one here but we did create that helper class so we will use it section title and text primary and that we can do the same thing down here product showcase no section title oh I never put this some of our products gotta spell proc prodcuts products and text primary there we go so that should scroll down there we go super order online it's the only thing that's missing here's our three buttons that we need yeah and I did the button man I said I was going to everything I missed a few of them right that's okay order I'm gonna start with email actually email I don't know it you could 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 we are actually styling everything right that's why you're watching this video I'm a little bit tired had a long week okay let's see um so my buttons are gonna be dot B TN will be padding I usually do like a one to three ratio ish so 0.75 mm - like 2.5 m and we play play it by there I always tweak these a little bit so we're new to 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 padding is good the color is always gonna be white for the text text declaration will always be none good and then my button primary will be background of our color primary good I forgot my display:inline-block now I made button groups and I'm not using it so we also want my little bit rate 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 I do flex wrap is wrap there we go so they're not actually there and we'll do CA 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 it's at a margin margin left of 0.5 m so gonna work it does but it's a little broken on this layout 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 0 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 how like it's giving me my space in between let's do an align a just defy content center just on my buttons are always in the middle whoops wrong one over here on my button group so it centers it on the screen and so what this is doing is it's saying a button plus a button which means a direct sibling so if there's a button followed by a button the second one we'll get a margin on the left of 0.5 m so then if there's another one after this one we'll get the margin left here but this first one isn't getting any margin on it but at the small screen size is that's gonna cause a problem except now it's working okay because I'm doing still not gonna 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 on display block there's still flex children though which would mean flex direction is column actually that sort of works by doing that and 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'd 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 going to work really well 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 on line so this should have a background of I didn't make a color for this they a something probably af AF AF we'll see it 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 wanted 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 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 in around 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 buttons are a little bit lower let's have a little border-radius border-radius 0.25 M might be too much well it's actually perfect 0.5 just 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 didn't 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 we'll all right 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 dot product my product can have a my original designer screenshotted 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 migrated I guess I could switch that to white but I sort of like going white purple like something different I've white grip anyway 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 and do a variable maybe if I refract 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 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 it worked okay I'm not I was gonna say don't I might change my idea here just because the the images are white bananas for coconuts I might move that I'm gonna do is I'm actually gonna put this here I'm gonna give those a class to it something like product title and I'm gonna take the padding off oh if I take my pad because what I was going to do is actually have the image I think if I do this product let's make this a lot bigger just because it's going to demonstrate something I'm gonna change the color here so we can actually see what I'm gonna be doing okay so I'm gonna save that time so I have the padding that's off but not really anyway at the top here or we can't see it let's put a border is that gonna 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 gonna stop the immune 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 of 0 0 or should we move it down a little bit say 10 pixel uh I'll do the post over 0 0 a blur a pretty small blur I'll try one in and rgba 0 0 0 0 0.2 which is a pretty strong shadow and we can turn off my border and turn off my background [Music] cool I actually think that's gonna 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 gonna go into all my cards so I'm just ctrl or command clicking to multi place my cursor so I can add in a diff class equals product content and then three four or five six we can come all the way down 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 I'm so confused now Pro paragraph paragraph fine print okay so after my fine print on each one of those we can do a close div and this is where prettier is really nice because when I just put a random close div like that when I hit save prettier fix it for me hmm formats things properly so what I can say here is my product if you're wondering what the whole double underscore thing is about you can watch my videos on the BEM naming convention so product content padding of 1m let me do a bit bigger actually white space is your friend everybody oh no what did prod prod to cut twice now product there we go I don't need on top because of the way the images are hmm never mind yes I do it's okay it's because of the margin-top maybe on this I didn't really 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 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 it probably should be product title like that a product class name is product title okey dokey so then my product title 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 Ram if you're not used to working in REMS or MS it really comes down to you get used to it pretty much is the the story margin bottom 0.5 M you sorta get you start knowing what sizes different things are really quickly you just have to practice with it and use it a little bit and I just find it nice because then you have your font size then you can do MS which are gonna be relative to the font size and you know roughly what what its gonna look like pretty quickly I know some people really love pixels but I really encourage you to start playing with REMS & 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 font size of 0.5 M so it's just half of the normal I guess I could do Ram jock although I think I did fine print with a - for some reason how did I do fine print I put findt print oh I made so many mistakes in this when I was writing the mark-up you guys must have all been like watching it so here I'm just gonna do a [Music] find and replace Finch print for fine print because why so you 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 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 rgba 0 0 0.85 and that's probably getting on pretty borderline for 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 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 strong ingredients close strong and then just changed all and it's gonna plug it in for you so if you have a whole bunch of instances where you want to wrap the same word in every single one of them um there we go that just looks a little bit better it sort of breaks up the I so we know we're reading something a little different I could play with the font sizes or something else but I think that's good enough cool 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 gonna go and crop that image a little bit later on but these ones are looking good cool so I think that works out well let's get down to my bottom here where I hadn't really planned everything out in my original design and I'm missing a button so let's just I'm missing the text my buttons so let's do that really quickly [Music] and even I'm just gonna copy my other button group because it was all done [Music] [Music] okay so I just did this quickly so you wouldnt 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 this side like that but I don't want that's happening because this is it 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 this is kind of awkward see all their products and then email Facebook Instagram order via should that just be order order through I'll leave it like that I guess it could it be a little something 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 see 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 so I'm going to do class is equal to margin I'm gonna steal from bootstrap here margin bottom zero 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 again I'm organizing this through like this is my layout general layout he stuff so and I'll do my helper class here at the bottom margin bottom zero is margin autumn of zero I'm not making all of the classes because I don't know if I'd need them all I think that makes more sense order through one of the following and as I said before I didn't make covers for any of these so I think we need some hovers on those as well accent so my button primary background is I'm gonna cheat for the moment color accent 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 gonna like this no I don't like it at all that's kind of confusing actually okay I was just seeing if I get away without making new colors I'm actually gonna do them up here I'm gonna 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 because you can lighten and darken stuff but I don't mind doing it this way so darker is gonna be dark and the light version or the I put light there but this is gonna be accent dark as well dark which also opens up these as being something I can use and pretty much anywhere I need which is always handy my buttons are so this would be X so go back to primary but we'll do dark and then X and dark yeah I think that makes a lot more sense for the hoppers I could probably make the purple one a little bit darker and once again don't forget to add in the primary focus just in case someone is navigating via keyboard it's nice to know what their what they've selected and even if like even if they are going 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 you can obviously go all the way down here at the bottom so I'm just a new footer I'm gonna do a background of I'm gonna do a dark background padding 3 M 0 or 1 M just like we've used on a bunch of places and color will be white that in 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 made me [Music] li clothes Li 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 I'm also going to add in I just want all my footer links footer a to be this color inherit so I can actually see them will do my footer nav a padding of 0.0 point 7 5 m I think text declaration of none footer nav a:hover and have the flat text deck or duration of underline just so we have some hint that we're we're active or sort of interacting with it um and I guess flex rap-rap and a line items no not just let me justify just defy content center or is it giving me items now why is it keep moving up it's good it's kind of awkward a 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 set up yet I'm gonna and actually I think the only of two for their social networks so I just got the addresses they're what they'd originally done is image' SRC and I'm gonna do the same thing for now I'm just gonna leave it as an image and this is even if you have an icon or an SVG or whatever it is image whoops not image oh yeah image I know we're in my markup now image I believe they had Facebook logo and here it's an image I G Instagram oh I didn't put my old you don't need to put an alt on these because their logos so you don't have to say like this is what this logo is but just so you know for accessibility reasons you can come on to these and do an area Aria label so this would be Facebook and area label Instagram so you know a screen reader knows what these are the images are blocked 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 you do so my footer then I have my footer social is list-style:none social link is I'm not gonna do social income any social icon max with 75 pixels it's still a bit big 50 and my so this would be my social link class equals social link padding of 0.5 M cuz there are 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'm my dev tools my list item has a height of 106 pixels so many go to computed and see there's nothing setting that that is the padding well if I did like 5 pixels curious no it's not the padding I'm on my list item it's me why does my a white is 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 their links there's no display flex on my list item so I don't know what this is doing to be honest but on my social think if I do a display:inline-block that should make my margins work I shouldn't be able to put a top of margin bottom to begin with oh not weird no okay so I'm gonna bring up my dev tools here that's all good so foot or social okay one second there's this where's this what is happening to my image why is this one here my facebook logos and SVG and this one's a PNG AHA SPG's are weird and it depends on what browser you're in 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 dark I might change that to foot it's okay but I'm gonna go with accent actually accent dark and then a margin bottom of zero apparently there's a margin on it what's that from once again dev tools came up I grabbed this little bugger and start trying to find out what's causing the space here I'm gonna okay one thing that we're definitely gonna do I'm eventually gonna 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 footers display flex justify Content Center and is this kind of cheating I haven't do footer no I won't let's do I'll do it the right way and 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 gonna combine these together because they're gonna behave the same way footer social margin:0 padding:0 and I have this mystery space here at the bottom and we're gonna have to figure out what is causing that but in the meantime let's do them big error I'm gonna forget about it if not though right usually my dev tools here save me for this type of stuff but I honestly am at a loss my main oh wait I just realized I made a mistake to here my footer is inside my main let's go and fix that what we're here my footer should be outside my main and that actually fix 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 I did I'm also going to add a little bit of space here cuz I just find it's a little bit tight so my footers going to have a as this changes to margin very new margin top three am I'm gonna double that space up a little bit just to sort of say yeah we're at the end okie-dokie 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 um especially cuz 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 gonna handle that so I think the first thing I'm gonna do is just say products here has a max width to start with of about 500 pixels so that's gonna be like about something like that let's just see if that works cool and then that would be a margin:0 auto now at one point that's also gonna be we're gonna have to go through everything here so I think here is working fine at we're gonna 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 in here is fine but all of a sudden that's really not becoming enough so we have to play with our padding's at larger screen sizes we just have to decide and people get like okay this is where my layout they 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 cuz tablet what's the real size for a tablet these days is there a real size for tablets these days so what we're gonna do instead is say when we when our layout starts to look like crap you know is where we're gonna build in a breakpoint so that's not bothering me this spacing is really starting to bug me so we're at like 6:15 50 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 so it's 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 gonna do at media only screen and min with 750 pixels you might hear that you should use m/s and REMS I think the pixel issue has been fixed from everything I understand that was an old issue where or was it REMS there was one unit that would cause problems here but I'm pretty browsers have pretty much got back up to par from what I know so I'm gonna go with pixels just because it's easier to look at the numbers here so on this I'm gonna do section section padding is going to become 6m 1m I'm still gonna 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 which is cool now that was also my about us body and my I guess we should do it first dot about us intro we're both padding will become 6m top and bottom so it matches their one M left and right I'm gonna do with 4m 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 s 2 flex direc Direction column whoops crap column row row I always mix this up cool so that's working let's just see where it's breaking I think that makes sense but obviously the spacing is what we have here because of the way because of our content so that means for the about us intro and the about us body um sorry I put a flex on this so it just flex I'm gonna do 0 1 which is the default usually it's zero and auto which is sort of basing it on the so this is my Flex row flex rank and flex basis yeah so it's grow shrink basis the basis is like what's the default so that should just split it 50/50 there we go the also we're gonna do in a line self-center looks if that's breaking this one I know I don't want to do that anyway say if 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 a nice little trick you can do is accept we have to do it where's my P so here P plus P remember that oh no not P post fee 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 but I want those two paragraphs centered inside that space which means I'm also gonna want to do so this is my about us body so we're gonna do a few things here about us okay so that's good I'm gonna 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 made I'm gonna take this off just to show you why I was putting that there body here let's just do padding is 3 M 1 M which is going to Center it anyway so I really don't need this but I'm gonna keep it I'm actually let's just take this this could go on that and my about us I I'm just gonna try this cut paste delete and let's see wait oh yeah there we go ok so if I didn't have this justified 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 justified 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 and now the problem that's gonna happen here is they're gonna get way too long that way so what I'm gonna do and my text alignment actually I want to switch so what we're gonna do now is my about s intro should become a text-align:right and my about us intro we're 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 I don't know I'm gonna 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 gonna 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 pics three pixels solid yellow should stand it 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-align:right inside that yellow box but I want that whole yellow box to stay on that side so we can also do in a line no it won't be a line itself it'll be justify self no it would be a line line I think it'll be a line a line self reflects and cross my fingers I got it wrong justify justify just defy 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 - yeah display flex the nice thing with this is I won't do the whole like a line in whatever I'm just gonna say on this margin left of auto actually I don't even need to display flex for that what was I doing there we go haha the reason a Mart of the margin:0 auto thing works to center something is it's it's yeah we always think of doing that but if you just put a margin left of auto or a margin right of auto it's gonna push it all the way the other way so it's gonna 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 I do want this actually to be alright 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 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-align: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 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 gonna 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 Coolio okay that looks good order online is work but I do definitely um-hmm I realized a little bit of a problem that I've created for myself in the way I did my markup is a 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 gonna 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 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 order online not all children's the direct descendants and I'm just going to give it a max width so my max width what did I spit it for that other thing didn't I give something here a maximum width or no maybe not okay we're gonna come up with a new size I'm just gonna come up with like some random number here of forty thirty actually you know what a fun way to do max widths is I'm gonna 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 0 auto so if we go smaller so it goes like that then it's gonna that's gonna happen I'm gonna 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 gonna work actually it's fix our buttons I'm gonna come all the way up in my media query and put it my button group section let's put my button group here group relaxed direction will be column I'm going to screw that up again row mmm okay I'm gonna make this a little bit bigger than let's do 65 just so I you 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 + 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 gonna add a margin margin top of 1m why can I not have a margin top on my group oh that makes sense [Music] this is causing breaking everything okay so if I do margin:0 auto I'm just gonna do margin-left:auto and [Music] margin-right:auto just so I can set top and bottom margins still and then I can fix my button group here okay there we go so that's what it would look like yeah you know what do I need a grid then that works I was gonna 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 [Music] would have thought 50 is that 55 you generally don't want to go above 70 70 s 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 gonna 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 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 gonna make sure they're all the same so I'm going to do a flex of the zero one there's it one zero one zero zero one and 33% so they're all the same size that looks a bit better are these kidding that same max wit though oh no that's okay so then my products - I'm gonna change the max width of this - like I'm gonna do like 1200 pixels I'm gonna 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 will do and the nice thing with this is he could use this again on the actual products page whoops not where I wanted that let's put that up here with my products okay so run into a little bit of a problem with a couple of things here so just if you are in Firefox 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 and here I was playing around a little bit justified turned this off on my button group at one point so just to watch out because I definitely want that on so that stays centered 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 or our or I can't speak or order through one of the following and it doesn't look good cuz our flex is putting them all together like that so what I think I'm going to do is come down to my button group and I'm gonna give this a class of button button group intro maybe not the best don't mind it though and a minute I want to keep this with all my button groupie stuff and it sort of goes with my typography but because of the name of it I'm gonna keep it over here so my button group intro and on that I'm going to what do we need we're gonna give that a width now that width won't work with as a flex child thank give this a flex so you know what I'm gonna take this off I'm being a little silly 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 on my dev tools but I've actually turned it off here did I do that for a reason at the small screens no 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 contents that you're on these are really narrow like really super narrow but I I sort of want it I'm gonna leave it like that for now cool cool cool so that's good let's just fix a little bit on our footer um I think what I'm gonna do is footer footer footer display effects justify content center I might just change this to a space around so that's a lot that way and if I look at my footer the reason I wanted space around like space around between we'd have home here in the Facebook I could these two icons like all the way over here I sort of wanted them grouped a little bit I'll turn it to lis if I keep this is were a gap then let's just do Center a gap on this 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 just as a warning so this is replacing grid gap and it's for your grid as well as as well as flex so if you're using flexbox or that you can use Kapiti and browser support on that see me really iffy it's one of those things where if it the browser doesn't support it it's not gonna break anything it's just gonna 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 okay dad a little copyright or something like that but I'm gonna leave that like that 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 gonna 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 the one last thing I'm gonna change and a few people suggested it and I think they're right is people were sort of mentioning the monkey is a little bit confusing 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 they are or instead of have anything 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 gonna switch this out I'm gonna go find an image to use for that and we're going to switch that out so we'll be right back and we'll look at me and doing and just that okay so I found a picture to replace the hero with so we're gonna do that but I also found a mistake in something I did and I'm a little bit silly so let's just find my hero here background image I'm just going to change this to hero eg we'll save that and there we go I could probably changed this now five five five or something less dark 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 use again their Instagram page does have some really nice stuff 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 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 market mistake and you probably noticed it and again I've made a few mistakes in this but if here's how I found it it was really quite simple because I always like showing you guys some people don't like what I'm showing the mistakes I make they want they prefer to 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 serve been rambling a little bit and going back and forth a lot in this project 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 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 because I do understand that sometimes the back and forth can get kind of annoying and frustrating depending on how much I do and all of that so 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 I was in Photoshop and I went oh that's weird 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 I hadn't updated the markup so yeah nice and silly of me there so if we find our products there is the first one so at 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 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 is a margin today did you see that there's a margin bottom on that but not on the other ones why margin left product last of type margin bottom oh yes I did that so that's when we're at small screens 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 that I'd failed to fix and so it's this good anime media query product product list product and then here we do our product last type margin bottom of zero and then we have at the page is dense 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 the last little minute change there for the hero image so I'd love your feedback on it what you think of this site if you think there's any other changes I should convey to Seebeck who is the community members who 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 but anything I did please leave a comment down below if you don't but you just want to say you liked the video just hit the thumbs up and let me know that you did enjoyed if you managed to watch this whole thing and you haven't subscribe hit that subscribe button because there's lots of goodness like this I make a new video every single week 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 JavaScript thank you a million times for watching a massive thank you to my patrons who helped 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 our early releases this one isn't but I try and relieve my videos a little bit early and there's some voting and other stuff 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 cuz a lot of people don't 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 it's usually on little little things that I find along the way sometimes it turns that little topic turns into a big video sometimes it's something I do in a video that I glanced 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 unlike 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's 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 study web development com forward slash freelancing and make sure when you buy the course to use the coupon code keV 20 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 if you're looking for something else to watch and 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 site 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 me 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 in the internet just a little bit more awesome

Channel: Kevin Powell

Views: 175,439

Rating: 4.9391069 out of 5

Keywords: Kevin Powell, tutorial, html, css, html and css from start to finish, webpage from start to finish, website from start to finish, html and css, html and css layout, how to code a website, how to code a webpage

Id: zyNhxN6sToM

Length: 122min 26sec (7346 seconds)

Published: Thu May 02 2019