Hello, everybody, and welcome. Thank you so much for coming and joining me on this Monday, this Monday morning for me. I don't know what it is for you, but it's a Monday morning and we're gonna be doing something a little bit different today. So I'm really excited for this, the chat. It looks like you guys are going to kind of crazy in the chat, so that's awesome. Thank you all for coming and joining me for this. I think it'd be a lot of fun. Hope they can hear me all right. Let me know if the music's okay, not too loud or anything like that. It's a little loud for me actually. I might turn it down on my end. But yeah, thank you all for coming and joining me. I saw Gary's at the gym right now. Too bad he's, but hopefully he can jump back into the chat as we're going. I see a lot of Team Kevin and Team Gary hashtags going on. I know I can get it done. The real question is, how long is it going to take me to get it done? How am I gonna do it? And will I make a complete mess of it? So we'll see how it goes. If you didn't know, if you don't know what the challenge is and you just saw me come live, I did put the link to Gary's video just down in the description. So you can click on that and watch it. It's worth watching, definitely if you haven't seen it. Oh, Gary's here, awesome. I have to do a blind, you can't throw the blindfolded thing at me now. I knew ahead of time, maybe I could have practiced a little bit more. I'm not, I saw somebody early on said maybe we should have a time limit. So maybe in the future we could do something like that. Nile, thanks for coming and joining.  Sorry, normally I am on Twitch. So actually this afternoon I will also be on Twitch. I figured Gary challenged me here on YouTube. There'll probably be more people who get to watch it if it's here on YouTube. But if you do want to follow me normally live, there's the link to my Twitch down in the description below. So sorry for any confusion that might have caused for anybody. If you're used to catching me on Twitch, hopefully everybody will find me here and realize I'm here instead. Here from your Twitch stream, Gary doesn't know what he's done. All right, so this should be fun. I think it'll be a lot of fun. We'll see how it goes. It's an interesting layout that Gary has created for us. Let's go look at what it is. I usually use a different software for my live streams. So I apologize, I'm in OBS because I have that set up for YouTube whereas I have a different one for Twitch. So I'm a little bit more, what's this button do? That's my big face. There we go. So this is what we'll be creating. Interesting how I recreate the pink, purple band graphic entirely in SVG. Yeah, that would be interesting. I'm just doing, I'm right clicking on stuff from Photoshop and exporting into PNGs. James, welcome. Thank you for coming and hanging out here. Here for the banter. I can't go live on Twitch as well. Because I'm an affiliate on Twitch, you can't dual stream. So we're only here on YouTube today. But it looks like there's a lot of people. You know, normally I'm on Twitch. So, holy crap, there's a lot of people here. Yeah, thank you guys all for coming in and joining in. Gary should be doing the soundtrack with his guitar in the background for this, right? That's where we should be getting the music from. I should probably switch the music to something a little heavier. Is there a time limit? Actually, there's no time limit. I'm gonna switch back to the screen for one second. Oh, you can see, I didn't realize you could see my, you can see my setup on the side there. I forgot about that. That's okay. Where did I wanna find? I want to, I had a window here. I'm gonna put, how do I share this? Send, send and copy the link. Copy, there we go. So this I'll put in the chat. So if you want, you can see how long it's, yeah, you can click on that. It actually is a link. So if you want to sort of vote on how long you think it's going to take me to do, and then we can see if I can actually do it within that timeframe. So yeah, that's what our idea is going to be on doing this. There's obviously a few interesting things with this and on the setup of it. So the idea and the reason I wanna do it live is just to show, you know, Gary challenged me. I didn't wanna make a polished tutorial. I just wanted to sort of dive in and see what we could do. I think it's more fun to do it that way as this type of challenge. You can see any struggles that I actually run into and I can't edit them out. I saw someone asking if it's gonna be responsive. I will, I'm gonna try and make it responsive. I think we can do it. There's a few things I'm not too sure about. We only have the desktop design. So Gary, the super designer that Gary has used Photoshop to do the design first of all. I mean, it's expecting at least like a Figma file here, but we have Photoshop, which is fine. I know a lot of the effects that he didn't hear. That's why he was using it. But we have our Photoshop. Here we only have a desktop design, like any good designer. They only provide you the desktop and they expect you to do all the work to figure it out from there, right? But it's not that. I mean, we have sort of a hero area and then these would just stack underneath and then at small enough screens, they just stack one on top of each other. The only thing I wouldn't know how to put, I don't know where I would put it as the social. Maybe that could even be the footer that just gets stuck all the way at the bottom. That might be my idea there, actually. I'll put the link in just for anyone who missed it because the chat is moving pretty fast. So there we go. So if you do want to fill in that and just take a guess at how long I might do, any good alternatives to Photoshop on Linux? I forget the name of the one I've heard of, but I don't know. I don't know if you can go from Photoshop to Figma. I know you can go Photoshop to XD. So maybe you can do it into Figma too. The borders are tough. I think I know what I mean. I haven't really looked at the design. I looked at it really quickly when Gary posted the challenge just to see what I was getting myself into. But I haven't looked too much. There are those, these borders. Let's zoom in a little on that. So the things that are definitely gonna be the hardest, there's this lens flare. I have an idea, but I'm not sure. Oh, I didn't realize this was a round corner. That's okay. We have, we'll see how these images export.  I didn't think of that. But they're all the same size. They look like they're all the same size. So I might have an idea for that now that I'm thinking of it. I'm thinking pseudo elements a little bit that will have the border on them. And the gradient border, I don't do them often, but they're possible. So we'll be diving into how we can do gradient borders, obviously to pull that off. There's some overlapping images in the background here, I think. And there's like the lens flare thing. The one thing that worries me a little bit is my initial thought for this glaring thing here would be to have it, it's definitely an overflow hidden because if not, we'll get a full circle. And I mean, I don't want to export it as an image. So that I can do a CSS. I was gonna have my initial thought was like this whole area here would just be something like that with an overflow hidden on it. But then there's this background element here, which would cause problems if I did that. And I don't want it not to be in that as the parent and even the text and stuff is overflowing here. So I can't do an overflow hidden. We'd lose everything that's outside of that area. I could do something. I'm gonna have to have some sort of element that's sitting here that has an overflow hidden on it and then just move the gradient up within that, I guess. I think that's what I'll have to do. Maybe there's other ways of doing it without that. You can move gradients, radial gradients around. So maybe I can pull off doing that instead. You don't even need SVGs. You can do these gradients with just a border. And a gradient on the border. Rashid's saying he loves the thumbnail. So Gary is the genius behind that thumbnail. You can thank him for that one. And if anyone's not following him, definitely, I think I linked to his channel. I linked to the video where he posted this so you can find his channel through that anyway. All right, so let's jump into this and actually start making it. So I'll show you, we'll be using SAS. I'm just letting you know if you don't know SAS just because it is a bigger build. Actually, let's go see first how those, let's move this down so you can actually see what I'm looking at. Responses, anyone who said less than an hour? I hope, a few people said more than, so what's the most common here? One and a half, that's what I was thinking too. I think we can get it done in about that timeframe. If I can do it in under an hour, that'd be amazing. That'd be really, really cool, but I doubt it. But you never know. I think, yeah, I guess that makes, we'll see. We'll probably be falling into that range is my guess, but especially if I make it responsive and do all of that. But we'll see, I'm gonna be using grid, I'm gonna be using SAS, definitely. The glare, oh, I'm it. Yeah, I plan on using, thank you for joining. I plan on using the radial gradient for the glare here. I'm just, I think if I did at top like a circle and then we move, anyway, we'll see. I'm not, I don't use radial gradients or manipulate gradients enough. I guess the timer can start now. Hi, Mr. Lin. Thank you for coming and joining over here. I see a lot of people that were normally on my grid, Arthematics as well. Thank you for coming and joining. So all the people that are coming over from Twitch to hang out with me here, thank you very much. So I'm not starting from zero, zero, zero just because what I am gonna be starting with, oh man, is it here? Aha, whoa, let's go to here. But I'm not starting with anything much. I just, I'm starting with some SAS stuff already set up for me. Let's just zoom in so you can see what I have here. So I have a main file that's just bringing in nothing really. I'm not gonna be super organized with my SAS. I'm just probably gonna do it all in my main file here but I do have some utility classes that I've created. I do have a base stuff that doesn't have much in it. Bodies, zero, I have a reset that I'm bringing in. I have custom properties that are all set up and nothing in my typography so I don't really need that file. I have some break points set up. So that's for a media query mix in. I have my colors which we're gonna be updating this in a second. I have a mix in. The only mix in I have right now is for my break points. So if we get into media queries and then I have this set up for font sizes and the idea here would be between the different fonts we'll be bringing in. I also don't know what font he used. I didn't bring any font yet. So there's nothing really going on. It's just like a whole bunch, general actually let's go look at my CSS file. We can zoom back out. I always forget the shortcut to go to 100%, but I think that's it. So basically I have a whole bunch of custom, like all that stuff is generating these custom properties for me. It's generating the font sizes for me here and within a media query. My typography normally sets those for me but maybe I don't even need to use them. Anyway, we'll see. General reset going on for everything there. Oh, I don't need this. I'll have to fix that or overwrite it. But just some basic stuff coming in here, nothing too fancy, some font sizes coming in. Oh, there's a mistake in my setup there. We'll have to fix that or it's not gonna work. And then all these utility classes that come in for background color and text color is what I have it set up to do. And I think that's it. And then a screen reader only at the bottom. So nothing actually styling anything yet. Must be in my base that I made and where did I muck up? Is it in my utilities? No, it would be maybe in my abstracts or in my type? No, where is my mix in? Or my color utilities is just doing my colors. That's fine. Containers, okay. Flow is fine. I haven't, I don't usually come in here and make changes to it. It's not there. It's not gonna be in my root, is it? Oh, it is here that's mucking up. I'm wondering if I need to bother with that. Oh no, let's go in my root. That one's fine. Type is okay.  I almost feel like it didn't compile. I might have saved and then it, I deleted some stuff that I usually have. Oh, maybe that was it. I deleted some stuff that I normally have and then maybe I just didn't save it again. I have this coming in. Anyway, we'll figure it out as we go. Normally that would be in my base or it's just not compiling. That's always a chance too. We'll see if things are compiling. Maybe I made a mistake along the way there. So let's go and actually see. So I am, oh, it isn't compiling. That's why I closed my program that I was using. Normally I would have some sort of build going but I'm gonna use pre-prose for this just because it makes it easy and I don't have to set anything up. So let's go check the live that opened over here. So I have a blank file and now that should actually compile my SAS. So now that I've done that, it should clean everything up that was mucked up before, hopefully. And you can see it's working. It processed that into my CSS file. So it should be fine. We should be okay. I just thought of one thing. I should be linking to my CSS file. So link CSS and that would be CSS like that. And to always check if things are working, a nice thing to do is just go to your body, body, whoops, body, background is red. Hit save and let's set this up so you guys can see what I'm doing and you can see it didn't work. So something is not compiling I guess or working or it's compiling to the wrong. Oh, I didn't have a silly Kevin. Normally I have this in a CSS style. It's not style, it's main. There we go. Okay, so it's working now. Good, I was a little worried there for a second. So I think I'm just gonna work out of my main file here. I'm not too worried about organization or anything like that. I'm more concerned with just trying to get the layout to look decent. So let's move this down to here so we can see what I'm working on. It's always a little awkward to get things set up for streaming and all of that. But I think there we go. We can see the design. So I think what I wanna do is have, I see a question about is a CSS better than CSS? If you're comfortable with CSS and you know what you're doing with it, I think it's definitely worth learning SAS. If you're just learning CSS, I wouldn't start learning SAS yet. I would wait a little bit because it's easy to learn bad habits that actually output really bad CSS and you don't realize that it's doing that with what you're doing. So I would always make sure that you learn CSS for it first. If you don't know what CSS is, you'll get some of the ideas. I'm not using VS Code because I'm going to be using the newest version of SAS, which is Dart SAS. And the VS Code extension that I used to use, the live SAS or SAS compiler, live SAS compiler, I think it was called, is out of date. It hasn't been updated in like six years and it doesn't support the new stuff. Oh, my picture. Yeah, thank you for that. I can see it there. There we go. You guys should all be able to see what we're doing. I know it's pretty zoomed out now, but we don't really need it to be too big because I just want to sort of focus on the main thing. So I don't always do this. We're going to have like our, I guess there's no like nav or anything. So we can, I'm just trying to think the whole page. Okay, let's have our main. No, I'm going to do a main grid. Just as a div and in there we're going to have a main. The main grid, it's because I think this is actually going to be my footer that we're going to throw up here. But then with responsiveness, we can move that around. So then we sort of have two areas within. This would be a really interesting one to use sub grid on actually. I'm trying to think. Okay, well, we have this part here. So let's just do that as a section of don't need to give them IDs, but we'll call it, I was just to use class, whatever, hero. We're going to have a section, I guess each one of those, I'm just starting to decide if this area, yeah, this whole area will be the second section. And then we'll have the three parts in it. So that section of content, we can call that one section, I don't know. What do we call that? Anyone have a suggestion?  Attachment studios, you don't know what's going on here. Sorry. I'm going to try and explain myself as much as I'm going. So if you find that I'm like above you guys, just slow me down. Yeah, I'm going to do two sections here. I'm going to have this section and then this section and then this section here we'll put the three columns inside of. I just don't know what to call that. We'll just call it three sales points, three points, section cards, features, features. There we go. We'll call it features. So the hero and then we'll have a footer. So, and then we'll throw a footer down here and that's going to have the social stuff in it there. So let's zoom in a little so we can just see what's in here and grab our text at least. You guys can see that. All right, so here, so in this one we're going to have our experimental user interface series by design course design. So what's the title there? To me, experimental user interface series by design course is actually the title. So I'm going to make that the H1, even though it's really tiny, like to me that's even at, you know that makes more sense of like the actual title of the page, doesn't it? And then design version 0.05 is just, it looks cool. So that's why we have that big. So we can just have that one as a paragraph and then we have our view more. To me that would actually be bringing us somewhere else. So because in my mind it's a link because we're linking to somewhere else. It would be an A. If it was something that would just open a modal or something, then it would be a button. So A.btn, we only have one button. We don't have like any, it's name in the world but it's sort of what it is. All right, so then we have our features. So let's just, each, whoops, I didn't mean to do that. I'm not used to Photoshop. There we go. Oh, I just have to move the whole thing over. There we go, so you guys can see it, perfect. So each one of these is exactly the same. So I'm almost wondering, you could argue that they could be a list even, but I'm just gonna do each one as a div of a card. And if you're thinking of it as features, you could make a really good argument here to do a ULLI times three and then inside each LI, we could do this. We'll have each LI because it's a list of features and then you can put whatever you want inside of LIs. So inside each LI, we'll put a card. Inside each card is an image which we'll do card image plus ET go home for setting super rail, get here fast.  Teleportation, I can't read even with my glasses on. Teleportation, beam her up. So it's gonna be an H2 card title plus P dot card sub title. Plus AP card body. I think that's all we need. So we have a card inside. I haven't exported my images or anything yet which normally I probably should have done. So we have a card in each side, each card and actually this ULL I'm gonna do class is equal to features list. I haven't used the BEM naming in a while. Feels kinda good to go back. So we have a list item inside each one. We have a card. My card has an image at the top followed by the title, a subtitle, a body. That's perfect. So now's the boring part where you just get to watch me copy and paste text. I'm getting it from photo. I guess I could, anyway. The last thing I wanted, it's kind of annoying. Whoops. See this is where I don't want that. It's kind of annoying I have to escape out. I'm used to the other software that if you have text selected I could just click into another text box. At least all three of these will have the same paragraph here. So I can copy all that, copy that, escape out, undo the move. So here, here and here. We wanna have the same text. Okay let's just type this because it'd probably be faster. Super rail, get there fast. Get there fast. And over here, teleportation, which would be a, beam her up. There we go. And then we need the social icon. So in the footer here, I'm just gonna come in and we can come in with a UL, UL of social icons with an LI times three with an A. Each A will have an image inside of it. And we'll just do that for now. Yeah, that should be fine, right? Actually just really fast what I'll do here. Let's, whoops, let's go back on each one of these. If ever you have a link that's only an image for a social icon or something like that you really should put an area label on it. Just so if there is something like assistive technologies like a screen reader that's gonna be reading what it is. If it's just an image that's inside and oops, I shouldn't be putting that here. I should be putting that on the link itself. So yeah, if ever you have a link that only has an image in it, an icon, something like that you should have an area label on it to describe what it is because if you can't see the image then nobody knows what they're actually clicking on. So now a screen reader would know what it is. So this would be Twitter, this one would be Slack and this one would be Instagram, Instagram. There we go. All right. Why am I not using a header for the icons? I don't really think that's the header of my document. I know it's at the top visually but to me that's not a header. To me it's, and I'm also thinking like it's small screens that's gonna end up at the bottom and it's just extra information. It's not, I wouldn't use a header to go off site links generally if I had a full navigation that had like the full nav with everything else in there then I would think about having a header for that but because I'm not doing that and this is just sort of like extra thing usually social links you find in the footer and I'm just thinking in my mind I'm gonna rearrange the order of content with, I just think like semantically too it makes sense. This is sort of footer content to like extra content to the page. It's not part of the main content of the page. Yeah. The double underscore is BEM naming convention. Exactly Michael. Coding with SR. Yeah. I'm using one dark pro. Exactly. I don't know who asked. I think Pierre is asking about Emmet. It is built into VS code and you can get it as extensions and other ones. If you want, I do have a video on Emmet too that looks at how you can do it. Paris, I have that idea. I have it in the backlog. I just haven't got around to actually making it yet. All right. So let's go. I guess I need to get all these images, right? From Photoshop, which is always fun. I haven't exported assets from Photoshop in a while so excuse me if this takes a second. I'm also on the artboard tool. There we go. So from Photoshop, actually I'm behind my head but I'm just gonna, there is a faster way to do this but you can get like a whole bunch at once. Oh, we're in the right place. I face, cool. Oh, one second. There we go. Oh, not a screenshot. Close that. I want a new folder of images. Band, let's just call that colorbands.pn. PNG. Now I think I can get all three of these at the same time, actually. Let's just see. Quick export as PNG into the game. I think that will work and we need these three guys here too. So I think I got, let's see, one, two. No, I got the wrong ones. That's okay though. I know you can't see what I'm doing but let's do an export as here, actually. So in Photoshop you can export things but I don't know if I can export these. Normally I would want to take these, it's JPEG. Can I get them as SVGs or is it just gonna take it as an image? I'll just take them as PNGs. I don't think it's making a real SVG from Photoshop there.  So I'll just grab them as PNGs. And export. No, why is it doing it here now? I don't want it in my thumbnail folder. Desktop, demos, Gary challenge, I face, image. Select. Hopefully they're all in the right spot. I also need to grab my colors. So let's do that now. I don't know if there's a better way to get colors out of Photoshop. The first color actually I want to get is this one here, this blue because that's gonna be my primary color. Normally I have like a full range of colors but it looks like we don't need to worry too much about that, but okay. So let's go back to VS Code. I have too many windows open guys. Oh, there it is, okay. So I will jump into my colors folder here and set this up, so this is my, yeah, that makes sense is my primary color. So that's gonna be my 400. I guess I'll only have the 400 because I don't really need anything else. Whoops. Perfect. My secondary one, I won't do secondary yet. I'm gonna do my neutral colors. So neutral for me is like my blacks to my whites, like all the gray colors. So let's do that next. Whoopsie. Oh, there we go. Close. So I'll do a comma and then we'll say neutral. So this is, if you're not, if you don't know what you're looking at, whoops, sorry. If you don't know what you're looking at right now, this is a SAS map, which is Kevin. A SAS map is pretty useful in, let's do this one as my darkest color, so 900 for doing SAS stuff, but it's sort of like an array almost, a nested array within SAS. So I need that color. I need this text color. Oh, I need this color. That will be the next one. So that would be like my 800, I guess. The way I do my colors is always like doing font weights.  So yeah, I do it like my font weights. So the darker it is, the bigger the number, the lighter it is, the lighter. And that way, if ever a new color gets added to your design, it's easy enough to implement and add new colors in because if I needed an 850, I could squeeze one in there. And white is still a neutral for me, so that would be my 100 is my, and this is just the system I'm used to. You definitely don't have to use it. Oh, I was doing FFF. There might be other grays involved, but I need that background image too. I didn't get the background image yet. I think that's all my colors, except for these two. So we'll do, it's not really what it is, but I'm gonna call this one my, like this pink color here. We'll do that as my secondary. We'll just do a secondary 400 and 500, I guess. That makes sense to me. You could even call these colors gradient because the only time it's being used is in a gradient. I think that would be fine. And then the dark part of the gradient, we might actually, we'll see how the gradient looks, but I'll show you, if we need to, I'll show you a neat trick with the gradients that we could use to get nicer looking gradients. We'll see if we need it or not. I think that's all the colors. We can always come back if we need more. And the last thing I'm gonna grab is that background image for the entire thing. Oh, what's this background? Oh, that's it, okay. So we'll export that, quick export as a PNG, bg.png. Oh, we're gonna have to rename these, aren't we? Layer 6, 7, 10, yeah, save. When you do the exports from Photoshop, it exports it as whatever the layer name was. So Gary didn't name his layers very nicely for me. And so we get that mess of things. Whoops, I minimized Photoshop. There we go. I don't wanna minimize it. I just wanna sort of move it down a little bit. Let's move these out of the way. They still take up lots of room. Is it F? No, not F, back to this full screen. Tab, there we go. Just so we can see what we're working on a little bit. I know you can't see everything, but it's good enough for now. I guess we need the font too eventually, but I'm not gonna stress too much about that yet. Let's see what's happening in the chat. Photoshop supports exporting CSS styles. I find, it exports not very nice stuff though. It's just all absolutely positioned stuff. You could do that if you wanted to, Gabriel, for your grayscale. I'm just the way I work. I always have neutral 100 as my white, so I'm super used to that. But if you prefer another way of doing it, that's fine. Definitely fine. Now one thing I do have is a lot of utility classes that I can use. So I'm actually gonna come on my body and just to see if this works. We're gonna give it a class that's equal to text. I changed how I do my thing recently. I just want to check something. Let's go check my, if I go to my utility classes, color utilities. Whoops, I just so text the color and then the shade that I want. So if I come on to here and I say text, color, did I do it color or color? Color utilities, there we go. Text. Oh, one second. Let me open my compiled CSS because I'm gonna muck this up. I haven't used these in a long time if you can't see. Text primary, so it is, okay, that's what I want. So here I can just do text, neutral, 100. All the text should turn white. If I did that properly, which apparently I didn't do. I will check that out. And then BG, neutral, 900. Should work, but it's clearly not working. So we'll have to see what I did wrong there. Text primary, 100. Is using color primary, 100. Oh yeah, so that should work for my neutrals. Is this not being text secondary? No, my SAS isn't compiling again. What's going on? Ah, I had to save my main file for some reason. There we go, so that's working. Cool, that makes sense. Now you could have just set this on the body. There's no reason not to do it. Maybe this is a little tailwindy. So then what I would also do, because I'm doing this on these card body ones, and I can do extends and other stuff here, but I'm just gonna, you know, having utility classes like this can be handy. So on my card body, these ones, I would have my text, color, text, neutral, 400, because that's the number I gave it. And you can see those have lightened up. And we're ready to rock and roll. Cool. So I have my main grid, did I call it main grid or grid? I should use Firefox, usually I use Firefox. I just, I don't know, I'm in Chrome today. Just seeing what's happening in the chat. There's a typo in my HTML. Features list, wrong. I did, features, features. Oh yeah, thank you guys. There we go. If there's any others, we'll find them along the way when my CSS doesn't compile, or it doesn't change anything. Now because I'm using, let's just come to here, we're gonna say body. Again, if I was really doing this, I would have, I would split things off, but just for simplicity, we're gonna keep everything in this file. Let's just do, for now font is going to be font family. We'll just do Saucerif. I don't know what font to use, we'll figure it out after. And this is the only font that seems to be using, except Kevin. I have to bring those properties back up. What's my font size? Properties, 18. So to me, oh you can't, you can sort of see it. Let's make this a bit bigger so you guys can see it a bit more. This is my regular body text. So that's always what I look at at the beginning to set my font size. So font size will be 1.125 rem. Is that right? I think that's 18. Which will get my font size on that to be okay. I might go through, actually, know what I should do. I should probably use my type scale that I have, whatever. We'll see, maybe I'll bother with that. Yeah, let's use the type scale. No, I won't, just because it doesn't follow a super natural font scale in a way. So my dot grid, main grid, right? Oh, you know what though, body also has that image. Background image, URL, images, isn't it image? Back of step, back of step, image, BG. We have to rename some of these, but that one will be fine. Before I even save, background size, cover, it should work. I think, yeah, it's coming in. We'll fix the positioning of it. We probably have to play with the positioning as the content changes a little bit, but that first background image is there. So look at that, we're already kicking butt here. That's for my body. Is there anything else? I think we're okay. The next one we wanna do, white fang 007, there's no time limit, but I'm gonna try and do it. I mean, I slow myself down because I stopped to read the chat and I try and talk through everything I'm doing. But, so that slows me down a bit. If I wasn't talking, I could probably be going a lot faster right now, but that's okay. So my main grid, main grid, main grid, it's going to be, I'm gonna do this desktop first because I have a desktop design and then we're gonna switch it over afterward. I know it's not ideal, but, or you know what I'm gonna do? I'm just gonna wrap this in a media query then. At include mq small, we'll see the small one where this happens at. Actually, no, the small is not gonna work. We'll do medium. So this is one of the things I did come in with. I mentioned if you're later to the stream right now, I just have, this is SAS and include like that as a SAS mixin that I'm using. So if we look here, it's just creating a media query for me and it's using my breakpoint. So I have a small and a medium breakpoint that I have set up these size, maybe for 40 is gonna be a bit small for this size of a design. I'm gonna go with the medium and I can always change these numbers and play with it. The reason that's nice to have is just because then you can be consistent all the time and with SAS you can nest media queries inside of elements and it works, which is the best thing in the world. So let's do it. Actually, I'm gonna have a display grid all the time. Display, display grid. I'm gonna use grid template areas for this. So we could say grid, grid template areas are, whoops, not none. That's a, that would be a little silly. At small sizes, we're just going to have the hero, we'll call it, hero after the hero will be column features. Features, you know what? And then we'll have the footer at the bottom. I don't really know. I was thinking this would be like amazing for grid. This would be a lot nicer if I had subgrid and I could play with those guys, but hero. The whole grid thing here. Why is my include yelling at me? Semi-colon expected. Oh yeah, that would help. And then what we can do here is just do my grid template areas and redefine them. So then at this size, it would just be hero, space, features. You know what? Did I think that through? Because it's, hmm. Hmm. Get out, maybe worked a little too fast on that. I could use positioning to get it there or I could just leave it like that actually. I'm gonna, we'll try something. I don't know if this is gonna work. We're gonna try it and see if it works. I won't actually, this shouldn't be, this should be footer. I'm not actually going to assign a footer here and we'll see what happens. Not sure. Yeah, we'll see what actually happens on that. I'm actually surprised nothing shifted here on me. Inspect. Is my grid working? My image source is unknown, main grid. Why do I not have a grid on that? This main grid. What did I do wrong, guys? I don't have, why is, one second? Mixins is here. Mixins is in my abs, oh, that's why. Okay, I wasn't gonna bring in my abstracts, but I need to use abstracts. The joys of doing things live. Undefined mixin, oh, abstracts as star. I should have put that on all of them just to make my life easier. This is part of the newer syntax for, there we go. I saw something shift. Oh, we have a grid now. Except, yeah, okay, and everything, main grid. What, why is everything inside there? Did I muck something up here? Oh, I put it all in my main, my main. What was I thinking? Let's open Photoshop again for a second. I did my main grid. Whoops. I did my main grid to be, this is my main and then I put a footer. So, all of this is being in one cell right now. Do I wanna do that? Or do I just move and then I keep the footer on its own and then play around with its positioning? Because another way that I could do this with grid is my main grid could be just having the footer at the top. I don't really need grid to do that, though. The more I'm looking at this, the more Flexbox works well, too. But, hmm, that was silly of me. Huh. Gary, oops, I keep minimizing Photoshop because I'm used to not having it on screen. Gary's, it's already mucking me up here. Johnny, I'm using semi-colons because I'm writing SCSS and not the SAS syntax. I think it's easier for people to follow that are used to CSS and not SAS and I'm just so used to it now. I haven't written SAS with the SAS syntax in a long time. So you know what, I'm gonna keep my main grid like that and we're actually going to just say that this is my main area and then my footer is underneath and then here we're gonna do our, we're just gonna flip it, actually. We're gonna do our footer at the top and the second one here will be my footer and then my main here. Not, I don't know if you really need grid for this but whatever, so right away what we could do is just say that my main has a grid area of main and that my, just move that a little for you guys and then my footer has a grid area of footer. So just in doing that, you wanna be really careful with reorganizing content with grid but you can see if I do that and then we go to the mobile view. When I get to the small size, like the footer's at the bottom now, the footer's down here and then when I get to a bigger size, the footer jumps up to the top. So that's gonna work for that and then what I wanna actually do is on my main itself we'll just declare a grid, a display grid on the main. So this will also get a display of grid and that's just for the two sections that are gonna be in there. So we have the two sections within here. I'm just trying to think now. So we have two sections within my display of grid. So I want to do, I could just use, I'm gonna leave it like this and then use my at include, include, MQ medium and whoops. Inside there, we can just say that it has a grid template, not grid template, we'll just do, yeah, grid template columns.  I'm not aiming for perfection but then we get these two like that but that means that the smaller size, they will stack and then when we get big enough they'll go next to each other. I'm gonna add in a large here. So let's open up my break points, break points. Let's add a large break point, large which will be like 80 M.  Yeah, we'll do it here dot features. We'll have a display at include MQ large. We can do a display of flex. So that looks good like that. And then when we get to here, eventually, no, no, never. This could be actually, this would be a fun, potentially fun thing to use. Oh wait, I'm doing it on the section. I need it on my features list features. So here we can say, and whoops, and list and then wrap all that and hit save. There we go. Super. And actually I'm gonna change this. Yeah, I'm actually going to say that the list is always a display flex, but what we're gonna do is by default the flex direction is going to be a row. No, a column, I think I'm never ever gonna get that right on the first try. So it's a column by default, but then what we wanna do is a flex, we change the flex direction, flex direction of row at larger screen sizes. So here everything's stacked, then we get to here and they're still stacked. And then we hit the next break point and then they go next to each other. The reason I'm using display flex is so I can come on this with a gap. Gap is actually, didn't they roll back Safari because of some problems? But now we should have, I'm just gonna throw, actually this gap might have to change anyway because of those borders and stuff, but we'll throw like a two rem on there. So the nice thing with gap is it's working left to right. Like it's a space in between my columns, but then when I shrink it down this way, now it's the space in between them as they're stacked on top of each other. A sad, I use Ms for my break points because of an article by Zell Lier. Safari does break point, if you zoom in and out on a browser, the break points acted differently in Safari than they do in any other browser. The last time I checked, this was still true, even though Zell's article's really old. I haven't checked in like six months, but so just using M just means it's consistent through all the browsers. And even if you change your font sizes or anything, it's always gonna be on a base 16. So it's not like he gets all weird and squee whiffed. Marco, welcome. It's going. It's going. Yeah, it's going pretty good, I think. We're getting there. I'm pretty happy with that already. So now let's add that cool. A lot, actually, let's do some more typography stuff. It's not the most exciting, but we'll add in our typography stuff, I guess. Because in general, if you're trying to do layout and then you start playing around with the text after, it shifts things around. I'm doing the fun parts first, which is what I always tell people not to do. You should always style as much as possible. Get all your HTML done, then start writing CSS and always start with styling the content and then making the layout as a general rule, not always, but as a general rule, just because the content has an influence on the layout. So our often does, depending on how you see it, less so with grid than with other things, but it's always a possibility. So the next thing we wanna do is what? The typography. I don't wanna have to keep pulling up the Photoshop design, though. Just because it's annoying getting font sizes from here. Unless I'm missing something. Like if I select this layer, I should just open this up again. This is one thing I wish you could get, like Gary, next time, make me a design system page or something that just tells me everything I need. 130 points. So I think, no, whatever. I'm just gonna stick with actual font sizes. I was thinking of using clamp for that. Actually, let's get this one first. That's my H1. That's 18, okay. So here we'll just come. I'll say H1, H2, actually H1, yeah, okay. H1 font size is one rem, no, 1.125 rem. What was it? I don't remember what I called it. Pseudo title. I knew I had a weird name for it. Dot Pseudo title is a font size, 130 pixels off the top of my head. That's like 90 rem. What? Whoa, whoa, whoa. Not 90, 90, 90. Line height. Actually, maybe I should put a clamp on that. Line height of one font weight. I'm gonna have to get the right font on this. It's gonna, well, 700 for now. See how, actually, I'm just gonna undo that and hit save. Actually, it won't compile now. I'm gonna take that off and hit save. And you'll see when this is smaller, that this is taking up less room. And when I put that font weight back on, the whole layout, like the layout ships around because of the font weight coming on here. So just do be really, really careful. This is why I say it's important to do your layout and your content first, because your content has an influence on the layout, depending on how you set it up. Text transform, uppercase. And actually, this I could make a utility class for, but what I'm instead of doing that is a utility class. Is there anything that's not uppercase? I feel like everything's uppercase. Everything is uppercase, okay. So on the body, I can just say, we can just throw that on there. Instead of wasting our time. Our master designer putting everything in uppercase. Come on, Gary. Gabriel, I have auto select off in Photoshop, but if I can troll click, I can select layers. That's the easiest way to do it for me.  I would have much preferred it. Real boha, I much preferred Figma, but Gary's making it a challenge, so he wants to make it hard on me. Yeah, Gap works in Safari 14.1. I just heard that they rolled, I think they rolled 14.1 back because it actually broke a whole bunch of other stuff, but maybe it's been pushed back in now that they fixed it. These are my H2s. Let's see what size my H2s are. You guys can't zoom in on that because it's in the Photoshop interface. Oh wait, that's not the font. Okay, the font size of this is 21.04. I do stuff like this too all the time, just so you know. What happened is Gary was trying to size it and he was just using the resize tool and then you end up with those terrible, terrible font sizes for designs, 21.04 we're not doing.  Can I remember what that is, 1.25, whatever. We'll make sure they're good after. If anyone can correct me if that's not 21, just let me know in the chat so I can go a bit faster. My H2 is that, and then that's my dot. I'm gonna organize this a little bit better after. Actually, I should do it right away because I'm gonna nest it. Main grid, main features. So after features, I'm gonna have my dot card and then inside my card we have my title. Whoops, tight till. So the title, card title is a font size of, this is, again, you could have a utility class to use just in a bigger site, you probably wouldn't only have card titles with this font size. 48, 48. Is that, man, font size. Isn't it 1632, 48, is it three? I never, tech hacks and tricks. I know I did my video on it. I very, very rarely use Emmett. For some things it's nice like if you do a PA and then, or not PA, PA, what is it, the position one? I don't know. For some stuff I every now and then use it, but I very rarely use Emmett for CSS. Especially if I'm talking out loud while I'm doing it and I'm usually thinking of like then, I don't know, it's just the way I work. I very rarely use it. Okay, so the typography should be pretty close. I'll make the button now because the button doesn't look too bad and we can have some fun with gradients while I do that. So let's move this down just so we can see it. I'll shrink this up. I think I have to change my media query a little bit here, but, and actually, I'll do some fine tuning as we go. My button, so I'm roughly organizing this. Again, I should be using partials but I just don't want to spend the time on it. I'm gonna come here because this is sort of my typography section. So my button makes sense for me for it to be here. So display of inline block. And at the same time, because I am doing a button, you could do the whole cursor pointer background of none, border of zero and set it up so it would work whether it's a button or a link that this is being put on instead of just focusing on the link.  There's something else that comes with buttons that I'm forgetting. And then we'll do padding of 1M, it looks pretty big, 3M. And we need a background on that. So background image will be a linear, linear gradient. I'll break it on multiple lines just to make it easier. So here is where I can use my var color secondary 400, comma var color secondary 500, which I set up earlier in the stream. There we go. And we probably want that at 75 degrees, not bad. Oh, that's the other one I forgot. Text declaration of none. And the font weight would be 700, I guess. I need to tighten this up a little bit because the line height's terrible on that. Font weight is there and color can be inherent. Actually the gradient looks pretty nice so I won't have to do anything else. And it has a built-in calculator kind of, 48 is three. Ah, pretty good. 1.25 is 20, 21 then would be, oh, 3125. Thank you guys for that. This is a present-day digital Bob Ross, thank you. Thank you for the perfect one, Gabriel. Actually that is, 315 isn't too bad, but we need a border radius on this too, right? Border radius, it looks like it's what, 0.25 rem? Maybe a bit more than that. I'll go with that, that looks pretty good. Now we have, he never, I don't know what we're supposed to do for hover here. What are we supposed to do? So there are more design fails here, Gary. But what we'll do is, we'll say that my, I know we'll do, the nice simple one. And hover and focus, whoops, focus. If we do it, we can do a background size of 200%. And a background, let's position position of, actually let's just do background size. I don't know if it's actually gonna change anything. Oh it does, okay. Is that a good enough one? And then what we could do is transition background, background size, linear, three, whoops, 300 mils, 400. There we go. Just to have, can't you transition background size? I'm sure I've transitioned background size. Am I thinking of something else? Or is it background position that we can transition to not background size? Oh, so you know what I think I have to do? To actually do this. If I do that, and then this is background position. And then here, so by default, background position is center. Let's do like 150 maybe. Just so we get more of the gradient. And then here what I could do is background position is left. It's not gonna be enough though. If I make this 200, 200, and we go from left to right, let's say, that's how you can do a gradient that, see how it's like as I hover, it's shifting from the pink into the purple because the background positions bigger and it's moving the background within that space. So the gradient is actually moving around. I think I could do something like that, pulling out like playing with the stops and stuff too. So that is an idea, but I don't know. It doesn't really look like the original design anymore. And it's really subtle because those colors aren't very different. So maybe that's not worth doing. The ampersand here with SAS just means take the parent. And you're gonna start seeing this in SAS eventually. I don't know if it's within the year, within two years, but it's taking the parent selector and putting it here. So it'd be the same if you were writing regular SAS, you'd be doing dot button. So button hover, so my hover state. And because we're doing a hover, I also want to take the time to do a focus just so it changes on focus too. I could scale the button instead. So scale is also more performant. So let's do that. We'll do a transform. For that, I'm gonna do an ease. I'll just do an ease in and out. I'm not gonna play with timing functions. So here the transform scale 1.0. 5. That's enough. You get that annoying blurry thing that happens when you do that type of stuff, but whatever. Actually, I'm gonna do one more thing here on my body. Normally I wouldn't put this on my body, but I'm gonna add some padding of like 2M the whole way around. Just to keep everything off the side. Everything, you know, there's other ways of doing that. You can do it with your container, but. Actually, I'm gonna need a container, so screw that. That's not gonna work. My main grid, we'll get it. My main grid, is everything in my main grid? Yeah. Okay, we'll do it on my main grid then, which I already have. Main, main. I didn't, yes I did. Right there. So here, let's add it to the top. Padding to M max. Are you gonna do for, instead of doing a max width, I wouldn't really need the padding then. Or we could even do it here. I'd like you to say width is a, the smaller, so, I'm used to rating max width, but if you use the min or max function, it's the opposite. So instead of a max width, I want a min. So choose which one is smaller, 100% or how big does this design get? How big did, oh it's offset though. It's not, hmm. Okay, that's okay. I'm gonna pretend it's not offset. There's a way we can get around that. Let's just say it's roughly 2,000 pixels wide. That's pretty big. That's roughly 2,000 pixels wide. 2,000 divided by 16, 125. I might make it smaller, because that's not gonna, I can't get that on. Let's just do 1,600. 10 is 106, 100 ram. So if I did that properly, and then we can do here a margin, margin of zero auto. So what that means is, if I did it, there we go. You can see it's actually being held in the middle. I know it's going off-screen for you guys, but we're hitting a max width. So it's either doing 100% if there's room for that or if it's whatever, these is smaller. So it's 100% smaller than 1,000 ram. So this is exactly like setting a max width on something, but you can do it with one line instead of using two lines. That's really, this design thing is really bothering me. So we're gonna change this. That's my body, my H1. That's not my H1, it's my pseudo title. The line height here is gonna be like a 0.8, much better. I should have the right font on here, but my font size, because it's gonna get in the way at smaller sizes, I am gonna put a clamp on this, clamp. So the smallest font size we want it to have is probably still pretty big. So I'm gonna do a five ram, whoops, five ram comma one ram plus 10 VW comma, I said nine is the biggest. So you always have to play with this a little bit, but what that basically means is it's allowed to get bigger and it's allowed to shrink. So as I go small, you can see it's getting smaller and smaller. I think that's actually not bad. Maybe I'd actually shrink this a little bit. Maybe that's too small. It's getting to the small size too quickly and it's taking, like now it's only starting to grow here, so maybe I was okay with that, 10. So it's like, this is the smallest it can be, this is the biggest it can be, and this is the size I want it to be and it will keep adjusting in between there, but it will stop here and here. And just putting the one ram in here, you don't need a calc or anything like that. It's going to work. SAS actually used to have problems with this, but it looks like it's now been fixed, which is awesome. So yeah, the one ram is just, it makes it better if somebody has different browser settings and stuff for accessibility reasons, which is why I'm doing that. Okay. The next thing, I guess my pseudo, like there's other ways of doing this, but I'm just saying a margin bottom. The margin bottom here, I'm actually going to set in M, so that way as the font size on this, as the font size on this, one M makes sense. Like one M is always going to be like the height pretty much of like our zero, roughly, not exactly, or more like this, that area here or whatever, but it's based on the font size. So because the font size is adjusting, that means that the spacing on here will actually adjust. So if we have a bigger screen size, we probably have more room to work with. And then as the size of the font gets smaller, that spacing adjusts with it. So that's why I chose M for that. And I'm just trying to follow this design a little here. Let's just go, that's my main, right? So we're changing my main. So what I'm actually going to do here is also at the medium size, we're going to put in a text align right, because it's always aligned to the right side. And then, so that's perfect, but then it's small screen sizes. We don't want it, it's weird if it was aligned to the right when it wasn't stacking. So we only want that within the media query. So that fixes that, perfect. These look way too big. That's my H, no, those aren't my H2. Oh, they are, I messed up my sizing here. How did I do that? Why is it so gigantic? That's my card title, which is the H2. Oh, you know what I'm, I don't really need that here. I'm also zoomed out in my Photoshop thing, which doesn't help. Card title, font size. See, I did that wrong. Subtitle, card subtitle. There we go. And the font, font weight is 700. Sorry, 900 actually. I don't know what font I should set up my font. So it's the right fonts, 700, 900. It looks really bold. So we'll go with the nine. Actually, the font is pretty close. It's not the right font, but it's pretty close. All right, do I have new beginner videos for CSS coming? I just actually pinned a playlist onto the homepage that I didn't used to have. I did it this morning for my intro to CSS. I have my intro to CSS, that one, which is really old, but everything up until the floats is super relevant. So that's why I put it back there. And then I have my HTML and CSS Crash Course on Scrimba, which is really from zero up until like getting into Flex. So I find like, maybe I'll do some YouTube content one of these days, but I find I have a lot of content that already covers the absolute basics, which is why I haven't added stuff to it. I just realized I don't want my entire main to be a text line, right? I only want the hero. So let's take this off of here. Whoops. Main, this is here.hero.atincludemqmedium. Some people don't like doing this, where you have like the same media query over and over and over again, but live with it. Prettier is not working for me again, but that's okay. There we go. So that looks pretty good. Now, I'll bring my images in so we can start seeing what's happening here. So this image is my image folder. Let's rename my images. Can we rename them in VS Code? I usually don't do it here, but layer six, which one's layer six is that one. So we'll just do rename feature one, rename feature two, and rename feature three. That will make my life a little easier. So image feature one, what would have been faster there is to come on this one and to come on this one. Let's say image slash, oops, one image slash feature two.png and then just change this two or three. There's the images are coming in, cool. That's good. The other thing is that whole area that has those cards, that's features. So here we're gonna put a background color, background color of my, or actually you know what, I have, we have utility classes. So features. So my features is going to have the bg neutral, neutral. I think that was my 800. Yeah, good. And then on that features, I'm also just gonna come in with a border radius of I'll do the same as before, 0.5 rim. So we're just getting some rounder corners on that. I don't really like how this is looking at this screen size right now, but I'm focused mostly on the big one. What happened to that image? I didn't want to save that image, that's okay. I don't know what happened to my second image there, but we'll figure that out, I guess, as we go. My feature list is going to be a list style of none. Don't want to do that. I don't think I have an extension for the images. I have an extension for SVGs, so I can preview SVGs, but I think VS Code automatically does that. You just click on the image and it previews it. Chris, it depends on how you're working and why you'd wanna separate them out. Because I use SAS, I would normally have separate ones and it all gets brought into a single file afterward. So that's how I tend to work. Let's put a gap on here. Actually, okay, I need to decide now how I'm gonna do this image. Now we're getting into the harder stuff in a way.  I think I moved something, no? That's undo. History, where's my history? Can I go back to the start? Yeah, okay, I moved the text. I might have to change how I set these up a little bit. Just because I have the image that's going the whole side to side, but then inside of here, there's some padding. So I think what we'll do on all my cards is, I know I can do this on all of them at once, but I'm just gonna do it one at a time so I don't muck up. So I'm gonna select all the content in my card and we'll just call that, we're gonna do a wrap and we'll wrap it with a div of a class of card content. I often do like a card image and then a card content or card body, but I'm using card body somewhere else already. So we'll do card content. So actually, let's just select that and then I should be able to hold Alt and also select this and do these two at the same time. Wrap.card.content. So if I do that, what it means is I have my card, I know I did card already. So I have my card, so my and content will get a padding of like 1m. So that just means, wow, I feel like I'm zoomed in here, but whatever. See how now it's offset from the side here a little bit? Well, the line height here needs to be fixed. Line height of one. There we go. It's too tight now, but we'll stick with that for a minute. And actually, let's just come on my card title. Yeah. Card title, card title, card title, text, prime, primary 400. Good. Normally here, I'd use like a flow content type of thing for my spacing, but because the spacing is a bit irregular, I'm just gonna put all the spacing on this middle guy. So he's gonna get a margin on him of like 0.25m for the top and 0.75m for the bottom. We'll see what that looks like. Whoops. Top, zero. There we go. There we go. That looks pretty good, right? We could even maybe go to one, but I'll stick with that. Yeah, I think that's okay. This color actually looks darker than this one. I'm gonna have to play with that. And even if it's not, I'm gonna fix that because it's just bad if not. I don't know what's happening with that image. But okay, here's the fun part. On the card, we need one, two, three. Because there's one on each, but okay, what we're gonna do, I don't remember how to do it, but on my card itself, for now actually, let's just come on my card itself and we're gonna say border left of one pixel, or maybe it's two, two pixels solid red. We're gonna start with that so we can see the lines come on. But obviously I don't want a solid line that goes up and down like that. I want a sort of, it needs to be a gradient, right? So what you can do is border, is it border? I don't do this often. Border image left? No, border left image, border image. And you have border images. Can't you do a border image on only one side though? If not, I'm gonna screw my, it's possible, but it's gonna drive me nuts. Can you not do that? Okay, what I was thinking is, because you could do a border image and then do a linear gradient. Gradient. Just do, let's just do red to blue. And then after that, I'm just gonna put this on another line so you can see it. We just put the number one, or is it over one? We're gonna look this up because this is where border gradient CSS, CSS tricks. I've seen the animated one, which is where I thought of it. See, you can do gradients. Oh no, I don't wanna do it that way. That's the complicated way, which I could do it that way. There we go. Is that using border image? There we go. Oh, one, so it is that. And then one, do I need the hundred? Is it like that then? Where's, oh, whoops. Let's just put this back here for a second. Oh wait, I think I need a border. That's why. Border width. No, what am I missing? You need to have a border width for the gradient to work like that. Right, and a border style too. Border style, solid. Ah, there we go, nice. So border width, border, what if I just did border left width? It's still showing up on both sides. Border, left, border, left style. Ha, there we go, sweet. So we can have it just coming up on the left. And then what I would do is do a, let's just put each one on a new line so it's easier to see, transparent to white to transparent. Yes, and now what we can actually do here is say it's transparent to like 20% and then white to 80%. I think I need commas after those. Save. Just so it's stretching out a little further. So there's the gradient. So we know the gradients are working. I still don't know what's wrong with that image. I might have to re-export it. Cool, and then I'm just gonna copy this because I want and, do I want and? Yeah, yeah. And last of type will get a, on the right side as well. Right and right. So at the larger screen size where the layout looks okay. Oh, see now I made a bobo though because I put a gap on these that I don't want. Where's my gap? It's not showing up on all the sides or I don't want that. Okay, that's better. We'll fix that last thing after. Where's my gap? Card, list, features, gap. We don't want the gap. Ah, nice. Cool. Okay, and then this last one though it doesn't need it. Oh wait, why is my, I might have mucked up my HTML here a little bit because that should be touching on the side here. So I'll have to check my thing and I need to fix that image too. But this last one needs it. Now, whoops, didn't want to do that. Let's look at my HTML here. Am I card and am I card content? Oh, because they're all inside LIs. Cause I made them list items. Okay, normally I wouldn't bother with this but we'll just do a card, extra or card, border, right. So here instead of last of, yeah, cause all of them are last of type because they're all nested inside of list items. So this would just be and border, right. No underscores. Ah, there we go, sweet. Let's go see what I mucked up here. So card, oh, see here I wrapped the card content too high, undo, alt, down, down, save. That one's fixed. Now we just need to figure out this top one. Card, so this should go up. Whoops, wrong button. Save, but it's, why is the image so small? That's so weird that that image is so small. I should put alts on them, but card, did I give those a class? I did, okay, we'll choose the class then. Card and image width 100%. Normally you shouldn't have to do that, but I know the image is big enough cause then I look here, it says the intrinsic size. Oh, wait, why is the image so gigantic? So tiny, I mean, what did I do wrong? Is an intrinsic the actual size? Li, image. Now the other question I have is, oh, I know why.  Gary, I blame you entirely. The image when I selected it, let's see if I can find it. I can't find it. Why can't I not select the image? There it is. Okay, so let's, I'll move this over so you can see the Photoshop file a bit. This one, it exported it properly and it only took what I wanted. For whatever reason on this one, it took like the entire artboard. Let's just try and export as. Let me just see if I can, let's see if, see it's taking all this extra space. It's not just taking the part that I want. And I know Photoshop does this sometimes and I don't know why it does it, but like it doesn't do that on this one, even though it's the same thing here. Like if I do a, I won't even want export as. Like the alien head, it's only taking, I almost feel like there must be like a salt, like there's probably a pixel somewhere. Which one is that? Can I get that one again? So like if I select that, is there a rent? There's no weird pixels or anything that are just floating around though. It's feeling like there would be like some random pixel that's somewhere else, but it looks like it's okay. Let's just open up that image, I guess. Gary challenge, my face, images, that's feature two. Open that in Photoshop and we'll just crop it. Clear, crop. Ideally it would actually be the same size. You can even see here it's snapping when I get to here. It gets snaps because it knows that's where the pixels end. It's like why it didn't do that in the first place? I have no idea. Yeah, we'll just crop it right at the top. There we go. Save. So if we go back to my page now, ah, there we go. Now they're all different sizes though. This one's still bigger, why? These two are the same. Okay, Gary, what do you do here? Let me open up all of them then. How big, see what I'm gonna do. This is one thing you can do. Just to make sure they're all the same. See how this one, is it bigger? It's a little bit bigger, but not enough to be... What's happening though? They should, oh, I know why, I know why, I know why. This has nothing to do with the image. I'm not following my own advice here. I used to display a flex, VS Code, VS Code. I threw a display of flex here. So there's my list is making three and this word sightings is bigger. So it's forcing it to take up more room in the layout. So because this, yeah, this word sighting is bigger than the other ones. So the easiest thing to do for that, I should have utility class for that, but I don't have one set up that I can use right now. Actually let's take that width 100% off too. That's weird. This is when I was trying to fix the problem. We might have to actually do something for mobile. This mobile is gonna kill me on this. This is taking me a while, guys, sorry, it's a long stream. Okay, so what I wanna do is at large screen sizes, let's go back to big, a container, I keep going back. I've been playing with container queries, so I wanna do more with it. So the font size there is actually gonna be a little bit problematic because it is so big. So I might use a clamp on that as well. But what I wanna do is where I just cleared, sorry, I'm just trying to think. So display flex, so here where I do a display of flex, actually I can do it inside the media query, I would say, and all the children have a, I'll do flex basis of 100%. It means they all have to be the same size, basically. So that should even out. I think again it's this. So if I do that, let's just shrink that font size down and see if that actually is the problem. That's my card subtitle. There we go, now they're all equal size. So you know what I'm gonna do actually? That's not bad.  I could use a clamp on it. It's also because my design is smaller than his design. I'm not using as much width as he had. I'm doing that on purpose just because if not, we'd never hit the max width right now. So I think that's fine. They're getting so narrow, though. This design was really at a large, large screen size and I can't show that whole thing on my screen, so it's really making it hard for me. So I guess this challenge, it's proving to be a bit of annoying. The next thing I wanna do, because this is actually, is that the actual text he had? This is another thing Photoshop likes to do. Let's do no, don't save, close, close. See, I have too much text and it's because when you go and make a text box in Photoshop, you can hide text just by shrinking the text box down. There's a lot of text in there and I copied all of that, but this was actually just like hiding over here. So let's cut down on our text. I didn't notice until now. That makes a lot more sense. It sort of drives me nuts that Photoshop does that and it doesn't let you know that there's text hiding. So let's just see roughly where it was ending, Photoshop. At dollar, around at dollar, which is at dollar right there. Select that, select that and select that and delete all that extra content and hit save. Oh, there we go. It's actually looking like the layout now. That's better. Cool. There's obviously a few little things going on. So the first, I'm gonna focus on the cards since we're focused on them. So the next thing I wanna do is this whole like offset, upset thing we have going on. Now I just realized because of the way that's the border things are a bit of more of a nightmare than I realized because of the offsets on them that I think I can still pull it off. So what we're going to do is first we're gonna come in, we're gonna do one card at a time. So I'm inside my card. So we're just gonna come here at the bottom. I could give each one a class, but I'm just gonna say and enth child. I'm using enth child for like I'll do one, two, three.  Just one, two, three makes a bit more sense. So we'll do a padding top of like four rem. And the reason I'm doing a padding top of four rem is because that's going to affect the border. Crap, one second. Card, not card, lists, align items, start. Let's start. I thought we can do a start now. Is that, because it did it for all of them. Ah, Kevin, I know why. Okay, I'm gonna have to break this out of here. Enth child's not gonna work because they're always an enth child one. That's why. Okay, let's just, that's kind of annoying. One second. I didn't do it. Maybe the border I should actually have on my list instead of on the card itself. And that's gonna make my life a little easier. So let's take this whole border thing that I did on the cards. I'm gonna put them on my list. List open, there's my media query right here. And now I could actually use this one as, like I originally did. And last of type should look exactly the same, more or less. So there's one, oh, whoops. Li, so much nesting. There we go, it looks like it did before. And now on that Li, what we can say, I wish prettier was working right now. Formatting is on, prettier is on. I have this happen to me sometimes where it just stops so that my indentation becomes a bit of a nightmare. Because anyway, whatever. This should be the other way. Just makes it easier when it's properly nested and everything's lining up where it should when you're using SAS. So we can say, we'll just do it here. And first, or not, I said we'll do nth child of one. Padding top of three rem. So the idea with doing a three rem on there is, it's gonna create the space here. See how it's creating space there? So if I make that like five, the borders extending past the top of the image. We'll make that like an eight. It was a lot, so I'm gonna keep going. I'm a little worried actually. Now this is, I don't wanna have to position absolute things, but I might have to actually take this whole list. Ah, this is getting harder and harder. Okay, I'll show you what my idea was, but we're gonna do a transform translate y. Translate y of five rem. Negative five rem, no, that's gonna go down. Negative five. So that pulls the whole thing up. Was it even more than that? So it goes up a ton. The idea is I'm trying to pull the whole thing up. The only problem is the padding I'm adding is still gonna be affecting on the bottom. So we might have to play a little bit with that gray background-y thing that we have here. So we'll do a 10, 15. So there we go, that's pulling across like that. I need more space on the top of my page, but that's fine. It's doing the right idea, but again, now my spacing on the bottom is maybe too much. I'll probably do like a 12. We'll play with it a little bit after. So that one's being pulled up like that. Then the next one is being pulled up by even more, actually. But this is where there's a problem, is that the gradients are moving around. So I almost need to change the positioning of my each gradient individually from one to the next which sucks, but we can do it. Cause this one's actually, this one here is positioned perfectly, but the problem is as soon as I move this, that it's gonna move with it. Oh, I didn't think this would be so hard. So now what I wanna do is take this one and say the second child, it's gonna move up as well, but you'll see the gradient moved with it. But the second child, this one was moved more. So we'll do like a negative 15 on that. So it's gonna go up even higher. But then what I could do is actually change the border image on this one. And so what I could say here is it's actually going and starting at like 50%. So that should move that, see it's moved it down more which is sort of what I wanted to do. The only problem is they're still stopping there in this giant space on the bottom. I'm not sure how I'm gonna solve that yet, but that's okay. That's something weird going on here. The image, my things look like they're well set up, but look at the gap we have here. One, two, three, four, five. We only has four lines of text. Maybe that's why. If I took a little bit of text off, it wouldn't be the same offset, whatever. Let's just get these sort of set up properly and then we'll figure out what's happening with our spacing. It also could be because he had more room to work with. I don't know. So that's that one. So this one I'm actually gonna change to, I said I wasn't gonna do this, but child three, since we have all these other things to put on here anyway. And child three and then we'll just do, oh, see this? Wait, why did I do the padding top like that again? Oh, because I wanted the gradient to stick off the top. Now I don't want that on the second one. Ha, maybe that's why. Let's just take that off on the second one. That's a little bit more. I mean, it's too high now, I think, but okay. And then this could actually come down. Okay, I think that's closer to what we wanted. And I think my gradients are positioned a little bit better. And then we could do this one, which actually has to move down. So this one's gonna have a transform, translate Y of like five REM to move it down by that much. And then let's just look at the gradients that we had. That gradient looks good. This gradient doesn't look bad, but it actually looks like it should go up higher. The problem with doing that again, to make that gradient go higher, these are so offset. They're all so different. I'm just gonna, I don't, I could do it with a pseudo element to squeeze that in there to actually get them to be different. Gary, that's way too generous of you. Dude, thank you very much for that. Way too generous though, my goodness. Thank you very, very much for that. Have fun with your video, I hope it's a good one. Thank you very much. Yeah, I'm gonna leave it like this for now. And if I come up with a good idea, but other than using a pseudo element, should I just do pseudo elements for those? And then I run it, I don't, maybe I'm gonna do that.   But yeah, we're gonna do, I'm gonna switch it eventually for that. Yeah, I think, okay, one sec, let me go back to the design. This looks, I mean, the spacing's a little different. Obviously, like this whole area is very different. But again, my screen size is so small.  It's gonna go off screen for you guys a little bit. Can I make that look better for you? We can do this. So at least we're seeing it more, okay. So what I need to do is fix this area just to move it off that way a little bit. Cause you can see here, like there's a big space and then I can add the image in and then maybe we'll fix up those gradients. This background is mucked too. Cause see how this one actually, my padding trick that I was trying isn't working at all. So I think I will have to bring those gradients onto pseudo elements. We can also add this glare thing at the top here. So yeah, I'm gonna move over to this side and then we'll come back and fix that just cause I don't feel like doing the pseudo element thing right away, but I think that's gonna fix all the problems that we're actually running into.  And it's not gonna affect the flow. And it's, yeah, I think it'll work better than how I did this. It won't add extra height by adding padding and stuff. So what I'm gonna say is this design zero five thing. So that's back in my hero. We're gonna say a margin left. I don't do this very, no, margin right. A margin right. I don't do this very often, but I'm gonna do a viewport width as my margin. And the idea with that is the bigger the screen size, the bigger that margin is gonna get. Oh, but I have that max width. That max width is gonna be too small actually and it's gonna get in my way. That's my main grid. This I'm actually, it was pretty big. It was like 2000 pixels, right? I'm actually gonna do like a 150 on that. We're never gonna hit it probably, but it's gonna give me the room to work with that I need for this design. I'm actually gonna bump that up a little bit on that margin. It's very rare I use this, but I think it makes sense. And I can put a max on that so it doesn't get like insanely big at one point. I think like this, it's actually okay. It's kind of weird actually all this stuck on the side like that, but whatever. It's not the end of the world, but it's here. Let's see that font size is still mucking us up a little bit, but whatever. And then things finally start to look not too bad at this size. Yeah, so I'll put it like this so you guys can see it properly. That looks good. So yeah, we'll get that thing coming across the bottom. So for that, what I think I'll do is just put, do we do it as an image or a background image? I'm gonna try it versus a background image, background image, URL, image, dot, dot, dot, dot, image, BG. No, not BG. It was the other one, color bands. Because it is a background image, it's gonna repeat itself. Ah, I can't do it like, oh, okay. So here, because it's a background image and I use margin, I can't do that. But I just, does it go the whole way? It does go the whole way across. See, there's a few things here I didn't think through properly. Okay, I'm gonna leave it here for now, but instead of a margin right, we'll just do padding right. But at really big sizes, or actually I put a padding on my thing. So like, there's a problem there with that because it's never gonna touch the side of the screen. And obviously it's repeating. The repeating thing's easy to do because here we can just say that my background, repeat, is no repeat. And then my background, actually the background size is gonna have to be a cover anyway. Is that gonna muck it really bad though? I could always do a background. I just wanna see what that's, see, yeah, it's terrible right there because of how big it's getting. So actually I won't do cover 100%. And then the background position for now, I'm just position of bottom, just for now. So to move it down. Background position, you can use offsets. Bottom 50%, is that gonna go the wrong way? Isn't it like that you do it? Or I could just do even this, 75%. It's sort of like that, isn't it? It depends on the screen size. Maybe 80 would be better, but that's the right idea. And then it will always be sort of living in that area. This is so mucked because of that stuff I was doing. The mobile version of this experience is gonna be an interesting one, let's just say. Okay, so it's not terrible. This is probably too big of a space maybe, but we're getting there. So there's a few different ways I could actually get this to touch from one side to the other. I could put it in its own div and make it a pseudo element. I could not actually have any padding on the left side there because I don't know if I ever need any. There's a few different things I could do for that. But that's okay, let's do the glare at the top because I think that'd be interesting. So if we do the glare thing, I'm just gonna move this over so we can see what we're working on. The glare will definitely be a pseudo element. So I'm gonna say and before, I guess. Position of absolute, absolute. And then this will get a position of relative. So my absolute is relative to this one. And then we'll do a width of 15 rem and a height of five rem and a background image of a radial gradient circle from top. See, this is where I have to look up radial gradients, but I think it is like that, isn't it? Okay, let's just try it. Circle from top. I forget how to offset and then white, transparent. Whoops, we have a before, you need a content property, content. And let's just say that it's, so it's position absolute. So then we'd want a top of zero. It should just show up somewhere. If I did that half, let's just also give this a background color of red. Position absolute top width height, that should be showing up somewhere on my page. But I think my gradient is mucking up because I did it wrong. Cart, not card, hero. Oh, I don't have one. Hero before. Why do I not have an absolute content is there? It should be part of the hero. Oh, I'm outside of my hero. Thank you. Save. Ha, there we go.  Let's take off the background color. Okay. Radial gradient mdn. Circle at, whoops, that's what I wanted. Not from at top. There we go. So we have it going from white to transparent. Now let's just shrink this down to like a two ram, I guess, for the height so that should make it more smushed. Oh, but it's doing a circle. If I don't do a circle, let me just try something then. I want to do an ellipse. Yeah, see how it's smushed right now? But you can do an ellipse instead of a circle, can't you? Circle at ellipse at top. How do you control the size of the ellipse? So here it's ellipse at top. And then I think the, anyway, let's see what this does. Ellipse at top just breaks it because I need a comma. So then the white is, then we'll make white stop at like 25, or no, 50%. Oh, it already is.  Okay, that's closer to what we want. But the problem is like it goes all the way up to the side so the way it's working. So the transparent here is actually gonna go from like 70%. That looks better. And then I can just make this maybe one, maybe a 1.5. Let's go look at his design. Pretty half. That's like the first thing that's been like, actually this is really wide. It's like the first thing that I've done that's not a complete disaster that I thought would be really easy. And we just have to do a left of like 50% maybe. Let's go back. It's more there. His is a little softer so my height should actually be quite a bit bigger. Where is it? So it's sort of in that space.  What I might actually try here is let's make this like four. And maybe this actually goes, ooh, that's ugly. It's just so harsh. I want it to like blend out more. Which is why, like this number I guess has to be bigger. The problem is you go too big then it touches the edges and you can see where the edge is. You know what I could try actually. I don't know if this would work. Would this work? Filter, blur, 1M. It might be too big actually have a blur. Ah, but it blurs it off the top. That's why I won't do that. I just want it to make it easy to do this so I don't have to use like an overflow or anything. So my hero here will get some padding. That's padding right. So we can say padding top is 5M. This, the left will be like 30, 20. Oh, that's really ugly though of a blur of a glow. Should I do an overflow hidden on the hero? The, maybe I could fix it up a little better than that. I'm not very good at playing with these either. So maybe it's my fault, 30, 45. No, that's going the wrong way, 15. Something like that looks a little bit better. Whatever, I'm gonna leave it like that for now. If anybody has any suggestions. So there we go. That's not terrible though. We get sort of that lensy flare thing coming in. It'd be nicer if it was softer, but I'll stick with that. I haven't been drinking much water here. Okay, so I'm gonna go back up to my container. Padding, my main grid padding. Padding will be 2M, whoops, 2M, 2M, zero. Let's be the easiest, 2M, 2M, 2M, zero. There we go. Just makes it an easy way to get that to the edge. I'm wondering if I even, you know what I might do? Is just say it's 2M on the top and bottom and zero on the left and the right. The reason I'm saying that is so on, let's move this over. So like here it's touching the edge. We'll figure out another solution for that. But then that way it's small screen sizes. At small screen sizes, the background image can still go all the way across. And actually that glare should be touching the top too. So what I'm gonna say is that there's no padding. So we can just take that off my main grid. Cause now it'll look better. And then on my hero, I have a padding top of five REM. So yeah, that's, where's my pseudo element? Okay, because what I don't wanna happen is this. Oh, there, that's better. Okay, that's fine. And then I don't want the text ever really stick to the side here either. So I am on the hero padding top, padding right. I don't usually do all longhand but padding left can also, padding left can be a two REM. And then I'm gonna do a padding bottom of two REM. And we're gonna add in a margin bottom of three REM maybe. I'm just trying to think of what this is gonna look like at small screen sizes. So it's not terrible. So that we get this cool kind of thing going in. We still have our glow, all of that's working. It's cutting off a little here, but whatever. And then here, the image is all the way down right now. So that's sort of, this is the crappy world. This tablet-y mid-screen size, it looks terrible. And then we get into something looking a little bit nicer here. We're not that far off to be honest. All this padding is causing some overflow though because of how I've set stuff up, which is terrible.  And then these are actually, it's able to get too big, which I didn't have as a problem before. So what I sort of wanna do actually is this. That is my features. Width, I should probably do it in the media query. When it gets the flex direction on it, the width is going to be a minimum between 120, I don't know. Let's just try 100 RAM comma. I just wanna see what it chooses to do on that. Let's, oops, that's not working. So that way it eventually stops there except it's not doing it. I want this not on my list. I want it here at include MQ large. Actually with how I have this set up, if I could just put it here because it's choosing whichever is smaller. So it's small screen size is 100% is smaller. So it means that it won't cause any issues here. It's allowed to shrink, but then here it has the max size and it won't get any bigger than that. So then we sort of launch into this world here which is going off screen a little bit for you guys. But you can sort of see it's balancing it out a little bit at least. Okay, so the next thing I'm gonna do is delete all my border. I'm just gonna take this and cut to take it off. We can take this off. We can take this off, take this off too. Okay, all of this is gonna go in the garbage, hit save. And now what I wanna do is all in my list and list item before. So each list item before, so that means each and I didn't call them list items. I had them as LIs, so LI. So for each LI, it's gonna be a position of relative, position of relative. And then and after is gonna be a position of absolute. So nothing should actually change right now. And then on each one of those afters, it's an after so we need to have content, content. And then I should, let's just give it a height of 100%. Top, top of zero, left of zero. Actually, because it's a pseudo element, I don't even need to use it as a border. I could just do this. This is easier than width of two pixels. And then just a background of linear gradient. That makes life a little bit easier, no? Instead of having to do it all the borders and fighting with that, we could just do this instead and then do transparent to white to transparent. Except they're not showing up. Did I muck up my, oh, whoops, and LI. There we go. That should show up now maybe. No, it still doesn't. I did something wrong still. Actually, before I even look at that is my SAS compiling, it is. So let's just go see if anything is showing up. LI, LI has an after. The after doesn't have a linear gradient because I mucked up my gradient. Linear gradient. What's wrong with my linear gradient? Background, we'll do an image. Linear, oh, gradient. Gotta spell things correctly. Ah, there we go. And now the advantage with doing it this way is, A, we don't have those weird gradients that we have to deal with. But the other advantage, I just realized I could just zoom out. That would make my life easier to show it on screen. We could just do that and now I could actually have everything on screen at the same time. So the advantage with doing it like this is now what I could do is I could choose each one of these list items, pseudo elements. It's a little bit messy still. So we have my, here's all my list items and even, you know, we could be more specific if we wanted to. So then here what I could say is, oh, I'm gonna do it here actually. And, so this is the list item itself. So and, nth, child, one, after. You can do that, right? And then, so the after has a transform, translate Y of negative 10 REM. Ah, there we go. Look at that. And I can still move the individual ones around, but it makes it so I can control them separately really, really easily, which is nice. And what I was doing before, yeah, I have some better ideas now. So that's that first one. Then I can come in and do the second one, which is this one. And actually this one's probably gonna be like a negative five. This one can be a negative 10 maybe because it was up higher than the other one. So this should be number two. Let's go look at his design. Oh, I did it the wrong way around. It should actually be a negative 10, a negative five. And I just realized I should have, I'm still gonna have to make one difference here. And then, so we go here, down. The next one's up a little bit. So the third one, number three is up a lot again. So we can do like a negative, is that one higher? No, it's a little bit lower, so like a negative eight. I still need to do the fourth one, but we'll do that in a second. But there, you can sort of see the shape is coming on it a bit better. But I made one small mistake here. And it's because here, what I wanna do is, and first, or we'll do the nth child one. I was doing, if I did a margin top of negative five REM, I'm not gonna save yet. Let's open that up and hit save. Yeah, there we go. And then I can do the same thing for the second one and the third one. So the second one, this could be a negative seven and it will pull the whole thing up. And then this one is my third one. And then that one to actually be a bit of a positive one. So that could be like a two. I don't usually use negative margins or maybe a three.  And then I actually have to, this is where I said like, maybe I shouldn't have done these all at the start just because that pulled these up a little bit. So this could be here, this could be here and that could stay there. Now what I could even do on these a little bit is, if I, actually this one needs to be down a lot more. What I'm actually gonna do is, I have the spacing issue, but it's because of my footer. So let's actually go and style that footer up. So I'm gonna say at include MQ large. I'm just gonna give it a lot of padding for now. Padding three, three M, three REM, I should say zero. So we start getting like the spacing we needed on the top. And then I called that my social list. So dot social, social list will just be a list style none, display flex, margin, margin of zero, padding of zero. I guess I didn't call it social list. I thought that's what I called it, social icons. I'm gonna change that here actually, social list. We should bring in the actual images.  So we're just gonna go with, it was Twitter first. We'll use whatever Gary called these things. IMG, IMG, come on. Oh, I'm in the alt, whoops. We should also be giving these alts, but IMG is Slack. And then it's IMG. And then we have the, no, not Twitter. Instagram is the last one. So we have the display of flex that's on there already. So they're next to one another. So here I will just use a gap of one M to space them out. I will do a margin left of auto or not. Oh yeah, why is that happening? One second, width, min width, what's min width? Min content, max content, max content, not max. Now they're gone. Oh, I know why, I can't do that because there's the images, social list. Why can't I get my social, it's there. And I want it all the way on that side. That should work. Width, background, red. But if I have a display flex on it, why is it stretching the full width? Width, where the heck, oh, it's all the way over there. Ha ha, it was off my screen. Let's open my dev tools again so I can actually see it all at that zoom out that we had. Put it right, whoops, sorry guys. I don't know why I'm doing, I'm complicating my life so much. So anyway, the one issue is he had it lined up with this which is why I was originally using a grid which would let me do that a bit easier. I'm gonna leave it like this for now and maybe we could figure that out later if I stick around. Ha ha, there's a way I could figure the align, the spacing on the whole thing is bugging me a little bit. It's because I set it up for this background image but maybe we'd play around with that a little bit and make that better. Okay, let's just focus on here for now. So I'm actually going to move the first one up, back up, no, let's just do a negative 10 there and see. And then this one actually maybe is a zero. Just be, I'm just thinking here, this one goes really far up, this one's almost there, this one goes up higher but then this image also goes up higher. So let's move that one up more, seven. I could actually, this is kind of complicated that I have this here and then these here. This would probably be better if they were nested here just to make it all connected a little bit. That's not terrible though. And then what I'm going to do is, I almost never ever do this but I'm gonna say and, and child three before is going to at extend. Oh, I can't do it like that, can I? I wanted to extend like just this part. Actually, I don't know what I could do and and child three before. These could all be befores and this one's an after. It really wouldn't matter. Basically, I just want only this before, like only the last one to have the two sort of elements. So, and then what we could do. So if I hit save, that should come in but what we'll do is left, right is zero. See, there's gonna be one problem here. I broke everything, comma. The problem that's happening now is they both have a left of zero. Can I do a left, left of auto? Would that actually fix it? That did. I wasn't sure if that would work or not. Okay, there. So we sort of overrode it and pulled that over to there. Oh, his great background goes all the way up the side. See, there's a few things here. I didn't really notice right away. I could do that, whatever. I'm sort of happy with that. Let's position that a little more then. So then I'm using it. I'm just trying to think here, that's okay. I'm thinking here, I'm moving those ones like that. I'm using translate, so I could have just changed the top or the bottom but since I've done this for all of these so far, we'll stick with that. This one could be like a positive eight because it, actually, if I don't move it, it doesn't look, it looks, that's his design. That's mine. Yeah, I wanna pull mine down. Actually, I wanna pull the whole one down though, right? This one could actually be a margin top bigger first because the text, oh, so this one's actually gonna have to be a translate, transform, translate, y of like seven rem. So instead of using margin, I'm using that just so the text actually pulls out off of this space. There we go, that's better. Now another thing I could do to actually get that gray background to shoot out the side and actually I'm thinking of these social icons if I brought it into this and use the, instead of having this as flex and I had this as a grid, like this is, I'm not about to change it now but I could really easily get it to line up where I wanted it to. But that, there we go. That's gonna, this is gonna drive me nuts a little bit but maybe I could put an equal margin right. How did I do the margin on there? Features, one sec. I'm gonna cheat a little bit here. Watch this. I don't know if this is gonna work. We're gonna try it. Width is this and align items, flex, end. Oh no, that's not gonna work because it's not taking into account this guy here. That wasn't smart of me. What's the width I have on the hero? Do I have a width? I just sort of let it do its own thing and I'm using the grid template here. Um, I'll play around with that after. I'm sure there's something I can do. Actually, I'm getting pretty close to being done at this screen size I think. I'm happy with how that's looking. The small screen size is less. What I was thinking for the gray background actually to get it to shoot out the side. Oh, that's not gonna work though. There's a few different ways we could do that but because of how I've set this up, it's not gonna work and I didn't mess, if I had things nested differently it would make it a lot easier and I'd just use absolute positioning for like a pseudo element to do the background. The only, actually the problem with that then is it doesn't react to the content. So I sort of like this approach. So I mean, what I could do, we could sort of fake it. We could fake that for sure. Okay, let's just fake it and then we'll be done with that background. So that is my features. Is this gonna work? Let's just try this. And after content, you can see I like pseudo elements, I. Position is absolute, which means that this, actually let's just put a background here, background of red. If I do a top of zero, a bottom, bottom, bottom, bottom bottom of zero and a width of 50% will be enough. So I'll do that. You can see it's doing the whole screen. So the reason that I do position relative on the parent relative is so it's relative to that. So what I'm gonna say is that the left is negative 100% and actually this width might actually be, whoops, no, 100%. And then the color of it, actually let's do 80%. Not 800, 80. I'll explain why I'm doing that, but then here the color of it will be my var color neutral 700, I think, or was it 800, 800? So I think there's better ways than doing it this way. And then a Z index, Z index of negative one, which I'm hoping doesn't go behind the background. There we go. And I don't know if that's, I have some side scrolling because of how I've set everything up. I don't know if that's causing it, but we can always just come, well, again, we're cheating a little here, because this is really rough. I will just give this an overflow X of hidden. Thank you very much, Cache. That's so nice of you. I appreciate that very, very much. So if we have that, oh, is that not working? Why do I still have an overflow? Oh, wait, that, no, I do have an overflow. Let's get it out of responsive mode here for a second. DevTools, turn off. Where are my DevTools? Oh, they're here.  I really broke things now. But let's go to the big screen size, just so I can see. Is there a way I could show you, but I'm not getting, oh, that's not working though. I'm still getting a gap there. I mean, I could make this just really, really big. Hero after width. That's not my hero. We're on my features. Features after the width here could just be like 100V, 100VW, so it's always the size of the screen. I don't know what's gonna happen here. There we go. So it's just always there. It's always just filling in that space. I have a problem at really big screen sizes still for the background image here because of how I did a few things. But at least, you know, it's not terrible. We're sort of getting there. I don't wanna look at what's this look like on small screens. Let's zoom out. We'll do 75 just for now. So there it's okay. Here we get some overflow just because I really mucked things up a little bit. This is kind of terrible right now on how that's happening. Oh, and we have some weird background repeat happening too. So ideally I wouldn't even do this, I think. I thought it would be a good idea, but I think it just has the whole, like I think I should just skip that and go to this. And I think what it should be is actually these guys become a display flex. So this text goes on the side here. So yeah, that text is all coming and shooting up here and then it even smaller screen sizes, it jumps back down and then it's gonna fix that. It also means all those negative margins and stuff I put on should be within a media query instead of being for there. But it's not a bad start. Let's see if I can get this thing positioned a little bit better.  Just because, actually I'll link to the GitHub repo if anybody wants to sort of take this to the next step and fix all the things I did wrong. I would definitely approach this a little differently if I was gonna do it again. I think what I should have done is, let's open up the Photoshop design actually, because it'd be easier to highlight stuff. What I should have done, and I sort of have it, but I should have had this and this is my two areas, which I set up, which was perfect. But with these two areas set up, what I should have done is had a content area, so then I could have just this content and then this content would be, like wouldn't be affecting the background here as much. And I could sort of play with the positioning and the margins just on this content within there. And then I could have done the same thing here. So like the, this thing here, and then this side over here could be sort of more equally distributed. And then the content inside would be more in, like then this, so I'd have this whole content area. And then here I would have one div that's splitting this up. And then I wouldn't need that weird pseudo element to fill in that empty space that I created for myself. So that would make it a lot easier to do that. And then this guy, I'm still not sure what the best approach is based on how I organized it. It is where subgrid would be really nice. If we had subgrid, I would just have, like my whole, this would be my one item. And I would probably, whoops, no pixels are selected. I'd probably have this, if I was doing it subgrid, I'd have the whole thing like that. And maybe I should have planned things out. I sort of jumped into it thinking it was easier than it was. But the nice thing with subgrid is then I could make, like a one, I don't know, I'd probably do like a column system across. Actually, I'd probably base it on the width of one of these guys. So I'd make a whole bunch of columns going across the page like that. Then I could have this spanning a certain amount of those and then this one too. And then I could just play around with it a little bit to actually get things to be where I wanted to. And they could all be living on the same grid because of the way subgrid works. It would have made my life a little bit easier. I think if I did it that way. And then positioning this would have been super easy as well. So I wouldn't have run into that, but we don't have subgrid yet except in Firefox. So I didn't want to do it like that. And I think overall I did all the hard parts where I think the gradient thing here, which I thought I would, well, the gradient solution I had worked, but it was kind of clumsy. This area here still has some problems on it, but it's not terrible. I don't know if this is considered a win yet though, or if he's defeated me, because it's not perfect. He did say I didn't have to do it in responsive though. So it's not terrible at full screens right now, other than the social links. So let's try and fix those up a little bit. I see someone mentioning to that Gary, or if I ever say Gary, I'm tying him a design course. That's Gary who's there. He is heading on to Twitch now to start streaming all the time. So if you make sure, I only link to his YouTube, but make sure you head on over to his Twitch as well. All right, I'll fix the social links. The way I did this, I want to do it without changing my HTML, because I do think the HTML makes the most sense, but to actually get the spacing to be good. I almost need to take, but I don't know, like this doesn't have, this side I've set a max width on it basically, but this side could be whatever size it needs to be. So I'm not sure. Unless I just, I mean, know what I could do. I was saying I could use sub grid. I could actually, I'm lost here. I have too many windows open. That's the one I want. So this would be a bit silly, but what I'm going to do is my footer. I'm actually going to do a display, display grid. This could be utility class too. I've done this in the past. The only, actually there is a problem because I used FRs. Sometimes if you use the same grid in multiple places, it doesn't work the same way in those different places. But if I do a display grid on here, and then I say that it's grid, grid template areas, grid template columns are 1 FR, 1.5 FR, because this is the same grid that I set on my main content area. So if I do that, and then I say that my social list is in my grid, and a lot of this should be in a media query, but we've abandoned the small sizes for now, grid column of two over three, or two over negative, two over three, yeah. So it's there again. Let me just see. I want to use my dev tools here. And it is nice that Chrome now has the grid inspector. There's my main grid. There's this grid, and there, let's turn off the main grid. Okay, so you can actually see that my grid areas are the same, which is what I want. But my social list, border, one pixel solid red. I can't see it because, aha, so now it's the same size as this guy. But my, oh, this should be justified, justify content. For somebody who made a flex course, you'd think I would know these, but I don't, I mix them up all the time. Ah, I fixed it without having to work too hard. So now as long, well, turn off that border. So yeah, that actually should fix any alignment issues at larger screen sizes, should now be perfect. Yeah, let's just make this really big and I'll zoom out. So even if we get to these, I still have this issue here with this image, like I said, but on this side, it's actually working out really well. Actually, the alignment looks slightly, slightly off, but that's weird actually. Oh, I know why, I know why, because my, why is that happening? I thought I knew why, but it must be the grids or react. See, this is where having different content affects things. And this is why subgrid, subgrid would be so helpful right now, because what subgrid would do is they'd actually force these to be the same, because even though the grid for both of them is set up the same way, because of the way the FR works and it's distributing content, it will never be exactly the same. So I could do it without FRs and I could actually give them like a size value, I guess. So maybe that would fix it, but this is where subgrid would be super, super helpful. So I mean, we could try that. Let's just say we do it at like 40%, 60, we'll do 45% now we'll do 40, 40% and 60%. And then does that work? I've never used percentages in my grid. I'm assuming it works. Oh, that's my main grid, okay. Oh, see this is the issue, is I set a max width on the whole thing. So that's why that image can get stuck. And then a 40, because 40% and 60% should always be the same on like FRs. So if I do that, I feel like it's not compiling because nothing changed. It says it's compiling. Okay, so if I open my dev tools again. So now, oh look, that worked. The design, I'm running out of room there at smaller sizes before my media query eventually kicks in that we need to delete. But hey, that fixed that problem I was having. What's actually happening here is this text is so big, it's overflowing outside the space it has available to it, which is causing a problem. So what I could do, I'll fix that because that's an easy fix, except I have too many windows open. Oh, can you even see that? Yeah, you can see that. Okay, I was worried it was off screen. So the easy fix for that for now is just that my, what I should do, the hero, what I said is on my hero, I have a padding right of 10 viewport width, but that can get really, really big, like gigantic. So what I could do is actually do a max min. So again, choose the smaller out of the two. So choose either 10 viewport width or let's just say 10 REM. So if it gets, it'll grow until it gets a 10 REM, then if 10 REM, 10 VW, and then if 10 VW is bigger than 10 REM, it's gonna stop at the 10 REM there. So now you can see now, oh, that's not working though. It's just not shrinking enough because the font size is so big. Didn't that my font size that should shrink though? My font size isn't shrinking like it should. That also might because it is shrinking. It's just I'm so zoomed out right now. So that didn't fix the problem at all. So maybe here too, I could just make this five. It's not perfect still. I think this is a win at large screen sizes. This image here is the biggest problem. I don't know the best way with how I set this up to fix that. I would have to change my organization because my main grid here has a maximum size on it. I would actually have to take this off, I think. See now it's doing that, but the problem, oh, actually it's not terrible, terrible. I still have that problem. So I'd have to adjust my font size there a little bit. But now at least that image can grow the whole size if you're on a giant screen because I am at 50% view right now. So I'm really zoomed out for what you're seeing. So it's not like any, I guess if you're on a TV, it might do that. I could probably move the background image down a little bit too. Let's do that over here. We'll leave it like that. That was my hero background position. So it could be like 80. So I can go down 50. Was this not doing anything? Oh, see, there's a problem too. It can overflow at the bottom. There is a fix for that padding, bottom 20 rem. It's not ideal, but I'm doing a quick fix right now. Doesn't this work background position? Shouldn't that move it down? Is it 20% bottom? There's ways of choosing where you're offsetting from as well. Isn't there 30? Why isn't this working with the, is it? Yeah, whatever, 200, 500 pixels. Or is it, there's a way of saying like offset from the bottom. I just forget how to do it. Is that it? Look like it moved down there, didn't it? I'm giving myself a headache now. I'll fix that in a second. I just wanted to give myself enough padding bottom to just do 30, 40. I need a lot actually, now that I think about it. Let's just take this off, because it's mucking things up. Who knows the syntax for background position to move it down only? Or is it, okay, one second. MDN background, I did a video on this background position. You can choose like an offset from a specific place. So like from the bottom, bottom 50 pixels, that's what I wanted. So bottom 400 pixels, space, center. Can I do that? The center keyword is a little mucked up with the positioning though. So negative 400. Ah, okay, there we go. So that does work. And then what happened there was just because I have my grid, so I could just do a line, not align self, align items, start. There we go. So we can have that sticking at the bottom a bit. Because it is a background. Oh, see, that's ugly though. That's why I wanted a percent, because I didn't want that to happen. See, maybe I shouldn't have, and that's the padding here coming in too. Actually, what I could do here is like 10 viewport width, which is kind of weird. If it's a percentage, it would have been the same. But then the padding is adjusting based on the viewport width, and actually a percent here would work too. Let's just do like 14.  Anyway, that looks a bit better. There we go. Nice, okay, oh, see. Oh, actually, if you want to prevent this from ever going on two lines like that, what you could do, that's my H1. H1, H1. Width. Min content. It will always be one line of text. Whoops, not H1. Pseudo title. And then a margin left of auto. There we go. Min content means choose the longest word and make the width of the element that word, basically. I could have an image, whatever it is. It's, I'm busting things here, but let's just pretend it works at small screen sizes, and we need some different media queries going on. And actually, let's just do one more thing, is that glare, the glaring thing. I was hoping this would be a lot better at small screen sizes. The joy of not doing it mobile first really. What did I call that thing again? I should have commented my code so I could find things easier. Hero, it's this, right? So the left, so this actually, I should do this as a right, and that way it's stuck to the right side, and we're offsetting from that way. There we go. And that way it's always lined up with my text. That makes more sense than using the left. And then even here to be on the left side. There we go. That's not bad, right? That's not too bad. What do you guys think? How did I do overall? I'd love to know what you guys think overall how I did on that. What time is it now, 12.30? So what time did I start, like 10.30? So that's two hours. Here, let's pull up his design too. I'll go back to this. So I'll leave this zoomed out. We'll move this off like that. And then let's open up Photoshop, hit tab on that to hide everything, shrink it down. It's hard to show both of them. There we go. How did I do? Hey, I think I did pretty good. I think the background positioning on that image could be altered a little bit. Actually, it's the text, it's this gap here is so big, but just the Photoshop design is such a wide screen that I'm having a little bit of struggles with that. He has it more sense, actually what he did is he has this one big area and this whole thing is centered in that space, right? That's what's a little bit different. If I realized that earlier on, I probably wouldn't have done it this way. I could use the min content thing. Ooh, but this text is longer. I'd probably have to be centered based on that text. And then I could set the width of this to a max content, set the width on the parent to a min content and just have like a margin auto on the two sides and center it within that space. That would have been probably the best way to do that. But whatever, we live and learn. Close enough, eight on 10, I'll take eight on 10. Thank you guys very much, excellent. I haven't been paying too much attention to the chat, so I apologize for that if you guys were chatting away. I told you in the challenge that you needed to use CSS art to recreate all the photographs. I'll get you to do that, Gary. Like that could be your challenge. I'll throw that one back at you if you want. Nathaniel, do I use systems to organize my CSS like object-oriented CSS, SMACs? I use BEM for naming and I usually have a bit more organization with my, I used to use like the seven one pattern within SAS, but I've moved away from that and just like evolved from that into something that's just more custom for me. I got a good job from Gary, so I guess I'll take that. I'll put this up and then the chat can actually go under my head. So it looks like I'm looking at you guys a little more instead of looking off that way. Five on 10. Nathan, too many negative margins, elements break. Yeah, I know, but not five, come on. For this screen size, I think I did okay. I do think that, I mean, negative, there's nothing wrong with using negative margins. Instead of using a negative margin, I could easily switch those to transforms and translate them. I would have the same net result, I think. I think. I don't use negative margins very often, but it is a fine, if you need something like this, it's completely fine. And I would, if I included those only in the media query, I think that it would solve a lot of the problems.  They just don't look good with the images and everything. So if it would be the image on one side and the text on the other, that would really be ideal. And to be able to do that where it's like this, then at a smaller screen size, they change. And then at a smaller screen size, even than that, they re-stack container queries. They're wonderful. So maybe actually, what I might do is actually take this and work on it a bit to do, I have a container query tutorial coming up. So maybe I'll use this as the example. I wouldn't give myself a 9.5 just because it was a little bit messy along the way. The audience won, exactly. Change the font, the font's close enough. It's not the right font though, you're right. If I put another hour into it, I could probably, I could probably fix a lot of the problems I'm having with it now. If I were to looking at what I did now, I would definitely do this part differently. I think that's where my biggest mistake was. I'm happy with the cards. I think those actually turned out really good. Negative margins aren't necessarily a bad thing, Nora. They just, they can cause problems with stuff. So that's generally why we avoid them. And if you can, but in times where you have overlapping content, I don't think there's necessarily anything wrong with having a negative margin. Even, I mean, you could, if I set this up with a, the issue, even if I set this up with a grid here, and I've done layouts like this with grid before, but if I set a grid on this, like you're setting up a grid that has what, like, and again, like me, okay. So you'd 100% like a grid could have worked here and then like you have a grid column, a grid row here that's only this one's in, and then this one starts at grid row two, and then this one starts at grid row three. 100% like we could have done something like that. And it would work perfectly fine.  I just realized I never put the little glowy things here. That's not, I'm not going to do it now though. A little overflow hidden with another gradient. So I just, I forgot something, but yeah, but I don't, at the same time, like you could 100% you could set it up that way. It's gonna work perfectly fine with that. Depending on how you're handling these social icons, it might not even work perfectly just because like I have this, I have a content that goes all the way across here. So I still need to pull up into that space. If you wanted to handle this differently and I actually have this as part, like in part of that grid that you have here, that would be fine. But then I'm just thinking, I don't think it belongs in this section of content to have the social links. So from an HTML point of view, it's kind of weird. And then at smaller screen sizes, what do you do with this little guy? And you could say like, well, at smaller screen sizes I'll put them in like the same way I did where I changed the order. You could do that. And you could pull these and put them at the end over here and have them placed there. But again, why are the social links in with that section? To me, they're not, they should be in the footer or in an aside or whatever. They shouldn't be part of this section of content because they're completely unrelated from that.  So just, you know, food for thought, but I don't think that negative, just because negative margins are sort of can potentially cause problems. I don't think that they're bad to you is if the design requires it. I think when you're, I think negative margins get frowned upon because what happens is people who don't understand, like say you have collapsing margins on something or you have a margin from your H1 that's really big and they have text here and then you're using negative margins to fill in that space. That I think is a bad thing. Like when you're filling in empty space because there's no other way to do it, like I think that's where you can run into problems because then you change the margin on the text and it affects other things. So I think negative margins, or I mean, and if you don't want negative margins, you can use transform and translate to move things up and down too. That's sort of what it's made for. But I think if you're using it in an intentional way that follows the design that you're using, I don't think it's necessarily a bad thing. You really don't like my font, I'm a new bae. I could fix the, let me see. The reason, I mean, here, oh no, it's not doing it. I thought if I did that, I thought it would actually fix the little fireworky thing. Yeah, if it was moved up a little bit, but that's, it's a background image. You sort of lose control a little bit on those types of things. So it's hard to get it exactly. I wanted to challenge Gary back. I'm gonna have to throw something at him. I just didn't have any good ideas on what to challenge him with. I'm not creative enough for that type of stuff. He could just take, I could, I can get him to make this mobile first. I'm not changing the font now, I'm a new. I'll put the code up on GitHub if you guys want. It's already up there actually. I haven't, let me see, GitHub. I already put it, it's just not the finished version. Find a repo, what did I call it? There it is. What did I even call this? I face. If anybody wants to take it and fork it and do stuff with it, I'll push the changes there in a little bit. Once I go off, but if you wanna fix the font or anything else, you're more than welcome to. This video will be on YouTube, yeah. As soon as it's done, I think YouTube just pushes them live. I think that's how it works. Would be nice if the last card text was on top of the image. What do you mean? If the text went up, I was following Gary's design. I also think it'd be really hard to read if we did that. I'm not gonna throw back something at him. He could never ever do, because he gave me something, it was a challenge. And I think, again, I think if I, now that I made a few mistakes along the way and I'm looking at the design a bit more, I think I could have done a better job on it. But overall, yeah, I think I made a few mistakes along the way to get to where I got, but overall, I'm pretty happy with how it turned out. But I would have to throw back something that he would be able to do. If you have any ideas, head on over to the Discord. It should be linked in the description below. Discord's a fun place to hang out, lots of cool people. And I'm in there way more than I should be. So, oh yeah, let me, we won't, there's, so this is mine, this is mine, and that's the design file there. So I think it looks pretty good. Maybe those little gradient borders could be moved around a little more too. And I forgot the glow. I mean, I actually kind of annoyed I forgot that glow. Should we do the glow? I gotta go, I gotta go eat lunch. But I'll do the glow and then I'm out of here. Thank you guys all so much for hanging out with me this whole time. So that is my card, so card content. Background, image, radial gradient, circle from top left. Can I do that? Two, no, was it from, I already forgot. Circle at, circle, I think it's zero zero, right? If you want top left. Var, color, primary 400, to transparent.  First percent, there it is. And actually, you know what I'll do. Can I do like negative 30, 20 px, can I do that and pull it out? Ha, I can. That bugs, this was bugging me way more than not having the fonts. That's not perfect, but it looks close enough, I think. I think I can pull mine a little further out just so it's not as dark, but there we go. I thought that would be more complicated than it was. So a nice way to end the stream with a little bonus thing like that. So let's go back, actually let's go to this, so that things aren't backwards anymore for y'all. And let me see what's going on in the chat before I get going. VS Code, I'm using Adam1Dark, I think is what it's called. Nathan, do a shameless plug on my socials. If people wanna follow me, I think they know where to find me by now. I think the biggest thing is the Discord. More people joining the Discord, the better. And actually, the biggest thing I guess is if you like following me live would be to come and see me on Twitch. The link for Twitch is down and I'm live every Monday on Twitch. This was a special YouTube one, but most of the time I'll be live on Twitch. So you can come and hang out there. I might be going live this afternoon. I have, it's maybe, I was planning to do an extra live this afternoon on Twitch, but I don't know now. But we'll see, but maybe. Okay, one second. But yeah, I guess for now that'd be it. And I'll see you if you want, come and hang out with me on Twitch. And I'll, hot tub streams, what's a hot tub stream? Akash, I mean, using WordPress to design, it depends what you're designing, but I disagree. Which book? This book? This is nothing special. This is my YouTube notes. So when I'm making my videos, it's where all my timestamps, is that gonna focus? Doesn't wanna focus. There it is. So all the different timestamps or if I have links, so like here. That's when I'm editing. Come on, there we go. If I'm editing, like what links I need to put in or cards or stuff like that. Nothing, nothing exciting. Thank you very much, Spiex for the super chat. Thank you very much. It's very generous of you. I appreciate it. This shirt is from, look up state of CSS t-shirt. And definitely worth, definitely worth checking them out. So yeah, state of CSS is a really cool thing. Tech hacks and tricks. I don't need, I can't show you it. I don't know who you are. It went pretty good. It went pretty good. Actually, I'll pull up. You can't see it. I can put it on the screen there. Can you see that? That's the finished design. That's where I, this is in the browser. I'm happy with how it went. Thank you, Josh. Nine on 10 once I added that glow. Yeah, I love the shirt. It's really nice shirt. So it was a fun stream. Thank you guys. Well, I have a shirt, but it's nothing too exciting. It's just my