 Hi there and welcome to this video. If you're new to my channel, my name is Kevin and here at my channel we learn how to make the web and how to make it look good with weekly tips, tricks and tutorials and I've been really busy the last few weeks working on my course. I won't talk too much about it because the doors for it are closed now. Registration is done for the time being but because I've been really busy I've sort of been ignoring YouTube a little bit which is a bit of a shame but luckily I've still been streaming over on Twitch and I did a really fun project where I took one of the simpler front-end mentor challenges and I built that out over on Twitch over a few sessions. So what I've done is I've taken those streams, I've edited them up and taken a lot of the random chit chat out of them and condensed them down a little bit. Still a bit of a long one at over two hours here but it was a lot of fun to put this together. A lot of good discussion on semantic HTML happened in this and when to use a list and should I be using lists. I switched a few things around at different points because another thing I did here was trying you know I wanted to approach it on let's get it working quickly and then let's make it better. So you'll see even like at one point in the design we had a whole bunch of stars and I did it as a background image and showed something fun I think with background images but then I ended up switching it to use the SVGs in another way. I also looked at a fun thing you can do with backgrounds to have multiple backgrounds on one element to position them differently so we didn't have to switch backgrounds and media queries because I think that would have been a little bit awkward. We have fun with both Flexbox and Grid with this design. I have a few discussions about I used Flexbox for something because the chat voted on Flexbox to use it but I had a bit of discussion on why I would choose one or the other, how they work well together and a lot of other just really fun and I think interesting things. I had a lot of fun building this so I hope you have a lot of fun watching me do it because I think this is one of the front and mentor challenges that a lot of people have done. That might be because it's one of the free challenges and it's not too difficult so a lot of people jump into it and try it out so if you've done it and you've taken a different approach or you think you have a better idea on how to do something leave a comment down below and let me know because I do think that there are multiple ways to approach things and maybe I missed something along the way but you will see that the approach I take to several of the parts evolves a little bit over time throughout this video so enough talking about how I did it let's actually go and see it. That's what we're going to be building today so this is probably the simplest challenge on front end mentor but I wanted to start at something really simple so it's only HTML CSS there won't be any JavaScript today though eventually we'll probably do some of these challenges that do involve JavaScript and you can watch me make a fool of myself then. So yeah I'm just going to steal this I'm not even going to go into it if you're curious about is that the whole thing? I went too far. Can I? No. If you're curious about this I would actually recommend reading the explanation that Andy has for it. I will change a few things in here though because we don't need everything this I'm not going to use I'm going to I'm going to do a I'm going to delete this we're going to come in with our own thing for that that's fine that's fine that's all fine okay the rest of it's okay um so then that's okay in my base let's make a new file called global uh actually I'm going to do a root dot scss um where I'm going to store all my custom properties now I don't know if this is going to work or not where's figma do they have any styles set up here for the colors ah darn um I got a cool plugin for figma where I can um export styles to CSS variables but I don't have any to actually export here do I let's I don't think it's going to work no styles found um so if you'd set up all the styles inside figma you can export it so easily it's super super fast um so it looks like we're gonna have to actually does since I'm doing my roots I'm going to do root um and I have to go to my main and I have to import that so import actually this one should be uh on top base root just because of how I like organizing my stuff um I think in their style guide do I have the colors I do I love their names oh no what happened there ah okay good uh primary very dark magenta and soft pink and then the neutral so I'm just going to call my colors color primary 400 uh I'll do a 700 for the dark one just because they said it's very dark and I'll do a color primary 300 for this one um I realize these are the only colors we have in here so it's weird that there's a gap but um just because this is very dark and soft pink to me is gonna be a light color I like having room in between it's just the way I think um so my primary colors and then my neutral colors so we can have a color neutral how many do we have neutral dark grayish magenta light grayish magenta and white I'll do a 100 200 sorry I have a bit of a cough today or my throat I haven't talked all morning so uh that one that one and we'll come in with that one right there and that should be all my colors uh taken care of since we're in my root I'll also set up my font family which I think there's only one so I'll just call it font family primary we'll see if there's another one but it's just spartan uh I'm guessing in google it's just spartan but we'll find out later saw sarah um the base font size is only 15 and we'll find the other ones after font size 400 is 15 pixels let's say what point let's do a point five I can adjust that what's is this working now it is calc uh calculator I've never done 15 well not never 15 over 16 whoops what happened there 15 over 16 9 3 7 5 9 3 7 5 rem is my base font size um we have the other font I'm going to grow grab the other font sizes now actually this is my biggest one font size is 48 I should have left oh I did leave it open 48 3 rem isn't it 48 time 48 divide by 16 48 divide by 16 3 yeah so the biggest one so font size 900 will be 3 rem actually I should be looking at mobile for now um and you'll see why after 32 32 over 16 2 so my biggest font size is 2 rem then this is 15 13 here is 13 oh you know what then my base font size is actually 13 that's tiny wow 13 over 16 8125 um and yeah we'll see why I'm doing it like this in a second and then I had another one that was a little bit bigger 500 that can be the 0.9 725 rem 625 rem because I think that would be this one here is that one's 13 this one Ryan thank you so much for the sub that's so generous of you thank you very much I guess that's it for my font sizes cool um so the reason I went with this is one thing you can do with um actually I'm just going to do it like this because I'm using sass it's been a while since I've written sass like a really long time uh because I've been so busy just doing regular css stuff um I don't know where my breakpoint is going to be and I could do I don't think we're going to need a mix in or anything fancy so let's just do 50 rem for now and we can always adjust that uh and then I want to do font size and uh 400 becomes this one and for anyone who's not used to sass and what I'm doing we'll see a little bit in a second um I can show you and actually let's just copy these they're obviously I'm guessing they're all going to change this one's becoming three and I'm hoping my most doesn't die it keeps getting disconnected lately this one's 15 still oh that one's still 13 it's only this one that changes I I just assume because the base font size changed okay so I only have to change my font size 900 um so one thing this is something you can only do with uh custom properties you can't do this with sass variables where you change them inside a media query so one of the reasons I really like sass variables is because you can do that and if I save this and I go look so I have my reset and I have my root if I go look at my main here you can see I have my root then my reset so if I go to my main.css I have my root first and then I have my reset all coming in together and you'll also notice here it has my root and then it has the media query with the root inside of it so one thing that's really cool with sass is you can do things like this where you nest a media query in and sass automatically brings it out and does it the way that regular css can actually understand it so some you know some of the benefits of sass right there um I'm just gonna have like a what file what are we gonna need here I have we have two components pretty much and this main area so I'm just gonna do a global style um we'll call this one reviews and this no this one I guess this one's like quotes block quotes and reviews it's not the best names so actually I mean a lot of time instead of base here then what I could do is another new folder called components or something like that depending on it really depends on on what you're up to and how you want to organize yourself um but then in my components what I could do is a new file we could call it uh a rating rating would make more sense ratings.scss and I'll have another one in there called um quotes.scss that are in my components so then I have to go to my main file again um and then I need a import them so components slash quotes and a components slash ratings just like that um so that will have everything being imported properly a whole bunch of follows coming in so welcome all the new people that have just followed thank you very much okay uh yeah I'm just gonna oh they just gave us the text like that I was hoping for a little bit more but sure I guess I'm supposed to keep the attribution and stuff eh well whatever we'll come back to that um so where's my index file okay uh so I guess we should start with our html I was so looking forward to jumping into the you know making things work but um yeah I mean the organization this shouldn't be too bad so 10 000 people like so that's my h it's not even really an h1 but it's gonna be our h1 because it's the only real title we have for this page so we have our title and actually whoops I made a mistake I have two bodies one thing we should always have on a page is a main and we don't have anything else but we can just wrap everything here in a main even though it's a very simple site we should still stick with best practice we have our main my h1 um I'm gonna give this paragraph here so it's obviously just a paragraph so that's not a problem and actually uh if I select it which should be a triple click see what one second let me just zoom in on this a little bit we only do do do that's this one let's see what our customers are saying is that down here no oh it's all together okay this is all one paragraph I'm just gonna select it all and do a shift command p which brings up I always forget the name of this thing and you can see I use it a lot um I can wrap emit wrap individual lines with abbreviation so I'm going to do a p dot lead the only reason I'm calling it lead is because the font size on this one I think was bigger than my other font sizes so I can use that or I could you know it could be whatever it's my lead it's the one that follows that or maybe it's even like subtitle something like that um and now we get our reviews so each one of these reviews we'll need to do that again shift command p is going to be a dot review and actually we'll have to change this a little bit whatever dot review how are we going to do the stars they gave us an svg for that I think so we're gonna have to see the command palette thank you Brett Brent Brett review so if I do review whoops shift command p command palette and then I want dot whoops I have to open emit first that's why and then dot review we're probably gonna want something else in that eventually actually you know what I'm gonna do is dot review times two and then you can also just take this and drag it in so I can do that it's a little faster um so I have my whoops I have my three reviews and so I think what I want to do with that is actually have a dot reviews for the whole thing just because uh it's going to make it a little bit easier to stay organized with it so I'm going to wrap all each one of those there I don't know what I'm it's always five stars which makes it a little bit easier I don't know we'll figure that out when we get there um and then each one of these will be and actually for this what I think I'll do is I'm pushing alt ah come on I'm going to click here push alt push alt so I can put my cursor in three places at once and do a div class is equal to um or no I'm going to do it like we mentioned one second let's wrap all of this first let me give myself some space here I'm going to take all of these and we're going to wrap all of that in a ul with a class of quotes because I know they don't look like list items but technically they it's you know it's it's a list of reviews even here I guess we could make it list items as well now that I'm thinking about it they're definitely cards um but just because something visually looks like a card doesn't mean that it's not a list item um because you have to think about what happens when you strip the styling away from it well it's a list of three three reviews Andy Stevenson thank you so much for the sub that's really nice of you appreciate it very much I think I missed a comment about BEM but yeah I use BEM still um but even when I use BEM I don't I'm sort of breaking away from it but I have a lot of influence from it um but even here like I have review if I was using BEM I would still do reviews with a review in each one um and I do think I'm going to turn this into a list eventually so in my list here what I'm going to do is have an li times three and all of this can actually be in that li all of this one would be inside that li and all of this one would go inside this li um so we'd have something like that wait I don't know my images yet eh Colton's oh they have a different name there's Johnny here it's Colton that's okay Irene and Anne so this would be my P though if I was using um Emmett Emmett if I was using BEM I would do a like quote dot name quote quotes underscore name like that and then I'd have the name in here um actually what can I do something I'm going to try something okay uh no it does that okay I honestly find that's a little like I don't know if we need to do something even like these I probably will take each li and do a class equals quote but we don't have to do it that way um I have seen a good argument that you don't put this on and you just leave it as a regular li that way if somebody's coming in and building a new one or it's on another page you're sort of forcing a certain markup on them but if it's to get the proper semantic markup on something that could be a good thing whereas if you use classes you could just start wrapping everything in divs and it's going to work whereas if you come in and you maybe we'll do that we'll leave it just with li's instead of putting classes on it um just to see how that you know how it can force people to follow a specific markup that could be a nice fun lesson I mean there's not I don't even technically need this class because this and this are identical right now let me just go look at the the jpeg of the design I want to make sure that the fonts came through here properly uh design because I have a feeling my fonts are screwed up yeah they are okay good this is what we're trying to build that looks better so the fonts sort of messed up when I brought it into um next uh fig mother we got the light version of everything that's okay uh so we do want this is going to be name then this one verified buyer I don't know what to put and then this could be um p dot quote uh hate when that happens p dot quote I'm not gonna do p dot quote there sorry I'm gonna be a lot easier uh wrap p dot quote now you could I didn't use a block quote should I use block quotes for these it would sort of make sense to each one of these is also a block quote and I need my image as well does the layout change between desktop is it all here no does the layout change at all the only thing that seems oops sorry the only thing that seems to change between the card is there any change in the card there's no change in the card um I'm just trying to think like here I need to have it as two columns inside of this area so I was just saying do I use grid or do I use um flex the advantage I'll run a quick poll new poll grid or flex grid flex they're both work um we'll run it for one minute there we go so you guys can vote whether I should make this little section here if I do it with grid I'm gonna do it for the whole this whole card will be done with grid um if I do flex I have to set it up just over in this area here the advantage with grid is the markup um is a lot easier so I don't have to do anything special for my markup whoops um I just have to bring my image in images and colton flex one we're going with flex sorry Brett Brent oh my goodness two in a row if I was doing this with grid uh with flex I would probably why do I have twitch open here oh that's that okay um if I was doing this with grid I would set up can I draw on here edit and create uh if I was doing it with grid it would be like my main grid then I would have that and it would be split like that and this would actually end up getting split like that um so the image would go over two as far as like how big they are this one here would probably get a min content on it so and then I'd have to if I did this I'd have to set a size on the image but that way I know that that grid like this space would actually be the size of my image and then this would it would automatically leave all the rest of the space for this side so I'd like 1fr that this column on this side um but if we're doing it with flex that means we have to come in here and on my flex I would have to um what would I have to do I need divs but I don't know what to call them this is why I don't like flex sometimes is just because the names of stuff and actually there's a problem I might not do flex oh it'll be fine flex doesn't chrome has a bug with images that are flex items and this needs a paragraph too right um I'll just do class equals status I'm doing status because technically they might be a not I think on something like this you're doing it to sell your own product it's always going to be a verified buyer um but I'm just saying like maybe you'll have one that's not a verified buyer or they have a different status so you know that's the status of colton smith um it is a decorational image too like the image really has no impact on anything here so because it's decorational you do need to have an alt but you don't have to actually put anything there you just leave it blank because I don't think this image impacts anything about what we're doing the way I set up the way I explained the grid setup was daunting I do think grid would make sense here if I was doing it but I'll I'll I'll I mean it depends how you want to look at it do you want to look at this let's take a different color um if you want to take a look at it as this is one big thing and this is your layout and you want to break it apart grid makes sense because here we have two columns here we have one big one so you can play with grid if you want to look at it at a more micro level then you can just look at this is one piece that gets split into so that's display flex and then here you don't have to worry about anything because it's just the rest of it but again it does mean that you have to you have to do a bit more work in your markup to be able to create the columns I'm just going to call this a split but we might have to change I just want to you know um so that's gonna be my general markup for these I think and then you know it would sort of make sense that they were inside a block quote now with block quotes I don't use them often enough can I just throw everything I want in a block quote I think so right are we allowed to throw everything in a block quote MDN block quote I don't need to cite anything that's fine margin left is fine I think I can throw anything I want in a block quote like I know I don't really have a footer to put in there no I think I'm uh can I just do it like that does that make sense just use webflow I think my chrome's up to date if not I'll check when I get off stream thank you for the the warning avi so if there's a zero day vulnerability in chrome apparently so permitted content flow content yeah I'm just oh right here right permitted content flow content we're good it makes sense to me that this is a block quote because we're quoting somebody so uh isn't there a way so yeah that's to actually go to another thing I don't want to I don't want to cite the person's name I don't think they did that in there like here they put that person's name in the footer oh and then they're citing brave new world yeah I'm not going to cite the person I'll just leave it like that I think it's okay I have to work on my my accessibility though um understanding so the fun thing with this is they gave me all the text um and let's just copy here's the fun you know this is the boring part of html right when you're just updating stuff I don't even need that one and then I have my quote and li close li and then the next one copy I have prettier on so I'm not worried about the formatting at the moment um I just want to get all my text in copy paste and copy paste and then I can delete all this whoops so my formatting should be okay well I have lots of empty space but whatever whoops lots of whoopses right now um so that should be everything there I need my image colton image Irene and image and there we go perfect um cool so I think we're ready to get to the more fun stuff now um so in my global uh body I'm going to start with and do a font family of I can't do it var font family primary which there we go okay cool I had the right the right one from uh from there so that's good um so body there my font size font size is var font size 400 so everything should get kind of small maybe yeah um I'm just going to stick mostly in my global one here I'm not going to break out to do everything just because it's such a small design uh font size var font size I did that as a 900 right for the biggest one um and now we should be able to see that right away um because I set up in my root folder let's just put the responsive mode here um you know you can see that the h1 font size changes there between the two different screen sizes which is cool um body here I could do my dot lead which is a font size var font size 500 there we go good um so let's pull up the design again uh this one um so my h1 has the color of our color primary primary I forgot I think I did 700 uh we're black on black it's hard to see what I'm looking at here but let's just put this down at the bottom and zoom in a little come on I can't zoom in I don't want to x cancel I want I want to zoom in oh well whatever is that the right color yep uh the line height here has to be tighter line height of one and what I'm you see how there's a lot of empty spacing over here uh if I x that that's okay okay now I can zoom in um all this empty spacing oh we have this svg in the background too um but I have all this empty spacing so like there's different options that I could build into this um but one thing with Andy's reset that I pulled in is it takes all like there's no margins on anything as you can see like everything is stuck together and that's fine I want to do that um and we'll we'll explore how we can fix that in a second but so like different approaches you could do to take this is I could just go on my h1 and try and build spacing around it which would work um but this big space at the top here unless I ended up needing to change this design I don't think that coming in and saying like margin top on my h1 is the right way to go um I really think that it's a bit more maintainable to have it on my body and I can just do some padding on here so padding top of I don't know three ram or something like that um right needs to be more than that five something like that and let's get this to a hundred I don't know if that looks probably a hundred percent I think my font weight might be off but we'll fix that later um my h1 this is interesting here too like I didn't make a container class or anything because I didn't think I need one and I might need to change my markup when I go to the big screens but notice how this is really narrow and then this one's wider here um and actually what happens when we get to the big screens because it's always the same like it's always stopping at the word r so I think what I'd want to do on this is actually just set a max width of like if it was only gonna be on small screens I could do a percentage um and it's all good but because here like it's I don't want it to be a percentage of this it's gonna be like I'm gonna have to wrap this in a div um to get this to be two two columns eventually so like to be able to get this it's left a line that's centered actually is everything center on this design almost I think I'm gonna do a on my uh text align center up there um I'm gonna set a max width I just don't know how big to do let's just say 10ch um and then because the text has it's text align center but because it has the max width like background is pink you know it's this pink box isn't centered the text is centered inside of that space um but if you set a width or a max width on something you do have to then go that means to be a bit bigger um but then you also want to give it the margin left of auto and the margin right of auto I like using the longhand a lot of the time on text for that because then I can overwrite like I'm not if you do a margin zero auto and you might have like a utility class or something that's adding margin top and bottom and then you end up overwriting it it's a bit of a pain in the butt whoops this should be 15 sorry for the chat I've been ignoring you guys a little bit usually I'm much more active and following along with what's happening there so we'll do that in a second so there we go um you can set it up like that and I will put a margin bottom of 1m because I do think the space here looks like it's roughly the font size did I bring in uh I think I'm using I think the font is actually a variable font from Google I'm gonna go with the 800 it is a variable font with it so I'm not too worried about um that all right let's go check the chat out for a second joshan joshan joshankstone I'm using uh pre-prose just to run everything right now it makes my life a little bit it's all local yeah it's just a local server I didn't know you left Ragnar welcome back why not manually break the tech you in this case I guess you could put in breaks um like brs at each one I'm never a fan of doing that I don't know I guess because of um just times where that causes me more problems than it than it helps but yeah because it's the same on all screen sizes you could put a br I guess after each one sorry about that yeah the ch unit is for characters now it's not perfect but it's like 12 characters based on that font size it's a little bit different from m which is uh the font size itself all right so we got that going that looks pretty good and this next part so I think actually the easiest thing to do I see people a lot of the time when you have something like this um actually I just realized we do need to wrap the whole thing in a container because if I look at the whoops how did it there we go if you look at the big screen size like it does have a maximum size to everything um so I'm gonna go back to my html my main I'll put a container and you could even make your main a container if you needed to um and then close container and I do whoops not close main close container I do like putting comments for when I close containers because when you're looking at something and you just have all this stuff and you're like why is there a div here I just find doing that is a nice little reminder of what's actually happening um so then I'll do it I mean technically my container I guess we could do this oops I don't want the end there I want to be in here um would be I have components at my base I mean if I was working on a bigger project we could do it I would have a utility utilities folder um and to me this would be one of my utilities um or because it's a smaller project actually um what you could do is I could just in my base make a uh utility utilities.scss um this is where like a lot of times sass can seem like overkill on small projects because you start implementing the same strategies you use on a big project but you know for something like this where we just need like maybe three utility classes it's probably overkill to to import them all the separate files so I don't mind doing it this way um oops main.scss base uh global and then I can just bring in my utilities so my first one be a container and utility is anything max width I don't know how big we need let's do 70 rem for now uh padding of 2m padding of right and left and even like I guess I could bring this base in here at the top with my container spacing instead but I don't like putting space on the top and the bottom of a container just because I'm always thinking I'd want to reuse this in multiple places and the idea of having spacing on it scares me um but I like to use it just to create you know the whole point of a container is to hold it at a certain width but that can include its small screens um so padding zero top and bottom 2m left and right and uh max width padding and then if you have the max width it doesn't actually oh uh margin margin of zero auto because we want it to stay in the middle of the screen once it hits that max width so now we can see that this this one here is fine it's sort of following the design that we have where it's not touching the sides and then as we get to bigger well I'm not getting to the right size yet now I might need to change my we haven't put a break point in yet we're gonna have to build a break point that's probably like around here to start with I might do like a tablet size one and then a really big one after that we'll see it's cruel last I see a few different people answering do I prefer ch over m or percentage it depends on the situation um just like here I'm using m I mean this could be rem too it wouldn't actually change anything um for something if it's a text-based thing that I'm setting a width on I tend to like ch because I can sort of guess at how big it actually is um where it can be hard when you do a width with m or rem or less rem but if you're doing a width based on m it can be really hard when you have different font sizes coming in um yeah there's I'm always using different units for everything in my agency we use pixel lot and transform them into rem by sass function that's okay if you're using a function and switching them over to rems then you know it's as long as they're not pixels at the end of the day especially for font sizes then you are all good I've gotten so used to it but I mean if it's just a mix in right you'd be doing like uh size is 160 pixels or something and then your your mixin's gonna switch it for you so there's nothing wrong with that um okay let's work on my five stars I guess um that's my ratings right so dot rate ratings that's my overall that font size looks so tiny um so all my ratings together font I don't know if I have anything in here actually you know what I'm gonna do I'm gonna switch this uh wrong index uh whoops not the shortcut I was after I'm gonna switch if I make this into a ul and then all of these are list items this could be another case of like you're forcing people to use the like a certain style of markup um by doing this so it's the same idea as what I had before and I mean it is a list of the different reviews you've had so I do think semantically speaking this does make sense to set up as a list you'll notice it doesn't look like a list even in my code that is coming from Andy's reset which I probably closed um so where is it reset in his reset he has this where you're if the ul or ul has a class it's turning the list style to none so I find that really useful so if you don't have a class it's a regular list if you give it a class it assumes that you want to do something with it um I think that's a smart assumption to make obviously it depends on the project and everything else but I do like that approach um so now because I have my reviews and this is where sass is super handy as well utilities I can close for the moment ratings um so what I could do in here is I can do a ul like that and I can nest this uh I can do li I should say um and then so I have a background of our color I'm guessing this is primary is it 300 I called it what did I call my light color oh it's not even that one it's neutral 200 that looks really pale I'm guessing it's neutral 200 that I not save my index ratings li oh reviews ratings there we go okay the color's coming in uh so now each list item has that color on it that's cool font weight for each one will be I never made variables often I'll make variables for this but whatever our color primary 900 isn't it the color is off is it just the because it's not the other one is it 400 where's my colors 300 it's definitely I was sure it would be oh 700 that would be why that's why the other one didn't work I thought I did it properly on the other one oh that is 700 primary 700 I have seven and three it's awkward numbers for me the font size on those is bigger though isn't it am I zoomed in a little here oh there we go I guess it's okay okay avi you made a a chrome extension that automatically clicks the bonus points button antrax is asking is it good practice to use css variables in scss it's not bad practice there's nothing I prefer css variables just because they're you know the browser has access to them they don't get rendered into something I've switched over almost completely unless it's things that I need to use in loops which I don't use that often I make review cards team member cards and such as articles articles if it's a piece of information that is all related to that then an article is probably the right thing to use I mean one of the problems with semantic html is your you could do things two or three different ways and not all of them are correct from a semantic standpoint because even if you're talking semantics is about trying to build ink or not English language but language into the markup and you could describe the same thing three different ways and it would make sense if you're talking to someone in all three of those ways so from a semantic point of view then all three of those ways would work if you could translate that to html um my allies should have a margin on them now this is where I think what I'm going to do is come into my utilities I have global can close close close um in my utilities I'm going to make another one called flow content which I also stole from andy bell like this and say margin top is one rem actually no I'm not going to do one rem because I might need to change this I'm going to do a var of flow space comma whoops uh one rem um let's put that on and then we can explore what that actually is doing so on my ratings I'm going to say a flow content and they all get spaced out nice um and this is one of the things that I love because on this what I could do on my ratings is I could actually just change my flow content to three rem if I needed to change the spacing on it of course it didn't work flow space there we go and I can update the spacing for that component if I needed to just by updating that variable um so and all the the that flow that selector I did the flow content selector is where is it it should be oh it's on this so it's not selecting it's selecting this one and this one because it's selecting all elements that are adjacent siblings to another element that are inside flow content or that are direct children of flow content so this one gets a margin top this one gets a margin top but this one does not get a margin top so it doesn't add the space on that first one and it just makes things more consistent so you can use that where you need to use it oh there we go mobile view so yeah you can you can help with consistency a little bit with things like that um now at the small size I think we're not terrible we need a bit of padding on these though padding 0.5 rem because it doesn't look like a lot in the actual design like I'm just looking at the space here is not that big so I think that's okay I'm not bringing in the stars yet how much space does this have around it see like and then like that flow content I don't necessarily need it here like I have all of this together and I have probably equal space on the top and the bottom of it here um so I could just go on my ratings and add something there or I might come up with another approach to that white silence the underscores in front of the filenames is telling sass that these files shouldn't be compiled um they're called partial files so you're saying to sass like these are small files don't touch them because I'm going to import them all into one place and then you're going to take this thing and turn it into one css file if I didn't put underscores in front of all of these it would I'd get like a main.css and a global at css and a reset dot every one of these would be turned into its own css file so the underscores saying don't do that like leave these alone because I'm importing them somewhere else star selectors are fine to use there's no problem with using the universal selector thing they're fine some people in the old days I think there was talk of the impacts on performance but they're fine how are we going to do my stars they gave us stars right did they give me one star or did they give me images it's an svg how should I bring the stars in I could just put five stars as images but that right like I do I just bring in five images there's a cool way to do that with backgrounds but there is a way to do it with a background that I haven't played with in a super long time that I think but the spacing of them sort of funky but I don't even remember how to do it so I don't think I'm gonna do it let's just bring in now the other question is do you bring them in as five svgs or whatever let's just do it the easiest way just to save time um yeah so I don't I hate the idea of just putting five images when I have one svg okay you know what I'm gonna try and do just it's more fun utility ratings so in my li and after content is nothing I'm gonna have to look up this css property because I don't remember it um content is nothing width is I'll try 30 to start with I'm gonna give it a background color just so I can see what I'm doing uh content is nothing display block margin zero auto and height uh I hate giving things heights but we have to because of how I'm gonna do this I also like using this asuda element for this instead of putting something in my markup that I would put a background image on um because it's literally just decorative and I don't like having empty things the height of my svg is 16 pixels so height is one rem uh we should make that up before not an after so it's above we can add some margin to this margin of or even yeah let's just do a margin bottom of 0.5 rem and then my background background image so let's just make this a background color so we keep our yellow box uh background image is url dot dot images slash is it's icon star icon star dot svg there we go okay now background image csa I remember reading about it on css tricks but it was so long ago oh man I wish I remember what to look up for this do you think it's just going to be in here maybe I'll just look it up on the mdm background image mdm because it's a weird value that you can put I think that I never use it's not because you want to keep the repeat on uh if anybody knows what I'm talking about you can drop it in the chat I don't have to go into the spec space is it literally is that what I want round that's the one I want round I think it's round background repeat round background repeat round is that the right one it is so rounds are really cool property um so see how like because of I actually I'm gonna have to set a fit a fixed size to these um what round is doing is it's gonna make it so you it never like if I don't have round on there the background image is repeating itself but it like will cut into the image itself so you slice your image as you're doing it and as it's repeating so what this is doing is it won't cut your image it's either showing like see how they're getting and then it's gonna at one point like I have less and less stars as I'm doing it what space do maybe it was space that I want there's one of them that will actually end up spacing them out oh there I want space so round I think was stretching the image stretching and squishing it a little bit to fit um let's give the height two here oh it's not going to help um but see how like now there's a little bit of empty space and then they get closer now I don't think this is actually going to work because I can't put enough empty space between them but it is a cool option unless I leave it like that like what's this actual width like there's more space between them here unless I modify the svg that's always an option um what's the width of my before 100 pixels so like I could say that this has a width of 100 px right can I get bigger 110 is that going to give me an extra one or is it going to space them out yeah I need like exactly 100 whatever is that oh I need a height whoops height one run that's not bad though right hmm if I wanted to do variable star counts this wouldn't work or I mean no this wouldn't work with it you could use a data attribute and this wouldn't work at all I think the easy like if this was an actual thing I think the idea the best idea would be to use a data attribute so like data attribute or data rating one and then use javascript to put in one star and data rating five and you're bringing in five stars and just injecting them um if you wanted to do something where you could actually have half stars and stuff like that then I think that the best way to do it would be I saw a cool thing actually where you could set up a CSS variable um and use the star as a clip path and you can have like the variable behind and it's like filling based on a was it based on a range or on a data attribute I don't remember anyway I'm going to leave it like this for now just for simplicity sake um just so we can keep on moving on because it um so I'm going to jump down to down here for now we can always come back and revisit those um I keep closing my inspector which means that when I do that we lose responsive mode now one thing I'm going to style these individually and then I'm going to be more worried about like the actual spacing between areas because it's going to change a little bit I think when I look at it for the big design um so my ratings let's say is done we can go to quotes um so with my quotes because I did my li and then a block quote this is where you'd want to do something like ul uh no dot was it just dot quotes yeah dot quotes and then I want to get my ul oh I didn't explain this before not my ul my block quote so I can style the block quotes um I used this before and I didn't look at the compiled CSS so it's not nesting it when I do this in like when I did that last one where I had like the ratings I just closed it where's my ratings um when I did this I have ratings and then in there I nested my li and then I put this ampersand the ampersand just means take your selector that you have here um so it's taking the selector that's here would actually be ratings li or no it would just be grabbing my li whatever it doesn't matter um so it's it's all of this is nested together like this but then in CSS itself like it just it looks like something you'd be more familiar with so have your ratings you know an li inside of ratings and then my li before that's inside of my ratings uh so we could do that and I guess in a way maybe it would be safer even if I did like um something like that so you're saying the direct children so if I did that then it's going to give me my my li's like that so it's an li that's a direct child of my rating maybe that's safer to do if you're forcing markup on people like I am now but I don't think you need to do that either because how many nested li's are you going to have on something like that right so here it's the same idea it's a block quote that has to be inside of quotes so background is my var primary 700 we have three different colors in here I think color var color neutral 200 um text align left um block quote I would I think here just because of the way the markup is I would do my li or no I wouldn't even do that I would come back sorry I was going to add some spacing but I can do that here are my quotes I can use my flow content here again flow content and get all my spacing oh I didn't did I do a border radius I didn't use a border radius anywhere yet I'm guessing it's the same everywhere so here I will add a vr for border radius one ram I'm guessing whoops you need a double hyphen for a css variable um one second so then if I go to my quotes we would have my border radius is bar br and then I would oh it's a little big but that's okay um here too I would have my border radius bar br and this is where it's nice because here I can come and change it and it changes it for all of them that looks a little better cool um on these guys I do definitely need block quote the padding is pretty big padding to rub probably yeah um and now we need to so I have my block quote I have my split so that would be under utilities display flex do I not include my verified buyer in there whoops there we go so uh Kevin this is why one problem with like flex here is like I literally just need a div here to to wrap around those um to make that a column so like do I even need to put it I always feel like I can't have a naked div like this I'm gonna say naked div I just I find I find it awkward having a div that doesn't have a class on it um but I also know I don't need to select it um these two right so like just doing that it sets it up properly so it's like but I this is where flex is kind of annoying because you have to have that wrapped around here just to create the two columns properly that's where grin I like better um and I mean I could definitely put a class on those but I don't need one right so my block quote so my quotes I gave them a class name so but I think I'd always want my image to have a border radius here so border radius uh 50 percent then for the spacing here there's a different ways we could do it um because I have a display flex on my split I could use a gap on the split or I could just say that my image has a and even what I could do is on my quotes I could do a spacer of two rem and then here what I could do is var spacer and I could have a spacer one like I'm locally scoping this one um margin right var spacer I'm locally scoping this custom property so I wouldn't be able to use it anywhere else the advantage with doing it here is I think it's the only place and I could have like a spacer one and then override it a little bit like I showed with flow content but with this I don't know just I see like this space here looks the same as my space here so by having them the same it makes sense to me um quotes is my split there because I have like a utility class that I'm using for flex here I do need these to be a line center um I'm just trying to think of the best way to do it like I could come up with another utility class for that it starts feeling a lot like a line center tailwind right now uh a line content center no it would be a lot uh then I put it on the wrong place I didn't save my I want that to work I need to save there it is okay a line item center is working good uh split a center and the reason I'm doing this is just because I wouldn't be able I don't want all my splits to be that because I'm going to use a split somewhere else probably so it just makes it a little bit more safe by doing this I could all there's other ways you could do the same thing but it just it sort of feels right at that point I'm also actually on my image here margin right margin uh is this going to work no that's what I was worried about okay that's okay um quote dot quote margin top var spacer and I have my dot status is color var color what color would that be this one primary 300 primary primary 300 um also the name was it name it was name is color oh font font weight 800 that doesn't look bad valois yeah I see gap in there gap would work but it's only supported so far is the only one who's missing out on gap right now for flexbox and I'm really looking forward to when it comes just so you know guys now that I built this out I would have been a lot easier to make this using grid Brent was right we should have gone that way but that's okay it works fine this way um now these cards we want them to be able to shrink okay we're fine like this is fine uh we don't want them to be able to get too big so what I'm going to do actually my split class there I might have to change anyway I was just thinking of something but that's okay uh so my quotes my quotes the block quote itself or is it the li the li itself will it matter yes it will I'm gonna say that the li has a max width I just don't know what to make it how big that's too small that might be okay I don't mind like it goes like that and it stops there maybe it could be a little smaller the reason I'm doing my li and not on the block quote itself is um like even if I made the block quote smaller it would be there but my li would still be the full size actually it probably doesn't matter actually and then that would make more sense for this to come to here I'm going back and forth a little bit we'll see if that runs into a problem but it sort of makes sense to have all the styling in one spot I might just be zoomed out or maybe did they shrink this yeah they made their images smaller thank you bellow uh image so here how big would it be with that look better that looks better right my space here looks too big but maybe it's just my overall spacer here is too big is that better that looks like 100 right I think the two is better and it really does look like this spacing looks consistent I think we're okay maybe this space could be smaller but whatever actually I was putting a max width but it's kind of ugly if that happens but these are going to have a if I do max width then I could do a margin of zero auto uh except I don't want a margin of zero auto oh yeah it's on the block quote so that works because these guys too should have a max width on them which is my ratings they probably should have the max width on them the same one right max width is that what I put 25 margin this is gonna break isn't it this is why it's dangerous to zero auto because they're gonna get stuck together so a lot of the time if you are doing auto margins on something it is a good idea to do a left of auto and a margin right of auto just so you don't like there it over was overriding the utility class I had except I'm putting zero auto there we go awesome so for my spacing now now I didn't think enough of this when I started it of how I would get where's my other design how I would get to this so like in this design when I'm looking at the big version of it I have this needs to have something just so I can split it in half whether I'm using flex blocks or grid for that it doesn't really matter oh except this change is complete I can't use what I did I can't use what I did I just didn't realize I thought it stayed the same so that max width can go at the window because this they need to go on the side that's that's fine I can just throw a display flex on there at a certain point and then so that's gonna be like that this is already wrapped in something so I'm not too worried about that I can just add a display flex and get it to work when I need to get it to work I know you can use control p to navigate between files oh yeah I know I need some space there I'm just trying to think the best way to create that space because if this I think what I'm gonna have to do is I have my container I have my h1 what I'm gonna need is to wrap from here to here in something and I want to give that's like the spacing that's going to come come on this space here is going to be created by that parent and not by these guys here because when I'm at this big size I need the space here so it'd be easier if this parent controlled all that spacing instead of trying to put it underneath this because then here these guys end up becoming centered in that space so it just becomes a little bit harder to to play around with and stuff so here we can do a so where is it from here to here I want this is why I was thinking my split might not have been the best time to use it because I think I'm actually going to do that here I'm going to do a dot split uh wrap I'm at wrap and if I do my dot split here so I might I'll have to change my name uh where I did it so right now everything's busted so why I'm saying that is because utilities this I'd probably wrap this in my media query now at media min width 50 um so I have it like that and then when we get to there I have to yeah so that means this needs to be wrapped intro there we go so here it's like that and then it falls into the two columns there I have to fix my spacing and everything that's fine um and that means here quotes can also actually be a split because what that's going to do is now they all turn into flex at the same time and I think what I'm actually going to do split this one won't need the flow content on it because my split I'm going to utilities split is going to come with a gap on it and I know that gap's not perfectly supported but the super nice thing with gap is when you have gap this way but I should have space there oh it's not using display flex okay so we're always going to have display flex on them but we're just going to do a flex direction of column and then it's going to switch to a flex direction of row um just because that way oh and my gap should always be there too smart coming um so this way the nice thing with the flex box gap is it will work in both directions so here it's working vertically and then when I get to here it's now working that way instead so I love that so much um so too bad for safari ravi we could do something for like column right column left and stuff like that but I try and avoid those as much as I can so actually I think that's working pretty good at this size still so now I think I called it what did I call it this is why flex box is annoying though because you get like all like any of my intro I called it split though it gets not I this could be it I could do okay I have this whole area then I have to wrap this for flex to work so that gives me this as one combined thing my intro so that's this area here my splits all that it's not really a section of content though I like this whole thing is just stuff because all I'm thinking for that space I remember I was originally saying I need to wrap all of this so I can use that for my spacing I'm scrapping that idea I'm scrapping that idea and that's fine I could probably change where that media query kicks in thank you Zell Hodge OMG Busta no I'm not using any frameworks this is I'm using SAS but we're just doing we're doing everything custom that's if you come into my channel we do stuff with just regular old school CSS or I'm using SAS but you know what I mean um so that's I mean we're getting there pretty close actually I was going to say that I would finish this up on a second stream but we're so close to being done let's just see if we can pull this off really fast um I have a few things to do though like at large screens okay now we're going to we're going to do the desktop version of this maybe at another one just because we need to it's not hard but we need like some translates to do the um you know to get the offsets and everything so I think we're going to end this one soon um is there a fixed height for the is there a fix for that height difference in the testimonials oh like this uh yeah we could fix that it's because of how I set it up watch this uh that would do it the reason that worked is because um my li like I'm using display flex on this by default display flex everything stretches to the same height so all the li's were the same height here uh so they were all stretching but inside each li we had our block quotes our block quote was shrinking them if it didn't need to grow it wasn't growing um so the easiest fix is that or I could do uh that work if I whoops yeah okay let's see if that worked too rating quotes um so if I put this back to my block quote I do like having this styled as a block quote uh and then I said height is 100 percent there we go that works too so now it's let's just get my li just to show li outline one pixel solid green why is it working oh because they're all the same height now there we go so you can see that the li here let's make that a bit bigger you can see that this li is taller than or shorter than the other ones because because the content is shorter so that would also work height 100 and then it matches the height of its parent either one is good I think actually I prefer this so thank you for that Ragnar everyone's redeeming stretches today it's probably a good thing avi you liked watching the post livestream css battle video so this one I will be also putting up on youtube but the condensed version where you don't really see me chat talk with the chat too much Brett is saying I should I should power through I have stuff I need to get done my kids are getting off the bus in an hour you don't think well I can always extend the challenge if we need to extend the challenge it's good I want to push that back a little I'm starting to dread it now okay I'm going to go a little bit longer we'll see how much progress I'm making so one thing I'm wondering I mean I'm using that split thing to make my columns there's two different ways that I could try and balance this out a little bit because if we look at the desktop view they're pretty much 50 50 but because I'm using the same class here in the same class here I can't really select the direct children and try and muck around with them too much because if I try and change something too much at the top it would change down here as well so you know that is maybe I could also use grid to do all this instead which might be easier than how I'm setting it up right now I might use grid oh we're at 50 for the community challenge thank you for Stefan for 4000 points going toward that let's do some grid so for grid what I'm actually going to do is take my container and move it outside my main and the reason I'm doing that is because I want to put the grid on my main itself now this really depends on your layout that you're doing and I'm also going to open firefox because grid is so much easier to develop when you're in firefox even though I keep saying I think chrome has something now for grid but um so let's go I'm just going to put this in my global it's not really a global but whatever I can also like I have global like if I was doing a bigger project I'd probably have a layout partial as well but it's such a small project that whatever um so I just want to select my main all this but like a comment here layout stuff uh at media min width 50 ram 50 m and then display grid and then that does nothing oh I'm gonna have to take okay we're gonna have to change a few things then we're gonna take the split off okay and hit save so everything should break a little bit so if I look at my layout and keep opening the wrong one if I look at this I have my main is let's take a pencil maybe it's easier to draw my main is all of this so if I look at it here it's pretty simple the bottom is like that now if I want to do that whenever you use grid you just have to like this line is gonna go through like that whatever you do um but it's fine because let's just leave this up here what I'm going to do is just do a grid template columns I like the long hand of grid the shorthand is super handy but it's a little awkward sometimes if and I don't write it enough so I don't remember it um grid template columns will just be one fr one fr because I wouldn't it's close enough to being split down the middle I think you know and then grid template actually I don't even need grid template rows do I no I don't um but I will do a grid template it's so it's overkill I could literally just do that um actually a partial layout would make sense here just because what I'm gonna do is I'm gonna select stuff now here um I have my intro and then my ratings and then I have my quotes so dot intro is going to go uh grid grid template grid template grid column one over two then I need my dot ratings is a two over three and then my quotes is a one over negative one and why grid column grid column Kevin singular there we go and just like magic it all works grids and floats I see a little suff big mentioning using grids and using grids and flex you can they work really really well together um so you can definitely use both of them and one reason I like grid in firefox is in the inspector you can go to layout and turn on the grid and actually see it um and the reason I went with negative one on this one because whenever you do line numbers so I had my I have a one a two a three it always works reverse order from the other side so negative one negative two negative three the only thing this negative one wouldn't work if I didn't create these grid template columns here so if I turn that off um it's going to break because the negative numbers only work for explicit columns that you've created they don't work for the implicit one so like here these columns are getting created automatically by grid because I've told it that it had like these items should be living in different columns so grid will create those columns for me but then the negative ones don't work the negative ones only work if you've defined the columns for them to be on so that's an important very important thing to have there um the cool thing with this is um main can I do this I already have my media query um text align left oh I have a margin zero auto on this guy that's annoying uh that's very annoying okay I'll fix that after um and then I could also technically do a gap of three ram or something like that um because that you know it creates my space here which isn't a big deal and I think I needed anyway but it also creates that gap that I needed here the only problem is that's not so I'm going to take my main is going to always be a display grid and always have the gap of three ram but the grid template columns will only get applied oh this is all gonna have to go in my media query though okay let's pull this out uh this is main and then I want all of these only in my media query so now it should when I get to small screen sizes I get my gap that I'd wanted originally anyway so that's like a super easy win um and then when we get to this point it breaks over and the gaps are there and there so you can see how that is super cool and awesome oh uh okay I was saying like here it's not so the other thing I'm going to have to do is this is something I very rarely do but I do think it actually makes sense to have an at uh max width max width of uh I'm missing new 50m I know generally you don't want them to be exactly the same uh at max width at media max width so I don't use max widths almost ever but I do think it makes sense in this in this time so we're only having them you know it just so I don't have to overwrite it it's only being applied when it needs to be applied yeah valoa the the one over negative one as as regner said that's exactly like saying a span all maybe there's as there's I don't know oh but yeah it doesn't work with implicit columns I think but even a span all wouldn't work with implicit columns anyway if there was something like that because would it I don't think it would work anyway I mean I'm not I don't know maybe I'm wrong uh let's turn off my layout so actually that looks pretty good uh let's come into these guys now so that's my okay let's just whoops that's I'm printing a page now uh I'll go to my ratings um I should have made a I didn't realize I'd need so many media queries so I could have made a mix in but whatever on my li I'll just do it at the bottom but I want to be inside my li so inside my li is here or I can do an at media min width 50 ram m and display flex uh this auto margin again is that's this no this auto margin is causing the issues now so I could say and before margin zero and let's go look at the layout I mean there is a big gap on the left side there my star should be more spaced out but I like the solution that we have uh padding 1 m 3 m a line content center doesn't look perfectly centered oh well it could be the font and then I hate that when I have my drawing on it I can't zoom in the padding is definitely bigger there than when it's at the small screens right or is it the same on the top and bottom I'm going to say it's more actually where's my padding my original padding I did 0.5 I don't there's no reason that I need to do it different I'm going to say 0.75 top and bottom and two ram left and right it shouldn't change it at small screens but at this size I think it matches the design a bit better and then my margin is zero one we'll do the same thing two ram zero zero just to create that gap oh no this is where you cheat a little bit there we go ah that sucks I think the problem now is with the big layout if we look at the big it's getting my max width is too small is what the problem is I went I think it's in the design isn't it let's open up figma I have to bring these svgs into I'm getting up to 1110 70 rem isn't that what I went with uh was it in my utilities I did do 70 rem is it just that my this side this should be bigger than that one I guess so that would just mean in my I could do what if I just did this these guys look so stretched out in the design like look how huge that looks it's coming up to like the middle is it my gap is this too big one I forget the shorthand I know you can do shorthand for the different I did it the wrong way three and one the reason that I'm dividing by 16 is because when I'm doing my containers with is because I'm using rem still so the rem is looking at the html font size which is still 16 because I never redefined my roots font size the grid column one two three is here to remain so you can see the line numbers I have line one to two so it's saying start whoops I'm at the wrong file now start at line one and end it span until you get to line two stop at line two and then this one start at line two and go until you get to line three which is here so and then this one is one over negative one so it's starting at one and it's going to negative one which is at the opposite side I never changed my root font size let's go to my global I set my body's font size here but that's my body's font size so it doesn't that's not changing the the body's font size isn't the same as changing the html's font size the root font size is still is still 16 okay a couple other things I can do while I'm here here in my media query which all of this is inside of my ratings can do an align self center no why not oh it did work okay good because we want that to be there I don't like this one over what if I did like a 1.5 here that might work better and then what I could do here is this gonna work how did I set this up oh they all have them that's part of it crap it's kind of weird right now that I have some stuff for them here and some stuff for them over here um but when I define a grid I like placing things on the grid all together but I just for organization um so in the media query what I could do is uh and first of type margin left of zero maybe this isn't the best but and then I can do a last of type margin right of zero and if you get that that style going on uh which I don't think it matches exactly what I want but well I mean it has that stepped look to it I just think the steps might be too big but we get that step look to it yeah 3 p.m for me a lot of you guys following the evening time I guess it's a lot easier if people are finished work I wonder if I have a big European following just because of the times I stream at I could use translates for sure and instead of the margins so here we did uh transform translate x that was my original idea negative two run maybe and then this one would be the same thing but a positive that might be more more to the design maybe even three something like that's probably closer to the actual design that's what I was going to use here for the offsets as well um and I'm using first and last just whatever you I see someone mentioned like nth child you could definitely use nth child and get them that way too um so I mean we could use that same idea as I just said here on my quotes uh quote and then I could say and first I need to also do first tile child that would work too first of type actually for this one I'm going to do nth child because I want the second one nth child two um now this is where I could do a margin top of say two or three ram and then I could take the next one uh and do like six oh no that's not my quote whoops wrong place I want that on my block quote uh or on the li we can probably do it on the block quote no why not right because they're that is I have to do it on the li's uh because the block quotes aren't children or they're children but oh no the height 100 comes to bite us in the butt for that one eh so this is where maybe the margin doesn't a bad idea let's go with the trend transform translate do that instead uh translate why there we go I guess that works better in the end they get a little narrow here I might change that media query uh one thing because they are translating the reason I did the second and third one is because I didn't want to move the first one up whereas on those ones I wanted to move only the first and last one so this one would stay in the middle and uh yeah we're gonna actually there's another thing too um someone pointed out to me on a dm I think um carol did so if you're here carol thank you very much um for that I was doing an old school thing with sass where I was using imports which we're not supposed to use anymore so we're going to look a little bit at that and explore what we're supposed to use instead of imports when we use sass um okay so I found oh you know why I moved everything I think I'm gonna let's just open up my design files and we're ready to go now so I'll show you my screen there we go um so we'll start with what I had just mentioned um which is when I set all this up I used um I want my main um I used the import to bring it in because this is how we used to always work with sass you'd make your partials and then you'd import your partials um and one thing that the import did is import um this is sass's actual documentation um whoops so it it extended csss at import rule so um yeah I mean it did its job and it worked really well but when they switched over to dart sass they added in use and forward um and the idea is I think it's here um they're discontinued or they're yeah they're discouraging the use of the at import rule and it says they're gradually phasing it out over the next few years if you have projects that you're actively like that are just there and they're not being updated and you don't have to worry about it that's fine if you do have older projects that you're maintaining they have created a tool that you can actually use to switch over things and make them work um so you don't have to manually switch everything um and it's kind of cool what they've done with the use and forward um because you can use it just like the use you can use a lot like a import but the idea with it is you can be a lot more module module modular um with using it so it's why they actually don't like import um is because let's just see where they said it um it is only with dart sass so if you're using something like the live sass compiler in vs code it's not going to work um you need to be on the newest version of sass uh to do to use these things um which is the dart sass so uh you can see the issues or why they didn't like it is everything became globally accessible which can be okay you want some things to be um but you know you libraries were then having to prefix things to stop naming collisions and there was other you know sort of issues around that when you got into really big projects or if you're bringing in other libraries so um the use now we can use use um in a more of a module modular way than we could do it with at import and there's also forward as well i'm not going to dive into these today um but at a very very very basic level you don't have to do much you can just come in and switch any import for it at use instead and at a base level this will work this isn't taking advantage of everything use can actually do but at a very simple like from from its simplest use that's the simplest use of use um that's all we have to do and everything should still be working so if I come back and hit refresh like my site's not broken everything is still there and everything is good um okay so if I just change the opacity there we go okay I can see it now and then we can just bring the opacity back down after that makes more sense um so let's go and find my global um because what you can do with a background image is you can do lots of stuff with it right so first is background repeat no repeat so actually I mean you could sort of just get away with having that one there and nothing else on it I guess um if you just needed that one to stay there the what I want to see is if I can play with my background size so background size because if you don't play with background size like as I do this like it's always exactly the same size um whereas if I come in with background size and I just say 100 it's 100 100 so it's going to fill up my whole space so that makes the background image responsive um which can be handy but I don't want that so like maybe it would be 30 something like that a bit bigger something where it's just staying where it looked like in the original design so you can see it's well if you can't see it it's just sort of hovering up around these letters here and when it goes to the mobile view it's sort of the same maybe we could play with the sizing of it or something but um just doing something like that lets it you know it lets it grow and shrink so we don't have to worry about it too much and what I think a lot of people don't realize with background images is you can have multiple background images um so here what I can do is I can now is it a comma separator or not we never know I think it is comma separated so URL is images slash bg pattern bg pattern bottom desktop dot sbg is it comma separated we'll find out in a second um background size that's bg pattern bottom desktop is that right bg pattern bottom desktop it is okay it is comma separated um and then when you do that what I'm going to do is a background position so the first the first one is my top so my top one will be top left comma bottom right which should work and I see it there so let's do the same thing on my bottom desktop I know I can just change the opacity now and we should be able to see it here it is so you can see one you know just on my body I can bring in two background images and then even for background size like this is no repeat but it's automatically working on all of them um but here I could do 50 comma 25 percent and then that's this is for my first background image this is for my second background image there so there's lots of stuff you can do with background images um so yeah like that and the I think what I like about this solution like I don't like the idea of have you could definitely use a media query to switch the background image if you know it's not hard to do um but if you're setting them up with a background size um I don't think it's necessary to do it uh because then I mean it is shrinking down a lot though we could do you could put a min max um not a min max you could do a max function or would it be minimum the minimum max we want a max um so you could do a max of 50 comma and then actually put in like a hard value so the smallest it can get is 400 pixels um and this can be am or rem but it does need to be like whenever you use min or max they need to be set about you need one can be a percentage well you pretty much need one to be a percentage or a viewport unit or something that's going to be changing and then one that's a set value that doesn't change um and the what it's going to do is you're saying choose whichever of these is bigger so let's hit save and let's see if it even works I've never done it with a background image before um but you can see it's getting bigger ah come on so if I do that it's getting bigger it's getting bigger it's getting bigger but when I start so it's at 50 percent of the screen right now but when I get to one point it will there you go you can see it stopped shrinking so once it's you know which which of these values is bigger so it's taking the max out of the two of them so it's 50 bigger than 400 pixels then I'm going to use 50 percent is 50 smaller than 400 pixels then I'm going to use the 400 pixels so you stay big and then at one point it locks in and it just never shrinks from there so I sort of like that I think the 400 actually works really well so uh I can do that for both now if I have the same for both I'm not even sure if I just take this off will it apply it automatically to both probably right yeah oh that sucks wait what hmm we'll see why that's happening hmm even there oh I know why okay we can fix that I think I know why actually it's kind of weird I would expect it to be a little bit higher than that we'll take a look at that after um but since that seems to be working and I think I'm actually pretty happy with that let's go back to those sggs I see hello wake is saying the the semantics around min and max are weird I think it's because we're used to using min width and max width and if you use like if like if ever you do like you know you're used to having a container and then doing width is um I don't know 90 percent and then max width is 1200 pixels just you know as a quick a quick one you can replace that by doing a width is ma min 90 percent 1200 pixels um so like here like it's reversing it around but it's because we do want it to choose whichever one is smaller right so I think the semantics of it actually makes sense once you think about it but it's the opposite of what we're used to using a lot of the time when we're doing it spread out over different properties um it's like and it is a little weird but it's which would you know use the smaller of the two so use the minimum value out of those two uh so like this is literally the same thing as what I wrote here that would accomplish the same thing thank you for jumping in shark times to say hello while you were at work you can always watch the replay afterward don't worry um let's go fix my svgs now put them back to where they were which is very very subtle uh so that one's okay oh the other one was already open and I can just delete this one here we go that was a lot easier than I thought it would be actually that went a lot quicker than I was expecting uh so those are good um I'm actually going to fix my spacing that's right here since I'm already in my dev tools um so I don't know why there's oh I just have a big margin bottom on there and I think the reason I have that margin so here in the mobile view there is a healthy bit of space but in the desktop view they're stuck together um so it just does mean I already have an each one with I already have like my media query here from last time so I just put margin bottom zero so that should fix it so when we're at we're not why not oh whoops that was a max width okay this would be a zero and here we want to have a margin bottom of 1m I'm not used to having max width media queries oh we want something there because that's a little too tight so I guess it starts at like a point 125m that looks a little better and then we're okay there too cool hello wait yeah for max it's using whichever value is the bigger of the two values it is it is definitely it takes a little while to click into use the right one I still find myself always using the wrong one so I always stop and think before I choose which one I want but it's easy enough you try it and if it doesn't work you use the other one we also have clamp but I don't think we need a clamp um in this case um so here I think I could have taken a better approach as I said to my um my stars one thing that's important with these stars is they're definitely decorational so I sort of feel like because they are decorational um I like that it was coming in with as a background image because it's it's just it's not content that's very important um it's visual when I say not important I mean it's very visual because the text is saying what the stars are supporting so it's really just for people they can see it if it's a screen reader that's reading this it's saying rated five stars so like you know it's it's very visual but it's not important in the in the sense of what the content actually is because it's just gets repeated um so for something like that we want I mean we could easily enough I don't know if I'd want to I guess I'd want to put it in its own div right so I think it makes the most sense now what I don't know because the easiest thing to do would be to have a div and then area hidden equal true can I do that for a whole div I've never done an area hidden and then put a whole bunch of content on like inside of that um but what this is saying is if this was a screen reader it's just going to ignore this div so it's going to ignore the stars because from that like from that perspective we don't need it um but I don't know if I could do that or if I need to put it on each image this here then I could just come in and say image is star images slash icon star um this is another time when I wouldn't put the alt text either even if this wasn't hidden um I wouldn't I would have the alt here but I wouldn't actually put anything on it because it's a decorative element from my understanding and I've I've seen more recently that there's some argument on this but from if it's a decorative element you should have an alt on there that is blank but then I could just have five of them like that oh ronin yeah um just really quick if I go back to here the media query being inside of my h1 is a sass feature that's not something you could normally do in css thanks for pointing that out this is one of the reasons I get so used to always like if you watch my youtube stuff I try and edit it out but sometimes it gets in or even when I was doing style stage a lot of the time I do an app media I'm in with 500 pixels or whatever and then here I just start writing like margin left zero or whatever and like then I'm like why isn't this working I'm so used to putting my media queries nested inside of elements that I always forget that in regular css I have to come in and you know do something like that I see a question about se from an seo perspective stud muffin do you mean with the area hidden is that what you guys are talking about even if this was from like a an seo perspective I don't really care if they see those stars I don't know the the seo impact of area hidden at all but I don't I think I actually I don't want to say the wrong thing um so I'm just I'm gonna go with this and then we'll see um maybe I can have another approach but I'm gonna throw those all in there like that obviously it's all busted up now so that was my ratings was that ratings I think so right and I'm gonna try I don't remember who it was I apologize someone suggested doing a skew we're gonna try the skew and see if it works on this um so I can take these pseudo elements off completely then um I'm actually surprised the stars are coming in like that hmm okay uh let's just see it small screens oh I have a my reset has images display block okay so in my ratings I have my list items I'm just gonna go so I could nest this inside of the list item but I just find it makes for messier um see like the final output so I'm going to bring the image all the way down here display inline block should put them next to one another let's just fix this so we can see everything we're doing so they go next to each other um and the one big advantage with this now is I can actually say like margin I guess I'd want it on all sides like margin 0.25 ram or something and I could space them out a bit more like the original design so this was a problem that I had when I used it as a background images I couldn't control this at all um so at least now I have some some control over all of that um and then so if that's working and then I would even come in on this and say and last child just to mix up the pseudo the pseudo selectors we're using here um margin oh no maybe this isn't the best way to do it nope nope let's leave it like this oh no I did something oh I'm missing a video um so if I have it like that here it looks okay what's it look like let's just go check their design so this is where I could use because I'm using display am I using display flex on my list item what I'm going to do do I need to move that okay if I there's two choices here um one of them is the display flex I move it outside my media query so I can use gap but gap isn't supported by safari yet so because of that I won't bother um what I'm going to do is inside I use the gap here so like maybe I could just use it um because gap is wonderful but I guess we could look at the did I end up using gap I think I used gap I I don't remember if I made this change or not I'm on animations okay um down here oh I'm in anyway just yeah I did use a gap okay so that's how I created the spaces here with the display flex and then a gap of 1m and then I just changed my gap when I got to bigger screen sizes um Mr. Darkside's asking why we put links in a list it's because that's not it's that's an html question and like semantic thing so one thing you always want to do is take your site um let's just go find my main and what does it look like if there's no um CSS applied to it and does it make sense if you know don't think of it in a visual sense think of it in a terms of how someone would see it if there was no CSS on it so does it make sense that it's a list well it's sort of you know if you have a navigation it makes sense that it's a list because it's a list it is it's literally a list of the different pages that somebody you know are sections or whatever the navigation is doing um to get to and like here I used a lot of lists because I have a list of like here's a list of ratings and then here's a list of my um testimonials so it's like a whole bunch of testimonials it's sort of like here's a list of them because these are the different people that have done it so visually it doesn't have to look like a list but from like a semantic point of view it can make sense now you could definitely make an argument that maybe these don't need to be in a list and you know I sort of went all out in that front on this one um but for I think navigations especially from a semantic point of view I do think it makes sense is there does anyone know why there's space under my images and I know why this happens but it happens to me every time it has to do with svgs I think right or is it not because these are inline blocks so I like if they shouldn't have any it's not the issue with them being inline because actually I don't think that's going to change anything does inline block keep room for descendants underneath them yeah it's not the line hate thing uh this happened to me before and I always forget the solution I always tell myself to find the solution Ragnar accessibility not being accessible to the average dev is the thing that always questions me yeah it's a little bit annoying um actually one if anybody does want to improve um their ally project uh of course ally project this is a really good place to start they give you like a checklist for making your site and stuff um and they go you know they have everything content global code headings lists controls media video audio appearance animation contrast and so like this is a really nice starting place I'll put that in the chat fine items baseline I think it's an svg thing eRivers asking why I'm using like say here doing I mean why why there's no no it's a great question I could easily like here let's give these a class class equals stars I just want to check actually my global or no I made a utilities okay we could do something interesting here then uh split no it's not going to work because I had it in the media query I was using this more for layout purposes and not for this so okay that idea won't work um but why like why why did I do inline block instead there's no reason and there's no reason to avoid um so like I could take this off um and technically take that off and then did I save my index I did okay so here I could say my stars is display flex and actually I don't know if that affects my issue or not um oh it's stretching them but yeah so I could do my display flex there and then that gives me that and then this is I guess I could still keep my margin on the images then to space them out so which you know this approach versus this approach there's no there's no better solution there it just depends on since I already needed a div around them anyway it doesn't you know whichever approach you prefer is perfectly fine I think um the only issue now is that they're getting stretched a little bit because of that extra space which drives me nuts here you can see is there something on here the display block does nothing now um is there something on here it is the line height so frustrating um line height of one zero I mean that's just frustrating now right it's not even it's the line height of this text because their display this and this are display flex um so actually another okay another solution to that instead of doing this would be um a line self actually no that's that's not right I just want to check one thing actually before I say this if I shrink this down at this side yeah okay they're not stretching now see I don't write like right now they're not stretching they're just um they're the right size and then here once the media query comes in now they're stretching that's coming because this div here and one second rating star outline two pixels solid green so uh star star okay whatever this doesn't matter I don't get why I'm not get oh I don't have a div or anything around the the text that might be part of it too but anyway it's they're mat these stars are trying to match the height of my text on this side um um so here where I have but I have a line content center would it okay one second if I go back to my index excuse me see how they're mat I put a paragraph now so the old lines working on there they're matching their height but I thought so if I have line height of zero just for fun interesting is that what I did wrong I did a line content thank you who wrote that there we go that fixes everything thank you but uh Bytlyn Kevin Kevin Kevin let me fix all our problems because I was silly oh the line height still throwing it off a little though height one one second here this font also seems a little funky here right because there's this see how even in the text there's space underneath on the text and the reason that space is there is beat four things like um if we go to my index and we find that's the wrong index if I go to this index um if I look if I put the letter j here like it's it wants room let's put that back in a paragraph it wants room for the the descender so it needs room for that j can you guys see that can I zoom in come on there we go so this j that's sticking out the bottom it needs room for that so because there's no text um that has that it just makes it look like there's empty space underneath it so that is one of the fun things with text so like it looks like there's this big gap underneath it's just because it's leaving room for there to be letters that stick down on the bottom like j or p or whatever it is which will then actually go and touch the bottom um so you know that is kind of annoying for trying to line everything up and maybe that's a reason to use the inline block instead of using flex in this case um I don't know uh let's go back to my start ratings that took this took longer to put together than I thought it would if I just take line height one here zoom back out yeah they look like they're off a little bit and this is even though they're centered um I think because I fixed that right it's like a line item center yeah so that's kind of annoying that that happens um we could do I don't know I'm just going to leave it like that but or I'd have to put them all in paragraphs and then play with their margins or something like that or I could say on the images that the margin is like negative point one two five remember something top on the top um and then I do a point five zero zero maybe you know I don't like negative margins it's a little hacky but it makes it look better oh yeah bite lin saying there is the new thing that's coming that cuts the space around the characters which is super useful that's gonna solve a lot of problems with it I forget the name of it uh let's go find it it's not ready for production yet uh I know it whoops it's on his blog I thought it was oh no it was on Twitter never mind I thought you didn't you write about it I thought Zell wrote about it recently oh it's here letting trim I read it as leading trim and I'm like what's leading trim um yeah it's when you have all this empty space on characters we're gonna be able to get rid of it including that space that's causing me problems right now underneath my g um but I don't know I don't even know I read the article can I use it's not even in can I use yet so it's not definitely not ready yet but it's on the way so that'd be really cool when we can do that and it's gonna make our life a million times easier to fix some things another there's the unit too that's gonna be useful there's a unit for it's the x height um we're gonna be able to use eventually too but it's not available yet but that's gonna be super cool once it's out um okay so that looks better that looks okay I think the color of this text is wrong but I'm not gonna stress about that uh is there anything else we need to do oh I need to fix that so it's small screens this is where the inline block was nice instead of using a display flex um because the inline block lets text-align center still work whereas this uh display flex uh let's do an outline of three pixels solid red just so we can see it um so here what I want to do is I want the width to be the width of my stars and the easy way to do that or I mean Kevin I'm making I'm using display flex uh justify content center I was trying I was gonna make my life more difficult but that should there we go okay I was like why is it not working oh no uh so that works so we can center it that way I was gonna do it another way but why why complicate life um except now I need space between them just trying to think media query that's on my list item itself so that's not gonna help um I mean this is where the gap property is so nice I'm already using it oh I used it with grid uh no here was it with flex I don't remember it was oh the gap's going the wrong spot though that doesn't help but I have it here uh ratings li display flex right oh it's not gonna work at small screens so I could okay so the choice I have is I could bring this play flex out here or I could just say that whatever I'll just change the margin on my images the negative margin is what's causing the issue right now anyway so it makes sense um that media min width what did I do for my min width 50 50 m uh margin is 0.5 rem 0.5 rem oh I only have it on the right side there too we can just do 0.5 rem on all sides that'd probably make it more oh okay cut faced there we go I told you I'm tired this morning there we go uh except I really want on the top zero 0.5 0.5 that's good enough there we go cool I think that looks better the profile images oh how'd that happen oh it's because I have uh okay thank you for pointing that out little stuff so the profile images at small screens let's go take a look um this is because why actually I did my block quote is I don't remember how I made these oh I did use flex for these even though we we said that grid might work better right and then I didn't do that name how did I do this oh I used the split class but I haven't my a center is doing nothing a line item center oh because I have a margin on my image uh which we want only at big screens I should have created a mix in for um my media query but I was too lazy to do it and now I'm using it all over the place but whatever there we go so there it's okay and then there we get the margin on the side I did the margin uh right I could because we have a display flex on that I could have used gap or something else but whatever there we go I think that looks pretty good um I think the last thing I'm gonna do is if I go to my global padding top here I think I'm gonna do uh I just want to check padding top uh at media in with 50m padding top is like 10 rem maybe that's too much but something like that just so there's a bit more space and then at smaller screens this space shrinks down a bit because if we have if there's tons of space on mobile it's kind of weird um so you can increase it when you get to the bigger screens though and then we have it I hope you enjoyed that I hope you learned a couple of things along the way and once again if you have any ideas or feedback on how I did this I would love to see them down below a lot of people are often asking me about ways they can practice their html css javascript all of that and I really do think front end mentor is an awesome place where you can go and do that because you don't have to worry about the design you're giving the design you're giving design specs you don't have to worry about any of that you just jump into the project and make it do what it needs to do so that's really cool you don't have to come up with the idea you just have to execute and I think that's something that a lot of people are looking for this is not a paid spot at all or anything like that it's just a product that I think is really cool and a lot of people should check out if they're looking to level up their skills a massive thank you to all my patrons for their support each and every month you guys are absolutely amazing thank you so very much thank you very much for watching if you enjoyed this and you'd like to see more content like this do make sure you check out my twitch where I livestream twice a week and I will be continuing to post youtube videos here every wednesday with more dedicated tutorials coming once I've gotten a little bit more time to work on those so one final time thank you very much for watching if you haven't yet subscribed please do consider subscribing and of course until next time don't forget to make your corner the internet just a little bit more awesome