 I've seen a lot of questions coming up on this Frontend Mentor project on my Discord community lately, and so I thought, why not build it myself? Hello there, my Frontend friends. Thank you so much for coming to join me for yet another video. And if you're new here, my name is Kevin, and here at my channel, I hope you fall madly deeply in love with the wonderful world that is CSS. And today we're going to be doing that and more by building out the Frontend Mentor project with this card that we have to make responsive. And we're really going to be doing it from the very beginning of downloading the assets all the way to getting it online. So let's jump right in and get started with it. So here I am, I'm going to go and visit the challenge and I'm going to download the starter and we're going to start. We're going to work completely from what we get in here. We're not going to do anything fancy. We're going to keep things super simple for this one. So off screen, I'm just going to extract those files right there and we're going to jump right into it. And here is the what I got when I extracted it. And I did say we're going to keep things super, super simple. But I am going to assume that you already have something like the S code installed, but you just open this in your editor of choice. I am going to I'm in Windows 11. So I have to right click show more options and then I have open with code right here. Of course, there's other ways of opening it. You can do a file open folder and all the other stuff. But make sure you get it opened and let's just quickly look at what we have. So we have this index, which they give us, which has their attribution thing at the top, their title, a little bit there. We don't have to worry about the base structure. Then we have here just the text that should be in our card and then the attribution stuff down here. That's the style for it. We can delete those if you want. It says feel free to remove them. They give us a style guide, which is good. Now, one thing I don't like about front end mentor is the names that they give all of these things. But we do have the, you know, we do get these names will probably come up with our own. And yeah, we get the fonts that are being used and all of that. So we'll have to get those. The read me template here is if you want to change this, if you're going to upload it to GitHub, which we are going to do how you can sort of, you know, you can use this template as the read me for your own. One, because you don't necessarily need to use this read me that is right here, which goes over sort of how you can go through the challenge and the different things that you can do with it. So I'm actually going to delete this read me here. I'm not going to update this one, but just if you want to, you can sort of go through and it gives details on the challenge and everything. So all of that is here. So I'll leave it like this. But if you want to update that read me by all means, you can go ahead and do that. There is a get ignore. If you're not used to GitHub or you don't have a GitHub account, don't worry too much about it. But it's just to ignore any files that we don't want actually getting uploaded to GitHub at the end of the day. So we can probably leave this alone and not worry about it too much. We have the images that we're going to be using that are here. And of course, we have the designs that are right here. And what I'm actually going to do is I'm going to right click and you should be able to do open in file explorer. So I'm going to do that and then I can just double click and just a fast way to get to them. So we can see the design and you know that we're going to be building so we can reference that when we need to be able to reference it. And because I can sort of it's off screen for you, but I can go between the different shots they've given me. So we can build that and I'll move this off screen for now, but we'll bring that back in as we might need it. And especially because it's very CSS type document that we're going to be working on. It's going to be a good thing to be able to keep our design close at hand. So we can look at what we're actually trying to build. Now, if you wanted to, you could initialize a GitHub repo now. I'm only going to do all the GitHub stuff at the end just so we can upload it to GitHub and then easily get it online. We'll be using Netlify to do that. But if you want to sort of follow the steps and do commits along the way, of course, you can do it that way as well, which would probably be good for was a larger scale project. But for something small like this, I'm not too concerned about it. Now, what do we need to do? We need to come in, I'm going to save that file. And we need a CSS file for this. So I am going to make a new file. I'm just going to call it style.css. And what I'm now going to go back to my index page. And because I'm in VS Code, it does come with Emmet. So I can just write link and then do a colon CSS and hit return and it auto fills it for me. If you're using something other than VS Code, you can get Emmet as an extension and then have that. The style here isn't based on the file name I gave it here. This is the default and I just named it style.css knowing that this will go there. So if you made like a CSS folder, you might want to do like CSS to style that or whatever you want. But for something very simple like this, I think it's fine just throwing the style in your root folder and not worrying too much about it. That's all we really need for this one is our styles and our index here. Now, one thing I'd recommend is having the browser open at the same time as you're working. Often these days I'd be using something like V to be able to do it because it's auto refreshing and it's really fast. It's really easy. But for this one, I'm going to be using an extension called live server because we're just keeping things really simple. If you want to use a different way of doing it, that's fine. If you want to use live server, you can find the link to it in the description down below. The nice thing with the live server is here we can see where it says preview. Let's just move this over a little bit. There we go. And let's say I put this inside in each one. I bring it over and I hit save, then it updates immediately here. I don't have to refresh my browser or anything like that. And I always get questions about how I do this in my videos. So one simple way when you're early on is something like live server, though if you're used to things like VEAT or other build tools, you might want to use one of those instead. But it's up to you on how you want to work. So for this one, for now, I'm going to keep the design on screen. And I'm a big proponent of most of the time doing mobile first. But when it comes to writing the HTML, I always want to look at the desktop version of it because here everything is just stacked on top of each other. I don't really need to worry about the structure of anything. But when I'm, you know, eventually we do need to get this layout going on. So there is a bit more structure that has to come into things. So in those cases or that's why in general when I'm writing my HTML, I look at the desktop layout. But then when I start my CSS, I'll start with the mobile version. Now, we don't really have much going on for like actual structure. Normally every page should have a main. So I'm going to put one just for good practice here. But we don't really have like a context to put this inside of. So what I am going to use though is an article for this. So we can say article and I'm going to call it my product. It could just be a generic card or something else. But again, because we don't have a lot of context about what other parts of the site might look like, I think that we're okay just using a class of product. I'm going to try and keep the class naming relatively simple for this one. I am going to use an article tag though or an article element. And I'm doing that because an article is can be used whenever something could be sort of a standalone piece of content. So can this piece be taken out of this website or this page that it's going to be on and place somewhere else and still make sense. And I think, yes, if I took this and I took it, you know, if it was on a shopping page and I took it out and put it on a blog in the middle as an ad or something or you're trying to like an aside or I can move it around in all the relevant information is contained within this one element and it's not relying on information coming from anywhere else. I see it's a perfume. I see the name of the perfume, the description, the price, add to cart, everything I need to know about this is here. It's not relying on outside information for me to understand what it is. So in that case, an article does make sense. Now we need two things. We're going to need to have two columns here. There's different ways of doing it. We can get kind of creative, but we're going to keep things pretty simple. So to keep things pretty simple, I'm going to do here. We'll start with an image, but we're actually going to update this and put a picture tag eventually. But for now, we'll just stick an image here and then here we're going to come in and or actually let's let's put the picture right away because we're going to use a class on there, but we're going to set it up like this for the moment and we'll come back and sort of fix do a little bit more with this and actually make it worth using the picture tag and I'll explain why once we get to that stage or a little bit later on, but on here we can do a class is equal to my product image just like that. So I am using the BEM naming convention here of the double underscore to say that like this image is part of this product. So just a common way of naming things. And then I'm going to come down here and I'm going to do my product product content. It could be body or something else, but the content. So we have my image and then we have the content itself. I am using BEM here. So that's why I'm doing dot product content and then I just pushed tab and it makes the div for me with the class on there and then all of this is going to be inside of here. There we go. There's an important thing we need to think about at this point and normally I wouldn't use an H1, but I have no other content on here. So I will use an H1 for it, but we need to think about what the title of this is and actually I see it says preview here, but perfume over there. So I'm going to change this to say perfume, but is the title perfume or is the title Gabriel Essence Haut de Perfume, which one is the title? And to me, this is the title. This is sort of the category it falls under. If we had like perfume and then I had six different perfumes that were all listed. My perfume here would be the main title and then each one of these would sort of be a subtitle underneath that. But because we're looking at this is like a standalone card that's our article, right? So it's saying it doesn't matter anything else that's going on anywhere else. Well, the name of this article is more of like, what is this product that we're actually doing? So I'm going to give this and as I said, I'm giving this an H1 because I don't have any other headings anywhere on my page. Normally this would not be an H1. You might see things online about the document outline. I've talked about it previously where you can actually use like you have a section and then you can have an each one and then another section and another H1. This was part of the spec. This was put in where you could have multiple H1s on a page and the browser would just sort of figure out how things should work based on you using proper semantic HTML. That is not something that the browser's ever actually implemented. Every time I mentioned this people push back on it that no browser ever implemented that approach to being able to render the document outline that way. So you cannot have multiple H1s per page. So normally you probably have an H1 somewhere that's your main thing and then have, you know, these might be H2s or H3s. If you'd like more details on how the heading levels actually work and how they impact the structure of the page because that is a big part of the actual structure of the page. I'll link to a video in the description below and I'll mention it again at the end so you don't forget about it. That talks a lot more about how we want to treat heading or not treat but use our heading levels and because I don't want to use my heading level as I don't want this style to be linked to it being an H1. I really want it to be H1, H2, H3 shouldn't be used for styling purposes. So we will give this the class of product title. Whoops, double underscore title just to follow the same naming that we've used so far. And then I have the perfume up here and we do well, what do we do with that? I'm just going to give that, I'm just going to wrap that as a regular paragraph right at the top there. So perfume and then the title here is really this one. If you wanted to just really quick note, we could do something where it's all in my H1 and we use a span and maybe do like perfume and then create like a line break and other stuff with like a display block on the span. So you know, have it all together. But I really think in this case we're fine just doing something like that. So we have our perfume. The title of it is this. This is another just regular paragraph. I'm going to add some classes in a few spots here and throw that in there. Now I'm just, I'm doing this the just dragging and dropping after making stuff. So another way that we can wrap things a little bit faster if you want is to select something, do a command shift P and then right, Emmet and you'll see here a whole bunch of Emmet things are popping up. But the first one is always going to be your wrap with abbreviation. So I just push return. It's going to ask me what I want to put. I push P and then I push return again. Now that's all good and handy. But what if you want a class on there? Well, again, let's do it control shift P and if I'm on Windows. So I'm using control shift P. If you're on a Mac, it would be probably command shift P. I'll write Emmet, it's wrap with abbreviation. And now I want a paragraph and we're going to give this one a class. So we can just do a dot and let's call this one product, product, double underscore or original price and hit return. And you can see that that gives me, let's just make this a little bit bigger for the time being. We can see that that gives me the product original price on there. And so that could be a faster way to wrap stuff. And on this one, I'm just going to put price, product price and then the original price. So we have the actual price and the original price here. We're going to dive into this section a little bit more. But before we get into like the, do some accessibility stuff in there to make sure that it's being read out properly. But in the meantime, the other thing I want to do is I know these have to go next to one another. So because I know they have to go next to each other, I'm going to use a div and wrap them like that. I'm not using a section or anything like that. I guess you could do like a section, class of price or something like that. But I'm just going to give this a class of flex group and we'll make that after none of these. I haven't, we have an empty CSS files. We don't have anything to base anything off of here, but whenever I get this where I have like, I want to group stuff. I tend to use a flex, a class of flex group on here. And last but not least, we have our button all the way at the bottom. So for this, let's just do a button with a class of button on there, cause I think that's a pretty good name. We do need to get the icon in there. So when we get to that stage, we'll explore different approaches that we could use for adding the icon cause it is an SVG that was given to us. If we check our images, we have the icon cart right there that we'll be able to use, but there we go. All the HTML or most of the HTML is done. We will be jumping back over here. Oh, actually one thing we should add a class up here. Class is equal to let's just do product underscore cat t gory. And so I'm doing that because this one is clearly styled differently from this one. This I haven't given it a class because I just see it as a regular paragraph. I'm assuming that if this was in a bigger ecosystem or whatever a bigger site, that's what a regular paragraph would look like. So I don't think I need a class for it. And just really quickly there. That's one thing I feel that people make a mistake with when they're using them is going a little overboard. Sometimes like here, I'm just calling this a button. I'm not calling it like my product, my product button because again, this button would probably look the same if it was somewhere else. This is its own component. It's happens to be inside my product card thing here, but that doesn't mean that it's unique to that. So I'm just calling it a regular button. Same here. This is a regular flex group cause I could have other flex groups in other places. When you're using them, there are things that might be unique to it. So this title might be unique to this product thing and maybe not maybe have a lot of other titles that look exactly the same. And then you could just have a title within your product and it doesn't have to be something, but if it's something that's unique to that element, then it becomes an element. So you have your block, your element, your modifier. So and in here, I have a regular paragraph. So I don't need a class on it to select it necessarily. Now let's just come up here and add our image really fast. So in this case, let's just go see where it is. It's in a folder called images. So let's do that images and for now I am going to choose the mobile version of it as the default one. And of course we do want some alt text on here. So I'll add some quickly. There we go. And so we're ready to start working on our CSS on this now. So what we're going to do is let's shrink this back down. Let's move this a little bit out of the way and see all of our stuff has come in and we want to jump on over to here and do stuff with it. And the first thing that I usually recommend we do when we're writing CSS is to start with a CSS reset of some sort. One of the reasons for that is when the browser gets smaller, you'll notice websites are responsive normally. They don't cause issues. The text reflows. Everything is fine except images. Images don't and there's a few other things that don't. So a nice reset can take care of that and there's a few other things as well that it can handle. So what we're going to do. Oh and just really fast how I did that in Firefox. It's going to troll shift M and I'm in Firefox right now. So control shift M opens responsive mode. The reason I like Firefox is because I don't have to open my dev tools to open responsive mode. If you're in Chrome first you want to open your dev tools and then in the dev tools you can use the control shift M or you can push this little icon right here. Now moving on to that reset we were talking about. I'll close down that and we're going to bring in this and I have off-screen which is Josh Como's reset. And I've used Andy Bell's quite a few times in the past and I figured why don't we take a look at Josh's this time. And if you don't know Josh Como he has tons of amazing resources on CSS as well as other topics as well. JavaScript react and he's just a really good quality blog. And so I'll link to this down below because he actually goes into a lot of detail about each one of the steps and each piece that he's doing here. There's little quizzes and everything too. It's really good really high quality content. And for me now I'm just going to paste that in and we'll get this out of the way. And the big thing that has happened is we've taken the margins off of everything which you can see right here. So we no longer have that space around the outside of our page and we also have responsive images now. We don't have that overflow that's happening. Thanks to right here my image my picture both getting a display block and a max width 100% also on the video canvas and SVG tends to be a nice little practice here. So this is usually a good thing to have some of the other things that are in here. We have the box sizing reset which is pretty much everywhere the margin of zero which is slightly opinionated. Some people don't like doing that on everything but it works for me and the HTML and the body having a height 100% just so it makes it a little bit easier for percent based heights on things. This is a big one setting the font to inherit for all input buttons text areas and selects which normally don't work for some strange reason preventing text overflows and what that's doing actually let's look at it we're going to have to exaggerate let's just do let's do we'll do this each one font size of 5 rem. So if ever you have a large font size this is generally where you see it happen or when you get to smaller screen sizes if we didn't have this on what's going to happen is it's going to cause some horizontal scrolling because the word overflows at the side. So if you put that on it breaks the word instead and as you can see though it can cause these weird things we just have like a letter E there because it's just preventing the word from overflowing it's not doing like a smart break so a bit opinionated on that one sometimes it gets weird results so you just might want to keep your eye out for if something weird is happening but at least you know what's causing it because you know what's in your reset so you can do that and then here this is for if you're like injecting your site you know the html via javascript whether it's to react or other ways we're not going to be doing that we don't really need it so we'll hit save there and yeah we're good to go and the first thing we're going to do now is set up our custom properties so to do that I'm going to come all the way up to the top and we're going to create a or select our route to selector create our route selector here if you're not familiar with custom properties it should be very easy to follow along anyway they're pretty simple or especially how I'm going to be using them in this project but I'm also going to link to an in-depth playlist in the description of this video if you want more information on them now the next thing or for this part I'm going to make this bigger because we don't really need the image right now what we actually want is the style guide so we're going to do an open to the side so we can have our style guide open and we can have our CSS open at the same time so we can reference them back and forth for the layout and what sizes we'll reference that a little bit but it doesn't really matter what we want really now is our colors and some of the typography stuff and I've already set up mine right here but I'll explain what I did but it's just boring watching me write these out so here we have the primary colors they have their dark cyan which really is like this for me it's more of a green color so I called that my primary color and I'll explain the numbering in just a second but that's my primary color there and the secondary color is the cream color that's in the background there so they called them both primary but they're very different so I want one to be primary and one to be secondary just so the colors have different names now as far as the numbers go 400 for me is like my base color so it's like a font weight font weight 400 tends to be the default bolder fonts go six seven eight nine and then later fonts or thinner fonts go like three two one so I sort of follow the same thing 400 is my base so here's secondary I did 200 because it's super light you could get a little bit lighter so I left room for a 100 if ever and then the neutral colors here are these ones and again I don't really like their naming I just go with my own neutral for all of them 900 for the darkest 100 for the lightest which is pure white see we know we can't get lighter than that and then 400 for like the middle ground and because this is an HSL this is at 48% lightness so to me that's pretty close to the middle so I feel pretty safe putting that as a 400 the 900 is always sort of my black color and the reason they space these out like that is maybe I you know realize I miss something along the way something was forgotten in the style guide or I want to add a little touch and I need to squeeze another number in there makes it really easy to do and if I did need a darker one I could always go to a thousand so not a big deal now the next thing we want to get is our typography and for the font size they didn't give us a lot of information they just told us that this is at size 14 which is a little bit small but that's all they really told us they didn't tell us the font sizes for these other things and in this case I'm not going to download the figma file we're just going to base it off the JPEG so we're just going to have to figure out the other font sizes as we go a little bit we seem to really only have this font size this font size and maybe the button one is a little bit different so I'm not going to bother with custom properties on this it was a larger project I would but for now I think we're okay but what I do want to set up is the font weights as you can see here we have a 500 and 700 apparently they're not using the 400 so what I'm going to do is font weight regular is going to be my 500 and a font weight bold is going to be a 700 and what's nice about doing it this way is sometimes your bold might actually be a 900 and sometimes it might be the 600 so you're not locking in so much to the number right you have your regular bold semi-bold all of that and you can sort of set them up as you need to now we also have the font families that we need to set up and we have two different ones so actually let's go and open these from Google and you can control click just to open them directly from VS code so we're opening up most or at and Francis front Francis I don't know how to pronounce that one so we have the two of them I've already added everything here to Google fonts but to add the ones you want you just scroll down and select the weights that you want and it will add them in for you and then I'm going to go and just select all of this which needs to go in my HTML so if I jump over to here I like putting it right before my own and if you want you can leave a comment Google fonts and then here we could say my CSS or custom CSS or whatever you want and so we get three links usually to get with the Google fonts these days and that sometimes changes a little bit just paste in whatever they give you and then we have the two font family rules as well so we'll copy both of those and then go back to my CSS and what we want is this one is my font family and I'm going to call it accent because it's sort of like a fancy font and then this one's giving me my font family base and you can do like regular or whatever you want to call it body and so there you go we end up with the two font families that are set up we have my font weights that are set up we're not bothering with the font sizes because we don't really know what they're going to be so I think that's all we need for our custom properties for now so let's hit save on that then we can close our style guide and move this on over and what I think we're going to do let's leave this right here and then we can shrink this guy down and we saw in the style guide that the small one was at 375 so we'll set the width of our page to the same thing in this responsive mode here and see what we can do with it so I'm going to come down after my reset and let's come here and just do general styling and we're going to start with my body and always start with your generic styling as much as possible because I know some people with CSS don't like that it has this like global impact on stuff but that's actually one of the good things about the CSS so we can set up my font family and because we have custom properties here we could do the whole bar and then start writing it out and choose it that way but in VS code one of the nice things with it is let's do our font weight next font weight and I just have to do double hyphen and then FW because I know that's what I chose for my font weight prefix and then I can choose from the two that are there I want regular and it does everything for me so that's super nice hit save and there we go it does look a little bit bolder than what they have here but they said it's 500 so we'll stick with that 500 on there I will take the color in here because we're seeing the color being used here and here and here for that lighter color so I tend to try and choose a color right away so that'd be my color in neutral 400 so we can set that does look a little bit we'll come back I think and see but we'll try and follow the design as closely as possible I'm just worried a little bit about the contrast ratio there we also the font size font size and in this case they said it's 14 pixels in general you can use pixels for a lot of different things in CSS but for font sizes I really recommend either M or M and usually for font sizes I like 99% of the time I'm going to be using rem if you want to know why I've covered it in previous videos once again I'll link to a video on that in the description so we don't deep dive it now but it's the one place definitely don't use pixels for your font sizes and actually now that we made that smaller the font weight actually does seem to to be a little bit more similar than what we had there now we have the background color as well on all of this with my color let's do my background color and that was my color and then primary secondary 200 so we get that coming in we'll bring the white color just on the card afterward now for this and if we look at like the different sites they gave us like it's always centered on the page horizontally and vertically so I think what I'm actually going to do I didn't know we could do this and see multiple pictures at once that's kind of interesting we don't need both right now though so we'll go back like that but what I want to do for that like for this it would work but this isn't something I would use on a regular project so let's just do like for this project only is often with this I'd have a min height we don't need to have that because we have the body already has a height of 100% with the HTML thanks to the reset we used so I'm just going to do a display of grid and then a place content center which should put it right in the middle nice if ever you try this and it doesn't work often you just need to put a min height of 100 bh and that will also solve it because you're giving your body a height that fills up the viewport and just to bring the spacing that we have here on there I am going to come in with a margin of one ram or could be padding of one ram but just to add that space which we actually removed earlier funnily enough but there we go we were bringing that in just to give us that spacing that we have here I'm not going to worry too much about the top in the bottom because you know if I were to shrink this down it would get closer or farther because we've centered it on the page so we'll put this back to 375 and now we can work on the card itself which are in this case we called it dot product and so here we can do product product styles before we get to the product styles let's come here this is my general styles I'm going to do another one here it's like utility utilities which is going to be my flex group that we created so we'll do that one just so we can get these two prices next to each other so display flex right away they go next to each other we can add a gap there it's probably a one ram based on what I see here and then we're also going to come in with a flex flex wrap flex wrap of wrap now I don't think in this project this is actually going to come in and impact anything so we're never going to get so narrow that it needs to wrap but whenever I have a flex group like this I like having it on there just to prevent overflow and allowing wrap things to wrap around if they need to we might also need to come in with an alignment here on this just to make sure that it stays vertically aligned but we'll worry about that once we set our font size we're actually going to need a little bit more with this and have a visually hitting class and stuff but I'm not going to stress about that yet we'll sort of circle back around to that we could do my button but let's come back to there let's just style the product now so on the product let's start with the we'll start with the low hanging fruit which would be my background color of my neutral 100 which is just my pure white and then the border radius which is pretty obvious I'm going to make it too big so we can actually see what happens here so with the border radius of 2 you can see here that it's like a really aggressive border radius but we don't have it on any of the other corners and the white background actually is but the image and the button are overflowing outside of that radius that's on there so to prevent that the easiest thing is just to throw an overflow of hidden on here which technically could have repercussions depending on what you're up to but in this situation there's no issue and I think this border radius is around 0.5 rem and I will say that a lot of people like that trick of like resetting rem to a base 10 instead of a base 16 but most things in web design these days are based on a base 16 so border radiuses are often like four eight twelve sixteen and then upwards spacing is often following the same thing so for font sizes sometimes it's a little bit annoying trying to figure out what a font size actually is but for almost every other measurement you ever do having the rem as a base 16 actually makes life a lot easier so yeah I just tend to these days not bother with that trick I often get asked why I don't do it I've just got used to base 16 and it works really well for most web stuff now if you remember we actually have two different pieces for the intersection of our product here and we have the picture itself and then we have this product content here so the picture is obviously the picture at the top and then the content is this thing down here at the bottom with all of the actual content in there and so we'll come into the content but we're sort of going to add some stuff to the product itself to make this work and be a little bit easier to manage so I'm going to do the product content and what I mean by that is like here we have the spacing that's all the way around on that and so my product content could definitely just have like padding 1 rem and then we get the spacing that's coming along and it looks a little bit bigger here might even be a 1.5 and that's perfect and it works really well except what I personally like doing for stuff like this is coming up here and letting my product control a lot of the other stuff or my product class actually control a lot so here if we did like product or content we'll call it content content padding and 1.5 rem so this is a locally scoped custom property it's not in my root it's not globally available it's only available to things that are inside this product class or actually like inside of this article that's right here so by doing that then here I do a var of content padding and the reason I like doing that is them later on if I'm coming to make changes and I need to change my content padding I'm not digging through all the individual pieces that are going to be in here I can control a lot of the layout and the main parts of that just by looking at this one product class and then say there is little nitty gritty things you do want to dive in but when a lot of like the general stuff is here and you don't have to figure out where something is coming from I find that just makes maintainability a little bit easier now within this content area and let's just put on here I'm going to remove red so we can really see where we're working so we're working in this we have the padding that we put on there and one of the issues is we in our reset that we got from Josh there was the margin of zero which took all of our spacing away and I want to bring spacing back because we can see that there is spacing between all the elements here and there's different ways of doing this but when I see my button is actually stretching across the entire bottom right away for me my mind goes to grid or flex and there's nothing fancy that has to go on I don't need columns anywhere we've already set up our columns for this for me the easiest thing to do is to say this red box is a display of grid so right here let's set that up grid display grid which actually causes almost nothing to happen except now our buttons already stretching the full width across I didn't have to do anything which is super nice and then because it is a grid container I can add in a gap and we can say that the gap is going to be a one-rim or something like that and it adds in the spacing we need that way so that's I love that but once again because we have the card content here we could also say that we have the content spacing as well and set that there and then use this guy down here so var content spacing and that way I don't have to worry about this this is my product here is controlling a lot I need to change my padding I change it here right I need to change my spacing I change it here and this is controlling everything that's inside of it for layout purposes I really like that I wouldn't abstract too much and like get really nitty-gritty with it but for stuff like this and just the way I tend to like to work these days with that now we actually do have to get into the navy gritty a little bit though so let's just sort of work our way down so we have the product category first catty category which in this case the font size let's do we'll start with the text transform of upper case and one thing I've noticed is people sometimes when they're newer to HTML or CSS specifically is they declare things they don't actually need to declare and they sort of go overboard with stuff and so here like I don't need a font size on here if I think the font size is the right size so I'm going to leave it as is for now and if I have to adjust it I will and I'm not adding spacing to it if I don't have to so it's always like only add something when you feel like you need it so here I need a text transform and I need some letter spacing so we'll do those two looks like a lot wow it's going to be like five or six maybe that looks pretty good I'm pretty happy with that maybe the font size is slightly smaller but I think let's set this one up next and then we'll see because sometimes making this bigger the other ones can feel a little bit smaller sometimes I don't know if that would be a six or a five letter spacing remember I said you can use pixels for stuff letter spacing is one where I tend to use it it could be safer to use M in all honesty so it's related to the font size so if you change the font size the spacing changes with it but in general you end up with really small numbers and the pixel I don't know it ends up working out fine so up next I believe it was the product title that we wanted and in this case the font size I don't know what it's going to be let's just throw two rem on there font family family we know is just my variable that we set up so ff and it was my accent the color is obviously dark so that would be my color and then 900 and you can sort of cheat a little do color 900 and it only shows you if I had multiple ones it would show me all my 900s and I could just choose the one I want or you can just even do a color and 900 like that so vscode's pretty smart at being able to choose which custom property you want so you can save a lot of keystrokes along the way you sort of know what you're looking for here the line height is way too big we could change that for the product title but in general any font sizes that start hitting like a 1.5 or especially a two or bigger than that you're going to want a smaller line height on there so what we could do actually let's come here and just add this in ourselves we're going to do an h1, h2, h3 and give them all a line height of 1.1 we don't actually need the h2 and h3 in this project right now but it could be a safer thing you could also just link it there's other ways of setting that up but we're going to do it that way and assume those are always our larger font sizes and in this case it actually looks tighter than that so maybe it's even a 1 which makes me maybe want to do that more directly related to the product title but there we go I think that looks pretty close to what we want and I think we actually got the font size right too so that's a nice little thing I am wondering now if this font size is a little bit too big so let's do a font size of like 8.25 ram 8.25 8.25 ram which yeah that looks maybe better 1, 2, 5 we'll stick with that I guess sure I think that looks a little bit closer to what we have here I'm just sort of examining the two of them so we'll leave that like that this is getting very small in our font sizes but it is what it is I'm also looking here since I was looking at the line heights the line height in the design looks bigger than the line height here so we did have a line height change in our default here so I'm actually going to boost this one up and that looks better so we're going to go with the 1.7 as our default and the one for the ones right there so this is now looking good now we have this one that we want to change and one thing I will say like I got my font sizes right so the line breaks are happening at the right spaces and I guess my spacing is correct but with the web because of the way it works as soon as like the sizing of things change a little bit and even font rendering can be a little bit different if your line breaks aren't at the exact same place between the two don't over stress it and don't overthink it too much you know if I was coming down here I really wouldn't care so don't over like don't try and match always and waste your time on little little little things like that when there's the bigger fish to fry and at the very end if you really want to try and play around with it you can but sometimes it's a combination of your font size and your padding and like all these little things and that you change one and then you have to change the other one and you go a little bit crazy but in this case it's working out and my line breaks happen to be in the same place which is always nice when that does work out so next is the price and the price there is a bit of stuff we're going to do and we're going to jump back in our HTML for this one a little bit too product price so only the product price was this one and this is my previous price so I'm not going to worry too much about that but let's set my font size it looks the same as before so it too we'll see what happens here the font family and this is where we're repeating ourselves a little bit because we're setting the same font size and the same font family so it is possible that instead of repeating ourselves it would be better to set a utility class that could actually do some of this stuff for us I'm not going to get into it for this project because it is a pretty small one but anytime you see yourself doing the same thing in different places and then just changing the color maybe you could do it with a class that does the font size a class that does the font family and a class that does the color just to throw that out there and we can set our color I think that's right bang on as I did say I thought we'd have to set something for the vertical alignment there I don't always set this up in my flex group but it depends on if I saw more stuff for this design maybe this would have to be broken out or maybe it would just be a consistent thing in all my flex groups but we'll just throw it here for simplicity for now so in a line items of center to vertically center that now what we want to do is cross this out and there's a few things with crossing it out that we have to take into account when we're doing this but the easy part of it is I'm going to select it all control shift P for my wrap choose emit and then I'm going to put an S tag and the S is strike through so if I do that you can see it's crossed out and you might feel like ah I'm done the only thing is we're not the issue with having this is when it comes to a screen reader or assistive technology that would be going through this page and if you're going I want to use semantic tags so I'm trying to use my article and my picture and I'm using proper headings and stuff like that I'm using buttons where buttons should be used links where links should be used we do have to take into account how people consume sites and not everybody is a sighted user and people are using they might have visual impairments or be blind and still will go on websites and there's software that will read the page to them and if they got to this part it would literally say 14999 16999 there's no extra context there when we're visually we can see what's going on so let's turn word wrap on here just so we can see things a little bit easier and maybe push this over to make it a little bit easier to see because we're going to write some html here and so for this original price again the strike through is not actually won't come through on a screen reader so what I'm actually going to do is out here I'm going to add a span well we'll add something to the span in a second let's break this on to its own line and see what we're doing here and there we go and in the span what I'm going to do is original price here and on this one too we're actually going to do something right here as I'm going to take this and we're going to drop that right here and we're going to put current price and the reason I'm doing this is to add a little bit of context so now if we actually look at the page it's going to say current price $149.99, original price $169.99 now the design doesn't have that here in writing because if we're looking at it it's obvious what's happening but if we want to be able to convey this to just through writing without any visual reference having current price $149.99 and original price $169.99 helps us understand what's actually going on here but obviously we don't want this text or this text to actually show up so to be able to do that we're going to have this off screen and I'm going to just copy and paste it in and I'm going to put a link to what I'm using this from but I'll put it in my utilities here and I call it visually hidden you're also going to see this as an SR only so SR only is for screen reader only I think visually hidden we're hiding it visually and as I said I'll put a link to more details on this on a blog post from Scott O'Hara which is really good that explains and basically it's just doing a whole bunch of stuff but that it's still accessible by a screen reader so by having that there it is part of my markup it's part of the DOM, it's part of the actual content but we can do a class equals visually hidden and I should have done that on both at once but we can copy and paste it copy that, paste it there and now if we move this on over and we take a look it looks exactly like it did before so now we're adding extra context here but we're hiding it visually because visually we had that showing in a different way it's not hard to do and do we need the current price maybe not just having original price might be enough but I'll leave it with both there we go we have that coming up like that the next thing we're going to do is our button down here at the bottom and that's a fun one because of the little icon here but let's just start by styling the button itself and I'm actually going to do that with my body it's not really a utility class but I'm going to, we'll do our button here and again this button I'm not putting it as like a product button because probably of buttons that look the same that are used in other places other than maybe the little shopping cart that are on there and we just had the button class on here so we'll start with that and one thing we're going to do is the pointer of cursor I always get that wrong cursor of pointer which just gives me the little hand icon some people think on buttons we shouldn't do this I've seen debate both ways and that actually does like having that on there for the extra visual reference even though we will also be adding a hover they give us a hover thing here so we will bring that in after or shortly as we work on this let's also come in with some padding on this we don't really know what the padding left and right we need are but in general I'm going to say it's a 0.5 on the top I usually go with like a 3 to 1 as a default if I don't know so 0.5 on the top and bottom and a 1.5 on the left and the right should be okay let's also border 0 gets rid of the border that's on there we actually because I'm doing the cursor pointer even though this is an actual button that I put it on I'm going to do a text declaration of none just to say that sometimes things like this get added to links rather you know we get a link that looks like a button so just to cover that base if ever it happens because I know that I'm going to be bringing the shopping cart icon in I am going to do a display of inline flex so inline flex is just it's still an inline item but it's on the inside it's flex based so it allows it works well now you'll see that's moved the text over from being centered which is fine so we're going to add a justify content of center on there to center it that way I also know we want it to eventually be centered vertically as well so we'll add an align items of center on here too and we're going to want to space I don't know what that space is going to be but for now let's do a gap of 0.5 rem because it looks pretty small between the two of them can always update that a little bit later and just because of how I like to work I always have my gap with my flex there we go we need the colors that are going to be on this and I think my padding actually is a little bit bigger on the top in the bottom so let's stick with that for now we can do a background color and it's my primary there we go and the color itself which is going to be my neutral 100 and the font weight in this case actually looks a bit bigger too so font weight is my font weight bold that looks better it doesn't even look bold enough really but there we go I'm wondering if the font size here is a little bit bigger too font size of one rem font size looks a little bit bigger 0.925 we'll go with that and see how that goes but it looks a little bit closer to what we have here the joy of trying to eyeball something off of the jpeg and I think the only other thing we need is our border radius so I'm going to bring that up where my padding our border and then we can do my border radius in this case I guess it's similar to our card itself so we'll set that as a 0.5 and I think that looks pretty good we'll start with our hover and our focus date so let's come and do my button and actually what I'm going to do is an is hover focus just because it's easier than writing hover and button focus is a little bit faster if you don't know what the is it's just a way that we can group things with it I'll link once again to a video down below that talks about what is there's also the where so you might have seen one or the other they're both the same where has zero specificity is comes with specificity I wouldn't mind keeping the specificity of this and it chooses the highest specificity selector out of whatever is in the grouping here so in this case what happens they make it darker we didn't have a darker color enough to add a color so one nice thing with using HSL is if you do have a darker color is let's duplicate this color here we're going to call it 500 and because I know it's darker this is my hue so it's the color this is the saturation so how saturated or desaturated the color is and this is my lightness so if I need it to be darker I can just come in and make that a darker color and you can see it's a bit darker maybe we bring it to like a 20 and now I have the color I want so I can come down find the button I'm working on and we can say here that the background color is my that was 500 right primary 500 so now we should get anything oh it's not working right now because I'm in responsive mode and in Firefox and in Chrome the default is for touch so because I'm in Firefox I can click this to disable it in Chrome I think it's in the menu there's like a little drop-down menu but you can disable that and get it if you can't figure out where it is just turn off responsive mode and you'll see if it's working or you can keep it on and just use tab when you tab over it and so I can see it's working so I'm pretty happy with that now we need to add in that shopping cart icon so to add in the shopping cart icon I could come in here and I could add it in myself right so we could have button and then I could put the SVG directly in the button I'm going to assume that if we have the shopping cart icon there that we'd have this range of buttons that would have different icons so you might have a shopping cart one that has I don't know offsite that doesn't make sense but I don't know you'd have different icons coming in your buttons and so because of that what I'm going to do is I'm going to add a data attribute here so we're going to do data icon I guess that makes sense I'm going to do shopping shopping or shopping cart shopping cart is fine I think so this we'll see why I'm doing this in a second so we have add to cart, shopping cart right there we'll hit save and now I want to actually bring so I have my button and we can with CSS you can hook into that so we can say that we have my button and we can say data icon is equal to shopping cart and you could do this with a modifier class instead of a data attribute but I've really fallen in love with doing a lot of things of hooking in via data attributes instead it also opens it up to a little bit even easier JS hook and stuff for when you do need to bring in some JavaScript and it makes it a little bit obvious like here I'm doing my icon and I'm saying what icon I want and then you can have a data this is my primary button maybe and you have a secondary button so you have data type so it's your button type and then you have the different types of buttons you're bringing in so I think it just makes it adds a little extra context in a way of what's going on now I'm not actually going to do anything on this what I actually want to do is do this on the before so we're going to bring in the pseudo element for this and if you know anything about pseudo elements you know you need a content and the content like if I put the letter A here you can see the A is actually showing up I'm going to leave my content blank if you do not include the content a blank content then your pseudo element won't be on the page so we need to have that there for it to render let's go check out that SVG they gave us so it's in my images the icon cart and if we come and take a look I have an extension in VS Code that lets me see what they look like it doesn't seem to be working so I can't see it but I can see here the width and the height of this in the SVG so width is 15 the height is 16 so I'm going to bring that in right here we're actually going to say width is 15 pixels and the height is 16 pixels so we're matching the height from the SVG assuming that's the size that we actually want it to be you do want to be careful with like set widths and heights but for icons you sort of they won't be really responsive usually so having a fixed thing it won't cause overflow at 16 pixels so I'm okay with that so now if we go and take a look you can actually see add to cart is a little bit offset and let's just give this a background background of red and there's where my icon is going to go often with pseudo elements if you're using them I have content width and height often you also need to either have a positioning on them or have a display so is it display block or inline block or whatever because it's a flex item it's going to render because it's a flex item and so I don't need to declare the display type or anything like that for it to be on the page but what we obviously want to do is add in the icon here and so what we're going to do is set a background image and there's different ways you could set the background image one of them is you could just actually bring in the URL here URL and we could do it was images and then shopping and I think that would work except we have the background red here overriding it so let's just see we could just do it like that and it would work fine now there is another way we could actually do a background image here with an SVG which is with URL encoding there's sites that will give you what to put there the nice thing is it doesn't have to like get the SVG asset from wherever else it just has it encoded here we'll keep it simple for this tutorial because I don't want to overdo things but yeah there we go I think that's looking pretty good I think even our spacing on that is basically what we wanted to have with that gap that we'd set here maybe we could do that as a 7.5 instead just to space it out a little bit extra yeah that looks a little bit better so we'll go with that and I think at this size everything is done so now what happens when we get to a larger size we have to decide and this is the fun thing when you have like a small size and a big size is you have to decide when is it going to switch over to be two columns and so let's take it and start looking at where we want that to actually happen and it could be around here but I'm just thinking like if we made it two columns now they'd be very narrow columns so maybe we get that to kick in like around here-ish so I'm just looking up here it's 599 so around 600 maybe so let's see what happens if we do that around 600 so we'll move this back over and we'll leave that I'll leave the design off for a second and let's just go and find my product and we want to make it two columns so we're going to use a media query at this point to do it and I think what we're going to do is on my product I'm going to do a display of grid and nothing will really change and you're often thinking if we need two columns you'd want to display a flex but for this case I'm going to use a display grid because I tend to default to grid these days for a lot of things and so then we can say an at media min width of we said 600 pixels so we can say 600 pixels there and say that this is going to have the product grid template columns and we just do 1fr1fr and that means we're at 581 now so when we cross over we get two columns and I think that looks pretty good actually for like how like if this was at 500 instead I just think that like you know this is kind of squished there it's getting really tall here so I think the 600 is a little bit better for the zone for that to actually happen at so I'm going to stick with the 600 and we have a few things that are definitely going to need to be fixing up one of them is we can see it gets really wide and the card definitely doesn't get that wide and we have the issue with the wrong image being here and so we'll start with the image because that I think is the more interesting part of it and that's why I went with the picture here is the picture element is a great one for allowing art direction and having actual images in rather than using background images because I could you set this up as a background image on like an empty div here and just make it work with a little bit of CSS but having images it allows us to have alt text on them which we can't have and usually if there's a picture I like having it as content a lot of the time unless it's really a decoration background image type thing but in this case an actual image makes sense and to be able to change the image we want to bring in a source tag right here and instead of just doing an src we're going to do an src set so it's a source set and you could actually provide multiple one like multiple different images here depending on different stuff like resolution and other stuff I'm not going to deep dive the stuff you can do with source set but we're going to just come in with a source here so the source for it is my images and then we have the desktop version that we're going to bring in and if I do that you can see it's switched here but it's also going to be switched here because we haven't given it any context and it doesn't know which one to use when so it's just assuming that it's going to use this source and we're going to see how this is working in a bit more detail but what we also want to do now is do a media attribute and this works just like a media query where inside I can do min width inside of parentheses min width 600 pixels because that's where we were setting our breakpoint and I hit save and now we have the large image here and it switches our image here you can see the leaves are a bit different the top of the bottle is cut off and when I switch we get the large image that's filling up all the space and there we go isn't that pretty magical and pretty amazing I think so and it's pretty cool how that works and what it's really doing is if I do an inspect on here you can see it says that it's the mobile just because it's reading the DOM but when I have it on top it's actually taking this source and replacing the JPEG like the image here the source on the image is getting replaced with this one when we hit this media thing right here as I said there's a lot more you can do with pictures than just art direction but they're very good for this art direction thing where you change images based on different screen sizes if you'd like to know the other things you can do with it there is a link to a video below because I've covered a lot of stuff now there's problems with this image though as it's forcing the height of all this to get really big which is causing our spacing to really get mucked up and stretching and height which is kind of weird so we do want to fix things up so let's go look at the design once again and maybe we'll make it a little bit bigger and since we're dealing more horizontal we can squish it this way so we're staying centered you can see the spacing and everything seems to stay more or less the same and we should limit the maximum width of this to stop it from just getting too wide so we can do that but let's start by giving it the max width because this is where I said sometimes people will go like it's getting added here but part of that spacing is getting added because the card's getting wider and wider and wider so I think what we're going to do is on my product card let's come in with a max width and I can't I don't know what it is there's tools you can use to like measure in your jpegs and everything but let's just come in with a max width of 600 pixels and see what it looks like and then you adjust from there and let's compare that to my image that I have here and let's get this zoom to 100% so we can actually match them properly you know what it's lined up and bang on so max width 600 is basically what we're after so we can see here we're there it'll switch over and lock right in super duper and right away just by setting that max width the max width is preventing it from getting too tall and because it's not getting taller and taller and taller because as it was going this way the image aspect ratio was letting the image grow it was mucking up all the spacing all of that has sort of gone out the window and we don't run into that problem anymore simple solution right there now one thing I am noticing is while things have lined up really well on the outsides if we look here the spacing here this looks bigger on this one than we have right here so we already set up our content padding and we have our content spacing the spacing I think is perfectly fine you know if we look at it this way I think the spacing and everything is okay the height of the card looks their card actually looks a little bit taller than mine so maybe we could adjust it whereas here in the media query because we have this content padding and this is why custom properties are great and we don't need to create more and more selectors we can just come here and we can adjust the padding on the content within the parent selector and I think just setting it up to a 2 actually works a little bit better and it gives us that spacing here that we had and that probably fixes and I'm really just like random eyeballing it right now it's not really necessarily the best way to go when you're doing this but whoops let's say we just move that over and you can sort of judge how things are and look at that the height is bang on too so I think that was the adjustment that we sort of needed on that front so I'm really happy with how it's looking now and it's time to put it online and luckily this is super easy to do so what I'm going to do is open up the source control here in VS Code and the source control if you want to get to it it's probably Command Shift G on a Mac or you can just go to the view and then you should see a source control right there and you have the choice to initialize repository or publish it to GitHub and VS Code is owned by Microsoft so it's GitHub so there's a connection there for this you will need to have a GitHub account so if you don't have one, sign up for one you're going to need one as a developer anyway but let's just do it initialize repository to start with and here we're just going to put in the initial commit you're not bringing the entire project in but we're doing this here at the end and then we can just click on publish branch right there and we can choose it's asking us do we want to make it a private GitHub repository or a public one if you want it doesn't matter which one you choose I'm going to make mine public but if you want to do it private you can still publish the site actually online afterward so just choose which one you want to do and now we have published it onto GitHub and there's an open on GitHub that we can click right there and that will open it on GitHub and you can see your project right there now I just realized I made a mistake I forgot to change the readme template to just readme so I'm actually going to fix that now so let's come back to here and we want to go in here I'm going to do my readme template and we're going to rename this and this is good if you're not used to GitHub so readme just like that which is the file that GitHub is looking for the readme and then we can go back to the source control and we can put here the message so we'll just do renamed readme just say what you did and then we can sort of submit that and then sync changes and when you do sync changes it's pushing that change up back onto GitHub instead of only having it locally on your computer so once that is done there we can refresh our page and now we actually have the readme that's coming in properly and obviously we can update that and change stuff and put your name and the different stuff that you would actually want to put in this readme I'm not going to worry about it too much at this time but we're going to it's ready to go now and why this is important is the next step we're going to do which is I'm going to use Netlify you can definitely use GitHub pages for this as well but I have most of my stuff set up on Netlify so it's just netlify.com let me bring that on the screen so right there we have netlify.com I already have an account so we're going to log in and now I want to do an add new site oh I have a failed build on something I'll have to look at after but add new site and I can import an existing project I can start from a template or deploy manually so if you wanted to and you didn't have a GitHub account deploy manually you just drag your folder in and it makes a website based on your folder but I'm going to do an import an existing project and then it's on GitHub so I'm going to choose GitHub right here it's going to make sure that I'm authorized so I might ask you to log in I already am and my repo name and in this case it was my product preview I was based on the folder name it just used my folder name for doing it so product preview card component main I can select that it's going to ask us where it is so it's in my master branch if you're not sure about the branch name it is right here you can see it says master it might be main for you so just make sure that it's the correct one there but you should have a drop-down with all the available ones if there's more than one and then build settings in this case we don't have any build to actually do so we don't have to worry about any of this stuff I can just hit deploy site we can see that now site deploy is in progress and you can actually click on that and you can watch sort of the click starting up you can see what you know as it's going through everything so it's busy deploying it's starting to build it there's not a lot here so it really it's already done so sometimes you might have more complex deploys now it's done site is live so I didn't even edit that you could see how fast it was and now here is the link and it is live and it's online and anybody can see it so really easy to get things online if you make an update you update your code in the way you normally would then in your source control submit that push it to github as soon as that push hits github netlify is going to see a change on the master branch and it's going to update the site automatically you don't have to do anything it's just that change is going to happen within a couple of minutes so really really cool really easy to do and I really hope you enjoyed this video and during this video I did mention a lot of other videos along the way so if you're interested in those ones I did mention they are right here or there are extra links down below as well and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Patrick, Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your part of the internet just a little bit more awesome