CSS Flexbox Project for Complete Beginners (Testimonial Grid)

in this video we're going to be building a testimonials grid and we're going to be doing it with a mobile first responsive design solution and we're also going to be using flexbox now this is part of my full stack web developer roadmap series you can learn more about that up here or in the description but in prior videos of this series we've gone through the basics of javascript and then html and css and more recently we've gotten into things like responsive design and flexbox a little bit more advanced css my goal in this video is to not only solve this challenge on front-end mentor but also to apply those skills that we've learned in previous lessons so that you can really start to use them in the real world lastly i'm going to be adding in a few extra pieces to the puzzle so throughout this series we have been using codepen which is just a nice environment where we have html css and javascript all in one place all hooked up and ready to go since this challenge is relatively straightforward and you'll see as we walk through it i want to also add in the concept of a code editor so we're going to be downloading and using visual studio code and then we're also going to be doing a little bit of version control and i'm not going to get super detailed into it quite yet but i'm going to show you the commands that you have to run to get your design pushed up to github and deployed to the github pages so that you can you know share a url with others of what you built but don't worry the only prerequisites that you really need are going to be html css and make sure you've watched my flexbox and responsive design videos let's get started if we come up to front end mentor this is the challenge that we are going to be creating and i've already started it so i don't need to click here so let me go to my challenges or i guess profile my challenges and then testimonials grid section so from here you can download the starter files so we'll do that it's going to pop up on another screen for me so once you've downloaded your files make sure that you have visual studio code downloaded it's just a code editor and i actually made a whole video on code editors you can check it out up here of which ones i recommend and why so obviously visual studio code would be one of those so go ahead and download that and once you've downloaded it open up a brand new window from here you're going to want to click file open a folder and then go find the testimonial challenge starter pack that you just downloaded so i've got it selected and this is going to open me up into the workspace as we start looking at the starter files if you open up index html which is what we're going to actually be working on you can see that there's all sorts of text already in here and luckily we have a lot of the testimonials that we will need they're not really implemented in html elements but it's good to just have this text ready to go now just to relate this back to what we've been using with codepen this index.html is basically the same as this html box here in codepen it's just on our local computer it's in our local file system rather than up in the cloud now your first question is probably well how do we actually view this html document in the browser now remember html and css they are only displayed in the browser therefore we need a web browser to look at this the way that we do that is you actually have a couple options i'll show you the most bare bones option first and then we'll go into what we're actually going to be using to solve this challenge to view an html document in the browser all you have to do is go to your file explorer i'm on windows but this works the same on mac or linux and just go to the folder that you have it saved in and then find the index.html file you'll notice that it does not say index dot html as you see over here and that is because the file type over here is chrome html document so it doesn't display it here in the name if you right and go down to open with you can choose a browser to open it in so i might just say google chrome and when we click that it should have opened it up if i go back to my browser it should open it up in google chrome and there's a lot of text here and that's because we have to actually implement this design but this is the html document that we're looking at and you can see up in the url bar we're actually looking at our local c drive now on mac and linux this is going to look a little bit different but it's the same concept it's just the local path to that file displayed in the browser now i'm going to point out a few things here that might be interesting to you the first thing you see this little icon up here in the top left portion of the tab this is a little front-end minor logo or favicon and you might be wondering well how did that get there well the way that we put that there is if we come back to our files and we look at this link tag right here this is actually putting in that favicon up into the title here's some metadata about it some sizing but here's the really important attribute which is the href and what we've passed in is a relative path we'll learn a lot more about absolute and relative paths coming up when we start working in the terminal a little bit more but all this is saying is i want to look relative to the current directory into the images folder over here and then drop that down and grab me the favicon 32x32 png and we can open that up and see the little icon that we have and that matches the icon that we see up in the tab furthermore in the index.html we've got the doctype that's important for just html boilerplate and then i'm actually going to indent this for us so we can see it a little bit better we have the head tag which is pretty standard for an html document here are some meta tags that help with displaying the site in the browser properly these are just pretty standard defaults that you might put in and then of course the link we just talked about now the title tag this is where we actually name the tab that's it's going to open it so we can change this and just say instead of front-end mentor we can just say testimonial challenge and when we click save open the browser up and click refresh you'll see that it changed to testimonial challenge right here we have some styles we haven't really been looking at this but if you come back to our browser and go to codepen the css right here there's a couple ways that you can link that up you can actually use a link tag to link up styles or you can just put them all in a style html tag right here now we're not going to do that because that's not very good practice for a good amount of css you want to break it out into a separate file which is what we're going to do so we'll delete all of that we don't need it and then finally we have all of this text which is basically if we look at the challenge itself i wish there's a better way to see this oh yeah we actually have the design here so if we go to the desktop design you'll see that we have all of the text and all this text is right here i'm going to cut this out and then i just want to make a new file so i just right clicked over here in the file pane click new file and we'll just say placeholder text dot txt so we give it the dot txt file extension it's just a plain text document we can paste that in and save it just that we have it but it doesn't clutter up our html this last part the attribution this is just as we look at it in the browser it's just this little piece down here so you can if you want to you can go ahead and fill this out and link to whatever you want to your you know twitter account your linkedin account your github account whatever you want to do i'm going to delete it here i don't really want to clutter up anything i want to just focus on the challenge itself so at this point we have a basic html boiler plate and i'll actually show you a shortcut to get to pretty much exactly this with just a few keystrokes let's save this i'll right click create a new file and we're going to call this test dot html because we're just going to be testing a few things within this document i'm going to show you how to use emmet and what emmett is if we open it up this is built into visual studio code and what you basically can do with it is type shorthand you know characters in click tab and it will extend it out into a code snippet of what you want already so let me just give you a brief example if we wanted in this html document you can see visual studio code has identified in the bottom right that this is an html document so if i type h2 it's going to pull up this box that says emit abbreviation and you can click it to see what it's going to abbreviate to but really all you have to do is click tab and it's going to extend it out into the element that you want and you can just start typing similarly we can actually get this entire html boiler plate in just a few key strokes so if you type html and we have a couple options here and you can go through and see exactly what it's going to create so basic html will just give you the the main tag we we want something a little better than that um oops i already did it on accident um the html5 let's let's go ahead and see what html5 gives us it's going to give us pretty much everything we want here just like we saw earlier and then finally html xml this is not something that you're probably going to use very often so if we just click html5 or scroll to it with our arrow keys and press tab it's going to break us out into this boilerplate which is very similar to what we were set up with when we downloaded the starter files for our front end mentor challenge so that's just a handy way to create this and then of course you can change the title i don't think there's a link tag for the favicon setup by default but you've got all the meta tags that are necessary and you're all set as we go through this challenge i'm going to be using those emmett snippets and i'll try to mention it as we go along but just know that that's going on for now i'll delete the test file we don't need that any longer and now let me show you our workflow so what we could do is just write some html so h2 tab and then sum title that's just basic html and click save and then we can alt tab or switch back to the browser open up the tab that we have it on and click refresh and you'll see the new html document this would be very cumbersome and it's not a great way to make everything fast so what we're going to do is we're going to split the screens here and i'm going to put the visual studio code on the left and the testimonial challenge on the right now obviously we don't have a lot of room here so you can always click this right here to collapse that might make this a little bit smaller for us and then when we're working with our dev tools we'll click inspect we're in chrome right now you can use firefox as well if you want since we've got these side by side i'm going to actually re-dock all of this stuff to be at the bottom so i can do that let me remember where i can do that let's click there we go you click these three little dots and click this dock to bottom so now we have a much wider screen to work with and as you resize this in the top right corner you can see what screen size you have or you can click the toggle device toolbar and now we can see it more explicitly where we can resize the screen up here so this is probably going to be the better option for us and we can change the zoom to let's say be 75 so that we can see it a little bit better and let me zoom out just a tiny bit we don't need the javascript console because we're not working with javascript so we can close that drawer and now all we have is the elements here on the left so the html and then the styles on the right or the css and if we click this select an element button and we select that h2 we can locate it within the html document and then see the relevant styles down here so that's going to be our workflow and as we go through this we can you know just add new elements some text click save come over here and click refresh and now you see it's been added to the document now there's just one more thing that i want to do and it's just going to make this whole workflow just a little bit nicer we're going to come into the extensions piece let me just expand this out for us we'll go to the extensions tab within visual studio code and let's type in live server now live server is a way that we can get automatic updates every time we click save on our html and css documents so let's install this it's very easy to install extensions in visual studio code so you can see it's installed i think that's all we need to do so this is just another tab that's been opened up let's close it we don't need it we'll close this out as well and then all we have to do to get this live server working is come down to the bottom right of our screen and click the go live and it's going to pop up a security box you need to allow access and now what you'll see is that we've got a different address this is actually we'll get into this a lot more later in the series but 127.0.0.1 that's our localhost and then 5501 is the port that we're serving it on and we're serving the index.html document now if we put these next to each other close this out and add another you know piece of text so more text and once we click save you'll see that it immediately gets updated here in the browser that's going to be incredibly handy for us we don't have to go back and forth clicking refresh every time and it's also really nice because instead of you know going to your file folder and right clicking and opening with a browser you can just do it directly from visual studio code i know that was a very long kind of introduction to get us started working on this project but as i've been trying to do within this full stack series is just take you through every single step so we're not leaving anything out we're going through absolutely everything and that's why i wanted to show you the extensions the emmett abbreviations the favicons the meta tags all of these little details because as i was learning i always wondered about them and oftentimes tutorials would just skip right over them but we are finally ready to start the actual challenge and start building that testimonials grid very first thing i'm going to do and this is what you should always do is link up your css document if i open the file explorer you'll see that there is no css available to us yet because we haven't created it so go ahead and right click create a new file call it styles.css or whatever you want it doesn't really matter this is just a convention once you have styles.css let's just go ahead and put in a basic style so we'll use the wildcard that selects all elements and we'll give it a color of red the reason we do this is just to you know verify that everything is working correctly when we click save you'll notice nothing happens here and the reason nothing happens is not because our live server is not working it's because we haven't told the index.html document that we need to grab that stylesheet so let's use an emmet abbreviation we'll type link and you can see all sorts of different links that you can use and if we go down to css click tab you'll see that we have a css link set up for us and since we are in the same directory so index.html and styles.css are in the same directory we can just use this exactly so it's saying style.css and just to stay with convention i i actually think it should be styled not styles let's just rename it to style.css over here and then save the html document you'll see that immediately the text color updated to be read so we know that our link to our style.css is working if you put in you know something like styles.css and click save not gonna work anymore so that's that's what's going on there with that link tag and for those of you who have been following along with the series if we come to codepen what we just did there was we hooked up the css in the html by default when you're in codepen you can just type html and type css and they work together but when you're not working in codepen which honestly most of the time as a developer you won't be you have to actually come in and link them up with the link tag all right so let's get started here on the layout we'll close the file pane for just a second and if you look at the desktop design you'll see that we'll have to kind of flip back and forth or what we can do is we can split these editors so i believe we can split down and now we can close this top one and we have the index.html at the top and our desktop design at the bottom it's kind of small but it will at least give us a general feeling for what kind of layout we need if you're like me and get kind of annoyed with all this text flowing off the screen just click view toggle word wrap and then everything wraps to our view i kind of like that so we'll go with that and to start us off let's see what we're dealing with here with the grid so the first step to solving any html and css challenge or just building a web app in general is to get the layout correct and we saw that in previous lessons and challenges that we did where we just put a border on each of our div containers and then we did the layout and then we filled in all the content and styles so we're going to do the exact same thing here and you'll see it's not going to be all that complicated now the most obvious place to start if we make this a little bigger we have one two three four five containers and they all have slightly different styles it looks like the two white containers here may have the exact same style but for now let's just give them all a unique id so that we can select them with css a little bit easier so to do that with emit abbreviations you can actually just type the hashtag and then whatever id you want to give it i'm just going to number these so we'll say testimonial dash one and then click tab and you see what it does is it gives an id attribute on a div so that's what by default if you use the emit abbreviations to put a hashtag and then type something or if you put a dot and then type something and press tab it will give you a class so that's just a quick shortcut so we'll go through and we'll do the same thing here so we'll say testimonial dash two and then another useful thing in visual studio code if you go to the end of the line click ctrl c to copy and then ctrl v it will just paste them down so there's our five and then we can come in here and give this a three a four and a five so we now have all of the containers that we need when we click save everything's going to disappear up here because we just have empty div containers that's okay for now the next thing that i'm looking at here normally i just put a border on everything and make a layout but this is already kind of a grid and we might as well start filling in the colors as backgrounds so that we can see what we're dealing with and then additionally we probably need to start looking at the mobile design because we're doing this mobile first so i know it's going to clutter the screen up a little but let's go ahead and open up the mobile design in the bottom part here close this back out and here you'll just see that every card is going to be stacked directly on top of each other but they're going to look relatively similar so here's the desktop here's the mobile it looks like on the mobile design the cards themself for the the grid items or testimonials are going to be the height of the content so the items with more content are going to be taller than the ones with less so probably the best way to lay this out at the beginning is to just grab some of this content and put a background on there and just start getting the structure of everything so let me pull this down i know that's really small but we'll work with it and here in testimonial number one i'm just going to put a small amount of content because i don't want our html document getting super busy with a bunch of text yet because that'll kind of that'll take away from the concepts we're trying to learn here so let's go to the placeholder text and maybe we'll just grab this really short line of text and we'll put that in a paragraph tag so we'll just copy it there and click save we still have red text i don't really want that so let's replace this all selector instead of color red we'll do box sizing border box because that's our basic css reset that we want to do we want to set all box sizing to border box so now we got the right text and all of our box sizing is good let's resize the screen so that we actually have the browser on the right mimicking a mobile device so this isn't perfect i don't know you know this is probably not exactly a mobile device let's make it even a little bit smaller it gives us more room to type anyways but this is close enough and this is what we're gonna build our mobile design off of as we talked about in the responsive design video 576 pixels is kind of our standard mobile device so anything 576 or below is going to be considered mobile so that's roughly what we're looking at here and if you right click and inspect and then you click this little icon right here to get the full screen you should be able to see exactly how wide it is so if we just typed window dot inner with we're at 584 so if we wanted to hit that 576 number or a little bit lower it'd be right about here so we'll keep the screen size right here for now and then as we uh go up to the desktop design we'll make it a little bit wider i'm going to copy this same text just so that we have something into each of these additional testimonial divs and now we're going to have some text to work with and then let's look at these colors here so how do we know what colors to use well we have some starter files and if we go to the style guide dot md it's going to give you layouts and then colors right here so this is where we're going to find the colors that we need so if we come down to the colors we see all of them listed in hsl format and you can use that in css but i just it's not my preferred way of doing it and honestly i haven't seen a whole lot of developers that use hsl so what i'm going to do is i'm going to convert these to hex codes and that way we can work with what i'm comfortable with and probably what you'll see more often just as a reminder this is how i'm doing it i just typed in rgb to hex and then you get this tool that google has and you can just basically come in here grab an hsl value paste it into this box here and then copy the hex code and replace it here so that's all i'm doing alright i've got these all replaced here so we've got hex values a little bit more comfortable for most people to be using and we've got a couple notes on the text colors but i think these are mostly related to the text itself so we'll get there a little bit later i'm going to drag the style guide down to this bottom portion of our visual studio code screen just so we can have it as a reference now it looks like the background of the entire screen is going to be a light gray so we'll start with that if we go to our style.css in addition to the box sizing we also want to set margin 0 and padding 0 on everything just so we don't have any unintended side effects so when we click save you'll see that everything gets smooshed together because we just excluded the margin in padding that's by default set on a paragraph element in the browser and now we'll come down here and we'll say on the body we want the background color to be i believe the light gray or the light grayish blue we'll see which one looks more similar so there's the light gray that is definitely too dark and there is the light grayish blue which i think that does match if my eyes are not playing tricks on me i think the background here matches pretty well so i think we got that right so we got the background covered and now we can start filling out our containers themselves so each of them again has an individual id let's template those out so testimonial one and then we can copy this five times we may not need all these but we'll just have them out here for the start actually of course we'll need all of these they're all different colors so the first one is this purple the purple card here so we need to grab that color from the style guide i believe the moderate violet is what we're looking for so we'll come up to testimonial one and give it a background color of that and now you'll when we click save you should see that background color now the next one that we're looking for is it looks like kind of a darkish gray so very dark grayish blue i think that's the one that we want so we'll come to testimonial 2 and do the same thing and then for the rest of these i don't want to waste your time i'm just going to go and kind of guess and check until i get the background colors correct on each one of these pieces to this grid but the one thing i will say before i speed through this is the numbering of these so we've got them numbered one through five but you may be wondering which is one and which is five four reasons that you will find out later as we design this with flexbox this top one will be one then two three four and then the one on the right is going to be the fifth one so just know that as i'm going through and styling the backgrounds on each of them alright i've got all the background colors filled in here and as you'll see in this mobile design that we're trying to make there's some room between the edge of the screen and these items within the grid and what we're going to do to create that is we're going to actually wrap all of these items in one big container and then we're going to set some padding on that container to bring all of them inwards a little bit so we'll go to the index.html to do that and right now all of these divs are just sitting within the body but we're going to say we want to create a id of testimonial grid container we'll just be very specific with it grab the closing div down here and paste it in so now we want to select this testimonial grid container and put this in our styles so hashtag grab the id and now we want to set some padding you can either set it in percentage or pixels for this since we're going to be making it responsive i'm going to start with a percentage so usually about 2 percent works pretty well you can see that you get a little bit of padding there but of course when we look at the the mobile design and make this bigger there's a little more padding on the top than there is on the sides so we can actually use the shorthand padding property to say we want 2 percent and then maybe five percent and we'll save that and actually got that wrong so the top and bottom is going to be the first argument and then the left and right will be the second let's bump that up to three see what we got this looks pretty good um so i'll stay with this i'm i'm fairly satisfied with the spacing that we have here something that is really bothering me right now is the text color on these darker backgrounds um so before i get too mad let's just go ahead and fill that out so for the first one we'll need a white text color so we'll throw that in there and then we also will just copy this down for testimonial two we're good on three good on five but we'll also need it on four and now you'll see that the text is popping out a little bit better but it's all crammed together so we need to space things out just a little bit as you see in the mobile design there's not only a little bit of space around the inner content of each grid component but there's also some space between each grid component on a mobile device like this a simple way to add the spacing between them is to just set a margin bottom on each of these and this looks roughly around 20 pixels give or take so instead of trying to set that on each of these let's create a class selector that grabs all of them and what we could do is we could come down here and grab each of them one at a time separated by commas but that's going to get very tedious the better way to do it is to come to the html and instead of trying to grab them all by ids let's assign a class to each of the grid items so we'll just say grid item is going to be the class name and then we can copy that down into each of these divs and here's a little shortcut within visual studio code if you find the spot that you want to go in and you hold down the alt key it's different on mac but on windows would be the alt key and then you click in a different place you'll see there's two cursors so we'll click again and now there's three cursors and then finally four and what you can do is now we can type all at once and paste in those class um the those classes that we just created so there we go we've got class of grid item in each of these grid items and now we can come down and just select that and set a margin bottom of 20 pixels so when we click save we've got a nice amount of spacing between the items furthermore another similar thing between all the grid items if we look at our styles here is that the padding around the content is the same on each of them and it looks like i'm not exactly sure but it might be somewhere around 20 pixels as well so we'll start with that and we can tweak it as we go so we'll set padding of 20 pixels click save and now our boxes are looking a whole lot better than they did a few minutes ago so we are far from done here with the mobile design but right around this point once i'm like happy with the general layout obviously the text isn't right in here we're missing pieces but once i'm satisfied and it doesn't look like completely terrible then that's when i go to the desktop design and start making it responsive because i want to get the layout correct before i start you know adding a bunch of other things in so what we will do here is we're going to shrink this visual studio code window a little bit close the editor so we have some more space and then make this browser window larger so that we can use the chrome dev tools and when we bring this down here i'm going to click this button right here so we can toggle the device toolbar and now we have the ability to see this at different sizes really quickly without resizing the entire screen so that'll be helpful as we you know we can actually see the the width up here updating live so that'll be really helpful as we resize on different devices and design for that so here's about our mobile design if you just click this bar you can get a small mobile device you can click here for medium and here for a large mobile device so here's here's the large mobile device and the reason it shrunk is because we're at 40 percent so let's go to maybe 75 percent you can see it a little bit better and then as we resize this we're getting into the larger desktop devices i know i've mentioned about 576 pixels for the break point we're going to use and again that is because earlier in this course when we talked about responsive design i just said let's go ahead and use the bootstrap css framework breakpoints they're right here so they go from 576 768 992 in our case we've got two designs only so we're only going to need a single break point for this now we just have to decide at what point do we break so if you just play around with this design and you just look at the text right around so we're at 708 pixels wide right now and this is getting a little bit wide for my liking with this mobile design over here so i think 576 right about here is going to be just about the widest we'll go for that mobile design and that's going to be our break point then to set that breakpoint we come over to our css we write at media for a media query and since we're doing mobile uh first design we'll set a min width of 576 pixels so now we open the brackets up and any styles we put here are going to apply to anything bigger than 576 so all of this right here and before we get too far let's go ahead and test it this is really important as you're coding whether it's html css javascript or anything else do it incrementally don't just write a bunch of code and then test it out all at the end so let's test it out by targeting a p tag and giving it a color of red something obnoxious and we'll click save right now we're at 444 pixels so we would not expect this style to apply but as we go above 576 we would expect all the text to turn red so let's see if it does and it does so that means that our media query is working great remember always put these media queries at the bottom of your css otherwise they may get overwritten by other styles so our goal here before we get any further is once we hit above 576 so when this is turning red and the reason it's doing that is because i haven't saved yet but once we get above here we would expect this layout to look like this desktop design over here so the question is how do we do that and the way that we're going to solve this is with flexbox i'm just going to expand this vs code so that we can really look at the design here so as i look at this just by experience alone i'm thinking to myself that using flexbox we're probably going to need to split these into sub containers now there's a lot of different ways that you can do it as always there's more than one way to solve the problem but i'm going to choose the most straightforward and beginner friendly way of doing this i'm thinking that there is probably a way that we could take all four of these items on the left side wrap those in a container and then control the overflow of the container with flex wrap and then size them accordingly but i'm thinking that might get a little bit complex to try to implement and by adding just one extra container we can avoid all of that so what i'm thinking is that we split the overall layout into two containers so the first container is going to be all four of these items right here and the second container will be this item on the right by doing this we can take container one on the left and container two on the right and we can display flex and they will go side by side next to each other but that doesn't solve how we lay out these items on the left so what i would want to do within those containers so so remember we have one container on the left one on the right and then the left container we can further divide into two other containers so we'll have a top and a bottom container and in each of those we will display flex so that they sit next to each other and then we can use flex basis to make the dimensions of each of these a little bit different i know this is a little abstract so let me just show you exactly what i mean so we'll keep that down here and this all happens within the html itself so to take these four items on the left and wrap them in a container we just need to find them so here are the first four and all we have to do is go at the top of here and set a container now we have to decide what to name it so that we can target it with css naming things is always difficult i'm not going to over complicate it here we're just going to call it main left and make that div and then within main left like i said we're going to have a top part and a bottom part there's a couple ways i could do this but once again i'll go very simple and i'll just say top and then we'll name the other one bottom so at this point i've got everything laid out correctly so we want to grab items one and two so this one and this one and put it in that top container right here so we'll do that we'll just cut these away here and put them there and then in the bottom we will take items three and four and put them there now finally we have testimonial 5 and i said we're going to make a separate container for that but lucky enough we've already wrapped our entire grid within the testimonial grid container and if you think about this from a flexbox perspective we always have to think container and direct children doesn't matter the you know grandchildren or great-grandchildren those don't apply in flexbox so all we have to know is what is the parent and what direct children does that parent have this testimonial grid container has exactly two direct children it has the main left and then it has the testimonial five which is that you know this tall card here on the right so now that we've got this laid out let's save it and i will now bring this back to the left side of the screen so we can look at it again and you'll see that on the mobile device you know nothing has changed here we've put all these containers but since we haven't selected them with css there's really no change to the overall layout quite yet but now this is where the real magic is going to happen and what we could do is um since we're divi we're now designing for the desktop we did mobile first with all these styles now we're doing desktop within the media query but again remember you don't have to put everything within that media query there can be some shared css properties between mobile and desktop designs so the first style i'll add is going to be the testimonial grid container we want to do work from the outside in so we'll go to style.css and we'll put that into our media query and the only thing we need to do here for the moment is write display flex and when we click save you'll see nothing happens here because we're still looking at the mobile device but as we make this larger now you see that this the left the main left container with all four of those items go left and then the last item testimonial 5 will be pushed off to the right because we've displayed them on the main axis which is horizontal now if you look at this design obviously this testimonial 5 has much less width than the rest so we can set that with flex and i suppose it's probably about 25 it looks like 20 to 25 percent of the total width so let's come to our style.css and on each item we can set the flex basis so in this case we're going to want to grab testimonial 5 and target that with our id selector and then we'll say the flex basis for that we'll start with 20 and see what that looks like okay that's a little bit small i'm thinking that we'll need maybe 25 percent i like that a little bit better and we can always tweak it as we go the next thing we have to do is look at these four items on the left and they obviously the top two go next to each other and the bottom two go next to each other as well therefore we need to make the top a flex container in the bottom a flex container so you'll see the id is top and bottom so all we need to do is come over here and say top display flex and then bottom display flex but we have a little bit of a problem here because they're not taking up the whole height of that main container so if we go to the index.html we have the main left container and we want this right testimonial 5 to be equal in height to these other testimonials to do this we need to also turn the main left container into a flex container so we'll go right here and display flex and this is not going to look right for a second because when we do that it puts everything in a row but if we change the flex direction of the main left to be column now it's going to go back and look the same but now we have control using flexbox of how those are distributed so if we look at this main left container which its direct children are going to be the top and the bottom which are also flex containers we can distribute those using the justify content since we set the flex direction to column the main axis is going to be going vertical and therefore justify content allows us to align on the main axis we also have the ability to say how large we want these using flex basis so while top and bottom are flex containers in relation to their children html elements they are flex items in relation to the main left container so if we come down and set the flex basis to um we'll start with 50 on each of them and then i'll show you why that's not going to work perfectly so we'll save that and now you see that we have these filling up the total height of that main left container and i was actually wrong the flex basis of 50 works just fine because in the mobile version we set the padding or we set the margin bottom of 20 pixels so there's already some space between we'll obviously have to space out horizontally but we'll do that in just a bit now the next question we have to ask is how do we get these proportions correct with these four containers to do that we can work directly with the top and bottom and we can use the flex basis of their children items to do that so all we have to do is grab let's see exactly how we need to do this it looks like these are a complete mirror of each other so this first one and the fourth one are about equal proportion and the second and third one are equal proportion so we know that our percentages are gonna work pretty much the same so to do this we're gonna need to grab testimonial one through four and put them down in our media query which is our desktop design so if we put these at the bottom remember in our desktop design these are considered flex items we can go ahead and get rid of these two properties because they're already defined in our mobile version which also applies to the desktop as long as we don't override them so we can get rid of all those but now we can set a flex basis so the first one this purple one looks like it's got about 75 of the width um so we'll go with 75 percent and then that means testimonial 2 is going to have a flex basis of 25 percent because we want to fill up the whole width of that container and testimonial 3 is going to have a flex basis of also 25 percent and then a flex basis of 75 for that last one so when we click save you should see the proportions update uh pretty nicely here as we compare this design right here to our desktop design picture you'll probably notice that it looks a little bit wider overall and you'll see that there's more room around the entire container so let's just fix that so that we are not thrown off by these proportions in the way that we'll do that i believe we can just add some we can add a max width to the entire container so let's look at our index.html and our testimonial grid container is probably what we're going to want to select and we've already got that selected in the media query so on a larger device maybe we set the max width of let's say [Music] looks like this might be like 600 pixels that's just a rough guess so that's a little bit narrow so maybe we'll set the max width to say 700 maybe that looks a little bit better let's go up to 750. i think that's kind of in the ballpark and then to center this we could use like flexbox but honestly the easier way is this little trick where you set a margin of zero pixels top and bottom and then left and right you give it auto so it's gonna automatically give the margin to center it so when we click save you'll see it all goes to the middle and now we're starting to see a little bit more proportioned grid here now at this point i think this is a little bit small the proportion we've given to that right one so let's change the flex basis of testimonial five to be maybe something like 35 percent and then of course we need to set the left one to be the same so we need to set the flex basis on the main left which is all four of these items together we'll set this to about 70 percent i think and then update this testimonial 5 to be 30 and i think that looks just a little bit better for us once we add some spacing here it should look a lot a lot better so to finish this off here the layout um it looks like there's some spacing between each of these items you know horizontally and there's a few ways that we could do this actually i'm now thinking we might even go like 35 65 here and now we have these ones which are squished a little bit so maybe we need to update this container give it a bigger max width then we'll change the 75 25 at this point i'm just like adjusting things until we get generally the right fit so let's try maybe like a 70 30. that looks slightly better but i still think we can go a little bit more so 65 35 there we go i think this looks relatively good and then now that we've adjusted this this looks a little bit too big so we'll claw this one back to 70 and 30. and i think we're looking good here i think the proportions between this and our design is relatively good and then of course this bottom one we need to match the top so we'll just come down and do that real quick so 65.35 so this one needs to be updated to 35 and 65 and now our grid is looking really good now to get the spacing horizontally you'll see that there's these little gutters here so right now we don't have any any spacing horizontally we could do this with margin um as we kind of did vertically with that margin but i'm going to try to apply our flexbox skills to make this happen which is a totally valid way to do it as well so the first one we have to take care of is the main left container which surrounds all four of these and then testimonial five here on the right right now we have a flex basis of 30 percent on this far right and 70 on the main left container so it's split in two but if we reduce those by a couple percentages and then we aligned them with space between them we could add that little vertical gutter in there so what i'll do is i'll take the main left container and just bring it down to say 68 so now we have about two percent um empty space within the container so let's save that and you'll see there's no there's no space because it's kind of added at the end it's kind of invisible here on the right but if we come up to the testimonial grid container and what we do is we justify content because remember the main left with all four of those items and the testimonial five on the right are aligned on a main axis which goes horizontal because the flex direction is set to row by default so justify content allows us to align those within there and all we have to say is space between and when we do that you'll see that there's a little space added there because we added some extra empty space and then we spaced them out between we can do the same exact thing with these flex items here too so the top flex container um the flex basis is 50 or actually i'm not doing this right so the top and bottom are going to be the flex containers so let's just set the justify content on here to be [Music] spaced between to start off all right and we'll save that and we won't see any changes because currently the flex basis equals a hundred percent so there's no space to add between but if we reduce um we'll just reduce testimonial one to sixty three percent so we have two percent left over once again and we'll save it and now we have that little space of two percent added in there as well now of course two percent on a large container versus two percent on a much smaller container is going to equal a different pixel width so as you see in the design the little gutter here between this testimonial five on the right and all four of these on the left that vertical gutter is a little bit wider than the vertical gutters that we just added to these containers right here so you see how to do it with flexbox if you're okay with that fact then you can just leave it as we have it but what i'm going to do just for demonstration purposes is i'm going to undo everything that we just did so we'll set everything back to their original percentages we'll remove the justify contents and save it and now we're back to this place where we have no space between and a really simple way that we could do this is we could just look at all of the flex items or all of the grid items here on the left we can just add a margin to the right of say 20 pixels and it will be equal across the board so if we look at our index.html we have all of these individual items with a class of grid item but we don't want to add the margin right to this last testimonial so one way that we could do that is we could look at the main left container which has these four items and then we can select all descendants with a class of grid item so it only selects those four so i'll show you what i mean here i guess we'll we'll put this up here right under main left and we'll say main left is the parent that we want to look at and then we want to grab all grid item descendants of that and now what we can do let me just show you what we're selecting first so we'll set a color of red so that the text turns red and we'll click save and now you can see all of these left 4 grid items have red text but we've excluded the right one with the css selector that's exactly what we want so we'll add a margin to the right of 20 pixels and you're going to see that this just gets spaced out really nicely automatically and that is it's a little little much maybe let's go with 15 pixels and that is exactly how we would add that spacing on the right naturally and now it's equal between all of them at this point the overall structure of our grid looks very good and now that i'm looking at it one more time it seems that this right one is still a little bit too wide and i apologize for going back and forth here trying to teach and uh and see how to do this at the same time so it's a little bit tough so let's let's bring this back to 25 on testimonial 5 and 75 on the main left container i think this looks good and i really hope i don't change my mind on that again i might but as of right now this looks very similar and the cool thing is if we resize this down to mobile so once we hit 576 pixels it should break and boom we have our mobile design so we don't have to update anything on the mobile side of things we just made this desktop design and it's pretty much responsive now the one thing you'll notice is as we shrink it these get shrunk a little bit so it may not look perfect say on like a tablet but it should work okay you could always add an additional break point if you wanted to to adjust those flex basis numbers that it looks better on tablet but i'm not going to worry about that here because i think it would just be distracting from the main lessons all right so we have got our layout done it is responsive and now we should be able to just go in and look at this entire design here and start adding in all these components and styling them out before we do that though i'd like to clean up our css a little bit because at the moment we are duplicating a lot of our css rules so this is what we would call kind of refactoring so you write the code out you don't really worry about doing it perfectly the first time but then you kind of edit and you you know iterate on it and make it a little bit cleaner so what you'll see is we've written this rule of display flex several different times so what we can do is we can take all of these ids where we're writing that display flex and put it into one single css rule some might say this is not worth doing but i think it is it's nice to nice to break out our code a little bit so we want to select our testimonial grid container and display flex let me just write the rule first and then of course we want to select more than just the testimonial grid so what else uses flex we have the main left so we'll copy that in there so main left top and bottom so those are all going to display flex and now we can get rid of all of those individual rules on each of them click save it should look the same down here we have these four uh flex items all set with flex basis uh percentages that are very similar so let's group this together let's take testimonial three combine it with that rule and delete all of this and we'll take testimonial four combine it with that rule and delete this last one save it should get the same thing top and bottom now both have a flex basis of 50 and that's the only rule so we don't need them broken out separately we can just bring those together and delete that rule click save should be the same and then i'm going to take all of our flex rules and just kind of group them together here so let me let me just put those here okay so now we have all of our css grouped up a little bit better and we can start working on adding the content i'm going to shrink this screen and we'll go ahead and close the dev tools and we'll just work on this first on the mobile design so we have some more screen real estate and then we'll check it on desktop to make sure everything is working so we'll open up our file explorer and index.html along with our placeholder text because this is what we're going to actually be putting in um to all of these containers and i'm just going to look at the desktop design i know we're doing mobile over here but it's just bigger so we can see it better i'll go through the first one with you and then the rest of them are going to be pretty much exactly the same so i'll let you do those on your own and i'll just speed through it so with this first card right here now we have this big quotation we're going to worry about that totally last we're not going to worry about that yet the content itself it looks like we have a picture we have a name we have this says verified graduate so they're the status of that person and then we have the main testimonial and the secondary testimonial so just looking at this immediately we need an image tag we need a paragraph tag another paragraph tag looks like maybe an h4 tag and then another paragraph tag so let's get the picture first this first one is daniel clifford so we're going to need that image and that's been provided to us if we go to images folder you should see imagedaniel.jpg so we can finally start to to replace this so we're on testimonial one right here and we're first going to put in an image so we'll use the emit abbreviation click tab and the source that we want is going to be [Music] the relative path and then we'll say images and then we want image dash daniel and then the alt attribute this is for accessibility you should always put this in here so daniel daniel profile picture just a description of what that is click save you'll see this image come in to our first grid item we now need to write in his name and verified graduate so let's do that we'll just use a p tag so daniel clifford verified graduate there we go we've got those added in there now we have to go find the text so it says i received a job offer mid course okay so there's our daniel so here's our first piece of text we'll put that in the p tag right here so there's that text and then finally we'll just want one more p tag and actually no this will not be p tag let's just set that as an h4 i think that's roughly what we would want here that looks okay we can always switch it later then finally we have this last piece of text so this is the longer testimonial that we'll put in the p tag right here all sorts of formatting issues so i'm just gonna get this all on one line here it doesn't really matter but i'm gonna just do this anyway okay so we've got our first card done and like i said you can go through and figure out how to do the rest of them it's the same exact pattern for each of the different testimonial cards so what i'm going to do is i'm going to just take this entire structure and i'm going to come down and replace each item with it when we click save you'll see that it's all looking the same and then now we can just switch the individual parts so the second testimonial if we open up the desktop design it's going to be jonathan so based on the image names here we have image jonathan so we really can just come into the find the second one here so testimonial two replace the link here click save now we have jonathan in here and then you just update the rest of the text so i'm gonna speed through this and i'll see you when i'm done alright we are done and you can see that i've got all of the text and images in here now it's just a matter of styling these if you look at the main design they're all about the same so we have the image in a circle on the left with the name in the verified graduate right under it and then the actual testimonial below so it makes no sense to try to target each of these individually we'll just set a common class among all of them and then style it one time let's start with the image and the name to the right of the image the first thing that we need to do because how i see this is we've got the image on the left and then the name and verified graduate stacked on top of each other so to get those next to each other a great way to do it is flexbox so the image will be flex item number one and then we'll make a container around the name in the verified graduate which will be flex item number two to do that we just come to the html we'll go to the first one here and we'll come right above the image and what should we name this we'll just call it a class of header and then within header we're going to have the image and then another container with the other text so i'm going to call that container header text okay so now all we have to do is drop in the image up top and then these two p tags in this container down here i'm going to split our style dot css to the right here in visual studio code so we can see both and as we look at the header in the header text we can come down since this applies to both mobile and desktop we'll just write it up in the mobile first section where it applies to pretty much any everything and we'll just put at the bottom we want to target header which is going to be display flex automatically when we click save you're going to see it jumps on the to the correct line and then these are lined up so if you look at this the picture in the text they're like on the same horizontal axis so the way that we get that to happen is align items so we're aligning items on the cross axis to be center so now that's going to work and then of course we need to grab the image so from the header container we want to grab all images and we want the border radius to be it's just a trick to make circular pictures we want that to be 50 percent so you see now we have a circle picture and then we want the margin right to be let's call it 5 pixels actually that's not enough so let's do 10 pixels now you can see there's a little space between those lastly we need some space under this header container so we'll come back up to header set a margin bottom of maybe 20 pixels and that will space us out from this top header container to the text under it now of course this has not applied to the rest of the testimonials but we will follow the same exact process as long as we keep the same class on them these css styles should apply just fine so i'm going to speed through this so you don't have to watch me do it um completely i'm just going to go and create this exact structure uh below for each of them and probably should have done this the first time around but whatever we'll we'll get through it okay so i got that done and that's kind of a good lesson there you usually want to finish like one iteration so one card um get it all correct and then apply the styles to the rest i didn't do that so i had to pay for it with some extra time the next thing i'm going to do is space out these two pieces of text so the first one's in h4 the second one is a paragraph tag so we can select that with our our styles pretty easily all we have to do is look at any um grid item class and select the h4s and add a margin bottom so we'll say grid item h4 and we'll set a margin bottom of 20 pixels maybe i think that looks okay so 20 pixels yeah it looks pretty good we're getting close to the finish line here the next thing you'll notice is there's rounded corners on each of these cards that'll be pretty easy to apply so let's go find our grid item style which selects all the grid items and we'll set a border radius of around 5 pixels maybe that'll make those rounded corners so that looks good there's also a little bit of a drop shadow on each of these or at least the white ones but we'll just go ahead and put it on each of them just for simplicity so any grid item is going to get a box shadow you can go to a box shadow tool online this is just the standard that i always put in there um is a black color with 20 opacity and then i kind of tweak these values right here until i get roughly what i want so you can see there's a little box shadow there i might spread this out a little bit more it's not exactly what we're looking for but it is it's pretty close and i'm not too concerned about getting this verbatim to the design the next big piece to this is the font so in the style guide if we go here to the style guide it's going to tell you what font you need to use so for typography the body copy is 13 pixels we haven't set that yet um actually let's let's do that really quick so for grid items you could set this at multiple levels but for grid items we'll set the font size to be 13 pixels makes it a lot smaller here for us and then for grid item h4s we'll set the font size back up so we'll say maybe 1.2 rem so that's uh the root element is going to be um the html which i believe is set default to 16 pixels so that will make it a much bigger text i think that looks relatively good decent proportions there so i'm okay with that and now we have to actually change the font itself so in the style guide it says that we need the barlow semi-condensed font from google fonts i happen to have this open already let me expand the screen and all you have to do is select the styles that you want so we will do that and it looks like we need 500 and 600 font weights so we will go grab medium which is 500 and 600 which is semi bold now it's saying that we just need to put this link in our html document so we'll copy that should be good on this so let me resize the screen real quick and now all we need to do with this is put it into our html so we put this in the head and we can put it right by our style sheet link so i think usually you're supposed to put this after your style sheets that this applies i'm not entirely certain if that is that matters a ton let's save it by default it's not going to be using it because we haven't enabled it so we'll have to come back to our styles.css and in the body this might be where we put the font family and this is where we'll go to the rules here and we can just paste in the css rule actually so we'll be using barlow semicondensed with a fallback of sans serif save that and you can see all the font is is looking a lot closer to our demo here you'll notice that these white cards have a gray text rather than the black text we're giving it so let's update that i believe we have a rule for this already so we can actually condense testimonial five and three into one because they have the same styles and then the font color that we need if we go to the style guide is probably this light gray i'm thinking nope that's a little too light so we'll try the dark grayish blue and i think that's a little bit closer may not be exact but i'm i'm thinking it's close enough it's it's better than the black that we had before now the smaller text has a little bit less opacity than the main text and then we also need to send the set the font weight so let's look at the style guide it says for the typography or note for the text colors the verified graduate okay we're not ready for that yet review paragraphs inside quotes have the same color but are 70 percent opacity so in our design here we have a couple different p tags so we have the name verified graduate and then the testimonial down here so if we just um set the font weight of a p tag and the opacity of a p tag for all of them that will apply to mostly what we want because we want this testimonial to have 70 opacity and probably verified graduate as well and then we can specifically override that opacity style to be a hundred percent for the name uh later so let's let's go ahead and do that so we'll see if we have something for this already so we have grid item so we'll just set the grid item p tags so any any p tag within the grid item we want to set the opacity to 70 percent and then for the name let's just add a class so we can use the alt key to come into all of the p tags with the name just holding down alt and we can give it a class name and then we can come down into the name selector and give it an opacity of 100 maybe not the most effective solution but it works and we probably need to select it with header to be more specific than our grid item p because header and name that's two class selectors is more specific than grid item p which is a class and a tag selector so this one takes precedence and we'll override it now i think we just need to tweak a few things with the text here not a whole lot we might want to make the name just slightly larger than that default 13 pixels so we can come to that rule that we just created so the name and we'll say the font size is going to be 1.1 rem actually that's going to be way too large how about one rem so 16 pixels that looks better if you open this up you might see a little border around these pictures too so while we're here we can look at the header image and we can give it a border of one pixel solid maybe purple i think some of them are different but let's just go with purple on all of them you can see that little uh border that we have around there you can tweak that how you like it lastly i think the font weights look okay but they did tell us to import weights of 500 and 600 so we should probably explicitly set those so on the grid grid item h4s will give a font weight of 600 looks about the same so not a huge change for the most part i think i'm happy with the design we have it's not absolutely perfect but it's pretty close and more importantly we've gone through a lot of the concepts we've covered in the previous videos which is always fun to apply those leave a comment if i missed anything i think the only thing remaining is this big quote up here and there's a couple ways you could approach this i do not believe there's any assets for this like this is not an image actually it is so this is an svg and we could use this svg i don't want to get too far into css and svgs it's like a whole other topic but i'll go ahead and just quickly put it in and show you how to do it so what we can do is this background pattern quotation svg if we click on it it's just a bunch of numbers but we can actually put this into an image i believe so if we come to our index.html let me get this css collapsed a little bit and it's obviously on the main card the purple card here so number one we can pretty much put it wherever we would like here within this main card so let's make an image and then the source is going to be images and then background pattern quotation so now you see that quote is already in there that's nice now we just need to absolutely position this because it's in that weird spot so it's like kind of randomly up there in the top right corner let's give it an id so we'll give it the quote id and then we come over to our css and we will select quote and we'll say position absolute and what that is going to do is position it relative to i believe the viewport by default let's see how that works so from the right we want it to be 20 pixels roughly okay yeah so it's relative to the viewport we want it relative to this container itself so to do that we need to set the testimonial one container to be position relative and once we do that that quote will come in correctly come down to quote it should be probably more like 30 pixels from the right and then from the top it is pretty much flush with the top so we'll do zero you can see that gets us a little bit closer um and as we resize this it's obviously going to change that a little bit so maybe from the right we go like three percent i'm just going to experiment around with this until we get it right maybe like seven percent that's closer let's just ramp it up to 15. okay i like that i think 15 is pretty good and like i said it's flush with the top so that's good and then finally as we resize this i know this doesn't look amazing we're just kind of in that middle state where it's like this is like bigger than a mobile device but smaller than a tablet so you're really not going to see this on any device for the most part so like here is about where you're starting you're going to start seeing it and it looks like the quote is like a little bit above that text and in our actual design here it's showing it as behind the text like overlapping that's partially because of the spacing that we've given it so i'm not overly concerned about it but as we resize it and it does kind of overlap text we want that to go behind everything so to do that we need to go to the styles we need to set the z index equal to like negative one actually let's let's set this the index to one and then on the testimonial one we will set the z index to be zero so it's above the testimonial card but then we want it to be below the testimonial text so we'll set the z index of the header to three i think that might get us there maybe not there we go we just need to set it to position relative so that the z index applies and now it should be going behind any text and stuff like that so should be good there and i think our design is pretty much complete so as you can see like we could spend the next hour or two hours trying to get this to look exactly like the example here just if you're curious i took a second to try to figure this out fully exactly how we can get it to look like this and didn't come all the way there but i did get it somewhat close so i put a max width of 1440 according to the style guide here where it says the desktop is 1440 and then i set the testimonial five and main left containers to eighty and twenty percent respectively so this looks okay i think there's it's not exact like i said but it's a little bit closer let me know in the comments if i missed anything but as we resize this it should be responsive we have this like middle state where it's a little bit weird but honestly trying to perfect that is just going to be a lot of tedious tweaks that you can kind of do on your own if you want but the main goal here has been accomplished on desktop it looks like this and on mobile it looks like this where we have everything stacked on top of each other so now at this point we're going to take this local host that nobody can see and we're going to deploy this to github pages so that you can pass it off as a link and show off your project so the way that we'll do that let's close out everything here so we have a clean workspace so what we can do is we can open up source control this is embedded within visual studio code and what we can do is initialize a repository and this can be done on the command line too but i think we should you know since we haven't learned git yet and i don't expect you to understand any of this quite yet might as well use the visual interface so from here it's we initialize the repository and it says control enter to commit on master so we can write a message just say first commit and then control enter we're going to stage all our changes and commit them directly yes and i'm i'm actually set up with github already so it may ask you to go through some authorization where you have to sign in to github so go ahead and do that if you have to now what we have to do is create a new repository so on our github so if you don't have an account sign up for github you'll need it for the rest of your developer life click new repository and we'll just say testimonial grid front end manner challenge solution very long repository name you don't need to make it that long and we'll just create the repository make it public not too worried about initializing all this stuff now from here you're just going to copy the https link come back to visual studio code click these three dots click remote add remote and then we're going to put in that url from there we should be good i think we want to push it to the main branch so let me see what we're working with here yeah so we need to push to main but this is just the name we're giving it so origin we're just linking up our code here to the github repository again you don't need to understand this we're just trying to get it deployed here so now we're going to click push okay then let's check it out here we'll refresh and you'll see that we have all of these uh files that we just created from visual studio code here on our repository right now we don't have it deployed to github pages the way that we can do that we can do it here or we can do it within visual studio code but quite honestly doing it within the repository is is relatively straightforward since we already have index.html in the main root of the directory so we'll go to master finder create a branch and type github pages and it says create branch github pages from master which is exactly what we want to do this is master what we're looking at right now so we'll create that branch and now let's go back to our main repository and i believe it should publish this to github pages in the next minute or two it doesn't happen like instantaneously because what it's actually doing is taking our code files and putting them on github pages which is just another server and then serving them over our github url let's refresh the page looks like our environments has been set up now so we can click on the main repository we can click github pages and then view the deployment and you can see that what we just created is now live in this link up here you can copy and share with someone else and as we resize it it of course is going to resize to that mobile mobily responsive width and then desktop responsive and that's pretty much it let me know if i missed anything in the comments if you enjoyed this be sure to give it a like really helps out the channel and in the next couple of lessons we're going to learn all about css grid as a part of the full stack developer series and then we will build another front-end menu challenge that's a little bit trickier using css grid flexbox and pretty much everything else that we've learned including javascript so make sure you are subscribed and have notifications turned on to get those updates in the future and until next time i'll see you later [Music] you

Channel: Zach Gollwitzer

Views: 1,056

Rating: 4.9506173 out of 5

Keywords: html tutorial, css flexbox, css flexbox responsive design, css flexbox practical examples, css tutorial for beginners full, html and css tutorial for beginners, css tutorial for beginners, css flexbox tutorial, ux process, css tutorial, web design, flexbox tutorial, responsive website

Id: n0QmD2i90_c

Length: 93min 55sec (5635 seconds)

Published: Mon Apr 19 2021