HTML & CSS Beginner Project Tutorial - Firefox Homepage Clone Using Flexbox & Grid

in this video i will show you how to make a copy of the firefox browser homepage using html and css this is another good beginner project and i'm going to be using flexbox as well as css grid to be able to get all this set up correctly there is also some responsiveness so as i make these smaller you will notice that the panels shrink in size and then the number of columns actually changes as well so i will use some media queries to add that in so let's jump straight in i'm using sublime text editor for this and i have my index.html and style.css files created both of them are empty just now and i have an images folder with a couple of assets that i'm going to be using so to start off with i need to create my skeleton html so in sublime if i just type html then hit tab that gives me this basic structure with all of my main tags for the title i'm just going to say firefox and save that now so that's the actual firefox website i'll bring up my working document and if i refresh that for the first time you'll see firefox in the title and it's also connected with browsersync so every time i save anything in here it's automatically going to refresh i don't need to go in and manually refresh the page every time now the way that i like to approach this is to essentially group the page into smaller subsections and then build them up one at a time just to make things a bit easier for me so first of all i'm just going to start off with this section at the top which is just the header logo now to do that within my body tag i'm going to create a section so i'll start off with the section tag and i will give it a class straight away so i'm going to start giving these classes so that i can then access them from my css now this is going to be the class of logo and brand as this is going to include both the logo image as well as the text so within this class there was a couple of things there was first of all the actual logo image so let's load that in let's actually i'm going to split this up over a few lines so i'll give it a class first of all class of firefox logo and i need to give it the location so the source is going to be the location of the file now in my case there's an images folder here and then the logo is within it so then i can just type images forward slash firefox underscore logo dot svg and then the last thing i need to do is just add an alternative name for it so if it can't be found and the image doesn't get loaded properly well i need to know what's actually supposed to display so the alt is just firefox logo and that's it so if i save this again it'll automatically refresh and you can see the logo is pretty massive but i'm going to resize that when i get to the css part of it and then the other thing i want to add in is my little heading here so this is going to have the class of brand which is just going to say firefox and that's what i'm going to type out here so we close that and then lastly i close that section tag so that's it that's my section pretty much created so it looks absolutely nothing like this here but that's the next part so now i want to style this and make it look exactly the same so i come through into my style sheet and actually before i do that i need to make sure i load it in to my html document so within the head of the document i need to add a little link to it i say link and if i hit tab it will just auto populate for me so link rel is a style sheet and then i need to give it a location well it's in the same folder as my index file so all i need to do really here is just type out the name of it so it's style.css and when i save that nothing's going to change but i now have a link between my stylesheet and my html document and i'm actually going to hide that panel on the left hand side again just so we've got a little bit more room to work in here so now i can start styling this document well the first thing that i like to do is just override some of the default values that these elements have so for example i like to set the margin to zero so if i do this you will notice straight away that both of these elements are going to move up and to the left so when i save this they both moved in and now the firefox text is right up against the edge of the page if i comment this back out again and save it you'll notice it moves out so these elements they all have a default margin already so by overwriting this to zero i essentially get rid of it and it just means that i can then set whatever i like as i go along now i'll do the same for padding and then lastly i want to change my box sizing to border box so that's some of the basic stuff done now what i like to do is start styling the body of the document so that means that i can just target the body tag now the body tag doesn't have a class and in this case it doesn't really need one so this is just going to wrap everything that's within essentially within the page now the first thing i want to do is change the background color so the actual background color on the firefox page is not this default white it's slightly darker than that so say background color is and the hex code for it is f9 f9 fb so we'll go that one and you'll notice when i save it just goes slightly darker gray i will also add some padding all around so padding of 30 20 30 pixels so everything's going to move in a little bit so essentially it's now created this little border this little padding all the way around the page and then lastly for now anyway i want to define my font i will say font family and i'm not actually sure how to pronounce this so i'm not going to bother i will just type it out and sans serif okay and then as soon as i save that you can see that this little well this text now resembles the real firefox text a little bit better i'm not sure if it's exactly the same but it does look a lot closer to it than what i had before by default so that's everything for body just now there is a bit more that i'm going to be doing later because i need to get my alignment and everything set up properly and i'll be using flexbox so i'll come back to that but for now i'm going to start styling this actual section here get it all looking correctly and get the sizes right and so on now the first thing to do is if i come back to how my page is set out this is all within a section called logo and brand and then there are two elements inside it there's the image and underneath it is the h1 i don't actually want them on top of each other i need the image here and then the h1 next to it so there's a couple of different ways of doing this but i really like using flexbox so that's what i'm going to use here first of all i need to target that class so i'll say logo and brand now note that i added a full stop here so when you're targeting a class you add a full stop if that was an id you would add this instead so in my case it's just a full stop logo and brand and to get them lined up next to each other i need to like i said i'm going to use flexbox so i just set my display to flex and that changes this to a flex container so logo on brand becomes a flex container therefore anything inside it becomes a flex item save this and now notice straight away that is popped up to the side here so now they are in line with each other by default flexbox displays in a row so that's how it's going to be laying these out i could change that i could say flex direction column and that's going to stack them on top of each other like they were before so you've got this and it has resized everything it's essentially when you've when i've applied this it's had to span all the available space but now it's stacked up on top of each other so i don't want that now just for demonstrating if i change this back to row you see now they've gone back to how they were next to each other so this is the default value i don't actually need to specify it it's like that already so i'm going to come back to this layer in a second but first the size of this is kind of bugging me a little so let's resize these things properly now that one is got a class of firefox logo if i go back to the html you can see here my image that was loaded in it came up with a class of firefox logo so i can target that here now the thing i want to do here is just resize it so my width i'm going to set to 80 pixels and the height i'll set to auto so that is going to resize it and that looks much better but now that's the correct size but this text is still quite small so let's target that as well now and the class for that h1 class was brand so now i could just target the h1 element but as i build this up i'm going to be adding other h1s and i don't want them all to be styled the same way so that's why i have this class it makes it specific to in this case just this text but potentially i could reuse this class somewhere else if i wanted to so let's target that class by saying dot brand and here i just need to change the font size so i'm going to make this quite a bit bigger now i'm using pixels i i know there's a whole bunch of different sizes uh so m ram and so on i like to just stick with pixel sometimes it's maybe not the best practice but it's set up and it's kind of looking okay here so i'm happy with the sizes now but the spacing and the positioning it's all terrible so now i can come back to this logo and brand class or the section essentially this container and start positioning these things properly because i've now got them displayed with flexbox well that gives me some additional functionality here so first of all what i want to do is line them up vertically so right now you can see that it's i mean it may be lined up but it's not quite how i like it so to line up vertically i'm going to have to use align items so let's try that align item center there we go so now it is lined up exactly in the middle of each other i also want to put a little gap between them so right now they're very close to each other now you could do this with margin so i could just go into the logo and add a margin to the right of it or likewise it could go into this and add a margin to the left but flexbox it gives you as does grid actually it gives you the functionality of adding gaps so if i just say gap of 10 pixels it will automatically put in that gap so if i had more elements it would do that to all of them now the next thing i want to do is just set a max width to this or rather just just a width so i'll set a width of 80 percent so it doesn't take up the entirety of the page and i need to make sure that it's aligned in the center so right now it's just sitting on the left hand side so i believe if i say justify content and center it should move and there we go so now it's moved over it's still kind of sitting a little bit to the left so let's inspect and see what's going on here uh of course so my logo and brand this section this class that i've defined it is taking up 80 as i've told it so it's left the space on the right hand side of it the contents of it are centered but my body which is the parent element for the section well that hasn't really got any display settings on it so i could mess around with this i could i think just say margin auto yeah so by saying margin by setting margin to auto it will automatically center for me which is fine i could leave it this way but because this entire page ultimately is going to end up as another flexbox container which will have its own alignment options i'm not going to do this instead i will set the body to also display flex so let's do that let's keep this together so background color go above that let's say display flex and this doesn't actually change anything immediately and that's simply because right now it's made the body a flex container so everything within it becomes a flex item well the only thing i have in it is a section all this other stuff that doesn't count because that's within that section so it only goes one level down so between the body and to the section that's the only child that the body has so that is the only flex item but of course as i start adding more of them on by default remember i said that this sets it to align them in a row so as i start adding more more items more sections into the body they're all going to come up on the right hand side i don't actually want that i want them to stack up on top of each other in fact i'll just demonstrate this temporarily so i've got this section here let's just add a temporary section and we'll just give it a class of temp and then in here i'll put a header and i will say temporary text close that one out and there we go so now it's appeared on the right hand side so now at least i can demonstrate what it is that i'm trying to achieve here so i've displayed flex it's put them in a row but i can change that direction i can say flex direction and set it to column and now as soon as i save it drops them on top of each other and that's fine but i want everything to be centralized so all the contents of this page are going to be centered around the middle well to do that we just say align items within the body tag to center and now everything is nicely centered so i didn't need to add margin auto within my logo and brand if i inspect this flexbox is doing that for me so essentially it's not even adding a margin it's basically just saying this is a flex item and the body is a flex container everything inside it needs to be aligned in the center and that's what's happened so i can get rid of that temporary text and i actually need that just to demonstrate how this flexbox stuff worked so this top bit now is looking pretty good and the next thing i want to start working on is to add in the search bar so to add that in i'm going to go back into my html and i already have this section here within the body which is for the logo and the brand i'm going to add another section underneath it so let's put in a section and give it a class of search wrapper so this is going to contain essentially all of the elements for that search bar and within it the only main element really is that search bar which is an input box so that's going to be a type of a form element so first of all i'm going to wrap it inside a form and now in here i can say input and i'm going to split this up over a few different lines just so that it's a little bit more readable so first of all before i even get into the type i want to add in a class for it i'll say the class is search bar so i can target this and style it properly then the type well this is just a text input so we'll say the type is text name is search so this is just a search bar and then lastly i need to put in a little placeholder in it otherwise it's just going to be empty but if we go back to the firefox page we'll actually has search with duckduckgo or enter address so because i'm using the go search engine it's come with that placeholder automatically so we'll say placeholder equals search with duckduckgo so actually for you this could be something different enter address okay and then lastly uh with that done in fact i think that's pretty much it so if i save that you see straight away it's updated and it's showing me this little search bar it looks nothing like the actual search bar that i want but it's in the right place and i know this it's there but the other thing that they've got on their website is within the search bar there's this little duckduckgo logo so let's add that in as well now before my input i'll cover that space i'm going to load in that image i'll say img and let's again split this up class equals ddg logo and then i need to actually load it in so the source is images and then within there i had another file called ddg underscore logo dot png and then lastly remember when you're loading in an image you need to give it an alternative in case it can't be located so it's just ddg logo okay so let's close that tag and that should now give me a little well it's actually quite a big logo for now but i've got the logo and i've got the search bar and that's it that section is now complete in terms of html and now i can start styling it so we go back across to my style sheet here and start building now i added a few elements and a few classes there so i've got a search wrapper class this class this class and then of course the individual elements themselves so it's quite a bit to style here but i'm going to start off with the search bar first of all so let's select the search bar class and i'm going to start setting some of the sizes on it first of all i'll say the width to be 100 so what that essentially means is that notice that it hasn't taken up the entire width of the page it's taken up the width of its parent or the container that it's sitting inside and just to help visualize all of these containers and where their boundaries are i like to add a border to everything so within this star selector here if i add a border of one pixel solid red and save that you notice it draws a border around absolutely everything within my html structure and this just helps visualize what's going on a little bit better so that then i can see where the boundaries are what's changing and if things are behaving the way i expect them to well it helps me visualize why that might be so the search bar is now sized up and the size to match the width of essentially the form container that it's in so if i was to resize the form here if i said form and let's give it an actual fixed width say 720 pixels i've picked well now that's resized and the input because i said to 100 of its parent it's gone bigger as well so it just spans the entire width so no matter what i make this that input is always going to be as wide as that so let's stick with that save that for now now let's go and add a little padding to this search bar so i'll go with 15 pixels and that's just going to space it out so around the text there's all this padding inside here so the search bar's gotten bigger and there's more room for the text another thing that i need to do is leave a little bit of room for this logo so right now the logo is sitting up here and it's too big but ultimately i want to bring it in here and inside the search bar so i need to shift all of this text to the right hand side and to do that i just add a little bit of extra padding i say padding left is 50 pixels so now all the rest of the padding is 15 but on the left i've got a little bit more and that's where this guy is going to sit so the padding's done let's add a height to it of another 50 pixels so that's going to make it a little bit bigger and now it's fixed rather than being defined by well the font size and the padding and also let's round it out a little bit border radius and we'll set that to 8 pixels okay and you can kind of just about make it out in the corners there the the borders being highlighted with that red line actually i will just hide that temporarily it was nice to be able to see what was going on but yeah it looks a lot better now so i've got the border radius let's add a box shadow here so box shadow zero two pixels six pixels and we'll use rgb with an alpha value 57 60. so i kind of predefined these already so that's why i'm just typing out what i'd used when i created this earlier so now you can see there's a little bit of a box shadow underneath it so that's looking a little bit better and i want to get rid of that border that dark border all around it so border none what else font size let's define a font size now i'll set this to 15 pixels it's gonna be yeah there we go that's a lot better so now that the search part is looking pretty good next thing to do is shrink this down a little bit and pop it into here so just above the search bar i'm going to call out that additional class and that was ddg logo and there's not a lot of styling here i just need to set a width for it just to make it a little bit smaller than it currently is okay that's a lot better and now how do i put it in here well there's a couple of different ways of doing this but what i'm actually going to do is set my form remember this is the parent for all of these right so i've got my form here and then inside it i've got the image and the input so what i can do is set my form element to have a position of relative okay so that one this one doesn't change anything but now i'm able to change individually the positions of the elements inside it so now that this has relative positioning i can go into the logo and give it fixed position or absolute positioning and now i can just say how far i want to offset it from certain positions so right now you can see although it looked like this is what moved up essentially what's happened is this is moved up because there is nothing in its way anymore so the logo is sitting right in the top left corner of its parent element and what i can do is offset it from either the top left right or bottom by simply typing the distance that i want to move by so if i say top of 10 pixels well that just moves it from the top by 10 pixels so if i reset it back to 0 it pops up to right at the top of its parent container so this way what i can do is just manually figure out where it needs to sit i can just shove it along from the top and from the left hand side until it sits there so the top well i've already figured these out so 11 pixels moves it right into the middle there and from the left hand side 15 pixels moves it in nicely there so there we go so now i've got this working and set up correctly so when i click my input because i've got all this padding on the left all the text that i'm going to type is still to the right of this little logo it's not going to overwrite it or go behind it okay so the positioning is looking fine and this setup is correct but they're just right up against each other these so the branding in the search bar and i can fix that by just adding a little bit of margin if i go back up to my logo and brand section here i can just add a margin to it so actually i'm going to move this around a little bit just to keep it contained so i've got my display flex align items well this should really be just underneath it because that's also part of the flex properties so now i've got my gap i've got a width set so just underneath here i'm going to say my margin and i'll go with 40 pixels top and bottom and 0 left and right and there we go so now it's moved it from the top but it's also giving me spacing between this panel here or this container here and now a couple more things i want to style is how the search bar looks when i click on it as well as the placeholder inside it so let's come down the bottom and access those elements first of all i need to target the class which is a search bar and then i want to target the placeholder so the placeholder i'll give it a color of well we'll just go with black so that changes the text color a little bit and then i'll change the opacity of it so this just means that it's going to be a little bit and i'll give an opacity of 0.5 and there we go so the other thing then was what happens when i click on it well at the moment it just gives me a black outline i think that's a little bit too strong a little bit too contrasting so the on the firefox page it goes to a blue color instead so to do that again i just target my class search bar and then i go into the focus property and here i just want to add an outline to it the outline is kind of similar to the border so the format is the same 1px solid and then i'll give it a color of 0060df so it's kind of a light blue so now you notice when i click on it instead of that solid thick black line i've got a much softer blue outline instead so that's looking a lot better now i think now you might be wondering why i haven't styled or done anything with this section class here so my search wrapper you notice i haven't actually done anything with it yet i will come back to that because a later point when i've added the rest of it it'll make a little bit more sense to build it up so the next bit i want to move on to is the interesting part now is to add in all those little panels and how i'm going to lay them out so for them i'm going to create another section so if i go to the actual firefox page you can see here i've got well you can kind of guess already it's essentially already laid out in the form of a grid so you could use flexbox for this but grid just seems to be a little bit more intuitive as the preferred option here so what i will do is create a section for this so let's go back in here and underneath where i've got my existing sections i'll add a third one and this is going to be section class and this will be another wrapper and this time it's going to be a section wrapper and within here i'm going to end up with quite a few different levels so the first thing i want to add in is just this style or this heading here so i'll add a h2 tag and i will give it an individual class of pocket heading not heating heading and within it i just say recommended by pocket close my tag and straight after i need to add in that link so a in fact i shouldn't do on the same line so a i'll give this a class as well of link it's not going to go anywhere so it's just a dummy link and it's going to say learn more okay so if we save that and you go back to my actual page now there we go coming up down there looking nothing like what it's supposed to but we'll get to that now i want to create a little section for all of those individual panels or cards so i'm going to do that within a div so now i create another div here and i call this my card wrapper so this isn't going to be the individual cards this is going to be essentially all of the cards this is a wrapper for the entire section that contains all of those cards within that in fact i'm going to start closing these tags early so that i don't lose track of them so that's my section my div so within that i need to have further div so i'm going to have nested dibs inside each other the first div was for the entire arrangement of all those cards but now i can focus on the individual cards so div class equals card and i'm going to actually be copying these down quite a bit because i'm going to just reuse the same card over and over rather than creating a bunch of different ones let's close that div tag out as well so what is within this card if i go back to the firefox page there's actually quite a lot going on there's an image to start with and then there's a little bit of text underneath a link and a description of what it actually is so i need to split this up into its individual elements well first of all at the top is an image so all of the cards are in the same structure they start off with an image let's give that a class of card image and i'm just going to be using random images for this so i will use unsplash and we'll say so how is this https uh source dot on splash.com all right this will just load in random images for me i just need to specify their sizes so i'll say 400 by 200 pixels for the first one and well i'm not going to set an alt for these ones because they're just random i don't know what the contents are going to be so that's my image and underneath the image i have my well all of this kind of stuff so i'm actually going to put that together again inside another div because i want to be able to contain that together style it all in one space so we give that another class now or another div and this has the class of card description and the reason for this structure will become a bit more apparent once i start styling it because of essentially i need to be able to organize these things within each individual panel it just helps when they're structured and when they're kind of contained like this within their own little divs and wrappers so under the car description it starts off with my heading and this will just be a small one so i'll say h3 i'll give it a class of card site so that essentially tells me what the site is although that's not necessarily a link and this one is gqueue.com um i don't i mean these are just random so i'm just going to copy the first one out so gq.com so we'll take that and then underneath is the link i'll say a i'll give it a class of card link it doesn't have an actual direction so it's just a dummy link and what does it say inside wheel of time that looks like a really long description maybe too long amazon's huge okay let's just end there let's just say amazon's huge gamble ld [Music] okay so we'll close that out and lastly there's the actual paragraph underneath it so this is my p element and classes card text and what does that say as legend has it i should have just used laura mipsum here a few years back jeff bezos demanded his team at and this kind of just cuts off so i'll just i'll just end there there's no point i mean you get a gist there's no point in typing all that out so now let's just make sure i close that last div and that's pretty much it so that there is created the structure for one individual card now to be able to really create this layout and to show you how it's going to look i'm going to have to make a whole bunch of these cards so i'm going to copy this down a few times but i don't need to change the contents i'm just going to keep exactly the same so i'll leave a space between them so i know which ones which and so that dave lines up with this so let's just do three for now see if i can get a grid set up with just the three to start with okay and let's go back to my actual page so how is my page looking okay not very well uh you can see the card is there and they're all exactly the same it's also using the same images so on splash because i've given it the same sizes it it just calls that once so what i can actually do here is just tweak the width a little bit make them different so i'll keep the first one as 200 pixels but if i said the next one is 201 and i went after this 202 and so on it's going to load different images but because i'm going to be styling them and setting the sizes for them in my css it doesn't really matter if they're a pixel or two bigger than each other so now i've got different images loading in okay so the panels are there the contents are there now let's start styling these properly now what i'm going to do is bring in this border again just so we can see what all the elements look like okay so that's that's putting boxes around everything and now i can kind of see what's what and how big everything is uh first of all let's set an overall size for this wrapper remember i put everything inside a section wrapper and i can give it a width now so i'll give a width of 966 pixels and there we go and that expands quite a bit and then i'll give it a padding of 10 pixels so it just bumps everything inside a little bit of itself so now you can actually see what's happening there with padding that is the outline of it and that is the padding area inside okay that's fine so let's now style this area up here that's recommended by pocket part so that was what was the class name go back up so i've got my section wrapper the h2 class is pocket heading and underneath i've just got a class with link so let's target pocket heading first and they're both displayed as block elements or well the h2 is anyway so it's displayed on on different lines so first of all i want them next to each other so let's say display inline and now that that text is next to the link let's make it a font size 17 pixels so it's a little bit smaller that was a little bit too big there and then i need to create a little gap between them so i can just push the text away by giving the heading a margin so if i give it a margin on the right hand side uh what have i done wrong orange margin on the right of 10 pixels that's going to just create this little area here and just going to bump the link away from it okay now let's style the link itself so again target that class so now no i'm not targeting the a element i'm targeting the link class first of all i want to get rid of the underline so text decoration is going to be none so that's gone let's give it a color and i'm going to use the same color as i've got for the outline so it's just this little light blue color okay so let's change the color uh font size let's make it a little bit smaller 13 pixels okay that's looking good now i'm going to get rid of these again temporarily because there's one more thing that i want to do to this link that we can't immediately see so when i hover over it nothing happens but on the actual website when you hover over the link it underlines so it adds a text decoration at that point well i can do that here with just adding the hover to this so i can say link oh actually is it going to turn yeah i suppose it's going to target this link um let's just double check so i've got the class of link on this a yeah so this is the card link so this one's different so that should be okay and then i'll just add in here hover so whenever i hover over it i need to add that text decoration back in so the text decoration is going to be underline okay so now if i try it there we go so as soon as i put the mouse over it it underlines it okay so now for the tricky part now let's take this and arrange it so that it was in that grid set out that it was on the actual page and i remember this is contained within its own div and it's called card wrapper so the card wrapper actually can we turn this back on and we'll be able to see what's going on inside it so that's my card wrapper and then the individual cards inside it so first of all let's give it a margin just to separate it away from everything now go for margin 20 pixels top and bottom and zero left and right so it's giving me a little bit of space up here and now i want to set the display to grid so previously i set display to flex for flexbox but now i can set it to grid it doesn't do anything by default because what i need to now do is define how many grid columns and rows i want to be using so i want to define my columns first of all that's kind of the main one here so my grid columns are defined by saying grid template columns and i want to have three columns side by side so i need to define determine how wide each column is going to be now i could try and calculate this because i know the width of my container i know how much padding there is i could take all that away divide it by three that's fine but then it's not going to be very responsive and it's just going to be a little bit more tricky to really work with this instead there's a handy feature that i can use which is just divide it into fractions so what i will do is add in here repeat and how many times do i want to repeat well i'm going to have three columns therefore i want it to repeat three times and the size of each one is going to be one fr so it already just looks at the available space and then divides it up in between the number of columns that i've got so as soon as i save that now you can see it split them out this way so now i've got my individual grid columns and all the contents of the cards are contained within it now you may be wondering why everything has gone off the edge here and why it's not stuck to the container that i've given it well i think that's probably because my image sizes haven't actually been styled yet so it's essentially trying to fit everything in but the images are too big so we'll fix that in a second but i want to finish up the grid first of all i've told it how many columns i want but i also want to have a number of rows now i don't specifically have to define this if i just keep adding elements or so if i just keep adding items to this it will automatically create rows for me but i would rather be explicit and define them myself so in this example i'm going to have four rows so again i'm just going to use repeat again and this time it's not going to be fractional because it's going to scroll up and down so the screen is just going to be as tall as it needs to be so i need to define a height for them and i'll set a height of 300 pixels and what's happened here now so you can see there's all this available space underneath so my grid has now expanded it's given me space for four rows and each one is going to be 300 pixels tall and that's what's going to happen as i add in more elements so if i add in more divs of these cards they should all start stacking up underneath each other they shouldn't keep going to the right because i've already told my grid that i wanted to have three elements or three columns and lastly let's just space them out so i've already used gap previously with flexbox you can do the same thing with grid so grid gap and go 24 pixels and now it's spaced them out a little bit in between all right so now let's start styling these cards and i'm going to get rid of this border again and i should be able to just select the individual cards and style them so if we come back down here now the class that i had for the cards i've got my card wrapper that's the one that contains all of the cards and the individual card has just a class of card so i can target that here i can say card class and see if this is going to fix it for me or if i need to individually go in and change the image size first okay yeah so that worked so i can set it to just 300 pixels now the images they're kind of being cut off and they're being overlapped onto each other so you can see this one's bigger than the other two that's just because i haven't changed their size yet so we give it a max width and let's give it a background color so these actually look like little panels rather than just being elements on the screen so background color of white and that didn't seem to work what have i done wrong oh no it has worked it's just very very faint okay i'll just change it to red just so you can see what's happened there so it's it has given it there but it's it's so faint i could hardly make it out let's put it back to white as i continue styling it will become a little bit more obvious yeah so i'll come down i'll quickly just resize those images because that's kind of messing up the whole layout so we'll go card image now let's set a width of a hundred percent so now rather than having to sit with in terms of pixels by just saying 100 it's going to be as big as the container so that's solved the problem for me however big i make my cards my images are going won't work oh they were too big okay yeah so as big as i make the cards or small as i make the cards the images are going to go with them so if i go back to 300 my images accommodate to that size now i want to be able to add a border radius but look what happens when i do that so i'll say border radius on these cards of 8 pixels so save that and notice it's giving me a border radius at the bottom here but there's nothing in the top and that's because the image is overriding it so i can actually do the same thing for the image as well like i say border radius of 8 pixels but then that's not quite right either so it has given me a radius of the top corners which is good but the bottom corners are also i've got these little radius i only really want one in each of the corners of the card so i can specify the individual border radius in each corner within here so i can actually expand this out so i can say eight pixels eight pixels so that'll be top left and top right and then zero zero for bottom left and bottom right and there we go so the bottom ones are okay it's like blending in with the rest of the card but then the top and top left and right and bottom left and right they're nicely curved now to actually be able to make all this out a little bit i need to add a box shadow here to to this card so let's say book zero two pixels six pixels and rg in fact this might be the same as what i used already 58 57 68 and 0.2 there we go so now the cards are much clearer you actually see what's going on here and the little radius around them all right so now i can move on to the actual text that's underneath here so this card description area so we'll go card description the only thing i really need to do here is add a little bit of padding because at the moment you can see the text is pushed up right against the edges of the card so let's say padding of 15 pixels that'll push it all out in oh i should push in what have i done card description there we go so let's push it all in nicely then we come on to the card site so that's just the the link here so that gq.com say card site at the moment i think that's way too big so let's change the font size a bit bring it down to 16 pixels and change the color of it as well so we'll go with 777 it's kind of a grayish color uh font weight so they've kind of on the firefox page they've kind of gotten the other way around so the link is what's bold and big but the header isn't so the font wait that's just going normal at the moment it's bold so that lightens it up a little bit and we need to push it away so margin bottom of 10 pixels and there we go so that's created a little bit of spacing to the next item there okay so next is the card link so we target that one now for the card link i want to get rid of the underline so text decoration is going to be none the color let's change that to black and let's make it bold so font weight bold and there we go and just need to add a hover effect to this one so just the same way as i did with the previous link say card link hover no and then i just changed the color on hover so again it was that zero zero sixty df so when you hover over it it goes blue okay so that's the link done the header done and now let's just target the text so we'll say card text and change the font size of that make that smaller as well font size of 14 pixels there we go and space it away from the link margin top of 5 pixels okay so it's all kind of bunching up a little bit too close to the bottom but i'll address that in a second but first let's just take a moment and compare it to the firefox page see how it's actually looking okay so it does look like i need to space things out a little bit more i need to add some more margins now just to move things down on the screen a little bit and let's see if this gets any bigger or smaller no so that's kind of its biggest size there okay so a little bit more tweaking to do here so a couple of little things i want to do so first of all i need to make these panels a little bit bigger and i do that by changing my grid template rows here so remember this is set to repeat four times so it gives me four rows and i'd fix that to 300 pixels but let's go with 350 yeah so i've got a little bit more room at the bottom and it doesn't look so squished in together now the next thing is to create space up here well the reason that's not there yet is because i actually never styled the wrapper that i used for this which i believe is it's either my no it must be the search wrapper so because i haven't styled it i haven't added any margins or padding or anything like that yet so we go back up to here and this is kind of where all the styling for that search wrapper started or all the elements within it so up here i will add that target class i'll say search wrapper and there is quite a bit more styling to do on it but i just wanted to come back to it uh once i filled up the grid completely so for now all i'm going to put in here is a margin so i'll say margin bottom of 50 pixels and there we go so that's bumped everything away from the search bar here and these are looking a bit better now so what i like to do now that i've got my grids working well let's see does it actually work if i add in more of these elements so if i go back to my main page essentially i can just copy these down right so i've got one individual card so let's copy this down say another three times first of all so copy that and again and again but remember to change the width each time or no so that's the height so we save two or three two four two five okay save that and there we go so automatically it is put in the next row of grid items straight underneath they're all spaced out nicely as they were supposed to with this grid gap between them it's maintained to the next level of elements underneath and essentially as long as i keep adding these it's just going to keep stacking them underneath so the grid is set up pretty well now so let's just keep adding them i'll add a few more just to fill this out and give me more content to work with so let's see how many i actually need now within my grid here i've said that i want my grid to be three by four so three columns and four rows so i need 12 elements or 12 individual cards i've got six so far uh can i just copy all of this or it's going to get messy so let's copy all of this down if i've got six already let's get another six okay and then i just need to remember to carry on this renumbering so 205 that goes to 206 207 208 9. i'm sure there's a better way of of loading individual images from one splash but i don't know what it is so i do it this manual instead so we save that and once it loads there we go so i've got all these images they're all different but they're all sized to be the same and to fit in my panels and that's that's looking pretty good the grid is working exactly as i wanted to there's a couple of little features that i want to add on now just to kind of polish it up i mean i've still got the footer to go so we're not quite done yet but one thing if we go back to the actual firefox site so this is the link however it doesn't matter where over this card you hover the mouse it all activates the link so you don't have to go only on the link now in my case that doesn't really work i have to go on to this link and only then doesn't go blue and only then you can actually click on it the rest is inactive now i've tried to figure this out myself but i'll have to admit that i couldn't essentially what i was trying to do is make this entire div of this well this card div a link so rather than just having my a being a link i wanted the entire card to be a link i didn't know how to do this i tried a whole bunch of different things and in the end as always stack overflow that came to the rescue so i'm not gonna take credit for this but this is how it's done or this is one of the ways to do it what we need to do is within my link i should have probably done this before i copied them all but within the link so i've got my a here within my card and i've got a text so right at the end just before i actually close the tag i'll add in a span the span doesn't have anything in it so you open and close the tag don't put anything inside it now i need to copy this 12 times you need to put it in each of these other cards so just before the a closing tag i put in that span open and close tag okay it's just a couple more there there one there on there and oh it's actually quite a lot of them okay there we go last one okay so that by itself doesn't do anything it still works exactly the same but now this span gives me an extra element that i can target from my css so what we need to do is go into the card because that is the div that i want to be able to click on so i want this card or sorry yeah this card class to be clickable the whole thing uh so that's there wanting to add in here is position uh relative so relative just as of what i've done here with this search bar i need to set this position to relative that means that the elements inside it i can set to be absolute positioned so the element that i want to target actually is that span so i'm going to create a target here of my span and now i set a position of absolute on this so that means that the span is now being controlled or its position is being defined by the card now the span doesn't have any content in it but what i'm going to do and what i got from stack overflow is i essentially set it to the entire size of the card so first of all i say what are the offsets well the top offset is zero and the left offset is zero so that means that the span is starting in the top left corner of my card and then how big is it going to be width is 100 height is 100 essentially this span now becomes a wrapper for the whole thing so it overlaps the entirety of this card or each of these cards so if i save this again you can now see that the whole the whole card is now a clickable item so i don't need to just click on the link everywhere that i hover within the cards becomes clickable so that was really neat and quite a simple solution doesn't require any javascript and i thought it was it was really nice so the page is starting to come together now now before i go into the footer there's one more thing that i want to add on on this bit just to polish it up a little bit so one thing that you will notice if i go back to the firefox page as you scroll down that search bar actually stays at the top so it goes here but then as i scroll it moves and then eventually it just kind of grabs it and it stays there it goes over everything and in addition to that kind of adds this blurry background so you can see through it to an extent but it's not entirely see-through it's a little bit opaque and it just always stays at the top when i scroll back up it gets to its own original position and stays where it was now in my case i haven't done anything to do that so as i scroll down well it just stays where it was on the page it disappears so i want to add that in just now and for that it's actually straightforward so it's something that you can do in css with again with positioning i can just set it to sticky and sticky just means that as i get to this point it's going to stick to the top of the screen it's not going to continue disappearing as i scroll and that's actually why i left the search wrapper where is it the search wrapper class well not very well detailed because i wanted to have all this content here i want to be able to scroll before i actually started styling this so it was easier to see what was going on well first of all let's set the position of it too sticky let's see if this works i did have a little bit of trouble setting all this up when i was messing around with it so let's see if this is going to work and it didn't so what have i done wrong well what i've done is i've not specified where i wanted to be sticky so as i scroll along it doesn't really know how far from the top it needs to stay so what i need to do is similar to when i've done positioning so when i've had position absolute and i've said top left and so on i need to do the same thing here so i can just say top of zero and if i scroll down now you notice it stays at the top so this now gets stuck to the top of the screen and although it disappears behind everything you can see it there you can kind of make it out so that sticky part is kind of working but it needs to be polished up a little bit first of all why is it going behind everything well within the page layout there's a z index essentially it tells everything what the order of it is on the page so what i need to do is change the z index of my search wrapper so that it comes up on top of everything so let's give it a set index say z index of one and that automatically is going to be higher than everything else so now as i scroll down this takes precedence so everything else is drawn underneath it and in the search wrapper notice it's not just the search bar although that's all we can see for now it's actually the entire search wrapper that's being sticky so the search wrapper is now going over everything else underneath it but it doesn't have that blurry well not blurry but a kind of opaque background here and that's because my search wrapper doesn't really have anything on it i've not really styled it so let's give it a background color and i'm going to use rgba here so that i can set a color as well as an opacity value for it so say 0.95 now is that enough for it to work on its own uh not quite so let's give it a width and a height as well and for my wrapper so i'll give it a width of 100 that way it's going to take up the entirety of the page now you notice that this has jumped to the left that's okay it's moved to the left within the wrapper so the wrapper itself takes up 100 of the page and we'll give it a height of 100 pixels okay now it's maybe hard to visualize what is going on but now now that i've moved you can see this opaque background here so this is the wrapper if i go back and turn this red border on now you can see this wrapper over here if i get rid of what i've just typed out i put in a height background and all that stuff if i get rid of that you see it disappears it essentially just goes to the size of my input box but when i add all the stuff back in i create i set a width through it and i set a height to it and that becomes my new wrapper so that is central that is sitting center in the middle of the of the page but the input is moved to the left because that's not centralized within the wrapper itself okay so let's get rid of the border and carry on with the styling and the only other thing actually that i want to add is this just sticks to the top of the page and that's not really what i want to happen here what i would like is to have a little bit of space above so my search wrapper this entire gray bit here that's fine but i want that input to be kind of a little bit moved from the top and to do that i just need to add in some padding so within the search wrapper i can add in some padding top and bottom so underneath here let's say padding of 25 pixels top and bottom and nothing left and right so now it automatically moves so here you can't really see too much but when i start scrolling down you can see that it automatically creates the space above it it's moved the input within the wrapper all right so now there's just one more thing to do which is well to centralize this well normally for my positioning i like to use flexbox but in this instance it's not really necessary this input is really the only thing that's within this wrapper apart from this image but they're kind of moving together so to centralize it instead all i can do here is go into the form and just give it a margin of auto and by doing that while the browser just figures out what auto means it just says i want to put this in the middle and i work out how much space is available left and right divided by two and then there we go it's nicely in the middle and as i scroll down i'm maintaining that stickiness at the top and when i get back up it goes back to where it was so the final thing to add in terms of content on this page is the footer i've still got media queries to come to to be able to make this responsive but in terms of the actual text and content that's all that's left so if i go back into my index.html my main content file i can go in here and add in the footer so right now i've got this final section that i added in this third one with all these divs here this is my section wrapper so underneath that i can add in a new area for the footer so we'll come down here city footer and actually i'm going to copy the class of section wrapper into here section wrapper so this essentially just means it's going to take up the same space so my section wrapper class if i come down here i don't think it had much in it yeah i just had the width and padding and i kind of just want to use the exact same values for the feature anyway so rather than styling the footer separately i'm going to call the same class within it so it's going to share those properties now the footer is going to have a whole bunch of links within it so if i go to the firefox page scroll all the way down all it's got here is just a bunch of links and then one more on the right hand side so i'm just going to style it same way pretty much now to create those links well there's a number of different ways but the most common way would be to create an unordered list and have those links as list items within the list so i'll just create my list items one by one now the first one wasn't actually a link so it just it was the heading for a title it says popular topics let me close that and then i just start creating all my additional links as list items so this is going to be a i'll give it a class of link because i already have a link class defined i wonder if i need um i might need another class for them no i don't know i think the styling is pretty much the same so they're just small blue and you hover over them they highlight yeah so essentially the styling on this link is exactly the same as the styling on this link so that means that i don't really need to do anything else here i can just reuse the same class so we close uh we see a class link it doesn't have anywhere to go just a dummy link and then the link names i had here already typed up so improvement close the a tag close the li tag and then there's this little separator so if we go back here notice there's a little dot in between them so i'm going to add that in as an additional list item so we're going here li and i just need to add that little dot and if i remember correctly the shortcut for it is on windows anyway it's alt 0 1 8 3 on the numpad and there we go i've got this little dot i'm not sure how you do it on mac probably you can easily google that one and that's that one complete so now i just need to copy this down and just change the text within them to create all my additional links so copy that one these are all being indented let's get rid of that so i think it was five not six links so the first one is self-improvement then there was food entertainment and we had health science and the last one was more recommendations i think that was the last one let's see yes and then there was one more all the way on its own on the right hand side the privacy notice so actually this last one doesn't need a little separate between them so that's the last one and then i close this out so i'm not going to put that privacy notice in the same ul because then it's just going to bunch them all together and i don't really want that i'm going to have that as a link on its own and then i'll be able to position it on the right hand side that way so again we'll call it a link class and it has nowhere to go and it just says privacy policy i know privacy notice okay finish up by closing the footer tag and that's it the footer is now created so if we save this i've got a very terrible looking foot here with all my links now let's just go ahead and style them so first of all let's style the actual unordered list by itself and i can target that by saying future now it's not just the footer it's the url that's within it so it's the unordered list that's inside the footer and there's again a few different ways of doing it you can do this with floats you can float the elements across but i find that to be quite a tedious and painful process and again i always just revert back to flexbox with this kind of stuff you could also do it with grid but flicks is just as good so by displaying flex remember the default is display row or flow direction is raw so there we go they're now stacked up next to each other the privacy notice is still underneath because that was not in the same stack up so that wasn't within my ul and that was done on purpose so that gets stacked underneath them all so display flex that's fine let's make sure that when the screen gets smaller uh these if they don't fit that they're able to wrap around so we'll say flex wrap is set to wrap default would be no wrap let's get rid of that bullet at this beginning so this style becomes none and that's the bullets gone and let's space them out a little bit so a gap of 10 pixels there we go it's a lot better and let's just change the font size 14 pixels and there we go so now that's looking pretty much i think like the firefox page so it's looking good and in fact because i've inherited the class when i hover over them it does the exact same thing as my previous links so the only thing left now is to put this guy all the way over here on the right hand side well i think you know already how i'm going to be doing this a big fan of flexbox so let's target the footer which is the container for let's go back here so the footer contains the unordered list so remember although it has all this bunch of stuff inside it those are within the unordered list so they're not affected by anything that i do to the footer in terms of layout so that only has two children it's got the ul and it's got the a so what i can do here is say display flex by default that's going to set it to display row and straight away you can see that this privacy note has appeared on the right hand side it's bumped up right against where my unordered list ends but what i want to do is let's go to justify content there's a bunch of different ways to justify so i think it should still work so if i say center it moves everything to the middle but what i can also do is add a space between so space between just says how big is the container now notice because i inherited the class of that container from above it's the same width so it looks at how big that is it looks at the size of the elements and then it just spaces them out leaving all the free space in between them rather than at the end which is what i had previously so without this that space just moves over here but now it's going to bump in between them and there we go i think that's pretty much it oh i don't think i need to align anything but let's just see if things are out of kilter at all no so everything's already aligned correctly so that's fine i don't need to align anything else here it's all set up properly so i think now the layout and the content of the page is pretty much complete if i bring up the firefox page the two look i would say very very similar i know maybe there's a little bit of padding and margin here and there that you can tweak but other than that they look almost identical so the last thing to do then is add some responsiveness so as it gets bigger nothing really changes but as it gets smaller there are little cutoffs you notice the first thing that happens is those cards get smaller the container looks like it gets smaller the search bar gets smaller and well just looks like everything just shrinks a little bit what about the footer yeah i think actually the footer font gets smaller as well it looks really small there and it grows a little bit so we can easily do that in and then if we continue oops that's my home page that's the one we're working on and if we continue making a smaller we drop to small then just two grid items and one grid item okay so let's add those in then let's go back to the page that we're working on here and start adding in some media queries so the first one let's go with let's say media and we'll just build them up in stages of decreasing size so max width is 1100 pixels so if it goes below this value then i need to change some of the properties and there's going to be quite a lot to change so we'll just go one by one first of all remember that this input or this entire form section it got smaller so let's change the width of that let's drop it to 600 pixels and let's see if that works so nothing changes yet but as i shrink it there we go it bumps down the sides as it gets smaller so that's fine that's working the rest still needs a little bit of work though so what else do i need to change within that well remember that these two so this recommended by pocket area and a footer they're both within the exact same class of container so the class is section wrapper and all i need to do here is as this gets smaller i just change the width so we'll drop the width to 726 pixels at the moment section wrapper by default is 966 so it just drops just over 200 pixels of it so save that and shrink this page and there we go so automatically although i haven't done anything to the cards because of the way that that grid was set up the cars just get smaller by default just because the container that they're in gets smaller so let's go down do i need to change the font of the footer um yes so the font on the footer also has to change so let's go here and say footer ul so that's the unordered list and let's drop the font size we'll drop that to oops font size drops to 10 pixels make it really small and this is going to change the links as well no it doesn't okay so i need to address the links within there as well it's only target in the popular topics text however i don't want to target the link class because that's also going to affect the one up here and that doesn't need to get smaller so i can target this specifically by going into the footer and then saying lick so i think this should work let's try this font size i'll set this one to 10 pixels as well just while i'm testing this and there we go so that shrinks but the one at the top stays exactly the same so that doesn't change but the one on the bottom does change and because these are both doing the same thing i can actually combine them so i'll add a comment here and i say future and then a link class so i can get rid of this just to tidy up a little bit save that again and as i shrink this yeah the same thing happens as before so they all get smaller okay so that's that's addressed the first stage of this shrinkage but then what happens after that is my grid has to change so when it gets even smaller there's no room to just keep making all these panels smaller we just reduce the number of columns so let's add another media query underneath that one so i'll close this one out and the next one is going to be at media and now my max width is let's go with 900 pixels so a couple hundred pixels further down we change again so this time well i can just copy this down actually because these are going to be changing every time so the form first of all that shrinks again so we'll put this to 360 pixels and then my section wrapper that shrinks further to 490 pixels so that is part of the way there so if we keep shrinking this there's the first one there's a second one but the cards are still there so now they're kind of useless because the formatting has gone all over the place just the image is small but this text is very tall and not very wide so what do we do here well the number of columns is defined within this card wrapper here so i can overwrite this within my media query if i go back in here and just target the card wrapper i can say my grid template columns now changes from it was repeat 3 1 fr and now it becomes 2 1 fr save that again and automatically because it's based on fractions it's just going to work out how big they need to be and it's going to drop them to two okay so that's the second one down so there's just one more to add in for when we go down to one row or one column sorry so the max width here is now going to be 600 so when we drop down another 300 pixels the form gets even smaller let's say 200 pixels section wrapper gets down to 246 pixels and then we drop to what well we don't need to repeat once that's pretty much nothing so we just get rid of the repeat and how wide does the column need to be just one fraction so as we go down down there we go so as the smallest size everything is just stacked up on one individual column and we've still got that responsiveness and we've still got this sticking at the top even though we're all kind of down to this tiny little page now and that's it we've got fully laid out firefox page here and i think these kind of projects are really good for practicing flexbox and grid and this kind of stuff when you're looking at these layouts and trying to figure out how to set everything up so i hope you found this useful and if you did then please leave a like and feel free to subscribe thanks for watching

Channel: Coding With Russ

Views: 404

Keywords: html, css, tutorial, flexbox, html5, instagram, clone, grid, coding with russ, html tutorial for beginners, html tutorial, css tutorial, css tutorial for beginners, flexbox css, flexbox tutorial, flexbox tutorial for beginners, web development, front end, frontend development, learn html and css, learn html, html and css, media queries, responsive, responsive web design, firefox, css grid

Id: I-zjQeP-JDw

Length: 70min 36sec (4236 seconds)

Published: Tue Nov 02 2021

Reddit Comments

[u/Russ_CW]

I made a copy of the firefox browser home page in HTML and CSS.

I used a bit of flexbox for the overall layout but the panels were done with css grid, which I don't use as often so it was good to get some practice!

Github repo here. Any comments welcome!