Taking on a FrontEndMentor.io challenge!

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 uh 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 uh 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 with a lot of good discussion on semantic html happening this and when to use a list and should i be using lists i switch 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 have multiple backgrounds on one element uh 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 uh but you will see that the 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 them make a fool of myself then see 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 uh can i no uh if you're curious about this i would actually recommend reading the explanation that andy has for it um i will change a few things in here though because we don't need everything um this i'm not gonna use i'm gonna i'm gonna do a i'm gonna delete this we're gonna 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 actually i'm going to do a root scss 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 export styles to css variables but i don't have any to actually export here do i i don't think it's going to work no style is found 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 going to actually does since i'm doing my route i'm going to do root and i have to go to my main and i have to import that so import actually this one should be on top base slash 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 i realize these are the only colors we have in here so like 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 route 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 serif um the base font size is only 15 and we'll find the other ones after font size 400 is 15 pixels that's like what point let's do a 0.5 i can adjust that what's is this working now it is calc uh calculator i've never done 51 not never 15 over 16 whoops what happened there 15 over 16 9375 nine three seven five rim is my base font size um we have the other font i'm gonna go 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 it's three ram isn't it 48 times uh 48 divided by 60. 48 divide by 16 three yeah so the biggest one so font size 900 will be three ram actually i should be looking at mobile for now um and you'll see why after 32. 32 over 16 two so my biggest font size is two ram 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. eight one two five 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 .9725 ram 625 ram 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 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 m and then i want to do font size and 400 becomes this one and for anyone who's not used to sas 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 mouse 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. so one thing this is something you can only do with uh custom properties you can't do this with sas variables where you change them inside a media query so one of the reasons i really like sas 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 sas is you can do things like this where you nest a media query in and sas 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 sas 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 but then in my components what i could do is a new file we could call it 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 and then i need a import them so compo 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 okay 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 going to 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 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 going to 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 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 and now we get our reviews so each one of these reviews when we do that again shift command p um is going to be a dot review and actually we'll have to change this a little bit but whatever dot review how we're going to do the stars they gave us an svg for that i think so i'm going to have to see the command palette thank you brett brent brett um review so if i do review whoops shift command p command palette and then i want dot uh whoops i have to open m at first that's why um 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 we 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 gonna 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 [Music] i don't know i'm gonna do it like we mentioned one second let's wrap all of this first let me give myself some space here i'm gonna take all of these and we're gonna wrap all of that in a ul with a class of quotes um 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 i appreciate it very much i think i missed a comment about them but yeah i use them still um but even when i use bim 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 review if i was using them i would still do reviews with a review in each one um and i do think i'm gonna turn this into a list eventually so in my list here what i'm going to do is have an li times 3 and all of this can actually be in that li all of this one would be inside that ally and all of this one would go inside this la um so we'd have something like that wait i don't have 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 at emmet if i was using them i would do a like quote dot name a quote quotes underscore name like that and then i have the name in here um actually can i do something i'm gonna try something uh no it does that okay i i honestly find that 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 or maybe we'll do that we'll leave it just with lis 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 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 x uh figma there we got the light version of everything that's okay uh so we do want this is gonna 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 that each one of these is also a block quote 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 whoops 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 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 pull uh new poll grid or flex grid flex they 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 is a lot easier so i don't have to do anything special for my markup whoops 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 with flex i would probably why do i have twitch open here oh that's that okay if i was doing this with grid i would set up can i draw in 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 to 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 the rest of the space for this side so i'd like one fr that this column on this side 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 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 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 mean it depends how you want to look at it do you want to look at this let's take a different color 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 as 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 going to 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 code mdn block quote i don't need to cite anything that's fine margin left is fine did it do 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 isn't there a way so yeah that's to actually go to another thing i don't wanna i don't wanna cite the person's name i don't think they did that in their like here they put that person's name in the footer oh and then there's citing brave new world yeah i'm not gonna 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 and 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 i'll 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 gonna 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 but 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 can do my dot lead which is a font size bar font size 500 there we go good um so let's pull up the design again uh this one so my h1 has the color of var color primary pry mary 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 it 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 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 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 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 rem or something like that um or it needs to be more than that five something like that and let's get this to 100 i don't know if that looks probably 100 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 i if it was only going to 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 that's left align that center actually is everything center on this design almost i think i'm going to do a on my uh text align center up there i'm going to set a max width i just don't know how big to do let's just say 10 ch and then because the text has its 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 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 but then you also want to give it the margin left of auto and a margin right of auto i like using the long handle 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 overriding 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 [Music] 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 that all right let's go check the chat out for a second josh and josh and josh inkstone i'm using uh pre-pros 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 brakes um like vrs at each one i'm never a fan of doing that i don't know i i guess because of um just times where that causes me more problems than it then 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 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 dot container and you can even make your main a container if you needed to um and then close container and i do whoops not closed 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 be in there i want to be in here um would be i have components of my base i mean if i was working on a bigger project we could do it i would have a utility utilities folder and to me this would be one of my utilities [Music] or because it's a smaller project actually what you we could do is i could just in my base make a uh you to you to tease 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 as separate files so i don't mind doing it this way um whoops main.scss bass global and then i can just bring in my utilities so my first one be a container and utility is anything max with 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 space in here at the top with my container spacing instead but i don't like putting space on the top and the bottom of the 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 but i like to use it just to create you know the whole point of the containers to hold it at a certain width but that can include its small screens so padding 0 top and bottom 2m left and right and um max width padding and then if you have the max width it doesn't actually oh uh 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 carl will ask 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 it a width with m or rem or less ram 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 ram by sas function that's okay if you're using a function and switching them over to rems then you know it 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 mixon'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 going to do i'm going to switch this 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 if the ul or ol 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 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 sas is super handy as well um utilities i can close for the moment ratings 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 var color i'm guessing this is primary is it 300 i called it what do they 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. did i not save my index ratings li oh reviews ratings there we go okay the color's coming in 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 var color primary 900 isn't it the color's 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 white 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 abby you made a a chrome extension that automatically clicks the bonus points button anthrax is asking is a 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 um 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 you're 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 inc 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 enclosed clothes clothes um in my utilities i'm gonna make another one called flow content which i also stole from andy bell uh like this and say margin top is one rem actually no i'm not going to do one room because i might need to change this i'm going to do a var of flow space comma whoops uh one rem um and 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 that that flow that selector i did the flow content selector is this 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 um 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 ram 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 file names is telling sas that these files shouldn't be compiled they're called partial files so you're saying to sas 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.css and a reset dot every one of these would be turned into its own css file so the underscore is 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 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 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 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 so do i want i don't i hate the idea of just putting five images when i have one svg [Music] okay you know what i'm gonna try and do just it's more fun utility ratings so in my li and after [Music] 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 pseudo 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 a 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 uh images slash as it's icon star icon star dot svg there we go okay now background image yes 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 going to be in here maybe i'll just look it up on the mdm background image mdn 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 oh my i don't have to go into this back 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 haha it is so round's a really cool property um so see how like because of i 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 i what's 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 too here oh it's not going to help 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 round that's not bad though right hmm if i want to do variable star counts this wouldn't work or i mean no this wouldn't work would 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 id 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's 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 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 it's done we can go to quotes so with my quotes because i did my li and then a block quote um this is where you'd want to do something like ul uh no dot was it just dot quotes yeah dot quotes um 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 or 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 if 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 allies 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 allies 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 color primary 700 we have three different colors in here i think color var color neutral 200 text align left so 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 on 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 [Music] quotes we would have my border radius is bar br and then oh it's a little big but that's okay um here too i would have my border radius var vr 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 two red 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 did i include my verified buyer in there whoops there we go so what ah 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 when i 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 grid i like better um i mean 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 then for the spacing here there's different ways we could do it 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 spacer of two ram and then here what i could do is var spacer and i could have a space or 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 overwrite 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 i have 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 uh uh align center tailwind right now uh a line content center no hmm it would be a lot uh did 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 align 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 gonna work no that's what i was worried about okay that's okay um [Music] quote dot quote margin top of our spacer and then 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. there we go that doesn't look bad yeah i see gap in their gap would work but it's only supported safari 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 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 going to 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 uh the reason i'm doing my li and not on the block code 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 the yeah they made their images smaller thank you uh image so here how big would it be with that look better that looks better my space here looks too big but maybe it's just my overall spacer here is too big is that better that looks like a hundred percent right i think the two is better and it really does look like this spacing looks consistent i think we're okay maybe the 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 and i can 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 uh 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 uh margin right of auto just so you don't like there it over was overwriting 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 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 um 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 ctrl 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 going to have to do is i have my container i have my h1 what i'm going to need is to wrap from here to here in something and i want to give that 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 a wrap emmit wrap and if i do my dot split here so i might i'll have to change my name 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 um 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 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 gonna have display flex on then um but we're just gonna do a flex direction of column and then it's going to switch to a flex direction of rho um disc is that way oh and my gap should always be there too smart coming so this way the nice thing with the flexbox 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 so too bad for safari ravi yeah 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 flexbox is annoying though because you get like all like i need my intro i called it split though like it's not 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 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 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're coming to my channel we we do stuff with just regular old school css well 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 gonna 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 gonna we're gonna 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 gonna 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 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 lis 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 i could do uh would 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 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 [Music] and why is it working oh cause 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 live stream 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 um 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. um 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 um 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 stephane for 4 000 points going toward that let's do some grid um so for grid what i'm actually gonna do is take my container and move it outside my main uh 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 um and i'm also going to open firefox because grid is so much easier to develop when you're in firefox even though i i keep saying i think chrome has something now for grid but um so let's go i'm just gonna 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 so i just want to select my main i'll just put like a comment here layout stuff uh at media min with 50 ram 50m and then display grid and then that does nothing oh i'm gonna have to take okay we 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 i keep opening the wrong one if i look at this i have my main is let's take a pencil maybe this is 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 going to go through like that whatever you do 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 upgrade the shorthand is super handy but it's a little awkward sometimes and i don't write it enough so i don't remember it grid template columns will just be 1fr 1fr because i won'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 so it's overkill i could literally just do that um actually a partial layout would make sense here just because what i'm going to do is i'm going to 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 grid grid template dark 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 great column grid column kevin singular there we go and just like magic it all works um grids and floats i see a lil sf big mentioning using grids and um 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 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 uh 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 gonna 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 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 [Music] 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 need it anyway uh but it also creates that gap that i needed here the only problem is that's not going so i'm going to take my main is going to always be a display grid and always have the gap of 3 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 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 gonna have to do is this is something i very rarely do but i do think it actually makes sense to have an at max width max width of uh i'm just gonna do 50m i know generally you don't want them to be exactly the same at max width at media max with so i don't use max with almost ever but i do think it makes sense in this in this time so we're only having them you know just so i don't have to overwrite it it's only being applied when it needs to be applied yeah valuable the the one over negative one as as regner said that's exactly like saying a span all maybe there is 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 it 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 uh but i want to be inside my li so inside my li is here or i can do it at media min width 50 ram m and display flex this auto margin again is that's this no this auto margin is causing the issues now so i could say and before margin 0 and let's go look at the layout i mean there is a big gap on the left side there my stars should be more spaced out but i like the solution that we have uh padding one m 3m align content center it 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 is 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 2 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 getting up to one one one zero 70 ram isn't that what i went with uh was it in my utilities i did do 70 rim 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 because these guys look so stretched out in the design like look how huge that looks but 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 uh the reason that i'm dividing by 16 is because uh what i'm doing my containers with is because i'm using rem still so ram is looking at the html font size uh which is still 16 because i never redefined my roots font size the grid column 123 is uh here did you 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 uh 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 uh 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 change my root font size uh 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 um the body's font size isn't the same as changing the html font size the root font size is still 16. uh 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 uh 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 could do a last of type margin right of zero and i could 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 trans form translate x that was my original idea negative two ram maybe um and then this one would be the same thing but a positive that might be more more to the design maybe even three something that's probably closer to the actual design that's what i was going to use here for the offsets as well um i'm using first and last just whatever you i see someone mentioned like nth child you could definitely use m trial and get them that way too 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 and child 2 um now this is where i could do a margin top of say 2 or 3 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 code no why not right because there that is i have to do it on the allies uh because the block quotes aren't children or their 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 carl thank you very much um for that i was doing an old school thing with sas where i was using imports which we're not supposed to use anymore so we're gonna look a little bit of that and explore uh what we're supposed to use instead of imports when we use sas um okay so i found oh you know why i moved everything i think anyway 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 sas you'd make your partials and then you'd import your partials and one thing that the import did is import um this is sas's actual documentation um whoops so it it extended css's at import role 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 and the idea is i think it's here they're discontinued or they're yeah they're discouraging the use of the add 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 uh forward um because you can use it just like they use you can use a lot like a import but the idea with it is you can be a lot more module module modular with using it so it's why they actually don't like import is because let's see where they set it um it is only with dart sass so if you're using something like the live sas compiler in vs code it's not going to work um you need to be on the newest version of sas uh to do to use these things um which is the dart sas so 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 then we could do it with um ad import and there's also forward as well i'm not going to dive into these today 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 hmm 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 the 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 um 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 thirty percent 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 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 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 uh so url is images slash bg pattern [Music] bg pattern bottom desktop dot svg is it comma separated we'll find out in a second um background size that's vg 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 there it is so you can see one you know just on my body i can bring in two background images um and then even for background size like this is no repeat but it's automatically working on all of them but here i can do 50 comma 25 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 on 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 m or ram 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 fifty percent of the screen right now but when i get to one point it will there you go you can see it stop 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 is 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 um 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 but since that seems to be working and i think i'm actually pretty happy with that let's go back to those svgs i see hello awake 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 and then max width is 1200 pixels just you know as a a quick one you can replace that by doing a width is 90 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 that 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're 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 there 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 gonna 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 h1 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 one m i'm not used to having max with media queries oh we want something there because that's a little too tight so i guess it starts at like a point one two five m that looks a little better and then we're okay there too cool hello wake 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 and to 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'd 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 that 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 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 diff i've never done an area hidden and then put a whole bunch of content on like inside of that 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 because here then i could just come in and say image is star uh 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 sas 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 mean 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 sc from an seo perspective stud method do you mean with the area hidden is that what you guys are talking about even if this was from like um 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 um but i don't i think i actually i don't want to say the wrong thing um so i'm just i'm going to 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 okay uh let's just see at small screens oh i have a my reset has images as 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 uh 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 there you go 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 one of them is the display flex i move it outside my media query so i can use gap the gap isn't supported by safari yet so because of that i won't bother what i'm going to do is inside i use the gap here so maybe i could just use it because gap is wonderful but i guess we could look at the did i end up using gap i think i used gapping 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 darkseid'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 our 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 like 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 height 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'd 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 align items baseline i i think it's an svg thing you river's asking why i'm using like say here doing that i mean why why there's no it's a great question i could easily like hear let's give these a class class equals stars i just want to check actually my global oh no i made a utilities okay we could do something interesting here then uh split no it's not gonna work because i have 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 would i save my index [Music] i did okay so here i could say my stars is display flex and actually i i don't know if that fixed 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 um 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 [Music] the only issue now is they're getting stretched a little bit because of that extra space which drives me nuts like 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 though 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 itself 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 right 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 really oh uh star star okay whatever this doesn't matter i don't get why i'm not getting oh i don't have a div or anything around the text that might be part of it too but anyway it's their mat these stars are trying to match the height of my text on this side 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 it's the other map i put a paragraph now so the outline's working on there they're matching their height but i thought so do do if i have paragraph line height of zero just for fun hmm [Music] interesting oh 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 bite lin kevin kevin kevin we fixed all our problems because i was silly oh the line height is still throwing it off a little though line 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 before things like um if we go to my index 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 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 ah 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 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 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 align item center yet 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 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 0.125 gram or something top on the top um and then i could 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 oops it's on his blog um i thought it was oh no it was on twitter never mind i thought you didn't he 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 and i use it's not even in can i use yet so it's definitely not ready yet but it's on the way so that'd be really cool uh when we can do that and it's going to make our life a million times easier to fix some things another there's the unit too that's going to be useful there's a unit for our it's the x height we're going to 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 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 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 complicate life um except now i need space between them just trying to think media query that's my list item itself so that's not going to 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 in the wrong spot though that doesn't help but i have it here ratings li display flex right uh it's not gonna work at small screens so i could okay so the choice i have is i could bring this blade flex out here uh 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 net media min went what did i do for my min with 50 50m uh margin is 0.5 ram 0.5 ram oh i only have it on the right side there too we can just do 0.5 ram on all sides so i'd probably make it more oh okay cut faced there we go i told you i'm tired this morning there we go except i don't really want it on the top zero point five point five 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 a little stuff um 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 align item center oh because i have a margin on my image which we want only at big screens i should have created a mixin 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 [Music] global padding top here i think i'm going to do uh i just want to check padding top at media min 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 the space shrinks down a bit because if we have if there's tons of space on mobile it's kind of weird so you can increase it when you get to the bigger screens though and there 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 now 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 given the design you're given 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 uh 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 live stream 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 corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 35,448

Rating: 4.971282 out of 5

Keywords: HTML, CSS, kevin powell, frontendmentor, front end mentor, frontendmentor.io, css challenge, html challenge, html css challenge, accessibility html, having fun with css, html css practice, html css project, how to css, how to html

Id: K27WULzr2P8

Length: 143min 52sec (8632 seconds)

Published: Wed Nov 18 2020