Taking on Gary Simon's challenge LIVE!

[Music] oh [Music] [Music] so [Music] [Music] [Music] do [Music] so [Music] [Music] [Music] hello everybody and welcome thank you so much for coming and joining me uh on this monday this monday morning for me i don't know when 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 kind of crazy in the chat so that's awesome uh thank you all for coming and joining me for this i think it'll be a lot of fun i 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 um but yeah thank you all for coming and joining me i saw gary's at the gym right now too baddies but hopefully he can jump back into the chat as we're going i see a lot of team kevin and team 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 going to do it and while i make a complete mess of it uh so we'll see 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 um i did put the link to gary's video just down in the description so you can click on that and watch it uh it's worth watching definitely if you haven't seen it oh gary's here awesome i have to do a bl that 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 i saw somebody early on said maybe we should have a a time limit so maybe in the future we could do something like that niall thanks for coming and joining you were sitting on twitch looking to eat it sorry i normally i am on twitch so actually this afternoon i will also be on twitch um i figured you know 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 [Music] hear from your from your twitch stream scary doesn't know what he's done all right so this should be fun i think it'd be a lot of fun um 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 um i'm i usually i usually use a different software for my live streams so i apologize i'm back i'm in obs because i have that set up for youtube whereas i have a different one um for twitch so i'm a little bit more what's this button do that's my big face there we go um so this is what we'll be what we'll be creating um [Music] interesting how i recreate the pink purple band graphic entirely in svg yeah that would be interesting i'm just i'm just doing i'm right clicking on stuff from photoshop and exporting into into pngs um james welcome thank you for coming in and hanging out here here for the banter yeah i can't go live on twitch as well um if 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 and you know normally i'm on twitch so holy crap there's a lot of people here yeah thank you guys all for 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 some something a little heavier um [Music] is there a time limit actually there's no time limit i'm going to 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 uh that's okay um what did i want to find i want to i had a window here i'm going to put how do i share this send send and copy the link copy there we go uh so this i'll put in the chat so if you want you can 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 time frame um so yeah that's what our idea is going to be on on doing this uh there's obviously a few interesting things with this and on the setup of it um so the idea and the reason i want to do it live is just to show you know gary challenged me i didn't want to make a polished tutorial i just wanted to sort of dive in and see what we could do um i think it's more fun to do it that way as this type of challenge you can see my any struggles that i actually run into and i can't edit them out um i saw someone asking if it's going to be responsive i will i'm going to try and make it responsive i think we can do it there's a few things i'm not too sure about um we only have the desktop design so gary the the super designer the 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 did in here that's why he was using it um 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 um 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 is 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 um so there we go um 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 uh 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 i think i know what i mean i i haven't really looked at the design i looked at really quickly when gary posted the challenge just to see what i was getting myself into um but i haven't looked too much there are those those these borders let's zoom in a little on that so like the things that are definitely the hardest there's this lens flare i have an idea but i'm not sure oh i didn't realize this is a round corner that's okay um we have we'll see how these images export but we have these actually those borders are gonna be a pain in the butt uh just because they're so offset are 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 uh i'm thinking pseudo-elements a little bit that will have the border on them um 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 uh there's some overlapping images in the background here i think and there's like the lens flare thing um the one thing that worries me a little bit is my initial thought for this this glary thing here would be to have it um we can we can it's definitely an overflow hidden because if not we'll get a full circle um unless i don't want to export as an image that i can do with css i was going to 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 way 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 you could do these gradients with just a border um and a gradient on the border saying he loves the thumbnail so gary is the the genius behind that thumbnail you can thank him for that one and if anyone's not following him definitely there 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 um all right so let's let's jump into this and actually start making it so i'll show you where we will be using sas i'm just letting you know if you don't know sas uh just because it is a bigger build um actually let's go see first how those uh let's move this down so you can actually see what i'm looking at responses anyone who said less than an hour i ho 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 time frame uh 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 um i think i think yeah i guess that makes we'll see yeah we'll probably be falling into that range is my guess but um especially if i make it responsive and do all of that but we'll see i'm going to be using grid i'm going to be using um sass definitely the glare oh hi uh i'm it yeah i plan on using thank you for joining i plan on using the a radial gradient um 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 uh 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 um on my grid arthumatix as well thank you for coming and joining uh so all the people that are coming over from twitch to hang out with me here thank you very much so we i'm not starting from zero zero zero um just because uh what i am going to be starting with oh man is it here let's go to here um but i'm not i'm not i'm not starting with anything much um i just i'm starting with some sass stuff already set up for me let's zoom in so you can see what i have here um so i have a main file that's just bringing in nothing really i'm not going to be super organized with my sas i'm just probably going to 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 body 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 um i have some breakpoints set up so that's where media query mix in i have my colors which we're gonna be updating this in a second um 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 um fonts we'll be bringing in i also don't know what fonte used i didn't bring in any font yet um so there's nothing really going on it's just like a whole bunch general actually let's go look at my css file uh we can zoom back out i always forget the shortcut to go to 100 i think that's it um 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 um my typography normally sets those for me but maybe i don't even need to use them anyway we'll see uh 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 my setup there we'll have to fix that or it's not going to work um 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 in my type no where's 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 going to be in my root is it oh that it is here that's mucking up um 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 where did what the heck did i do i almost feel like it didn't compile i might have saved and then it i deleted some stuff that i usually have so 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 uh 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 um going but i'm gonna use pre-pros 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 and whoops body uh background is red hit save and let's set this up so you guys can see what i'm doing 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 acs oh 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 um see 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 um so i think what i want to do is have i see a question about is a css better than css if you if you're comfortable with css and you 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 you learn css first if you don't know what scss 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 um 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 gonna do a um main grid just as a div and in there we're gonna have a main um the main grid it's because i think this is actually 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 subgrid on actually uh i'm trying to think okay well we have this part here so let's just do that as a section of uh we don't need to give them ids but uh we'll call it oh let's just use class whatever hero uh we're gonna have a section i guess each one of those is i'm just trying 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 um [Music] section i don't know what do we call that anyone have a suggestion i hate naming things attachment studios you don't know what's going on here sorry um i'm going gonna 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 gonna do two two sections here i'm gonna have this section and then this section 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 three three points uh section cards features features there we go we'll call it features um so the hero and then we'll have a footer so and then we'll throw a footer down here um and that's gonna 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 um you guys can see that all right so here so in this one we're gonna 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 gonna make that the h1 even though it's really tiny like to me that's even and you know that makes more sense of like the actual title of the page doesn't it and then design version .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 uh it would be an a if it was something that would just open a modal or something then it would be a button uh so a dot btn we only have one button we don't have like any name in the world but it's sort of what it is um 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 um so each one of these is exactly the same so i i'm almost wondering you could argue that they could be a list even um but we're i'm just going to do each one as a div of a card and it's if you're thinking of it as features you could make a really good argument here to do a uli uh 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 lie we'll put a card inside each card is an image which will do card image plus um et go home for citing super rail get here fast temporation what the hell is temperation gary teleportation i can't read even with my glasses on teleportation beam her up so it's going to 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 um so we have a card in each side each card and this actually this ul i'm going to do class is equal to um feature features list i haven't used the bem naming in a while it feels kind of good to go back um 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 um 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 a way i have to scape out i'm used to the other software that you can just if you have text selected i could just click into another text box um 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 uh so here here and here we want to have the same text um okay let's just type this because it'll 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 um and then we need the social icons so in the footer here i'm just going to come in and we can come in with the ul uh ul of social 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 um yeah that should be fine right um actually for just really fast what i'll do here um let's on whoops let's go back on each one of these if ever you have an 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 going to be reading what it is uh if it's just an image that's inside and um oops i shouldn't be putting that here i should be putting that on the link itself um 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 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 it's going to end up at the bottom and it's just extra information it's not i i wouldn't use a header to go off site links um 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 going to rearrange the order of content with um i just think like semantically too it makes sense this is sort of footer content to the 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 i don't know who asked i think pierre is asking about emmett it is built into vs code and you can get in his extensions and other ones if you want i do have a video on emmett 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 um all right so let's go um i guess i i need to get all these images right from photoshop which is always fun uh 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 um so from photoshop actually i'm behind my head but i'm just gonna there is a faster way to do this but um you can get like a whole bunch at once oh we're in the right place my face cool uh oh one second there we go oh not a screenshot close that i want a new folder of images uh band let's just call that color bands dot png um now i think i can get all three of these at the same time actually let's see quick export as png into the i think that will work and we need these three guys here too uh 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 um so in photoshop you can export things but i don't know if i can export these i was i normally i would want to take these it's jpeg can i get them as svgs or is it just going to 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 it's going to give me like a raster image inside of svg 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 uh 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 um 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 going to 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 about that but okay um so let's go back to vs code i have too many windows open guys uh oh there it is okay um so i will jump into my colors folder here and set this up because so this is my pri yeah that makes sense as my primary color so that's going to be my 400 i guess i'll only have the 400 because i don't really need anything else whoops perfect my secondary one uh 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 uh 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 um which is kevin um a sas map is pretty useful in uh let's do this one as my darkest color so 900 um for doing sas stuff but it's sort of like a um an array almost a nested array um within sas so i need that color i need this text color 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 i always do this stupid thing where i put um semicolons in the map so that doesn't work um so yeah i do it like font 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 um it's easy enough to implement and add new colors in because if i needed an 850 i could squeeze one in there um [Music] that and white is still a neutral for me so that will 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'm just doing fff um [Music] there might be other greys 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 well it's not really what it is but i'm gonna call this one my like this pink color here uh 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 like colors gradient because the only time it's being used is in a gradient i think that would be fine uh and then the dark part of the gradient we might actually we'll see how the gradient looks but i'll show you any 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 um i think that's all the colors we can always come back if we need more and the last thing i'm going to grab is that background image for the entire thing oh it's this background oh that's it okay so we'll export that quick export as a png bg bg.png and we're gonna have to rename these aren't we layer six seven ten yeah save when you do the exports from photoshop it exports it as um 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 want to minimize it i just want to sort of move it down a little bit let's move these out of the way they still take up lots of room uh is it f no not f that goes full screen tab there we go just so we can see what we're working on a little bit um i know you can't see everything but it's good enough for now um i guess we need the font too eventually but i'm not going to stress too much about that yet let's see what's happening in the chat photoshop supports exporting css styles i find it it exports not very nice stuff though it's just all absolutely positioned stuff i you could do that if you wanted to uh gabriel for your grayscale i am 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 um that's fine definitely fine um now one thing i do have is a lot of utility classes that i can use so i'm actually going to come on my body and just to see if this works we're going to give it a class this equal 2. 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 uh it is 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 uh color utilities there we go um text oh one second let me open my compiled css because i'm to 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 have we'll check that out and then bg uh 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 uh yeah so that should work for my neutrals is this not being text secondary no my sass 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 um now you could have just set this on the body there's no reason not to do it maybe this is a little uh tail windy um so then what i would also do if because i'm doing this on these card body ones and i can do extends and other stuff here um but i'm just gonna you know having utility classes like this can be handy um 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 um cool so i have my main grid do 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 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 my css doesn't compile or it doesn't change anything um now because i'm using let's just come to here we're going to say body um again if i was really doing this i would have i would split things off but just for simplicity we're going to keep everything in this file uh let's just do for now font is going to be fun family we'll just do sa serif i don't know what fonty used we'll figure it out after um and this is the only font that seems to be using uh 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 um let's make this a bit bigger so you guys can see it a bit more the this is my 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 um i might go through actually know what i should do i should probably use my type scale that i have whatever uh 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 um so my dot grid main grid right uh oh you know what though body also has that image background image it's url images isn't it image back a step back a step image bg we have to rename some of these but that one will be fine um 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 the back that first background image is there uh so oh look at that we're already kicking butt here uh that's for my body is there anything else i think we're okay um the next one we want to do white fang 07 there's no time limit but i'm gonna try and do it i mean i slow myself down because i stop to read the chat and i try and talk through everything i'm doing um 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 uh so my main grid main grid main grid um it's going to be i'm going to do this desktop first because i have a desktop design and then we're going to switch it over afterward um i know it's not ideal but or you know what i'm going to do i'm just going to wrap this in a media query then um at include mq small we'll see the small one where this happens at actually no the small is not going to 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 sass and include like that is a sass mixin that i'm using so uh if you look here it's just creating a media query for me and it's using my break point so i have a small and a medium break point that i have set up these size maybe for 40 is going to be a bit small for the size of a design i'm going to go with the medium um and i can always change these numbers and play with it the only the reason that's nice to have is just because then you can be consistent all the time um and with sas you can nest media queries inside of elements and it works which is the best thing in the world um so let's do it actually i'm gonna have a display grid all the time um display display grid um 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 um at small sizes we're just going to have the hero we'll call it uh hero after the hero will be column uh 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 uh hero the whole grid thing here why is my include yelling at me semicolon expected oh yeah that would help um and then what we can do here is just do my grid template areas and redefine them um so then at this size it would just be hero space features you know what did i think that through because it's hmm 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 [Music] 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 uh i won't actually this shouldn't be this should be footer um i'm not actually going to assign a footer here and we'll see what happens i'm not sure um 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 oh i don't have why is one second mixons is here mixons is in my abs oh that's why okay i wasn't going to bring in my abstracts but i need to at use abstracts the joys of doing things live undefined mix in 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 uh for there we go i saw something shift there 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 this is being in one cell right now um do i want to 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 um that was silly of me huh gary you oops i keep minimizing photoshop because i'm used to not having it on screen gary's it's already mucking me up here um [Music] johnny i'm using semicolons because i'm writing a css and not the sas syntax um 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 um i haven't written sas with like the sas syntax in a long time so you know i'm going to 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 going to do our what we're just going to flip it actually we're gonna do our footer at the top and my uh the second one here will be my uh footer and then my main here not i don't know if you really need grid for this but whatever um so right away what we could do is just say that my um my main has a grid area of main and that my let's just move that a little for you guys and then my footer has a grid area of footer so just in doing that um you want to 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 is at the bottom now the footer is down here and then when i get to a bigger size the footer jumps up to the top so that's going to work for that and then what i want to actually do is on my main itself um or just we'll just declare a grid a display grid on the main so this will also get a display a grid and that's just for the two sections that are going to be in there um 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 going to 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 another template we'll just do yeah grid template columns uh i'm gonna do like a 1fr 1.5 fr or something just because it looks a little bit off balance i'm not aiming for perfection but then we get these two like that uh but that means that the smaller size they will stack and then we get big enough they'll go next to each other i'm going to add in a large here so let's open up my break points break points um let's add a large break point large which will be like 80 m and the reason i want to do that is because i want my what do they call that features uh yeah we'll do it here dot features we'll have a display uh at include mq large we can do a display of flex so that looks good like that and then we get to here eventually no no never this could be actually this would be a fun a potentially fun thing to use uh oh wait i'm doing it on the section i need it on my features list features so here we can say and oops and list and then wrap all that and hit save there we go super um i'm actually i'm going to change this yeah i'm actually going to say that the list is always display flex but what we're going to do is by default the flex direction is going to be a row no a column i think i'm never ever going to get that right on the first try so it's a column by default but then what we want to do is a flex we change the flex direction flex direction of row at larger screen sizes so here they're 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 um i'm just going to throw actually this gap might have to change anyway because of those borders and stuff but we'll throw like a 2 ram 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 um i assad i use m's for my break points uh because of an article by zel safari does break point if you zoom in and out on a browser the breakpoints 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 is really old i haven't checked in like six months but um 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 going to be on a base 16 so it's not like it gets all weird and scooby whiffed marco welcome it's going it's going um yeah it's going pretty good i think we're getting there i'm pretty happy with that already um 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 um 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 um 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 um just because the content has an influence on the layout so um our often does depending on how you less so with grid than with other things but it's always a possibility so the next thing we want to do is what uh the typography i don't want to have to keep pulling up the photoshop design though uh 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 um 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 going to 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 um so here we'll just come we'll say h1 h2 actually h1 yeah okay h1 font size is one ram uh no one one point one two five rem uh my what was it i don't remember what i called it pseudo title i knew i had a weird name for it dot sudo title is a font size 130 pixels off the top of my head that's like 90 rem um what whoa whoa not 90 9 90. line height actually maybe i should put a clamp on that uh line height of one font wait i'm gonna have to get the right font on this uh it's gonna be well 700 for now um see how actually i'm just going to undo that and hit save actually won't compile now i'm going to 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 shifts 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 your layout and your content first um because your content has an influence on the layout depending on how you set it up um 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 so gabriel i get you can control i have auto select off in photoshop but if i control click i can select layers um that's the easiest way to do it for me yeah i already gave gary crap for making this in photoshop i would have much preferred it uh 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 um these are my h2s let's see what size my h2s are third you guys can't see i can i zoom i 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 but i like you know what 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 uh so my h2s are a font size 21. can i remember what that is 1.25 whatever uh 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 going to organize this a little bit better after actually i should do it right away because i'm going to nest it main grid main features so after features i'm going to have my card and then inside my card we have my title whoops type tool 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 um 48 48 is that man font size isn't it 16 30 16 32 48 is it three i don't i never tech hacks and tricks i know i did my video on it i very very rarely use uh emmet for some things it's nice like if you do a pa and then or not pa pa uh 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 um 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 um okay so the typography should be pretty close um i'll make the button now because the button doesn't look too bad 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 i'll do some fine tuning as we go um 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 um i'm going to come here because this is sort of my typography section so my button makes sense for me for it to be here uh so display of inline block and at the same time because i am doing a button um you could do the whole like cursor pointer um background of none border of xero and like you know set it up so it would work whether it's a button or a link that this is being put on um instead of just focusing on the link display inline block cursor pointer background is off border is off there's something else that comes with buttons that i'm forgetting um 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 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 decoration um and the font font weight would be 700 i guess i need to tighten this up a little bit because the line height is terrible on that font weight is there and color can be inherit actually the gradient looks pretty nice so i won't have to do anything else emmet has a built-in calculator kind of 48 is three ah pretty good 1.25 is 20. 21 then would be oh three one two five 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 a 315 isn't too bad but um we need a border radius on this too right um 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 um so there you know more design fails here gary uh but what we'll do is we'll say that my i know we'll do the nice simple one um and hover and focus whoops focus uh if we do it we can do a background size of 200 um and a background let's pull position position of actually let's just do background size i don't know if it's actually going to change anything oh it does okay is that a good enough one um and then what we could do is transition background background size um linear three whoops 300 mills 400 there we go just to have can't you transition background size i'm sure i've transitioned background size or am i thinking of something else or is it background position that we can transition and 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 um and then here so by default um background position is center let's do like 150 maybe just so we get more of the gradient um and then here what i could do is background position is left um it's not going to be enough though you can actually like here if i make this 200 200 and we go from left to right let's say that's how you can do um like 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 um i think i could do something like that pulling out like playing with the stops and stuff too so that is an idea um 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 end the ampersand here um with sass 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 um but it's taking the parent selector and putting it here so it'd be the same if you're writing regular sas you'd be doing dot button uh 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 um just so we you know it changes on focus too um i could scale the button instead so scale is also more performant so let's do that we'll do a trans transform uh for that i'm going to do an ease i'll just do an ease in out i'm not going to play with timing functions so here these transform scale one point one point zero five um 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 um actually i'm gonna need a container so screw that that's not gonna work my main grid will 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 um main main i didn't yes i did right there uh so here let's add it to the top padding 2m max and you can do for instead of doing a max width i wouldn't really need the padding then or we could even do it here we could just say width is a the smaller so i'm used to writing max width but if you use the min 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 do oh it's offset though it's not um 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 two thousand pixels wide that's pretty big it's roughly two thousand pixels wide two thousand divided by sixteen 125 i might make it smaller because that's not going to i can't get that out let's just do 1600 uh 10 is 106 100 ram so if i did that properly and then we can do here a margin margin of zero auto um 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 we're hitting a max width so it's either doing a hundred percent if there's room for that or if it's whatever these is smaller so it's 100 smaller than a thousand ram so it's this is exactly like setting a max width on something but you can do it with one line instead of using two lines um that's really this this design thing is really bothering me so we're gonna change this um that's my body my h1 that's not my h1 it's my pseudo title uh the line height here is gonna be like a point eight much better i should have the right font on here but um my font size because it's gonna get in the way at smaller sizes i am gonna put a clamp on this clamp um so the smallest font size we want it to have is probably still pretty big so i'm going to do a five ram whoops five ram comma one rem plus 10 vw comma i said 9 is the biggest so i have to 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 um 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 rem in here you don't need a calc or anything like that it's going to work um sas actually used to have problems with this but it looks like it's now been fixed which is awesome um so yeah it's 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 um okay the next thing i guess my pseudo like there's other ways of doing this but i'm just saying a margin bottom uh the margin bottom here i'm actually going to set an m so that way as the font size on this as the font size on this when 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 um or whatever but it's based on the font size so because the font size is adjusting that means 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 um let's just go that's my main right um so we're changing my main so what i'm actually gonna 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 though they are i messed up my 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 also zoomed out in my photoshop thing which doesn't help uh card title font size see i did that wrong subtitle card subtitle there we go and the font font weight is 700 it's already in 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 clear it's not the right font but it's pretty close uh do i have new beginner videos for css coming um 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 xero 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 um i just realized i don't want my entire main to be a text to line right i only want the hero so let's take this off of here whoops main this is here dot hero at include mq medium some people don't like doing this where you have like the same uh media query over and over and over again but live with it prettier's not working for me again but that's okay um there we go so that looks pretty good now i'll bring my images in so we can start seeing what's happening here um so this image is my image folder uh 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 3. that will make my life a little easier so image feature 1. what would have been faster there is to come on this one and come on this one let's say image slash oops onei image slash feature two dot p and png and then just change this to a three there's the images are coming in cool that's good um 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 actually you know what i have we have utility classes so um features so my features is going to have the bg neutral neutral i think that was my 800. yeah good um and then on that features i'm also just going to come in with a border radius of i'll do the same as before 0.5 rem 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 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 um my feature list is going to be a list style of none [Music] i don't want to do that i don't think i have a an extension for the 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 want to separate them out um because i use sas i would normally have separate ones and it all gets brought into a single file afterward um so that's how i tend to work let's put a gap on here uh actually okay i need to decide now how i'm gonna do this image now we're getting into like the harder stuff in a way these i know okay you know what let's i think i move something though let's undo history where's my history let's can i go back to the start yeah okay i move the text um i might have to change how i set these up a little bit just because i have the image that's going like 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 um 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 uh 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 uh 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 uh wrap dot card content um 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 um and content will get a padding of like 1m so that just means wow i feel like i'm zoomed in here but whatever um 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 um 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 uh text prime primary 400. good um 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 um so he's going to get a margin on him of like .25 m for the top and .75 m 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 um 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 um 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 let's okay what we're going to do this is i 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 going to say um border left of one pixel or maybe it's two two pixels solid red we're going to start with that so we can see the the lines come on but obviously i don't want like a solid line that goes up and down like that i want a sort of like it needs to be a gradient right uh 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 linear gradient gradient um just do tran let's just do red to red to blue and then after that i'm just put this on another line so you can see it uh we just put the number one or is it over one we're going to 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 uh see you can do gradients um oh no i don't want to 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 100 is it like that then where's oh whoops let's put this back here for a second oh wait i think i needed i need a border that's why uh 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 uh so border width border what if i just did border left with 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 uh tran let's just put each one on a new line so it's easier to see transparent to white to transparent yes um 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 going to copy this because i want and uh 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 oh 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 um 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 what 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 my thing and i need to fix that image too um but this last one needs it now whoops didn't want to do that uh let's look at my html here for my card and then my card content oh because they're all inside lis ah because i made them list items okay uh normally i wouldn't bother with this but we'll just do a card extra card uh border right um so here instead of last of yeah because all of them are last of type because they're all nested inside of list items so this would just be um and and border right no underscores ah there we go sweet uh let's go see what i meant up here so car oh see here i wrapped the card content too high uh 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 um card did i give those a class i did okay we'll choose the class then um card and image uh with 100 normally you shouldn't have to do that but i know the image is big enough because then i look here it says the intrinsic size oh wait why is the image so gigantic uh so tiny i mean what did i do wrong is in isn't intrinsic the actual size li card image now the other question i have is oh i know why ah stupid photoshop 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 um 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 x 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 they won't even want export as like the alien head it's only taking i almost feel like there must be like assault like there's probably a pixel somewhere uh which one is that can i get that one again it's like if i select that is there a rant there's no weird pixels or anything that are just floating around though i was feeling like there would be like some random pixel that's somewhere else but it looks like it's okay um let's just open up that image i guess gary challenge i face images that's feature two open that in photoshop and we'll just crop it uh clear crop ideally it would actually be the same size you can even see here it's snapping when i get to here like it 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 um 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 uh why these two are the same okay uh gary what'd you do here let me open up all of them then how big uh see what i'm gonna do this is one thing you can do just to make sure they're all the same see 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 i know why this has nothing to do with the image uh i'm not following my own advice here i used a display of flex uh vs code bs code i threw a display of flex here so there's my my list is making three and this word sightings is bigger so it's forcing it to take up more room um in 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 with 100 off too because that's weird um this is when i was trying to fix the problem um we might have to actually do something for mobile this mobile is going to kill me on this this is taking me a while guys sorry it's a long stream um okay so what i want to 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 want to do more with it um so the font size there is actually going to be a little bit problematic because it is so big so i might i might use a clamp on that as well um but what i want to 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 um 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 uh subtitle there we go now they're all equal size uh so you know what i'm gonna do actually that's not bad i'm gonna go with that font size instead just to not have to bump my head against the wall too much i could use a clamp on it um 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 um the next thing i want to do because this is actually 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 um it sort of drives me nuts that photoshop does that and it doesn't let you know that there's text hiding so uh let's just see roughly where it was ending photoshop at delar around at dollar which is a 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 um there's obviously a few little things going on so the first i'm going to focus on the cards since we're focused on them um so the next thing i want to do is this whole like offset upset thing we have going on now i just realized because of the way that's in the border things are a bit of more of a nightmare than i realized because of the offsets on them but i think i can still pull it off um so what we're going to do is first we're going to come in we're going to do one card at a time so i'm inside my cards we're just going to come here at the bottom i could give each one a class but i'm just going to say and uh nth child i'm using nth child for like i'll do one two three i think it's easier than doing like first child last child and nth child just one two three makes a bit more sense uh so we'll do a padding top of like four ram and the reason i'm doing a padding top before rem is because that's going to affect the border uh crap uh one second card and not card list uh align items start flex start i thought we can do a start now is that because it did it for all of them ah kevin i know why uh okay i'm gonna have to break this out of here and this child's not gonna work cause they're always an child one that's why um 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 um i'm going to put them on my list list open there's my media query right here and now i could actually use this one as and like i originally did and last of type it should look exactly the same more or less so there there's one oh whoops uh li so much nesting there we go it looks like it did before um and now on that li what we can say i wish prettier was working right now formatting is on pretty or is on i have this happen to me sometimes where it just stops so that my indentation becomes a bit of a nightmare um 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 uh when you're using sass um so we can say we'll just do it here um and first or not i said we'll do nth child of one padding top of three ram so the idea with doing a three rim on there is um it's going to create the space here so you see how it's creating space there so if i make that like five the borders extending past the top of the image uh 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 have to position absolute things but i might have to actually take this whole list this is getting harder and harder i'll show you what my idea was but this is we're gonna do a um transform translate y translate y of five ram uh negative five rem no that's gonna go down negative five so that pulls the whole thing up uh was it even more than that so it goes up a ton so i wanna the idea is i'm trying to pull the whole thing up the only problem is the padding i'm adding is still going to be affecting on the bottom so we might have to play a little bit with that gray backgroundy thing that we have here uh 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 because this one's actually this one here is positioned perfectly but the problem is as soon as i move this that it's going to move with it i didn't think this would be so hard so now what i want to do is take this one and say the second child it's going to move up as well but you'll see the gradient moved with it um but the second child this one was moved more so we'll do like a negative 15 on that so it's going to 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 that it's actually going and starting at like 50 so that should move that transit moved it down more um which is sort of what i wanted to do the only problem is they're still stopping there and 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 emit my things look like they're well set up but look at the gap we have here one two three four five it 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 uh so that's that one so this one i'm actually going to change to i said i wasn't going to do this but and child 3 since we have all these other things to put on here anyway um and the 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 aha 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 um 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 uh translate y of like five ram to move it down by that much um 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 uh 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 um 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 or should i just do pseudo elements for those and then i run it i don't maybe i'm gonna do that and then i don't have to do the giant padding on these okay that sucks but yeah we're gonna do i'm gonna switch it eventually for that um 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 let me just go really big here for a sec it's gonna go off screen for you guys a little bit um 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 um because 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 because 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 under pseudo elements um we can also add this glare thing at the top here so yeah i'm going to move over to this side and then we'll come back and fix that just because i'm i don't feel like doing the pseudo-element thing right away but i think that's going to fix all the problems that we're actually running into because the pseudo elements i can do a position absolute and just move them up and down super easily instead of mucking around with all this crap and it's not going to 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 um so what i'm going gonna say is this design zero five thing so that's back in my hero um we're gonna say a margin left i don't do this very 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 going to get um oh but i have that max width that max width is going to be too small actually and it's going to 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 going to hit it probably but it's going to give me the room to work with that i need for this design um i'm actually going to 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 um i think like this it's actually okay it's kind of weird actually all this stuck on the side like that but whatever um 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 uh yeah so i'll put it like this so you guys can see it properly that looks good um so yeah we'll get that 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 going to try it first as a background image background image uh url image dot dot dot image bg no not bg it was the other one color bands um because it is a background image um it's going to 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 [Music] there's a few things here i didn't think through properly okay i'm gonna leave it here for now uh but instead of a margin right we'll just do padding right uh but at really sm big sizes are actually i put a padding on my my thing so like there's 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 is 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 uh is that gonna muck it really bad though i could always do a background just want to see what that's see yeah it's it's terrible right there because of how big it's getting so actually i won't do cover 100 um and then the background position for now i'm just position of bottom just for now um so to move it down um oh what's 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 uh 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 um and then it will always be sort of living in that area this is so much because of that stuff i was doing the the mobile version of this experience is going to be an interesting one let's just say um okay so it's not terrible this is probably too big of a space maybe but we're getting there um 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 uh 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 um 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 suit element so i'm going to 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 um and then we'll do a width of 15 ram and a height of five rem and a background image of a ra radial gradient circle from top so this is where i have to look up radial gradients but i think it is like that isn't it because okay let's just write circle from top i forget how to offset and then uh white comma transparent uh whoops we have it before you need a content property content um 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 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 uh 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 ah thank you save aha there we go that was really stupid let's take off the background color um okay um radial gradient mdn circle at whoops that's what i wanted uh it's not from at top there we go um 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 smooshed oh but it's doing a circle if i don't do a circle um let me just try something then i want to do an ellipse yeah see how it's smushed right now we 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 e lips at top and then i think the anyway let's see what this does he looks at top just breaks it because i need a comma um so then the white is then we'll make white stop at like 25 or no 50 oh it already is that's stupid kevin um 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 uh so the transparent here is actually going to go from like 70 percent that looks better and then i can just make this maybe one maybe a 1.5 let's go look at his design pretty hap that's like the first thing that's been like actually this is really wide um that's like the first thing that i've done that's not a complete disaster that i thought would be really easy um and we just have to do a left of like 50 maybe um let's go back it's more there oh my his is a little softer so my height should actually be quite a bit bigger um where is it so it's sort of in that space i mean it's gonna be a rough a rough estimate um 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 wanted to like blend out more which is why like this number i guess has to be bigger um the problem is you go too big then it touches the edges and you can see where the edges you know what i could try actually i don't know if this would work um would this work filter blur 1m it might be too big i actually have a blur ah i'm going to blurs it off the top that's why i won't do that i just wanted to make it easy to do this so i don't have to use like an overflow or anything um so my hero here will get some padding that's padding right so we can say padding top is uh 5m this the left will be like third 20 oh that's really ugly though of a blur of a glow should i do an overflow hidden on the hero 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 uh 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 um so there we go that's not terrible though we got sort of that lindsay flare thing coming in it'd be nicer if it was softer uh but i'll be i'll stick with that i haven't been drinking much water here okay so i'm gonna go back up to my container um padding my main grid padding padding will be 2m whoops 2m 2m 0. this would be the easiest 2m2m 2m0 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 0 on the left and the right uh 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 going to say is that there's no padding so we just take that off my main grid um because now it'll look better and then on my hero i have a padding top of 5 rem so yeah that's where's my pseudo-element okay because what i don't want to 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 rim um and then i'm gonna do a padding bottom of two rem and we're gonna add in a margin bottom of three ram maybe i'm just trying to think of what this is going to 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 uh it's cutting off a little here but whatever um and then here the image is all the way down right now so that's sort of this this is the the crappy world this tablet the mid screen size it looks terrible um and then we get into something looking a little bit nicer here we're not that far off to be honest um all this padding is causing some overflow though because of how i've set stuff up which is terrible uh this giant design let's just go to a big screen size for a second 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 want to do actually is this that is my um features with 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 uh i don't know let's just try 100 ram comma i i just want to see what it chooses to do on that that'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 uh at include mq large actually with how i have this set up if i could just put it here because it's it's choosing whichever is smaller so it's small screen size 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 it's balancing it out a little bit at least um okay so the next thing i'm going to do is delete all my border i'm just going to take this and cut to take it off we can take this off we can take this off and take this off too okay all of this is going to go in the garbage hit save and now what i want to do is all in my list and list item before so each list item before so that means each uh and i didn't call them list items i had them as li's so l i so for each li it's going to be a position of relative position a relative and then and after is going to 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 um 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 could i don't even need to use it as a border i could just do this this is easier then width of two pixels and then just a background of um linear gradient that makes life a little bit easier now instead of having to do it all this borders and fighting with that um we just do this instead and then do transparent to white to trans transparent uh 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 um 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 suit uh list items pseudo elements um 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 um so then here what i could say is uh i'm going to do it here actually and um 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 um and when i even 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 ten maybe because it was up higher than the other one uh so this should be number two um 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 um 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 i just but i made one small mistake here and it's because here what i want to do is and first or and we'll do the end thing and child one um i was doing if i did a margin top of negative five ram i'm not going to 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 we'll pull the whole thing up and then this one is my third one and then that one 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 i'm actually going to make this a little let's do like a negative three and a negative five 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 um now what i can even do on these a little bit is if i actually this one needs to be down a lot more uh what i'm actually going to do is i have the spacing issue but it's because of my footer so let's actually go and style that footer up um so i'm going to say at include mq large i'm just going to give it a lot of padding for now padding 3 3 m three rem i should say zero so we start getting like the spacing we needed on the top um and then i called that my social list so dot social social list uh will just be uh list style none display flex margin margin of zero padding of zero uh 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 um we should bring in the actual images i'm feeling i'm getting a little fed up so we're just gonna go with uh 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 uh 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 1m to space them out um i will do a uh margin left of auto not oh uh yeah why is that happening uh one second with min width min width what's min width min content uh max content max content not matt now they're gone oh i know why i can't do that because there's the images socialist why can't i get my social it's there and i want it all the way on that side that should work with background red but if i have a display flex on it why is it stretching the full width width where the heck did oh it's all the way over there haha 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 uh put it right uh whoops sorry guys i don't know why i'm doing i'm complicating my life so much so anyway uh the one issue is he had it lined up with this which is why i was originally using like 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 there's a way i could figure the align the the the spacing on the whole thing is bugging me a little bit it's because i set it up for this background image um but maybe we'd play around with that a little bit and make that better um okay let's just focus on here for now so i'm actually going to move the first one up back up uh no this let's just do a negative 10 there and see and then this one actually maybe is a zero um 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 i 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 um that's not terrible though and then what i'm going to do is i'd almost never ever do this but i'm going to say and and child 3 before is going to at extend oh i can't do it like that can i want to extend like just this part actually i know what i could do and and child three before um these could all be befores and this one's an after it really wouldn't matter uh basically i just want only this before like only the last one to have the two pseudo elements so um and then what we could do so if i hit save that should come in but what we'll do is left uh right is zero uh see there's gonna be one problem here i broke everything comma um 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 gray 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 doing 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 uh 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 want to pull mine down actually i want to 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 going to have to be a translate transform translate y of like seven rem so instead of using margin um i'm using that just so the text actually pulls out off of this space there we go that's better um now another thing i could do to actually get that gray background to shoot out the side and actually i'm thinking 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 um 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 okay one sec i'm gonna cheat a little bit here watch this uh i don't know if this is gonna work we're gonna try it with is this and align items flex and oh no that's not going to work [Music] because it's not taking into account this guy here that wasn't smart of me um [Music] 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 uh 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 going to work though there's a few different ways we could do that um but because of how i've set this up it's not going to work and i didn't if i had things nested differently it would make it a lot easier and i just used absolute positioning um 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 um so i mean what i could do we could sort of fake it um we could fake that for sure okay let's just fake it and then we'll be done with that background um so that is my features is this gonna work let's just try this um okay and after content you can see i like pseudo elements say um position is absolute which means that this actually let's just put a background here background of red uh if i do a top of zero a bottom bottom bottom bottom of zero and a width of 50 will be enough so i'll do that uh 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 uh so what i'm gonna say is that the left is negative 100 and actually this width might actually be uh whoops no 100 and then the color of it actually let's do 80 not 800 880. um 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 is it 800 800 so i think there's better ways than doing it this way um and then a z index z index of negative one which i'm hoping doesn't go behind the background there we go um and i don't know if that's i have some side scrolling because of how i set everything up i don't know if that's causing it but we can always just come well again you know we're cheating a little here because this is really rough i'll just give this an overflow uh x of hidden thank you very much akash that's so nice of you i appreciate that very very much um so if we have that oh is that not working why do i still have an over oh wait that no i do have an overflow let's get out of responsive mode here for a second uh dev tools turn off where are my devtools oh they're here if i turn that off and bring this in oh i'm really busted i really broke things now uh but let's go to the big scrolling size just so i can see is there a way i could show you but i'm not getting it oh that's not working though i'm still getting a gap there uh i mean i could make this just really really big where hero after width that's not my hero we're on my features features after the width here could just be like 100 v 100 vw so it's always the size of the screen i don't know what's going to 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 um because of how i did a few things um but at least you know it's not terrible we're sort of getting there i don't want to look at what 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 um 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 um so yeah that text is all coming and shooting up here and then at even smaller screen sizes it jumps back down and then it's going to 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 um but it's not a bad start let's see if i can get this thing positioned a little bit better uh and then i think i'm gonna call it a day 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 going to do it again [Music] i think what i should have done is um 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 is perfect um but with these this area like 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 uh within there and then i could have done the same thing here so like the this 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 than 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 um and then this guy i'm still not sure what the best approach is uh 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 um i probably have this if i was doing it sub grid 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 um 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 um and i think overall i did all the heart like the hard parts were i think you know with the gradient thing here which we use i thought i would well the gradient solution i had worked but it was kind of clumsy um 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 in responsive though so it's not terrible at full screens right now uh other than the social links so let's try and fix those up a little bit i see someone mentioning to uh that gary or just if i ever see gary i'm talking about design course that's gary who's there uh 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 um the way i did this i want to do it without changing my html because i do think the html makes the most sense um 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 uh i was saying i could use subgrid i could actually i'm lost here i have too many windows open that's the one i want um 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 a utility class 2. 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 1fr 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 uh but we've abandoned the small sizes for now uh grid column of two over three or two over negative uh two over three yeah so it's there again let me just see i wanna use my dev tools here and it is nice the chrome chrome now has the grid inspector uh 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 um which is what i want but my social list border one pixel solid red i can't see it because what aha so now it's the same size as this guy but my oh this is this should be justified just defy content for someone 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 why we turn off that border uh so yeah that actually should fix any alignment issues at larger screen sizes should now be perfect um yeah let's just make this really big and i'll zoom out so like even if we get to these so i still have this issue here with this image like i said but on this side it's actually working out really well um actually the alignment looks slightly slightly off but then 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 um 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 um 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 percent 60 right uh 40 we'll do 40 45 percent now we'll do 40 40 and 60 um 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 uh 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 i didn't 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 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 uh 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 um 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 um 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 to 10 ram then if 10 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 it's just not shrinking enough because the 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 i'm so it is shrinking it's just i'm so zoomed out right now uh 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 one this image here is the the biggest problem i don't know the best way with how i set this up to fix that i would have to [Music] 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 um 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 um for what you're seeing so it's not like any you know 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 um that was my hero background position so it could be like uh 80. is that gonna go down uh 50. is this not doing anything oh see there's a problem too it can overflow at the bottom uh 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 but 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 posit and whatever 200 500 pixels uh or is it there's a way of saying like offset from the bottom i just forget how to do it is that it it looked like it moved down there didn't it i'm giving myself a headache now i'll fix that in a second i just want to give myself enough padding bottom to make let's just do 30. 40. i need a lot actually now that i think about it um 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 uh 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 uh center can i do that the center keyword is a little mucked up with the positioning though uh so negative 400 okay there we go so that does work um and then what happened there was just because i have my grid so i could just do a align and not align style align items start there we go so we can have that sticking out the bottom a bit because it is a background oh see that's ugly though that's why i wanted percent because i didn't want that to happen uh 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 um but then the padding is adjusting based on the viewport width and the actual percent here would work too um let's just do like 14. it looks like it was getting cut off 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 uh h1 h1 with min content it will always be one line of text uh whoops not h1 sudo title um 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 if you 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 um and actually let's just do one more thing is that glare the glary thing [Music] i was hoping this would be a lot 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 uh 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 off setting 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 it'll 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 then 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 um that i'm i'm having a little bit of struggles with that he has it more sen 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 oh 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 ten i'll take eight on ten 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 max i use bem for naming and i usually have a bit more organization um with my i used to use like the 7 1 pattern within sas uh but i've moved away from that and just like evolved from that into something that's just more custom for me so i got a good job from from gary so i guess i'll take that let's 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 ten nathan too many negative margins elements break yeah i know but not five come on for for this screen size i think i did okay i do think that uh i mean negative there's nothing wrong with using negative margins i the transfer i could 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 um 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 um this would be a really nice time to have container queries because of these cards look like crap when they get wider they just don't look good with the images and everything so 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 restack container queries they're they're wonderful so maybe actually what i might do is actually take this and work on it a bit uh to do i have i want to i have a container query tutorial coming up so maybe i'll use this as the example [Music] i wouldn't give myself a 9.5 just because it was a little bit messy along the way the audience one exactly james 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 i would if i were to looking at what i did now i would definitely do this part differently um 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 um they just they can cause problems with stuff so that's generally why we avoid them um 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 um 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 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 a hundred percent like we could have done something like that uh and it would work perfectly fine so oh you know what i just realized i never put the little glowy things here that's not i'm not gonna do it now though a little overflow hidden with another gradient uh so i just i forgot something but um 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 um 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 uh 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 it's smaller screen size is what 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 there should be they should be in the footer or in an aside or whatever they shouldn't be part of us this section of content because they're completely unrelated from that so it does throw out some like extra little curve balls and stuff along the way there too um so just you know food for thought but i 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 use 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 you 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 you're filling in empty space because there's no other way to do 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 um 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 on manube uh i could fix the let me see uh 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 uh 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 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 um 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 i could i can get him to make this mobile first i'm not changing the font now i'm a noob i'll put the code up on on github if you guys want it's already up there actually i haven't let me see uh github i already put it is this not the finished version uh 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 want to fix the font or anything else you're more than welcome to 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 out i was following gary's design i also think it'd be really hard to read if we did that i'm not going to throw back something adam he could never ever do because he gave me some 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 um but overall um yeah i think i made a few mistakes along the way to 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 um 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 uh let me we won't there's so this is mine uh 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'm 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 uh card content background image radial gradient circle from top left can i do that a two no was it from i already forgot circle at circle i i think it's zero zero right if i want top left var color primary 400 to transparent um and then it's how you oh so here would just be like um the transparent's gonna start at like 30 percent first percent there it is um and actually you know what i'll do can i do like negative 30 20 px negative 20 px can i do that and pull it out 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 a little bonus thing like that so let's go back actually let's go to this so things aren't backwards anymore for y'all and let me see what's going on in the chat before i get going uh vs code i'm using atom1 dark i think is what it's called nathan do a shameless plug on my socials uh if people want to follow me i think they know where to find me by now i did the biggest thing too is the discord more people joining the discord the better and actually uh if you uh the biggest thing i guess if you like following me live would be to come and see me on twitch the link for twitch is down and i usually like 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 uh i might be going live this afternoon i have it's maybe i was planning to do an extra live this afternoon on twitch um but i don't know now but we'll see but maybe okay one second um but yeah i guess but for now that'd be it and um i'll see you if you want come and hang out with me on twitch and all hot tub streams what's a hot tub stream 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 uh so when i'm making my videos it's where like all my time stamps is that going to focus doesn't want to focus there it is so like all the different time stamps 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 spx for the the super chat thank you very much it's very generous of you i appreciate it this shirt is from uh look up state of css t-shirt and definitely worth um definitely worth checking them out so yeah save css is a really cool thing tech hacks and tricks i don't need i can't shut you out 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 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 9 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 mean i have a shirt but it's nothing too exciting it's just my logo it should be under the video i have like the the youtube store teespring thing um i have plans for other stuff it's just it's a super low priority for me on the merch side of things oh hope uh i was using pre-pros for that um so they just have a transition it uses browser sync but they've set i think they just have i i think they have like a selector like the universal selector transition all like 300 milliseconds so when the css get like when it's injected to change you just it transitions everything as it's making the changes danielle what size monitor my main monitor here is a 27 inch and then this one here is a vertical 24 maybe is it 24 yeah it must be this one must be a vertical 24 and this one's a 27 you can't see this one my my primary screen's a 27 wide and then that's a vertical 24 i think that's what it is yeah i put uh let me see if i can get the link it's i haven't pushed it yet but uh if you go here that's where the code once i end the stream i'll push everything to there a 3d oriented site i should get gary to add some animations and some fun stuff to it actually so get some he he has more experience with gsap and that type of thing so maybe he could come in with some some fun stuff like that animate that background thing or something a cache element you have to be really careful with stuff like elementor and divi though they make really really really slow websites and that's not good i don't know what the hertz is on them probably 60 i don't know at all life form 106 certificates after i've you're done courses yeah i offer them for anyone who wants them if they finish you just have to get in touch with me when you're done except for my i don't do it for my free like the any free course i don't but if it's a pay course i would no it's uh the main screens 1440 and then the side one there is 1080. i i had only one screen until i started doing lots of live streams on live streams on twitch uh with live streaming just to have enough screen real estate for everything uh i needed to have two screens so i only had the 127 inch for a long time i think a 32 like ultra wide would have been a little bit better um just because sometimes it's a bit tight but i was fine for coding for the longest time on one screen the lights in the background which ones the the color ones here or the ones i'm pointing there's the ones on the wall or then there's the blue one here the blue one here is an led strip that's just like stuck behind the shelf the ones on the wall itself those ones are just um are not they're not leds they're um well they probably are they're just white lights with a gel in front it cost me like 20 bucks to set the whole thing up the i think the light here is probably more expensive than the ones that are on the walls there i always say i'm gonna leave and i always do this at the end of my stream so don't worry i'll leave when i'm ready sounds like we finished the playlist that i had on i could do a some sort of collab with gary i don't know what i would do unless it's just more like this where he actually shows us the design what are things that i would tell my younger you i don't know i think a lot i don't know you'll figure it out eventually it took me a long time i i have degrees and things i haven't used and i had no idea what i wanted to do going into my mid-20s probably um with my life or at least early 20s yeah probably mid-20s um so like you know as long as i knew that i would get somewhere good eventually the plant is some fake plant i don't know what it is it's a fake plant that i got at an art supply store to developers when should you use grid over flexbox it depends on the layout 100 depends on the layout i have started using grid for more and more stuff though so there is that um but yeah if it's something like a navigation it also depends on like how much the content should decide things versus i should i'm gonna do one i think with a navigation one time and show the differences between using grid and flexbox and why i would use flexbox for a navigation and use grid for something else because flex bases things a lot more on the content and then grid puts a lot more you grid you're controlling the content because the grid has everything there i mean you can use things like min content max content and it will look at that or autos but usually with grid you're doing things that are much more controlling frs are a little bit in between two nfr is like a sort of saying display flex in a way um [Music] even though the default's a little bit different but it's it's more like um yeah you have more control when it's display grid and with display flex you're letting the content sort of have and you can get around that for sure um but something like a navigation i'd probably always use flex whereas something more structured and rigid that i'd want to be able to control more i would use grid on it's not the best but thanks danielle i had a few but i think i'm a noob i'm ignoring you because you're spamming and if you keep spamming i'm going to keep ignoring you or i'll put you in timeout again so i don't even know what the question is but oh i put you in timeout because you kept asking the same thing over and over and i'd answered saying that i wasn't going to change the font for now and that the code was available and again the font is here uh not the font the code is there so you know it's not i think it's easy enough to change the font but if you want to go and do it go for it man sass or less which should you learn whichever one you want i like sass more it's what i have experience with i think it's more popular so if that matters then sass but it's up to you there's stylist too there's you know grid is fully supported raj grid has amazing support there's no reason not to use grid anymore from a support standpoint as far as i'm concerned unless you re and even if you need to get it to work with an internet explorer you can um it takes a bit more work but you can do it there's look up css tricks um grid internet explorer you'll find a huge it's like a multi-part series that goes into how to do it it's really good um so if you really need to i know some places have still like six seven percent of people using internet explorer so in those cases it's important i guess uh that i think most people have less than point five percent so like you just serve up those people a mobile experience and then and you know you just use supports and let them get a a different experience that's still functional as long as they get to the site and it's not broken yeah i think it's fine and it's gonna be so few people like my stats on my own site there's no i haven't had one visitor in the past three months who's on internet explorer so like i don't mind using grid how did i start learning css hang kum uh i started it before there was watching tutorials i started learning it before youtube and all that so it was a long time i was looking at code and i don't even know it was in the 90s slash yeah late 90s so like when css started ish um then after that when i started taking it more seriously it was looking at lots of i was reading lots of blog posts for a long time and just building stuff because there was less tutorial based stuff back then that i could find anyway it was just i would just make stuff and then juice i had lots of really bad habits um and did things really badly for the longest time and just you more and more and more and you learn more and you i think tutorial i have a video no i don't know what it was i might do a video on it um where i think it's important to use tutorials when you're building things to try and learn new things and to figure out how to do something that you don't know how to do if you're just watching tutorials all the time you're not learning anything because you're not going to remember it all and you're just always watching tutorials i go and make something it's like oh i don't know how to do this one step let's yeah i don't know how to start well let's look at a video that's covering a project and how is he starting his thing and then okay i sort of i'll pause that video now i'll start doing my own thing i'll start working on that oh i got stuck on this next thing how do i solve that one problem let's find a tutorial so i can solve that one problem you'll make a lot more progress and things are going to stick more when you're implementing what you're learning instead of just learning it or follow a course and go through the course but then as you're doing the course don't just code along watching the screen while you're doing it because it's not going to sink in you're just typing what he's typing nothing it's sort of like if you're writing notes and you're listening to a teacher talk and you're writing notes word for word what they're saying you're not absorbing anything you're just writing down tons of words it doesn't really do anything it's notes if you're note-taking it and coding alongs fine but then it should be let's delete it all not watch the video and then see if i can do the same thing again because and then all of a sudden you're going oh crap i'm stuck i just literally did it watching him and now i can't do it without going back and seeing what he did so then maybe you watch it and they go oh yeah i forgot that one thing pause and then try and do it again without the video and that's how things are going to start sinking in david smith i don't have any plans for js courses no there's too much good stuff coming in css i have enough to talk about on that what's my opinion on webpack i mean it's it does what it needs to do i don't really use it for what i'm doing but um it's fine grid is amazing benil for responsive html i have a video on if you look at my video why grid areas are the best you'll see a good example of it there joe pedro which one the media query went for like the the range selectors like greater than less than that one looks really cool for media queries i'm looking forward to it uh it's i used it last week's stream i think i did on twitch but i don't is it f it's only one browser that supports it i forget which one i think angular's the hardest to learn ciao but i don't i have i don't know angular so i can't say for sure i'm not very good with react either so do i miss flash animations just because they were fun i don't miss playing around with i was bad with flash so i don't miss working with flash but there was cool websites and stuff back then all right i got to get going did i use i did play with flash a bit but i never got deep into it i never got into like action script or anything like that basic basic keyframing things and nothing too much hope yeah it's turned i don't mind doing a little bit of an ama the best way to test mobile safari without an iphone get an iphone i i wish there was another solution i mean there's sites out there that can do it for you but you're paying for those generally anyway so i would say try and find a used iphone you don't need a brand new like thousand dollar one go on you know try and find the cheapest iphone you can get an iphone 6 now i can't imagine is that expensive and if it's something you need to test on you just gotta test on that device there's not really a way around that sadly jam stack two developers are asking me i'm all for the jam stack as much as possible um using 11t is for some stuff now um so yeah that's where my content is going to be going for the most stuff sorry if i'm not answering everybody's questions but the chat's going pretty fast so i'm just grabbing ones that i can that i can see when to use tailwind over sas and vice versa it depends on what you want to do and and how you want to work uh i like using sas and wouldn't use tailwind just because i'm not a fan of the way like the workflow um so if it's something you like then go for it you know and depends on the project and what the team is working with and your own thing uh and all of that so one on ravi's question i didn't see ravi's question i don't see oh can we yeah i'm working on one i am working on a sas course um i had to stop recording i did like three videos and then had to stop because i've had a really bad cold for the past 10 days now and it's i don't know if you can still hear it but even like i'm blowing my nose constantly during the day my nose was super blocked i had i this is the longest i've talked for a long time and i'm actually it's making me feel like i can get back into recording the course now because i'm feeling pretty good so uh i'll start progress on that soon again i'm a new but my skilled at js uh enough to get things done i don't do a lot of javascript content because it takes me like five times longer to do it over css content because css content um things like this where this was a little messy just because it was live and i wasn't super planned out but first most css content like i don't need to research very much i general i do research everything i'm doing uh and some things take more research than others but i have like a strong enough base that i generally know i'm doing best practice and don't have to worry too much about like making fatal errors or just showing something that's really bad whereas with javascript i can get things to work sure but i don't know if it's like the optimal way of doing something and if i'm teaching something i it just takes me a lot more time to make sure i'm doing it properly that i'm following best practice uh to plan everything out to like make sure that it's a really good tutorial instead of being something that's just like hacking something quickly together that sort of works um so i get there in the end it just takes me forever to make tutorials based on that so i tend not to do tutorials uh on that and i don't like going to the very basics of javascript just because i find there's lots of really good content on the very basics of it already and i don't know it's kind of boring to me to talk about on the really basic stuff so um but i do have some content on it right it's been a while i think the last thing i did was my intersection observer tutorial when should we move from static site generators from plain html site is it necessary uh it depends on what you need to do if it's something that and like if you have a blog if you have dynamic or dynamic content at all uh like it'll be updated regularly then yeah i think a static site generator makes a lot of sense um so that could be like new posts every now and then it could be other stuff like that i can't think of any good like even on my site like my courses page my courses page gets updated i add new courses whenever i have a new course it's automatically done just through like a markdown file that i add a new markdown file and it's done automatically i don't have to build out each card every time i even now i don't even do that it's with the cms so i just go in the cms choose a few things put a little description box and it publishes it for me or my articles same thing so if you need content like that then a static site turner makes sense you need a four-page site that's never going to change is it worth setting it all up it's up to you i think they're still good to learn but i don't have a course on css grid a lot of people have been asking for one so i will eventually uh surumedji but i don't have one yet a website to improve css skills um i mean youtube tutorials there's um css tricks has lots of good it depends where you are in your journey i guess if it's more beginner content it's a little different um if you're comfortable i mean things even if you go to last week's video that i put up where i was looking at resources to learn from there's some really good stuff there that can help you improve your skills through practicing projects so that might be my my answer for now there's also like flexbox zombies um grid critters flexbox froggy um like things like that for like specific things like flexbox or grid is just awesome is using gap and flexbox a good idea now that support is here for safari it should be fine in my opinion again it depends with internet explorer i guess um yeah i don't really recommend a specific cms uh artemis just because i don't know what your needs are so source for normalizing css uh i use andy bell's modern css reset these days as like a reset let's and if you look at if you just put andy bell modern reset you know it'd probably be the first result thank you er dash what's yes i mean on my own site i'm using netlify cms um it does the job for what i need it's really really simple but i'm a one-man show so it works perfectly for me otho lester what are my skills css or css and helping people learn i think my main skill is helping people be less frustrated with css that's my superpower slow loading problems in css i don't tend to have slow loading problems in css usually slow loading is caused by other things than css unless you're up to some really crazy stuff slow loading is usually caused by fonts by images or by javascript um so if you're doing a like hopefully you're only loading your javascript and after fonts are one of the biggest killers uh self-hosting your fonts instead of using the google font even if it's a google font download it self-host it it's going to be a bit faster only bring in the font weights you need you really want to reduce the size of your fonts like fonts can be real killers they can also have big impacts on content shifts so to watch out for that you could also like you can do um critical css if you i mean depends how far along you are if you're really new i wouldn't jump into it but if you do critical css um it's like a plug-in you can use with your sites um there's different ways of using it depending on how you set things up but the idea is that this css you need to render your above the fold content is all inline styles so that means that's gonna it's not gonna get delayed by having to load in the entire css file or your fonts or other things all those inline styles means the that is instantly pretty much painted and then it's going to load in the rest of your css after um but you don't want to mat like manually doing that's a nightmare right like you'd never want to do that manually so you'd want to use something like critical there's a few different tools but critical css is the one i know so that could be something on helping your css performance out i'm looking smart today thank you rohit i did daniel i did a table layout i tried to do a table layout as a challenge on twitch a while ago and i'm never doing that again that was a disaster [Music] um for layout design and choosing colors choosing colors i have a video on uh that i think is pretty to the point and very simple layout's a little bit more i mean you just have to study design um i think the best thing to do is just copy what other people are doing and then learn from that francisco hi thank you for coming and joining is it worth learning jquery in 2021 i wouldn't put it at the top of my priority list if you're going to be in a position where you have to maintain old projects you'll definitely run into it if you're working at a startup you'll probably never use it so it depends on what you want to do and the types of work you're doing [Music] do i use angular or just go i just do html or um i mean i'm using as i said before i'm using 11t which is a static site generator so i'm using other templating languages that are html templating languages so it's a little bit different but uh yeah that's what i try to do as much as possible i don't know angular so i don't use angular is using bootstrap recommended i i'm not i don't um i see for anything like bootstrap like tailwind i think they're good tools for what they need to do but it depends on what you need to be doing and if css is something that you struggle with and and is an important part of your job then i would recommend learning css and worrying about the learn css and then worry about all the frameworks and libraries and all that stuff after if css is like you do 10 of the time or 20 of the time and you just need to get enough to get something to work then things like bootstrap or tailwind if you're using them properly especially like tailwind if you're using like the just in time thing they have you'll see it's jit so it's just in time so like it helps with your workflow a little bit but then also using the purge css at the end so you don't end up with this giant css file for some minimal file like you're following their documentation you're doing it properly to have a small file css file at the end it can be a very useful tool in it maybe you don't need to learn all of css because it's not a big part of your job if that's the case then use those tools that's fine if css is a big part of what you're doing then you probably want to learn css and then if you know css really well those other tools are much easier to learn and use you just omar you just got gotta build stuff work on projects sagnik i don't know any back end no i won't say i don't know any back end but i don't know any i don't know enough back end to talk about it let's say it that way i mean david the the thing for me for the internet explorer like i'll use that supports for certain things just so it doesn't get included in that um which is your future queries and then i focus primarily on like for internet explorer i just as long as they get like a minimum viable experience i'm happy like they don't need the finished layout in my world if you're in different situations it's a little bit different but hopefully most people don't have to worry about it anymore yeah tables are terrible and table layout fixed table layout fixed i don't know what that what's table layout fix do i haven't i've you'll notice i don't have any tutorials on using tables and styling tables there's a reason for that i hate tables they're a nightmare making them responsive is just so hard yeah i use geocities definitely use geocities but having a timer or not a time to the counter to know how many people visited your site start twinkling star background i was all over that stuff eliak yeah i mentioned it a bit more before so i won't talk too much but i did i do know javascript i'm just not an expert in javascript a century ago i'm not that old yet am i how do i chill between coding projects um i don't my kids take a lot of my time it's not necessarily chilling but i have my kids and my family that i spend time with um i brew my own beer started that up again like a few maybe two months ago um [Music] i do i don't know i like picking up hot hot learning new hobbies and just like learning enough about it and then just finding a new some other hobby um with the family more like with my wife will watch netflix and stuff i don't watch a lot of tv on my own just because i don't have a lot of time for it i rather do other stuff most of the time uh like at lunch when i'm eating i'll usually put something on and then it takes me forever to get through anything just because it's i only spend like 20 minutes at lunch and then i'll go for a walk or something before i go back to work jacques you missed the challenge sorry we've transitioned to ama mode because i'm supposed to be gone and eating my lunch now but i'm still i'm still chatting around here will you be doing front-end morn tour challenges yeah i did one a while ago but i'll probably do more of them nikhil yeah have fun with it uh with taiwan i don't know i've never used tailwind for that i've i haven't done a lot of deep exploration with tailwind it's why i don't like commenting on it too much um but i wasn't i just never got in what i did do because i wanted i wanted to have experience with it so i could at least comment on it um i i get why people like it and it's just not my cup of tea but if it helps with that i could see that being nice hamad why does content move out of the parent when you use flex flex won't if flex by default has flex wrap on and if flex wrap is on and the content is bigger than the parent it will overflow out the side of the parent so either putting flex wrap on or it could just be that your parent is too small i don't know i'd have to see the situation specific but my lunch i don't even know uh what did i have for supper last night oh i made pizza last night so i'll be having some pizza for lunch i need to start my own my own brewery now my beer is not that good maybe once i get a bit more practice what what else do i do apart from this youtube channel uh nowadays this is this is i do this i make courses i try and learn as much as i can about css and all the new things happening with css and well i mentioned a few other things but this is my my job now if you mean for that um i do a little bit of i i i've actually just turned down a few contracting things because i don't have the time for it um but i used to be a teacher i was working full-time as a teacher for six years before that i was freelancing making websites and i was also a designer so a little bit of stuff and even when i was teaching i was freelancing for a while too what is my sas build workflow i'm going to have a video on that it's kind of hard to just talk about it so i will do a video talking about it though in the future i'm it how do you i mean i just try my best i guess but it's easy i mean for me it's a little bit easy cascading style bruise like that for me it's easier to keep up with um because i can this is my focus like literally if you're working full time it's a little bit harder to like be keeping up and working full time when my job is to teach people about it it makes it a little bit easier how do you avoid overflowing grid even when parent has a fixed height i wouldn't give anything a fixed height and then you don't have to worry about overflowing grid i don't give things fixed heights that's my main my main thing because the content the content can shift and change and everything so eliak yeah i have some content on youtube for xd and figma i haven't used them a ton i haven't used xc in a while actually in figma every time i go ever since they changed it they've updated stuff i'm just so lost in there now because i don't use it enough for big screens to or focus on max i mean yeah you don't you don't want to make thing for responsiveness like after a certain size um things sometimes like devices are going to cheat sometimes and how they display websites and stuff so like if you're putting something on a tv it's often not just taking like this little 1440 thing on like a 50-inch screen it actually like it sort of acts as like a zoom feature on it a little bit um so i wouldn't stress too much anyway guys i gotta go uh do you assassin i use sas in probably 95 of my projects if i'm working on a project it's usually with sas actually um michael uh tutorials i'll do css just because i want to focus on what we're learning in that tutorial and not worry about how sas is working but if it's an actual project i there's just so many nice things and i i don't rewrite all my mixins and media query like in this one i started with a template or not a template i started with stuff in place but that's because that's what i start with every time i don't rewrite that ever i just take it from what i have a starting repo that i use as a template i'll be doing a youtube video on that eventually actually with material ui mansory i don't know because i don't use material ui if it's inside a grid i would just do in a line item center and they should center themselves or an aligned content depends on how you need it centered all right i gotta run uh my favorite sport my favorite sport to do i said i'm gonna run and then uh my favorite sport is to watch on tv would be american football or maybe hockey uh depends my favorite i'm in montreal also my favorite teams montreal canadiens which are a hockey team um by far like easily my favorite team to watch my favorite sport like i was gonna pick a random game and sit down and start watching it and i don't care about the teams then it's american football hockey i feel like i i'm more invested in the team uh formula one as well i'm a big fan of formula one it's probably the one i watch the most actually um and it's the only one i'm well yeah it's the only one i'm watching a lot of these days uh since the season started again uh favorite sport to do would be skiing that's probably the only sport that i do but yeah i need to go eat now so i'm gonna see you guys all next time thank you guys all for coming and hanging out for me this video will be available when i go offline it should i don't know how long it takes for youtube to process it but as soon as i hit stop it should be public but it might take a while for youtube to process and then eventually it will be available but uh yeah i'm gonna head out i'll i'm gonna i don't have an end screen anymore i i haven't been used streaming on youtube so i cleaned up my obs i keep forgetting that i'm there on the screen because usually usually we get the nice background that's there um i didn't i don't have an end screen so i can change this one one second i'm still here uh thanks everyone thanks everyone see you next time there we go and we can get some music going in and i am off to eat have yourselves all a wonderful afternoon and or evening or wherever it is for you guys and yeah bye this is do foreign [Music] so you

Channel: Kevin Powell

Views: 32,682

Rating: 4.9673204 out of 5

Keywords: HTML, CSS, #teamkevin, #teamgary, Gary Simon, DesignCourse, CSS tutorial, HTML tutorial, HTML CSS challenge, web design with HTML and CSS, creating a page with html and css, creating a web page, create a web page, vs code, html css vscode, sass, scss

Id: YRY_S9JIoQI

Length: 208min 29sec (12509 seconds)

Published: Mon May 10 2021