Having fun with CSS - styling stylestage

c hello everybody i think i'm i think it's working my sound seems to be on uh first time i do a live stream in a really long time so please let me know uh if everything is working i'm gonna try and keep an eye on the chat as much as i can but it's off to the side for me um but we'll do our best it looks like there's a bit of a delay because i'm watching my studio there to see but we'll see there we go okay it seems to be working um so if you can't hear me or if there's anything weird just let me know uh but i think everything is going all right so what we're going to be doing is i'm going to be doing this style stage here and what i saw this uh posted on um andy bell's newsletter which i'd recommend you check out he always posts some really cool stuff and i checked it out and it made me really happy because it's based on the idea of the css zen garden here and if you don't know the css zen garden holds a really dear place in my heart i don't even know when they first created this but it was this really it was an idea to show people what css could do the beauty of css design but it was a long time ago uh but you download the html file and then you'd make your own design based on their template so here just some let's just go look at a few fast ones here at the top and you can see it this is all the exact same markups the same html for each one of these and people would come up with different well that's a nice one people would come up with different styles for them and make them look unique even though it was all the same html the rules of this were you were not allowed to touch the html and as css progressed a lot of really cool things came with this but i think it's slowed down a lot i don't hear a lot about the zen garden even though it's really really cool um but here we have um by stephanie eckles we have the uh style stage so style stage is the same idea it's inspired by um you can even see here it's um inspired by the zen garden but with a bit more of a modern take on it if you don't know stephanie she has this modern css solution site which looks at modern as it says modern css solutions for old css problems um i'd really recommend checking this site out actually there's lots of really cool little tricks and stuff in here so i definitely would recommend checking out her site um so what this is is we have this page we're gonna have all the markup for it i've already downloaded the html and um with this html what i'm going to do is we're going to make our own styles for it and i haven't planned anything usually whenever i do tutorials i always plan stuff there was a tweet um yesterday or two days ago from dev ed where somebody actually complained about um things not um that they had they realized that he'd pre-planned a tutorial and all the time that's what i do but in this case because we're not looking at like let's learn this one topic i figured let's just have some fun with it i want to have fun with you guys um so what we're going to do is just jump into here and have some fun with css so i'm just keeping an eye on the chat as much as i can but it's going by really fast the last time i did this it did not uh have so many people here there's 200 people here now that's really exciting so thank you all for joining me this should be a lot of fun um so what i'm going to do is i have it opened here already in vs code and you can see there is quite a lot i've taken a quick look at it but i haven't done very much i haven't looked at it a lot um i did notice there's containers and there's a few things so actually i think maybe we'll start with that and we'll just look at what we are starting with and then we can start writing some css for it uh so actually your style title i don't have a title but i'll put my name for now just so i don't forget that kevin um and we'll fill this out a little bit later but style stage a modern so here we have a lot of containers we have a body we have a skipped link at the start so that's good we have our header which is has the heading stuff we have our container inside of there and actually just before i go further into this to say that a lot of the time people like creating things from scratch my tutorials usually i'm always doing things from scratch in the real world not a lot of the time you're going to be doing something from scratch especially if you're a junior dev or something like that usually you're jumping into existing projects so to be able to analyze what's actually exists already and then to make modifications or if you're doing theme development or if you have to work with wordpress you don't get to touch the html um unless you're really going and making your own theme but a lot of the time you don't have that you're sort of stuck with the theme that you have so being able to look at a layout or look at html and figure out how you can style it the way you want is a really good skill to have um so looking in here we have an svg that's probably the logo i'm guessing uh or is it the github link github link we'll check that out in a second um but we have that at the top we have a navigation that's good and it's all with uh these guys um they're anchor links so it should bring us to the right section then we have a main uh you'll notice the name has a tab index on it which is good for accessibility reasons um and it's negative one the negative one is just so you don't accidentally end up like it doesn't put it in the wrong order um yeah another container then we have article about and then in the article we have a section and you'll see here i have a container but inside this section i don't really have any um classes to go by so same thing here i don't have any classes so this is where we might have to get creative a little bit like here this ul i probably is it the only one that's my nav so that one at least i can style differently and again there's no classes here so we're going to get a little bit creative with our selectors but that's the fun of this stuff um is having to get fun article container h2 paragraph we have another list no way i'm just looking through here quickly to start just seeing what we have okay and actually down here in the profile we have lots of classes that we can use because we do have a list but this one has um these lis have classes on them so we might have to get something interesting i don't know if we're gonna finish styling this whole thing up but we're going to get through as much as we can i'll be going for a few hours for sure pidge footer so nothing too complicated but again it's a lot of semantic accessible html and the css we're going to try our best with that um and yeah let's dive into this and see what we can do with it so the very first thing we will need i am in vs code and i will need a css file uh i think it's style is it style or styles style dot css they just had it right there and just to make sure everything's working uh let's give my body a background of red and let's turn on live server oh no i opened it with the wrong file that's okay let's go back to here turn off live server there's probably ways of getting around whoops don't want that live server off go to here and then turn live server on there we go and i have a red background so i know it's working i have a really cool extension called power tools for windows which lets me quickly set things up like that we don't want a red background obviously so we can get rid of that let's just see what's going on in the chat really quick uh the tab index below it's about like if i'm on here and i hit tab um it's going to select the first link if i hit tab again it's going to select the next one and hit tab again it selected my main now and if i hit tab again it's like it jumps through all my links so you can navigate a page um there'd be buttons anything oh it's buttons and links pretty much form elements so if you add a tab index to something you can actually make it a tab selectable item so for people that navigate by keyboard it can be handy having the main as something they can tab to so it doesn't skip all the content when they hit tab at the end of a navigation let's say but it's a good idea to usually if you're adding a tab index to something to put it to negative one because if you give it a number it's gonna like say here i had like one two three and then i gave my main a tab index of two it's going to go one two and then it's gonna jump to my main and it's kind of awkward so just the negative one keeps it within the flow of the document pretty much um i also don't really know exactly what i want to do here so i'm going to pull up a few not bad i want my color space we need some color colors i like this one a lot these days but there also is coolers that's what i call it i don't coolers.co i'm guessing it's what the name of it is uh if you do need um color themes so they're both pretty good uh this one's really a random color generator you hit spacebar oh i saw a nice one but i can't go back i don't think oh you can because it no you can't it generates a url each time though um but you can also lock colors in i think you can add and remove colors now which is new whereas this one you have to start off with the color so if you know what color you want to start with um then you hit generate and it gives you a whole bunch of different color themes and stuff so it's a nice starting point i just want one color that i think is going to look good and i sort of like this turquoise so i might go with that and maybe this dark one but if you've seen my color video um i'm really big on trying to uh you know not to use too many colors especially at the start and we're also going to open up google fonts uh i think i'll start with my google fonts actually [Music] what do i use for a css reset i'm gonna do a really small css uh that extension that i used uh mr for windows it's um look up um windows power tools actually i'll open it up uh power or power toys sorry power toys it was actually someone commented on one of my videos about this there's a whole bunch of really cool stuff it can do but what i use is fancy zones so with fancy zones i use it just for youtube pretty much but um if you're like a power user i'm sure you could use a lot of this other stuff or you can set up like windows like arrangements and then uh when i hold shift and i drag i can it'll pop into one of those arrangements automatically so really really cool and you can edit create as many zones as you want you can see they have lots of other stuff that you can do with that too so that's power choice it's just something you download it's from microsoft it's really cool um i just want to get a nice saucer font right now which are all the ones at the top i think i'm going to go with maserat just it's a little bit of a big font like um the characters are very wide on monsterat but it is a nice font or do i do roboto or source i use source i use oswald a lot i like oswald because it's really narrow if anyone wants to uh oh font pair is a good choice i want to pair let's see what we can do uh no so font pair is a cool site just because you get actually another one that i really like is type spiration i might have spelt that wrong but hopefully it comes up this is a really nice one too um this is by rafael tamal and it's cool because it also suggests colors so that's always handy that you get both and they're a little bit more curated i'm looking for one just i want something simple you know it's always two fonts or most of them i think that's still two fonts i want something let's try this one i like pt saw cc also gives color theme suggestions and what he did and i think you can even download the css and stuff or maybe he's changed the layout here a little bit so it's a little bit different than it used to be um but maybe we'll do that pt says narrow and pt saws and i'm going to sort of um pt songs so i want you not download i want just let's just do that and the bold uh let's describe everyth i don't want bulldog let's describe everything for now uh we're not gonna go for um the best performance at the moment just because i don't know exactly what my styles are going to be so we're just going to add everything in hit embed and i can copy u and bring that right here and then we'll grab these and come over to here and uh let's just do a bit of basic setup uh i want my star star before star after a lot of the things at the beginning of a style sheet i don't type every time because i have like sort of a default that i always use um but we'll see if i can remember everything i do box sizing border box just because that makes our life so much easier for sizing stuff um body we want a margin of zero and we'll do my actual bodies that's fine here i'm going to do uh root i want to create we're going to be using a lot of custom properties in this so actually let me just put those there for a second um my two custom properties that i'm going to have for my font so i always um prepend with ff for font family just because in the long term it makes my life easier um i'm just going to call it body it's not the best name in the world but um body just because they're both sometimes i'll do like serif and saw serif but in this case they're both serif fonts so we'll do ff uh heading and we'll put in the other one we'll turn on word wrap here just so we can see exactly what's happening um i just saw a comment about uh whether this would be a video or not later i think as soon as it's done youtube automatically puts the live streams up so if you want if you can't watch the whole thing you can definitely come back and catch the rest of it later uh so font family here can be my var font family body i want to also put my line height up so just to show you actually that's where is my site this one uh i'm gonna scroll down a little bit so font family i want my line height to be like 1.6 1.5 1.6 is usually where i start it just spaces things out makes it a lot easier to read font size too font size 1.125 ram which should bring it up to about 18 and even i think i might go a little bit bigger something like that i think will be better for what i want it's lots of text on this page we don't want a tiny font size why make people struggle it also depends on the font completely and here i think we have font weight i'm going to call it normal which is actually going to be 300 and font weight actually does pt songs we're only bringing in 400 and 700 never mind i'm so used to using a light uh font weight bold will be 700. um it's a little silly because the font weights are 400 and 700 anyway but if ever we change the font and we wanted the normal to actually be 300 it's just the way i sort of fly a little bit um so it could be like if i have this in 100 different places i change it once it's going to change everywhere and it's not any more work so i like doing it like that and we'll come in with our colors color primary we'll do whoops we need a double hyphen for a css variable if you don't know css variables they're just a way to store um things that you plan on reusing so we'll look at an a quick example of that in a second uh font pair no i was on this one do i steal this color no i want something a little bit different i'm gonna just go with this one for now but we might modify that a little bit um so that would be my primary i'm gonna do a color light which is actually for now just gonna be fff but we can always change that and a color dark which will be my zero zero zero but again we could change that a little bit later um you can also do like i've seen some systems where you have like color primary uh and then you have like a scale so if i wanted maybe we could do that it's not something i do very often uh but we have this is primary 400 so it's sort of like with font weights right you have four 400s your default your normal um so then we could have a color primary 300 which would be this one and just because they're all blues like i don't find it makes sense color primary we'll just do 500 or whatever um it doesn't make sense to have like primary secondary tertiary and all of those when they're all blues my number system here is going to be pushed to the limits this is also where i'm not using sas i'm just doing css but sas could make this a little faster but that's okay we're just doing regular css today one of these days i'll probably do a live stream with a sas project instead um just i haven't done sass on my channel in so long now that i do think it would be worth uh jumping into uh color primary 100. and you're going to say it might be really long to write these out but any decent code editor these days the nice thing with it is let's go back to my let's go back to here um the nice thing with these is now if i wanted to set a color which i'm not going to use any of them this one i can delete um if i came on here and i said color is var color and you can just see it gives me my list so it's not like i can just choose from my list or even i don't even i could just do color 100 and it it it's smart enough to know which one i actually want it knows i want my primary 100 so you don't actually have to type the whole thing out every time so if i did that everything gets changed if i switch that to 400 it's referencing back to here so that's what this is all about um so actually what i'm going to do next is my let's do my h1 h2 h3 font family can be var uh font family heading cool um i don't again i'm sort of shooting in the dark here for the design we're going to be designing this live i might do some keyframe animations on this one i'm not too sure what i'm going to do um i can't say your name really sorry about that i'm just reading some comments so just let's just look really quick uh like tailwind i guess like variables are kind of like tailwind yeah you're you're getting a whole bunch of stuff ready too and just a whole bunch of classes really that pre-exist like they've already created a whole bunch of stuff so here i'm just setting everything up the way i'd want it to be but then you get to use it how you want so i see someone saying blue one blue two blue three that makes sense the only problem is if i decide to change away from blues then i'm sort of stuck with the the colors that i have uh like the name so then you know if you had blues but then you decide to change the green your name's a little awkward so things like this can work um someone's asking about what root is root is it's effectively just targeting the html element it's the root of the document which on any website is your html svgs it's a little bit different but it's targeting your html element it's just the specificity i think i said it right is a little bit different on it it's a little bit higher it's just become standard practice to include the custom properties on the root it's where people expect to see it and apparently chrome has optimized custom properties for these um if it sees a custom property in the root and that never gets changed they've done some sort of optimization that just helps things go a bit faster i don't know exactly how it works but um we're also going to see i'm going to do these are root the custom properties are stored in the root and the reason we want them in the root is because let's just say i put a custom property in my h1 so you can you can define a custom property anywhere right you can i can say uh i don't know my custom prop and we'll just say it's red and then here my color can be var my custom prop and they're all going to change to red the only problem is now if i went on a paragraph and i said color is of our my custom property it's not going to work because it's not it this is scoped to my h1 h2 and h3 so it can't escape out of that it's there it's stuck in that scope um whereas if i do it in the root it's a global scope it can be reached by anything i want so that's the advantage of doing it on the root you could technically put them on the body and it would have the exact same effect but it's just become common practice to put these on the on the root itself and have it on the root and again chrome at least maybe the other ones to have optimized things a little bit uh juju i saw something with sas paradigm shift two asked um is sas your standard day to day workflow how often do you make websites uh with just plain old css uh sas for projects i'm working on i use sas definitely 100 um it's i love it even with custom properties which i use in my sas projects now like the reason i got into sas was because of variables and then obviously it exploded from there i learned all the other things you could do and it's exciting and it's fun and even on small projects i think sas is worth it but the larger the scale the more powerful it becomes um but these days i am i'm writing a lot just a regular css uh one of the reasons i changed from sas to scss which is just a syntax difference for those who don't know scss is sas but just it looks like regular css and it's because whenever i would switch between the two for my demos i teach in the classroom too so i'd be doing demos in the classroom with just css i kept forgetting semicolons so one of the reasons i switched was that and also because i was doing videos on youtube is i wanted people who weren't familiar with sas not to be so intimidated but lately i haven't done a lot just because i've been really focused on certain other things but any big projects i do even here on youtube i'm going to fall back into sas just because it does make our life a lot easier code stacker yeah i said it right i've been focusing a lot on that but it's sort of ruining my uh my brand if i can say specificity correctly there we go two in a row i i'm pushing my luck a little bit now my vs code manish is asking my vs code theme it's um adam dark one i used to use adam i came over so i just used it's part of it's one of the options in vs code but you'll notice my brackets are different colors um and in my html too i think or maybe not in html uh but in css uh it's different and this is especially for sas like if i did things like that and it's also in javascript each bracket's a different color so i'm using um color where's my extensions uh bracket pair colorizer and there's a bracket pair colorizer too now that's out so it just styles your brackets so in sas where you get a lot of nested stuff or scss i should say it makes it a lot easier and if you're writing a lot of javascript it can make your life a lot easier too is there an app to have a css cheat sheet i don't think so sorry eric there might be one actually i just don't know of one uh sas mixon's rule guy yes they certainly do prettier i have prettier um it's i'm not i don't it's on now but uh prettier is just for formatting and it's more uh yeah it's for formatting and also you can have it set up for different projects to make sure like a whole team is um getting things to be good so say somebody likes writing javascript with no semicolons but the project should have it when they hit save it will like inject them all and stuff like that uh oh setting up a font scale uh for example with viewport i'm gonna be doing actually we can set a little bit of that up now who suggested that um i don't with sass you can do a little bit more with the font scale with custom properties is there a good way to do it there was let me just find that comment again a suggestion how this is from hands a suggestion how about attempting a scaling font setup with this one for example using viewport width in your basic font size there's one problem if ever you're using i thought svg is really big if ever you're using um viewport width for your font size there is a big issue with it so let's just do it on my this is probably an h3 h2 let me just see h2 color blue okay yeah so here if i say font size is 10 viewport width which is cool because it's going to grow and shrink with my viewport um so i'm in firefox i forgot the shortcut for the responsive mode though it's going to grow and shrink that font automatically the only issue is um if we are if somebody's on a page and they've zoomed in for their text notice how the fonts are actually all zooming in except that each two it's not changing on font size as i zoom in and out um so one of the issues with setting font sizes with viewport widths is especially if it's like your body or something a the font size can get really small like if you did this on your body let's get rid of this red color too it's really bothering me um on body if i did my font size as say five viewport width and that's even really big here three now i'm going to show a solution to this in a second though let's say that's right it looks a little bit big to me right now um is it m that is shift control m opens up responsive mode it's only in firefox because i think in chrome you need to have your dev tools um but the problem is if you went on mobile now you end up with this where i can't read it like i don't even want to know what that's computing to and if i try and zoom in on that it's not going to show me exactly now um but if you try and zoom in on it it's not gonna work it's not actually gonna get bigger because it's really based on the viewport now what i've been playing around with a lot lately is instead of this is using clamp clamp's amazing i have a whole video where i look at it um but basically you can set a minimum a ideal and a maximum size so say i want my minimum to be 16 or 18 pixels so i'd be 1.125 rem then i want it to grow at 10 viewport tens kind of big five viewport width and i want a maximum size i'm gonna make it big just for example's sake um so now what that's gonna do responsive mode um i have it's gonna stop growing at one point uh there it's not actually growing the font size it's gonna start shrinking my font size let's just i'm gonna just turn off that svg for a second svg display none just so when i'm scaling up and down it's not moving so much i'm going to the top here um so as i go bigger it's getting the fonts are getting bigger and bigger but at one point the fonts will stop growing that's probably too big whatever let's just leave it and as they go smaller at one point they'll actually stop shrinking so like this is a minimum size maximum size maybe two will be better so just it we can see it stop growing there you can see it stopped growing now and it creates this middle ground where it does grow and the advantage with that is if i get out of responsive mode it actually will scale the fonts up if they zoom in or scale them down if they zoom out um just because it it's sort of using a combination of both as far as i can tell i don't think this keeps the same problems the viewport with unit units have but also maybe i'm not an accessibility expert so it might be worth checking out and i'm pretty sure um clamp has really good support now it's in safari yeah so as long as you're not too worried about um internet explorer you're probably going to be doing okay here it says i mean there's a few here that's saying it's not working yet but if you're you know you could easily just do something like uh font or even like what i have here you set the font size twice this would be the one that's going to get used in browsers that don't support it and then it'll get used browsers that do support it would use this one and you can get like your more ideal bot you know font sizes and stuff like that if you wanted to do it so that is definitely an option these days i think that we could use [Music] animations i have a video already on clamp if you look it up uh i don't know what it was called exactly um i definitely i have a video that covers clamp and also there's a min and a max too um that i look at both of those so i'm going to leave this but i don't want my body size to get that big maybe we'll just do like a 1.25 it'll be a small difference um but whatever i'll put that just so we have it in there um yeah i'm getting distracted a lot of people are asking for animations just so you know i can put in some simple stuff i'm really not an animation guy um i did an interview with the css masters group uh you can find that on youtube i linked it in my community posts thing and they asked me about that too and one reason i don't cover animations a lot um simple stuff super good with but when it comes to like these cool complicated really awesome animations that you see on stuff like codepen um yeah they're better than me uh i'm just gonna do some global styling for a minute and then we'll come back and seeing some other uh other things in here but um color here we can give these a color of our color 400 i guess that's three i just want to see what that looks like it's a little maybe we'll do the five actually i want to try something two here uh i'm gonna actually i'm gonna do the 400 i'm a little bit worried about the contrast to be honest but what we'll do is also font weight can be var font weight bold um what i was thinking it's something i haven't i'd have to look it up actually i wanted to do a video on this but it's not something i've actually used um so mdn anytime i'm researching anything this is how i find it um text decoration because text decorations have come a long way and this is one of those things that won't work on everything uh not color there it is so we can change the color of our text decorations which is cool so you can keep a text decoration uh so text decoration of uh decoration color let's just see if it's working i think it would work in firefox let's go check yeah isn't that cool and i think you can google like a lot of stuff on here um is it line for the thickness oh it is just thickness what's line do then oh yeah okay you can do different types of lines and you can add multiple like you can have two lines and stuff now it's kind of cool uh text decoration thickness is it just a number yep so then we can do a text decoration this is one of those things where as i say a lot of the time when you're watching my videos i've prep stuff ahead of time i know what i'm going to be covering so it looks like i know everything about css it's not always about knowing everything it's about knowing that these are possible and then being able to find this like how it works um this is obviously a really simple one i don't really have to read the spec um but you know it's a there we go maybe 0.15 and you can get a thicker underline which is kind of cool i don't think i'm going to do the red but maybe my color here could be the like a different primary 200 or something just so it oops not pumped what am i doing kevin uh of our uh 200 it's not gonna work color two there we go it looks kind of and i think can't you control the distance too or am i crazy on that one skip skip inc maybe you can i thought you could actually move the positioning of it but i could be wrong thickness style line color maybe i was sure i'd read something that you could move it but maybe i'm wrong so that's okay uh i'm just going to make this a little smaller than because i find it's a little too thick so something like that i mean it's not like a big thing but it's kind of cool that you can have a different you can actually control the thickness and you can control the color and if it doesn't work someone's on internet explorer okay it's not the end of the world that just means that these two don't work and it looks like that so it's not like it breaks the site they don't have a bad experience or anything so you don't even have to worry about those browsers if it's something that isn't working in them underline offset oh thank you was that ragnar is it just underline underline offset text underline offset 0.5 m that's gonna be a lot it works oh nice okay so i'll bring this thickness back up thank you for that text underline offset and that looks a little bit better and actually it's kind of cool um because i think let's just bring that down see how here it's skipping the y the reason we do that's readability i know it looks kind of weird when you get these skips like that um but it it helps with readability um but if it's big enough it realizes it's big enough like it's far enough away and it doesn't have to do it now i'm going to stick it like that i want it kind of close i don't want it to like be protruding into those other ones and actually i could be wrong on this but let's try a cover a focus always do a focus state um and don't just get rid of a focus state you can't really see it as much in firefox as you can in chrome with that glowing outline but if you are getting rid of the outline you know add something else to it um i think some of these you can animate i think um so let's just do let's just start with uh text text decoration color uh i just want to see like i know this is going to work but can you transition all to 50. yeah it actually does you can actually just for fun i'm not saying i would actually do any of this but we're here to have fun with css ah it works i wish i could make it grow up instead of down but then i wonder if i take the offset i haven't i have a plan let's see if this works uh the off the offset i'm assuming i can do a negative value this is where there's a line height property that we don't have yet or a line height unit that's coming um but i might be able to use something like the x height no the x height is not going to work whatever let's just try uh negative 1m i just want to see oh but i want i'm gonna have to turn the skip off if i do this text underline [Music] what was the skip one skip and uh that's not working uh my idea is not gonna work i was gonna have it like grow up but even i might even end up covering text decoration skip what i'm sure firefox supports that though because it was working one second if anyone knows um what i'm doing wrong here text decoration i want my hover text decoration skip doesn't work deck go i might does it decoration skip firefox most other browsers are supporting it text oh skip inc maybe i need that one skip ink oh there we go that's working and it is going behind okay so i i don't this is not necessarily a good idea um but i wanted to have fun with css so this is having a bit of fun with css so the color here i'm going to do var color uh let's go with my dark one my color itself color will switch to fff and the thickness 1m 1.2 m so you know we could do a little it's kind of awkward eh when it goes off there's like a little weird glitchy thing going on there uh i think it's because the skip ink actually because it i don't think the skip ink can yeah there it's the skip ink that's causing the problem which is a bit of a shame because i'd rather keep the skip ink on um but to actually get that to work i need a little bit more thickness this is something you could probably do with a pseudo element as well um and actually the performance wise pseudo element might be better here because you could just do um a transition and then do like a um yeah scale and just scale it up and down um and that would probably be better for performance reasons and also there's no like padding on the left and the right ideally this background would actually be a little bit bigger um on the left and the right but with an underline we can't do that um so i mean yeah that would probably be a better solution in all reality but it's still kind of cool that we can do that another thing is anytime i have to do a transition all it's not usually a good idea uh you don't want to do transitional you really want to be specific on the properties that you're doing i'm going to leave it just because i want to keep moving forward but really i should only be doing well see that's the other problem here is i'm doing the color the thickness and the offset so i'd want to make a transition for each one um but and again for performance reasons probably should i do it i'll wait a second and see if people want me to do it also with the pseudo-element let me know you don't have to use someone asked [Music] wank asked why do you why do we have to use var um the reason that we use var yeah please don't spam if you have a question i might miss it but um i'm not i don't know what you mean by are you taking classes i'm gonna have to one second if you keep spamming the channel i will have to stop you from spamming the channel so please stop i don't know what you mean by are you taking classes so um i can't give these a border or a radius either because they're just an underline and actually here i'll show you what i mean do the pseudo element suit element would be great okay we'll do with a suitable element uh so i'm gonna we'll just take that off actually uh whatever um let's just do a we can turn this like that text decoration we can turn off and actually that means here i'm just going to comment these off but i'll leave them there that was fun and there's definitely use cases for those um and we're just going to put the text decoration to then text decoration decoration none um so if we want to do it with a pseudo element the first thing i would do is my a we'll do it with an after i guess a after um whenever you have a suit element you need to have a content i have a mini series on suit elements because there's so much you can do with them but by default if somebody asked me why we need the content and it's because by default content is off so that means the sudo element doesn't exist on the page um so it's a little annoying that you always have to do it this is where sas mix-ins are great because you can make a sas mix-in that gives you the first like three properties you always use uh automatically um but you need to have the content because if not it's on the page and it's because if they were on by default everything would have a before and after by default which it would just clutter up everything you know it wouldn't be doing anything but you'd come and look in here and there'd be a before and after on every single element and that would be really frustrating um so i'm going to do that i'm going to do a display of inline do i need no i'm just going to use position so position if you give a position of absolute oh am i going to use position i don't even know if i need position let's do display block first uh oh wait that might break things yeah that does break things we'll use position instead uh position absolute the reason it was breaking things a i probably shouldn't be trying to put a um position a display block inside an inline element first of all but because it was a block element that was being rendered inside my links it was creating a new line of content so we'll use position absolute because i'm using position absolute i will put a position relative on the links themselves kazzy's just asking if i'm going to be doing more live sessions in the future i'm looking at doing one a month now uh roughly as long as i have ideas for these things um i'll definitely be doing them i don't think i'm going to make it through styling this whole page so maybe we could take this back up in a couple of weeks and keep going with it uh because you know we're getting sidetracked but we're doing fun stuff this is the things i love doing and the main purpose was to come in here and have fun with css um after content position absolute is good another thing i might try and get to in this is the holy albutrous which is something i'm planning a video on for um but maybe we could do something fun with it i'm not sure if it would really work in this layout but if you don't know what it is holy albatross css look it up it's really cool we can do a lot less media queries with it it's by hayden pickering um but i do have a video planned for two or three weeks from now that will be on that okay wow it's weird having a chat room i get really distracted and uh off topic on stuff so content position absolute uh left i'm actually well we'll do a left zero right zero for now which means it'll be the same size as the link i'm gonna give it a height of i'll just do one pixel or two two so we can see it a bit better and we'll give it a background color of we'll use the same one i used before uh var color the dark one and if i hit save they should show up there they go uh they're all there except they're on top so bottom zero there we go and oh wait i did the 200 last time i think right there we go um now one thing with this is you wouldn't be able to do the skip link so if it is going through your letters i don't think there's a way of um fixing that with uh cs with um pseudo elements um but the idea here is i've generated those they're coming in and then on here what i could do actually the color here we can put it back to white and turn that back on um and then we also want to come in here i'm just going to copy this and uh whoops we might as well do it on both of these at the same time uh the after what's so on hover the after is going to change i see in incorrect this is pretty much css in zen garden um just so if you missed the beginning it's called style stage it's a new version of css and garden pretty much so we will get to styling it up in a little bit um but we'll come back to here for now um so we have that then what do i want to do um transform the scale why that's up and down right i always mix that up and let's just do 200 i don't know what's going to happen here let's try that is no that's not the right thing is it no not oh it is that is getting bigger but i need a lot bigger wow i didn't think of that one maybe there's a better way of doing this you can see it is working though you can see it's getting bigger i'm also going to give these a z index actually a z index of negative one because the problem is right now it's in front of my text whereas now it will be behind my text um but two other things going to do is [Music] transition so now with the transition i can just transition my transform which is gonna have a lot better performance uh 250 milliseconds ease in out for now and i also want to do a transform origin which i can just write bottom and it should now it's gonna grow from the bottom it's a weird little hop that it takes the way and it's way too slow hmm what's with the little hop that it's taking the bottom is zero the bottom should still be zero it's only transforming from the bottom hmm i'll think about that while i fix this so here the left and the right i'm actually going to give this a left of negative 0.1 m i think and actually we can do the same thing for the right um just so now we can it gives it a little bit of padding on the left and the right which is nice um which is more of what i wanted what's that little pop going on i also don't like having to do just like a giant number here it is one where i could do instead of top what if i i don't have a top property but i don't want one the idea is you could i could actually like play with the numbers here i could have a top that's setting it right at the bottom and then just grow the top but again transitions transforms have better performance which is why i went this way can i do a scale bit without percentages uh i saw rizza's asking about um career in business um you can always come into the community there should be a link below this so there's um it's just a discord channel it's free to join anybody can jump in there uh you can ask questions for dev help dev tips uh but also there is even i don't have it open right now but there is uh well whatever no um there is a channel in there that's about business and stuff like that it's a little quiet but you can definitely ask questions there's uh freelancers and other people in there um as well um i just want to see let's keep going with this a little container uh i'm just gonna set a max width of 60 ram that's a little small whatever it's fine for now uh whatever margin zero auto uh we will do run it's a little easier for me and let's just see what's in a container and what's not in a container and this is where actually because it is text based i did a video on this recently so we could do 60 ch and it's really going to be based on the characters themselves and actually i start personally i like things like this where it's not too wide and remember ch is based on how many characters are in a line um so the nice thing with that too is if i come back to my font size or i have my clamp here let's just say i did make this be able to get to a bigger font size um it's going to change the width of my um what's a max width but it will like the the max width of it is actually changing based on the size of the font um which is kind of cool except my font's never shrinking down there now it's shrinking no it's not really uh what if i i'm trying to think if there's a way i could really get that to kick in but whatever the let's just say i'm going to take max width off for a second and just set width just so we can really see this kick in uh what i mean by it so here it's there but as i shrink this down like i'm getting side scrolling now you can see my line my lines like here it's ending at the word that no matter what i do because it's looking at the the ch is like character width pretty much it looks at the zero character and that messed these up because i use percentages so i will have to change my approach on that a little bit but there's definitely maybe i'll use top i don't know we'll see but we can play around with that a little bit or maybe i just won't make the color white i sort of like that that it's not going the whole way up to be honest and it stopped jumping which is good um but now like i've locked in that line length which is kind of cool um but even or even actually whatever let's make this a max width again and that's really too big of a font size for me so something like that could be nice too um and again it's based on the length of the line itself which is kind of cool um and then we have a min width and stuff set on it but like that i think works pretty well and something really heavy tech space having lots of white space is a really good thing to have um so that can be kind of good i think what i'm gonna do is change this a little bit uh let's just scale it up by like 500 and my color here will maybe not even change can i still read that something like that can be kind of cool i might just stick with that to be honest with you it's not terrible i'll stick with that for now if anybody wants to give any other suggestions we can definitely look at them i think we're going to start looking at styling this up i'm just going to check on the chat again oh see that's when i was using my scale here as a percentage that's scale one would be the same that's why i was like do i need a percentage that would be twice as big right yeah that's why i was like i feel weird using a percentage here so you could definitely just do that and it's like that's 500 so if i did 10 that would be a thousand i knew i was doing something wrong there thank you chap so that could be a little easier too it's still not perfect the reason i'm not doing the height as a transition and again we're always developing on like high-end computers and honestly i think even like a low-end phone wouldn't have any issues rendering that transition um but in general you really want to try and style things that are um as much as possible you want to transition or animate things that the gpu can kick in on and it's really limited it's opacity and it's like transform and scale and rotate i think that's about it maybe there's one other one in there um but anything else it's the browser has to repaint things while it's doing it and because it's causing a repaint when it's doing it that can cause just in the it's a lot harder it's a lot more work for the browser to do it's a lot more intensive so on lower end devices you can run into issues with like crappy animations you're not hitting 60 frames per second anymore it starts shuttering usually for small little things like this if you're doing like a height transition no one's ever going to notice it so honestly i'm being a little bit nitpicky for that for sure but it's one of those things that um you know it it can help um you know we we do want to worry about performance and worry about performance of for low-end devices as much as we want to worry about it for the devices we're developing on so just to keep that in mind hans is recommending keeping the the font size here relative 100 um i would i always always always um create at least a basic font scale um just by sticking with rem for my font size so here my font size would be like let's just say six ram which is gonna be pretty big i'm probably gonna put a clamp on that too let's just do a text transform uppercase i've skipped some stuff that i'm usually doing i wish that was more bold to be honest with you but that's okay maybe we'll go a lot bigger well we'll have some fun maybe with that too um but the nice thing is because it's based on rem and because my body's font size is changing we should see when well let's let's just play with this clamp a little bit again because it's so small my clamp uh maybe we'll drop that down to a one and again we'll bring this up to a two just for example right now so as the body size starts to shrink oh whoops i would have to do that on the html element then there we go so now it's going to shrink there and then grow as well um because it's based on and i can get again if you're worried about browser support just declaring two font sizes and you've solved your issue um for big font sizes one thing that's really important line height let's bring it way down uh point it's a little bit too big now too let's go with the six for now um let's just take a look so that looks okay and then it should shrink a little bit there so you do have a little bit of a scaling action going but again here i would probably not go up to two one point five i think is even kind of my 1.5 is okay something like that could be good on large screen whoops on the large screen sizes it will grow up to that and then it will shrink a little bit at the smaller ones um it's not perfect and you could even build another clamp into this so here you could do a clamp and it's going to sort of have a compounding effect um so just be aware of that but maybe i do four ram 15 viewport width because i want to have a bigger influence and seven and that doesn't seem to be working font size clamp oh i forgot a comma so it should uh grow and then shrink and it has a bit more of a compounding effect you can see that this seems to be growing a little bit faster because the rems and the every uh oh it's also sorry this is a bigger number than my other one so it's going to grow a little bit faster i don't like that it's falling onto two lines and i don't remember there is a trick to pull things out of let's just see if i can do this with 100 viewport width i'm trying to do this based on memory so if i do that it's going to cause let's put a background on this so we can see what's happening background is white white pink so it's not too bad so the 100 viewport width means it's going to side scroll but then when usually i've done this for images i've never done it for a title before um but then we could do transform translate x negative 50 and i'm forgetting there's a padding margin 50 not quite oh it's because of the scroll bar it would have worked if not i think uh so margin fifty percent um so you can see it's it's broken outside of the container so i put container border red why not oh border red border red three pixels solid that would work um so you can see it is actually inside that container um but it's breaking out of the container because i said the width has to be 100 viewport width so if i didn't have that on there um it's just going to be smushed there because it has the giant margin on it so we use the width 100 to make it the full viewport width then you bring in your margin the margin is sort of setting it directly to the middle of the page and then you're doing the transform translate x to start it at the edge of the page over here it's a little bit hacky it's a little bit weird but it can be really really useful if you're stuck with something in a container like we are here that we don't want it to be in the container um so i think here i might actually just do one m on the top and bottom of it so we have space there and just do a text align center and again if i the reason i was doing that is just a big screens that was with my font size like say i even made this a bit bigger um we don't want it like here it can break outside of my container the only problem is we get this little guy here um because we're using viewport width and viewport width counts the space underneath your scroll bar so there are a few different solutions to that i've seen some that try and sort of play with it i'm going to do the easy one which is just uh overflow x hidden which is the easy solution and stops that from happening is it ideal no but whatever so we don't want that border and i don't want a pink background on there and it doesn't really do anything big but again whoops if i bring this up onto my big screen size now um it does let it slip out the sides so maybe even i could make my make that like 5 20. let's just see if that looks like so something like that it's gonna be okay at small screen sizes and then it just lets it be a little bit bigger um and even my container width i don't want to shrink it too small but i could make this like 55 maybe just to highlight that even more it's an interesting way that you can do something like that oh yeah um sorry i'm just looking at the comments i can't see the name because it's moving too fast but margin and then use calc negative 50 viewport width plus 50 uh that would work too where did i do that um so here let me just remember negative could i do that without setting the width or do i still need that i'm just remember let's turn this off and then here the margin would be what did you suggest calc negative 50 viewport width plus 50 i think it's the exact same result at the end yeah looks exactly the same so both of those would work um i think this one if it's someone who just stumbles across the code can figure it even it's kind of weird so either way it is a little weird if you had this in like a site that's not a personal project i would definitely leave a comment in the code to let people know what what it's doing i think that would be kind of important um let's come into here and keep styling this a little bit so container style stage i'm going to add colors and stuff later a modern that's an h2 and then we have my paragraph maintained by and i turned off my um github thing but we're gonna bring that back on we're gonna style this a little differently and actually one thing does that have a class on it it does um i came across this from andy bell recently which i really liked um all of this styling we could do oh man i'm gonna forget how it works not is it not i'm gonna have to remember how it works because i don't want these this has a class on it so i don't want this one to be styled the same and these two well these ones will have to figure something else out a oh man how does it work i never used it i just saw it and i said that's clever that's one of those things where always make sure that when you see something clever you're watching a tutorial you actually do it because when you see it you're like oh that's cool i'm gonna use that and then you never use it and then it's like three months later and you're trying to remember and you have no idea how it worked um yeah i really don't remember oh well one might come back to that after um not too many new comments someone asked if i work on one monitor for recording i only have one monitor right now i have my laptop on the side too um but i have my i don't have one of those sexy dev setups that you see all the time i have a really really basic setup um this is going to get moved and it's outside the container so that's why don't we just just do that really fast nav background can be var color i want the darkest one so that should show us where that is um and then i want my this i was about to do this ul because i'm used to sass uh i don't have any classes to go off of in here we go down a little bit uh they have the nav then the ul the li and all of that so we're gonna have to do this the nav ul will be display flex um [Music] i'm gonna do a really simple one here uh display flex list style none padding zero margin zero just get rid of all that and then my nav itself we can add a bit of padding padding 3m or something that's way too much um that's one amp wow okay hmm uh i'm used to having smaller font sizes what's wrong oh whoops that that makes more sense okay good um and then here i'm just gonna do a uh actually this should be all the way at the bottom just because i like keeping related things together uh display flex and then justify justify content space around evenly there we go i think that'd be good um then we want my nav a color can be just white for now i did i did a variable for that var color light again this is if ever i want to change my white i only have to change it once and it's going to change everywhere i used it um is that going to have that weird underline effect that seems to have disappeared which is good i didn't want it i might already it might still be there actually um i think what might be happening is it's because of the z index it's behind everything else um so i do want to give these a hover though uh nav a hover and have a focus um what should we do opacity just something simple for now um so we can see oh and now oh my goodness that's cool so see how now we're getting the the underline or when i didn't have the opacity on that we didn't have the underline uh does anyone know why that's happening i know why it's happening and it's one of those super strange things with css so i'm not going to give the answer away right away um but we'll see if i can see if anybody can get it in the chat i'm gonna put this eventually up on github yeah um actually after this is done maybe i'll put it up on github and then even i think what we'll do is in two weeks maybe we'll come back and keep working on it because i'm definitely not gonna finish uh and then i'll just keep updating the github repo with the updates that i make because i would eventually like to submit this um to their site but i'm not me i'm not actually already to be honest we haven't written much css and it does look not terrible for something with lots of text but we want to make this look cool not just not terrible not so yeah i want the not selector who said that a not class name styles everything because it's not even maybe it's even this can i do a not that's not going to work it was something where anything that ended up with an actual like if the cl if the or that's not going to work anyway it would get anything that didn't have a class on it any link that doesn't have a class so i'm trying to remember how we did that um i think what i'm going to do is focus on this top area for now yeah stacking context who said that ragnar so ragnar said this this underline showing up here is because of stacking context and it's exactly that um and what's happening is stacking context is uh you know when you're using z index and you're controlling how deep things are that's your stacking context you have a one and then a ten the ten is above the one but then you can also things get broken off into their own contexts so when you do um as soon as something has position relative and a z-index on it that's sort of on its own now and it's independent like it's you can't break out of that little bubble is sort of a simple explanation of it but one thing that's really weird with stacking context is an opacity other than one so if i had one on this it looks exactly the same but as soon as the opacity is anything other than one the stacking context is changed so this is its own stacking context now meaning the negative one zed index and actually maybe i could just leave it like that but the negative one z index that i used on that underline on my pseudo element it's getting pulled up into that link whereas before it was independent it was doing negative one so it was going all the way down and below everything including the background on my nav by the a having the a new stacking context it's pulling that negative one into its own little bubble kind of weird um but actually i might use this in my upcoming course because i was looking for good examples of stacking context and it's not often you run into issues with them but it's one of those things that when it does happen it's infuriating so it's always good to know that stacking contacts can do stuff like that yeah so ragnar's you know you're stacking context position opacity transforms and yeah there's a couple of other things too ricardo's asking if i always recommend the mobile first approach i always do it unless it's something that is only intended for desktop so i did a video a while back now talking about how i think mobile first is the right approach and a lot of people got a little bit upset in the comments saying well what if you're only doing something that's intended for desktop and it's like okay that if that's the case then obviously don't waste your time just make it look how it's supposed to so if you're doing like pretty much a web app that's going to be used at like industry level or for likes very specific projects that's only ever it's a dashboard that's only ever going to be used on a desktop computer obviously you don't want to waste your time worrying about different screen sizes so much but for anything else i always recommend it just because i find it so easy because you know if i take off my width here on my container and i have no width set on anything let's ignore my my thing you know this is now a responsive website it doesn't look good at big screen sizes because my text is going all the way across but it's responsive i don't have to worry about it breaking well my nav bar looks a little weird now too um but you know like it's it's functional it's going to do its job and then i can use things like a max width you know right away it's still working at small screen sizes and it's also working at big screen sizes it's magical um there are some things and i've used media queries that are for the other way around but in general i find it much easier to work that way i find you end up writing a lot less code that said if i'm designing something i'm opening up figma or xd or in photoshop whatever it is in the old days i would always start and i still always start desktop first and i go the other way because i find it easier to think design wise and then strip away stuff like let's do complicated and then strip away for simplicity but for coding purposes i find it much easier to start mobile first and work my way up and add complexity because i find i write less code that way and i run into less friction in my experience in doing it it takes a little bit of a mindset mind set shift if it's something you're not used to but definitely something i try and do yeah i wish who said that reigner again yeah i'm really looking forward to has uh we do have another one though that is around uh where is is this around isn't it nbn css is matches any isn't it is the new one the is yeah i think is um can be used is can i use can we use is uh would i do it like this okay not really i thought it had better support than that oh there we go yeah it's it's coming along but it's there's a bit of a mix up i think if i were to use is i would want to do it uh with um auto prefixer on which i'm not running right now because 95 support if you have if you're using the deprecated ones but if you're using only firefox and even then it's only it's still not there but so i'm not going to use that in today's project but i actually i have a video planned on like is what's the other one is it matches maybe mac no matches i don't think is implemented anywhere is it i don't remember sorry let's just i don't remember but anyway they're going to be very handy once they're a little bit more in use um let's just give this nav a bit of margin as well when i'm top and bottom zero left and right something like that could be okay and why don't border 0.1 m solid var color 100 uh border i only want top and bottom right and this should be bigger um so here border top and then switch that over to a bottom that's too big now i'm just playing with some spacing and having some fun with it something like that could be okay i want to bring in these different blue colors uh someone suggested i look up not i think not is super widely supported you can use not like i'm pretty sure yeah not you you're safe to use you can go back as far as ie9 so you're you're good if you want to use the not selector um so i mean not because i don't have a class but like say i could use the knot for one thing here uh whoops um so just like here on my when i did my links here i could have done after a i'm just trying to think yeah let's say i did it on this i could say not and then in here i could put the class of what was the github link uh link github good name uh so i could say link not github so this is my github link and that should mean that this pseudo-element doesn't live on that anymore so pretty simple um so yeah something like that is what the knot selector could be used for um there is another one i could do that would anyway we'll stick with that we'll leave that in there that could be good and by making this not work i don't have to add it to these ones um the this just because without the content existing on this one now this does nothing and it's not affecting anything so it's not like it's going to try and animate that we're going to turn that into a little bit more of something eventually i want to see i think that's my header actually so if i came just on my i'm going to come up my nav is in my header so let's just keep this a little bit organized header uh text align center yeah i wanted to do that that's my h2 i'm gonna do just because i think these are all h2s and i don't necessarily i only want to target this one only right now uh and because we have an h1 followed by an h2 here and that's obviously the only h1 on my page i'm just going to do h1 plus h2 and i could also do like first of type probably but this would work um so font size will be well we're doing clamps everywhere why don't we come in with the same uh clamp but here i'm going to make this say two to four i don't want it to be as big oh that's really big three that's still pretty big 2.5 okay that's a bit better uh line height will be one i also don't like you know we have we're i'm doing selections here so let's just come up over here uh body even selection color will stay white uh so that's my var color light and my background will be var color what's my darkest one 500 so it looks like that i think that looked pretty good there is i think you can play with opacity and stuff too on those it's very limited you can't style anything on the selection colors and stuff the one thing i have read is it's a really good idea for accessibility reasons on a light theme and i guess it would be the opposite on a dark theme i don't know but people read a lot by selecting so as you're reading along you're selecting and if you have a light color on a really dark background it can make it a lot easier to for people to read so for that you might not want to come in and do like a 200 or you know something like this that's going to be a really hard to read it looks a little bit nicer i actually prefer that i think as it just looks nice but to make it more readable you generally want to have a dark color maybe i could get away with the 400 or something just so it's not the same as my dark that i'm using everywhere i don't know if that i guess that looks like it would hit accessibility standards but just to make sure that the text is readable when it is selected manish outline instead of borders i don't mind here and normally i'd sort of agree with you i think that um outline is super nice the only problem well outline i guess i could overflow it off the sides of my page but outline you can't do it top and bottom you can only do outline on all four sides um can i teach react definitely not who asked me that vj no i'm not going to be teaching react i know the basics of it i've played with it i've done um some projects with it but um javascript's already daunting enough for me to teach i can make something work in javascript but i stick to css because it's what i'm really good at um i try to teach things that i know really well maybe one day if ever i have to dive more into it i will but for now it's not in the plans anytime soon um line height let's just do color at the top someone asked me about prettier earlier you'll notice i haven't set up vs code very well because when i if i come and i hit tab it's doing uh four spaces but i have prettier set up so when i save so color var let's just go with color i'm going to try the 400. um when i save like here if i have this really indented when i save it fixes my indenting for me also i have it set up so here if i do single quotation marks when i hit save they automatically get changed to double quotation marks i actually prefer single i just never bothered changing that setting because it doesn't change anything in my life again this is more for a the indentation fixing is just better for me but for things like ensuring double quotation or single it's just nice for on a project that everybody's code looks the same so making this either two or four is a good thing to have i just need to fix my vs code so my tab does two spaces instead of four and i recently got a new computer like three months ago and i just never fixed that and changed it because prettier does it for me anyway hopefully i got your name right um recommendations to strip out redundant css or css that's not called upon the name of it's escaping me now if it comes back to me i'll mention it um joshua what is your opinion on flexboxes i like flexbox a lot uh yeah i don't uh yeah uh can old i had that's kendall brought up a really good point here that this should be a paragraph and not be a um h2 100 right um and actually there is a bug request in style them in their their github page for style stage that mentions this and they're trying to figure out a solution because people have already started publishing it with this but the rules for submitting are you can't actually change any of the code or any of the html so i'm not going to change it but you're 100 right this should be a paragraph it shouldn't be in h2 uh subheadings like if you have a title and like an h1 is your title and then you want a subtitle for that uh and it could be the same here you have a an h2 and then it has like a little subtitle after it it should be a paragraph or maybe depending um it could even be like a span that's inside of there style stage a mod you know if that's one big sentence um but by this being an h2 it's actually creating a new section sort of in the document outline so style stage is the name of the entire page and then we're getting into this h2 which is actually creating like a picture in like if you're reading a chapter book that had like an index so pull out an old classic where i'm assuming this has an index oh no it doesn't have sub sections never mind does this have subsections in it it must come on okay yeah so here where i don't hopefully you guys can see it i know it's small and i haven't set this up um for big screens but i have like a section and then all these subsections and then even in here i have another subsection so this would be like my h2 then these are all h3s these are h4s almost so it's sectioning off so by the h1 and then having an h2 it's like creating a new chapter almost um which this shouldn't be a chapter this should be just regular text and then you style it to look like a subheading or whatever you want to call it um so technically this shouldn't be an h2 but i'm not going to change it just for that but thank you for bringing that up it's a good point that i do think should be explained on css or purge.css to strip out the unucss the purge on css is the one i know of but it sounds like there's two solutions make the nav stick to the top we can definitely do that and make this a hundred percent excluding that definitely do that um and maybe oh it's 11 20. i'm going to go until i'm another 40 minutes or so and we want to get rid of that um and i always forget this because there's too much sr only scott o'hara i think it is i always just steal his because if you don't know scott he is an accessibility expert so if you see stuff on it from him it's usually good um i think is that the one i usually use i haven't been on this in a while i just have a snippet usually it's already like it's based in my template and if anybody knows more about accessibility it's something i do want to learn more about i try my best to know the basics of it but i'm definitely not like this master um it's something that i wish i knew more of to be honest especially since i do a lot of html and css the html side it is quite important class is skip link so the idea with this is we want to skip link skip link means like if i click that it brings the person down to the main it's skipping past the navigation so if you're using a screen reader you don't want to always you've on the page you want to be at you just want to skip to the content if you you know you follow a link somewhere you don't need to read everything you want to skip all of this you want to go right to that so usually a skip link right at the start is a good idea but a lot of the time you don't want people to actually see that so that's where something like this except i'm not sure about the active in focus i might take that off um but here if we did uh skip link save so it's just visually hidden um the only thing is if i hit tab can i get to there yeah if i tab to it um so if i'm here and i hit tab i'm going through you can see i have to make a better focus here too you can see that i'm going through these different things if i shift tab i can go backwards and if i shift tab onto it i can actually bring it into view because of the not focus and the not active i don't think it hurts to have it there so i'll leave it um but if anybody has any strong opinions on that leave them in the comments and hopefully i see it um as we're going um i'm going to see if i can remember how to do 100 viewport height without using viewport height um but i don't remember because i do know that because i do it a lot in my videos or not a lot but often enough where's my header uh height i'm just going to 100 viewport height people you know on ios this can cause issue so there is a solution that i don't remember at all right now that involves um [Music] there's a weird name for it it's like anyway there is a way you can get a 100 viewport height um without 100 viewport height so if i did something like that but i want to center this on the page uh what i would do is uh display flex online that's going to make columns if i hit save it's not going to make columns why not oh because i have a container cool that makes my life easier um and then i just have to do a align items center boom that's right in the middle um then we could have that scroll down and then we would get to our navigation and then the navigation we could definitely have stick we just have to do a position sticky top zero so now and i just saw that that looks like position sticky makes a new stacking context everybody so going back onto that you can see the underlines of all showing up now so we'll have to come up with a solution to that but that's okay and then it will stick into place and be there um this is oh my goodness stacking context is punching us in the face right now zed index 100. there we go so we can do something like that and i might even do instead of a top zero let's see we're going to come in here and say border is 0.3 m and then here and here i can use my var border so this is a local custom property i'm only defining it here because i would only use this here nothing has changed yet but what i could do on my top is i could actually do negative can i do negative or do i have to do a calc on that top one m i just want to see is that going to move it down or up that moves it down so i need negative can i do negative var border i think i might need to do a calc on that eh yeah okay uh so if i did calc var border times negative one uh that way i'm just i want to hide that top border so here i don't mind it but then like it's just going to hide that 3m at the top there and then the page will keep going and the advantage here is if i change it here so let's just say i made it 1m they're all going to update together so that this my border top my border bottom and this calc that i've done here um all gets switched at the same time so just makes my life a little bit easier uh that stacking context little change i really don't want those to be out underlined so i will have to but didn't i do that no i didn't i only did it so i did that can i do or i'm just gonna do a comma and say uh whatever not nav a i don't have a hover on them anymore but whatever uh i can i'll come back in and add something there so that we get something like that i don't really i'm not sure if i like it but whatever i'm gonna leave it like that for now we might come back and change it a little bit i could do a posit a position fixed creates a new stacking context too i think so yeah app um just asked he said um backwards compatible i don't know if you're talking about the position sticky but again it's one of those things that if someone was on say internet explorer the navigation is just going to be where the navigation should be um so it won't you know it just means that once they get to here it doesn't stick not the end of the world oh and well we're here actually we have my html at the top uh uh scroll behavior smooth i think that should if like if i made my own css reset that would be included in it so that just means we can scroll whoops oh no there we go but if i click we just do smooth scrolling everywhere which is cool no javascript required bilal asked why i used flexbox instead of grid to center definitely i use grid and then it's place items center in this case i didn't need it and part of it's just habit um as as cool as that is and i love it um and i guess you could argue but you know if i'm going to be using grid for something i want to use it for uh really layout purposes just because there is always a chance of some sort of browser support issue with grid no matter what we wish uh it's obviously i mean actually we've been using i should just leave this open i keep closing the tab we must be close oh my goodness i mean here there are some issues but wow what's flexbox and like on here flexbox yeah 99 okay close enough though i didn't realize grid was so high i use it all the time but uh yeah i mean you could use grid to center definitely and you save yourself a line of code along the way [Music] scroll smooth is working maybe you don't is it my this is working for me on chrome i'm sure it's working on chrome uh can i open a chrome window off screen uh whatever that's okay i'm sure that's working in chrome yeah it works in chrome so if you run into any issues with it just you might have to double check it and open it up again my battery on my laptop i didn't plug it in i don't know if it's going to make it to the end of the live stream so i might have to pull the chat up off screen we'll turn the brightness on the screen down a little there um if anyone has any suggestions please let me know ms asked making bootstrap cards responsive they should be responsive by default i'm guessing if it's bootstrap i haven't used bootstrap since my last video that i had a bootstrap which was probably 2017 maybe 2018. it was right after four alpha came out and we're just hitting the five alpha now that would be the last time i used um oh no did i break my i broke my my links this didn't work can you not do that okay whatever we'll just i thought you could do that but i guess not i know some safari actually i think is the only one that supports like you can do some crazy selectors inside of the knot um or is and like the other things like that uh like you can just do anything you want whereas a lot of the other browsers they only support really simple ones um i mean one solution here nav a after i could just do the um background is no i don't want to change the background because then it's always going to be gone all right i'm going to leave it like that for now just because i want to keep going we'll come back to these guys after i sort of want to give a gradient to the background up here and for gradients just because it might be something i would use again um i do like putting them uh oops oh it's my colors so i do like uh color gradient um just because they're always a bit of a pain to make so lin should we do a linear we'll do a linear gradient if ever you need a really fast gradient uh ui gradients is it dot com it is uh you just push the arrow and it goes through and finds you different gradients and that can be a nice if you want a cool gradient these days there are everything you see them everywhere so oh that's awesome then you can also use one of those as your primary color afterward i'm just going to do one that uses my probably 200 to my 400 or maybe even 300 um so let's actually put this on multiple lines so we can see what it's doing so it'd be var um color 200 to my var color 400 we'll start there um and here i'll just do it here for now header background image var uh yeah var gradient what am i doing wrong linear gradient oh that's what i'm doing wrong color 400 come on one two three four ah there we go yeah it looks pretty good um and here i'm just gonna add in uh two or maybe 45 degree uh negative 45 degrees negative 125 i want the light one up here i'm terrible with gradients are the degrees what about variable fonts who asks that bang glam uh i do plan on doing some stuff with variable fonts um in the near future there's something i'm so excited about i'm huge on typography and it's just not something i've been i've gotten into as much as i've wanted to so i want to make sure i really understand them i know google supports variable fonts but it's a little bit it's cool actually how it works it's nice but um it's not as robust as most variable fonts would be um that looks okay to me oh but now my nav nav nav nav this is what happens when you don't have things planned out at all nav margin will be zero zero i really don't like that border i don't like with that whatever it's fine i'm gonna that i might change that and now my header also uh color light not primary and my h2 i think we do a color var color i'm hoping this is dark enough that looks pretty good to me on my h1 i'm actually going to add in h1 after and do that as a content we always need position absolute which means that over here i want to position relative uh height will be one pixel maybe we'll go with two pixels color will be of our our current color is that gonna work i think so um height width will be 50 just for now let's see what this looks like content position height width oh i don't want color i want background color background there it is you can see it over here now i got that little line um so we want it to be left of zero bottom of zero margin can i do zero auto no that's not going to work if i did display block it would work uh instead of this oh we'll do that instead and that simplifies our life uh 50 we'll drop that down to like a 40 percent maybe make the height bit bigger margin will be 1m ram the m was using the font size from here so it's a little bit too big and i'm just going to bring the opacity opacity down to like a 0.2 something that could look pretty nice just add a little style to it text shadow yeah we could add a little text shadow um this is also somewhere tech shadow could be a good custom property because it would make it easy to use in more places uh rgba zero zero zero var color i want my i don't want the black i want to see if it's going to look okay is it not working with that let's just do black then uh oh what am i doing kevin point two that's stupid of me do i have no it's there uh in general i was trying to do anyway you know what i was trying to do um don't even if you can't really see it don't go with like a 0.5 and make it really obvious um because that makes it's it's a little too much in these cases um whereas if you're going like a point two a point one even it's not as noticeable um and you have to watch the background colors and stuff too like here it's gonna be harder to see than on this side um but in general like turn it off and see and then turn it back on and see and you should notice it the shadows should be really really really subtle ideally and like even here maybe i could put like a small offset downward it's such a big font size but that's huge even this is where pixels a lot of the time for shadows i'll use instead of m's but um the advantage now is because the the font can scale up and down in size the shadow will scale with it um which is why i like using m's for stuff like that is inset possible on text shadow no i guess not i know text shadows don't take a spread is it spread or is it just inset mdn text shadow i haven't done a tech shadow in a long time but i don't think you can do [Music] no it doesn't look like you can you could maybe do it the same i don't know if you could even do it but the same way you might do no that wouldn't work i was just trying to think with like um if you wanted to ever put an image inside your text type of thing but it's a little different obviously with text shadows uh linear gradient to make its tren make it transparent on the edges below what do you mean uh on the text itself or somewhere else um premiere asked if when this hits the top and becomes stuck if we can change the css that would be really cool if we had like nav stuck or something as far as i know there's no way of doing that that is some javascript that would have to come in to be able to do that uh yeah i don't think there's a way of doing it ravi's asking if i'm gonna have a collab video with kyle uh we don't have anything planned right now but i do talk with him all the time so it's something that could definitely be possible in the future um if you don't know web dev simplified go check out his channel he has a lot more javascript content his is mostly javascript react some css html and stuff in there too but if you're after more javascript and react stuff definitely check out web dev simplified contrast color to use for the h2 hands thank you for the suggestion we could try that out let's go take a look where i was choosing my colors did i close it uh so what i'm gonna do is grab this is i guess is more of my primary color i'm gonna go with this one anyway though my background is more closer to that one though uh so this is where things like this can be useful because you generate you have your color that's picked and then you get like these gradient things different ones but then you get these twisted palettes and things where it gives you more like the contrast you can also use adobe is it colored adobe i haven't been on here in a long time um i don't want a tour can i just pick a color here awesome and then i want a complimentary so it's going to go to the opposite end so in this case the opposite end is an ugly brown which i don't really want to use because i don't think that would look great let's just go find my h2 color let's see what that looks like but i'm not i've lost track of yeah we need something a lot brighter than that um this is where it oh we could just come into here i always forget vs code has this the color picker and i can never get it to show up when i want it to people have asked me about it because i've used it in my videos um a yellow might yellowy orange you know it's gonna pop i find it's a little bit hard to read um personally i think i definitely think a contrast color could go well on this site um i'll have to think about that a little bit this is my header header header header i am going to do header a color isbar color for now and this could even be somewhere too um where the contrast color could be good the white's really popping off so we're sort of losing this a little bit with this being white and those being white um the one thing you can do always opacity 0.7 um oops you got to spell it right um just so it doesn't it's not as like faded you know it doesn't pop off as much but you're not actually adding a new color in um but it's getting a little bit hard on for accessibility reasons now i don't know but something like that could be could be decent that's selected okay i thought i had a weird pseudo element there yeah more orange some sort of orangey color could look good we could here one sec this is where if i'm gonna add in some colors we could have a color accent uh where was that site i have too many tabs opened that could be interesting too but again one thing when you're putting colors on top of other colors it's not always about the contrast in the color um but also looking or something like that could be interesting actually um is that the same one i was on anyway um something like this could be good but the problem is their values are really similar to each other you need some like it's not just about like if the saturation is really equal between the two of them uh even though they're completely different colors it doesn't always make it work the way you'd think it would work so that's my h2 i have so much going on here so if i just did this as accent what would that look like ah see their values are so similar so they're completely different colors but like looking at that actually hurts my eyes when i try and read it so it is one thing you really got to watch out with um that's why either a really dark one here would work well or a much lighter color and it could be variations of this accent so if i go in the hex there we go um so like here if this was a lot lighter it would work but it's not really popping as much or that's you know we had those browns suggested before something like that's definitely gonna work we can still read it we're still keeping with the darks um and maybe we could create like a whole i have all my primaries here i could have a range of accent colors too and i could bring those back in in other spots as well maybe with say my titles not being blue so not everything is blue it could be an option if we want to develop this color palette a little bit more can i apply a gradient to the header text i'm not going to keep it um but you can apply gradients to text but it's a little bit weird let's see if i can remember how to do it i have a video where i look at how to do it with i think gradients and with images i said i was into some keyframes too and we are running low on time but we want to do a background image because gradients can only be down with background images and you can just write background for the shorthand and let's put in linear gradient i'll just do a purple to blue to red uh purple let's just start with red red purple blue so that puts it behind then what we need to do is put in text i'm going to forget i don't remember what it is uh clip background clip there it is background clip to [Music] none of those is it not background clip i haven't done this in a long time i thought it was like that let's see if this works i'm pretty sure it's background clip text and then you need to make the color of your text transparent it did work there we go um so you can add things like that and if this wasn't a gradient you could also have an image come in that way too so if you want just it's be really careful with these um because it can gradients less so but definitely with um images if you have image in it it needs to be a bold font or it won't look super good uh i don't think i'm gonna keep that though and it but definitely is very possible and voila final day of conquering responsive layouts that's awesome that you made it to the end i'm glad that you learned a lot from it so congrats on making it to the end uh if anybody wants to know about that actually just look up conquering responsive layouts or just go to my website but conquering responsive layouts it should pop up uh it's completely free and it's a 21 day drip course so every day there's a little bit of content some days it's little break days where i give you extra stuff but you can definitely check that out completely free it's really about like the understanding and getting into the responsive mindset for layouts and we build out a few projects along the way and stuff so um it's really focused on layouts it goes we the first week is just thinking responsively the second week is getting into flexbox and the third week is getting into media queries so if you want to check that out it is there yeah yeah for i let's just check this actually somebody did inspect accessibility properties this is in firefox uh chrome it's a bit more built in for the text colors um and then i forget there's like a special is it this guy it is this guy and you can see the so it's giving me a oh no i'm not sure oh oh that's cool it's actually doing it based on my gradient in chrome actually let's just go check chrome um you can get the same so if i do my inspect however you want to open it and you go on elements like if i look here you see how it's giving me uh it's not giving me the accessibility it's not are there say i'm getting a contrast i'm getting like the thumb a check mark because the contrast of that color on white is high enough so there's no issue it's not showing me on the black because uh just because it's black on white i guess i don't know why but there it's giving it to me if i know properly here it's not giving me an accessibility answer because it's a background image my gradient is an image um so because it's a background image it's not able to distinguish if it's good enough or not if it's high enough contrast to be considered a readable whereas over here firefox apparently it's a little different icon that comes up but it looks like they're actually giving me it on the gradient it's saying on this side that it's a little worrisome or no probably on this side it's a little worrisome but on that side we're a-okay so it would be something to uh just be aware of so but it's large text it's so yeah on the light i'm getting a very good rating on the dark side i'm not getting such a good rating so it would have to be something i could think about it could be maybe if i'm really concerned about it i could change my gradient here to only go up to 300 and then i could take a look at it so it's a bit more of a subtle gradient i'm still getting the same warning let's just double check that am i getting the same warnings oh no there we go i refreshed the page and now it's giving me three aaa on both of them so just if you are looking i don't really like this color especially now that i lighten my gradient a little bit um actually i'm wondering here uh wrong one accessibility properties that one probably isn't high enough yeah the white text on top of the light blue there it's so big i'm not going to stress about it right now but it might be something that i look at changing and i might actually make that my like a certain color and then make this stand out a bit less because i find this is standing up more because it's the only thing that's a different color right now [Music] trev is just asked is it recorded and reviewing at a later date yes it will be and anthony does does depend on you don't need to get triple a on everything if you have double a you're probably good like you said uh just checking the comments if anybody has any suggestions just let me know uh i'm gonna be going i was gonna stop in 10 minutes but maybe we'll do another half hour i have really not made a lot of it's not even terrible this is what i love about css um you don't have to make a lot of progress and things can come together i think what i'm going to do is tackle these guys um because this as much as it looks like a list like even if we come can i find the original one or i should do the button thing here too maybe do something with that just definitely like here um they sort of made it look more like not a list and i think that's a cool idea not to have it actually look like a list um it's a list of things i don't want to steal their idea to be honest but even if i look at where's the ones that have been done contribute here uh view all let's just go look at a few different ones i love this because it shows you which ones you've looked at so let's just go see what some of these look like so there's some really cool ones here but i think a lot of people styled the order looks a bit i'm maybe i missed where's that list oh it's here they left it as a list that one was cool though i like the the titles that's just a text shadow if you want to do something like that i like the oh that's grid see i sort of like this idea of making them like that lobster for the win here oh look at that color uh all right so um i might if anybody has any ideas on how we could style this to make it look a little better let me know in the comments jay do i use any um jay's just asking if i use any frameworks i haven't even used tailwind yet to be honest and i plan on dumping jumping into it i just haven't had time uh right now i don't use any um but it is something that i'd like to eventually get into just try it out and see but i'm so comfortable with css um it's something that i think if you're really comfortable with css itself using the frameworks it's not that bad because you unders it's very easy to jump into a framework whereas if you understand a framework really well but not css really well you can use that framework really well but then sometimes you run into issues with it even a little bit so michael's asking concepts or recommendations for what should be taught at school ages 13 to 16. i wish i was learning this when i was 13 to 16. that's probably when i started making my first websites but that was back in the 90s a lot of photoshop slicing and dicing and that was the the good days of table based layouts and all of that um i think just introduction to html is underlooked a lot of the time just um semantic html using like the nav using a main articles sections things like that and then the basics of css enough to style a page i think at 13 to 16 there's in that school level there's so many people at different levels of like interest even in it that keeping it simple is really good because even when i teach it at school i'm in like a adult level teaching it and but it's a design school where it's you know they're learning graphic design and they're sort of stuck into these two classes on the web so i try and push them as much as i can but i do try and like i have a certain point where i want them to reach and i notice the ones who really get into it they just deep dive themselves and they start pushing and then they come to me with questions when the things they're finding aren't working or if they run into issue or you know like they get into flexbox before i bring it up and then there's some weird stuff with it so i find like if you can get people to make something simple understanding just styling text getting something cool together something they can put up it's so fun once you get into the css and once you get past that first couple of days um where even the people that aren't super into it they're able to do enough that they don't feel demoralized so i think just keeping the momentum going and then the you know pushing the ones who do seem to really dive into it machina do i need css while learning javascript with zell um i mean it's good to know css i do think that he supplies everything though i don't think you're writing css or if you are it's very little so you could definitely i think it's always a good to know css if you're doing stuff with javascript because they they're so intertwined you're adding classes removing classes uh adding sometimes just in you know inline styles and stuff like that so understanding is important um list style circle just grid boxes for each kenneth is saying for these just to use grid boxes i was thinking of something like that that we could do well that's not a bad idea for conquering responsive layouts maybe doing a video a live video maybe even maybe i'd only invite people that have done the course we could do something like that where i look at the solutions a news ticker oh my goodness that's an idea i'm tr hmm [Music] okay a word cloud yeah we could use like a font awesome glyph too make it two column okay we're gonna do a few of these ideas um and we're gonna see if i can get to the new sticker in a way whenever i have an idea or even if i'm looking at a layout there's always like the first thought that goes in your mind about how you can actually accomplish that and it's usually wrong but the new sticker i have an idea people early on ask me for keyframe animations i'm gonna see if we can do it with keyframe animations but i'm a little bit worried but before we get to that i won't do the font awesome right now um just because uh but definitely we could alvarez is asking if i can do a video with responsive tables i hate tables um there's a really good css tricks article on them that i'd recommend if you need to do it um to call okay let's start with the two columns let's just see what this thing is actually called if it has the block quotes up higher container so oh man is it my only it's a ul in my about so i think we're gonna have to do it like that right is it the only ul in my about uh article id oh articles are the about is my article that's an article section section article about so we'll do that uh about ul so for two columns what you can do the easiest thing is columns two we have two columns so that's obviously the easiest thing in the world uh people don't use css columns you want three you do three you know it's uh this is where the problems can happen with them there is a way to fix that but i don't use columns much either but it's one of those things i always say it's good to be aware of solutions in css and then you go over to the mdm and you read more about it and you find out how to prevent little things like that happening um is it column break break or there's gap too which can i just do gap now say 1m let's just make it really big and see if it works yeah so gap now i know in firefox is everywhere and has gap come to chrome uh the gap seems to be working there and i think gap also works with flexbox now in chrome i'm pretty sure not 100 but i'm pretty sure um obviously i don't want that big of a gap but is it column describe the page column break behavior before the generated box what's this one that's all webkit i don't is it is it only webkit that didn't work there is a way uh i'm not gonna dive into it now but there is a way to prevent things from going like that i just don't remember what it is um so that would be one way you know if you want two or three columns really easily really quickly without having again i'm not changing the markup i'm just selecting where's my ul it's down i'm just selecting this ul and i don't have to do anything weird to get that to happen so that's really handy that you can do something like that um if i do this as a display flex now it's going off the page um but my page has the overflow uh list style none it's a little weird eh custom variables why is that happening because there's not enough room for it i think oh man there's an easy way to do this to get them all to fit i'm just gonna flex wrap wrap for one second so we can see everything um i'm trying to think for the an easy way to do the news ticker actually i'm just reading the comments sorry guys uh how long did i get this question a lot from uh jay how long did it take me to get comfortable writing css and sorry and what do and what to do if you are doing css wrong aren't able to figure out how to make layouts can't figure out how to accomplish it for me it's a really hard question because as i mentioned not long ago i started writing or creating websites in the 90s and it's been back and forth a lot so i've started making them then i'd stop then i'd start then i'd stop um i got into design then i you know anyway it's been a long relationship with it and it's been something i've been doing for so long now it's really hard to say when i sort of got comfortable it's just been such a long progression with it teaching was a big part in really understanding css so even if it's not something you know you're not going to start a youtube channel or you're not going to start teaching in a classroom you can just start writing blog posts about stuff you're learning um they can really when you have to even just write it to yourself it doesn't happen to a blog post make a markdown file make a a word document on your computer it really doesn't matter but just documenting what you're learning can make a really it can change how you understand something when you have to explain what you know it's so different and it really helps reinforce and the other thing is lots of practice make sure you're not just watching videos but you're following along you might see me doing a layout you're like oh that makes a lot of sense like kevin's got that and i understand what he's doing so i must understand it it's not the same um i have an article on free code camp um where i talk about how learning how to skateboard made me realize a mistake that a lot of people make when they're learning web development and it's about how they you know when when i started trying my kid wanted to learn how to skateboard and so i said i'd learn with them when i was a kid i wanted to do it i never did so and why not it's a good way to bond with them it's been a lot of fun we started wanting to learn how to do ollies i watched videos on it we talked to other people about it i knew i could tell you step by step everything to do i still couldn't do it it's a little bit the same like i could watch 100 videos and understand what they're doing in every single one i still couldn't do an ollie and all these is when you jump on your skateboard and it goes with you and it just took tons and tons and tons of practice it's the same thing when you're writing code watching it and understanding it is not the same as being able to do it and same as riding a bike it's the same with cooking it's the same with anything any skill you're learning you just have to do a lot of it to get more comfortable with it and a lot of early on especially like even now like i'm learning while i'm trying to figure out how to make this into a news ticker because i'm trying to come up with a solution the first thing's probably not gonna work i try three four things i eventually get there but then i also you know i the things that aren't working are helping me learn as well because it's making me understand things a little bit more and the other thing is to read documentation you know when you go to a page like this and it looks really boring read it and try and understand it and then try and use what you read to make sure that you understand it and stuff like that that is a big part of it as well um it's not always the most exciting part but it is part of it is css documentation's a little different than say like react um but you know uh if you are using react or view or anything like that like read the documentation that's how you're going to learn how it works and practice what you're reading to make sure you understand it column fill balance let's try that really fast columns two uh it was three when it broke okay who suggested that sorry my screen brightness is really low because i don't want the battery to die on my laptop i can't even see i lost it but whoever did suggest it thank you uh column fill balance um i kept it i think the balance is gonna work if like here if i make that four not thirty four four columns see how this one's a lot shorter i think that's going to make it uh it's not doing what i thought but i think if it wasn't um list items it might just balance them out a little bit more i think is what that's going to do there is a solution though i can't keep up with the comments though so text marquette marquee i don't think marquee works anymore does it and we're not supposed to change anything in here so i'm not going to keep it would it be here i haven't i don't think browsers oh my goodness it's a little busted oh because my flexbox isn't working don't use marquees so here it would be my uh that i could keep the same and then my about marquee would be a display flex oh that doesn't work why not ah that sucks i was just hoping to get them to line up next to each other or what if i just did uh ul i could just put the marquee outside now there we go uh about li margin left 100 pixels uh 100 let's do like 3m no why doesn't that work let's space them out a little bit you gotta spell margin right that's why there we go and then i could even again i this isn't officially gonna work but um because i have i'm gonna eventually take the marquee out of here uh because we are not allowed to touch the html uh that's kind of fun and then we could do the same trick that we did before uh to actually get it to be full width and play around with it a little bit that's hilarious i'm so glad that works though that's really funny okay let's take these marquees off and see if we can repeat the same thing now without them yeah welcome back to when i started coding um i'm really annoyed these are breaking under two lines flex i don't have a marquee anymore it's because they're not fitting on the page i'm so not used to having running into this type of problem we'll get there though um i don't want to set like a set width on these is the only problem oh actually it would be here flex grow one but it's still not hmm i don't want to set a width on it even though i think that could solve the problem simindra how do you get better you just do lots of coding follow tutorials follow courses courses tend to reinforce things more because they follow along a bit more but you can definitely you don't have to do courses you can learn for free but it's just lots of practice practice makes perfect there's also if people are looking for something front and mentor i recommend this all the time they're actually they're working right now they have premium and they have challenges they're working on like a subscription model it's not ready yet um but it's coming soon but like they give you layouts to build html css only here then this one has javascript in it too you can see it's free they give you a brief they give you the images you just try and make it work challenges like that are great and it's nice when you don't have to design something so that's always available um i think what i'm going to do yeah joe the only reason i don't want to set a width for this section is because i don't know how big it needs to be um but what i'm going to try i have a few ideas here and this will be the last thing i do because i will have to go eat lunch and i have other work i need to do today but this is this is fun so i want to do this uh i don't know if it's going to work perfectly but we're going to get something going with some some interesting things here um so how are we going to do this though li i want them moving across let's just make an animation first so key frames we'll call it uh marquee we're going to recreate a marquee um zero percent i think we're just gonna do a trans form transition um i always do that transition transform uh translate x of zero and then i because i'm only doing two keyframes in here actually we yeah i just want it always running though uh transform translate x 100 this probably is not the final state of this but if i came on here and added animation marquee five seconds uh forward no infinite did i do my keyframe wrong oh it's going okay except i want to do it the other way i don't want it moving that way and i want it to be linear uh so this would be negative 100 the only problem with doing this you can see it's not going far enough because 100 percent um let's just slow that down too because it's going to drive me nuts um there's two problems one of them is the width of it which i'm this might be somewhere you need javascript to actually figure out how big it is i'm thinking i could set a width on it but i was hoping i could cycle through and then have flexbox come up on the other side but now that i think about it i don't think i could do that um but what i was thinking here is what we could do and actually i'm surprised it's going oh because it's a transform uh so what i want to do here actually let's just give this some padding of like 2m and then i want to give it a box shadow but i'm going to do an inset shadow inset 0 0 1 m black just for now so we can see it oh that's not going to work because it's moving along with it and this is where the 100 isn't working because you can you can see my that's moving the whole ul can i get around that somehow i can't darn it what if i added these marquee what happens if this is on my li i don't think that's gonna work is it because they're only moving that sort of works um but they're moving like their own width i think right so like this one's moving faster than that one that's not what i wanted at all my idea here though was uh then i could do an overflow of hidden oh no not on that one on this my ul could have an overflow of hidden and you'd only you'd sort of see the ones you want scrolling through um i don't know like here if i gave each one of these the same width width of 300 pixels whatever they should all move at the same speed at least or not oh uh flex shrink flex shrink of zero i don't want them to shrink i want them all to be the same size and now make that like there we go so this is where 300 is way too big like so you know you get the idea of padding i don't want any more anyway you get the idea where i was going with this i guess this could be like but i don't think it's gonna work the way i was hoping it would it's kind of fun allies aren't in line allies are block um display block that's why like a list by default each each one is on its own line and once um and it also doesn't matter because this is display flex so like the whole inline or um inline or block or whatever it is sort of goes out the window as soon as they become flex children anyway so even if they were uh it wouldn't change anything so now the spacing's really far off too i i could play around with this and i think i could get it to work um maybe if anybody has any questions go for it you know um who was it jeremy that i jeremy ideally that's what i would do i would actually set all this up on like a parent around outside of the ul uh but in this case i'm not part of the challenge here is i'm not allowed to touch the html itself so i can't add a parent if this was something i was doing on my own site i don't know why i would do this but i would make like a box that would be on the outside of my ul and exactly i would just take the whole ul and move it across and have the shadow on the one on the outside that's where my idea was but not having access to everything there sort of pushed that out the window but whatever it's still a fun little experiment um you know and let's just it's going way too fast now that would drive people crazy but um we could find a way to space those out a bit more evenly too and everything i think that could be something that would work my shadow i don't like and i think there's a way of doing the shadow so it's only on the two sides i don't remember what the trick is for that though um or maybe i'm thinking of outside shadow like not an inside shadow for that one though yeah it wouldn't be an insight because why can i do it with an inset let's turn this off all right let's just make it like 100 seconds so it's really slow uh one way you could is this going to work where's my inset it's going 1m can you put a spread on an inside shadow when m negative 1m so then here i could do this as 1m that's a little bit what i wanted to do um so there's only a shadow on this side and then do the exact same so actually let's just put this on its own line so you have multiple shadows if you uh comma separate them i think and so we can do another inset shadow zero uh negative one m zero one m blur one m [Music] negative one m why do i have a negative there that's my yes and black did that work there we go and then maybe the the negative could be 1.2 and is that going to work i just don't want any shadow on the top or bottom at all um and it sort of looks like it's like peeling off on the sides anyway a fun little thing this is also where some custom properties uh whoops five [Music] something like that was sort of what my idea was and it would look like it's like pulling off and maybe that would have a background color too uh background of our you know even if we went with the light one not perfect but you get the idea of you know the idea that it's dipping down into the sides but i think i'm gonna get rid of that uh that whole thing uh it could be something that i work on more and maybe we could get it to work i might come back to it and try it again uh for now let's see nice effect thank you thank you benjamin no problem glad you like my content white space no wrap oh let's just go back then would that work uh instead of having a width let's just hit save they're all there one of the reasons i gave them a width though is because of this where they're traveling at different speeds because i had to put the animation on that instead of putting the animation on the list um but let's just try that uh save because that worked but why wasn't it working originally oh is it because of the flex shrink ah turning off flex shrink actually solved that problem because they weren't shrinking anymore they were staying at their actual size so that's good to know we could use the flex ring zero to stop them from shrinking so the flex shrink zero we could space things out a little bit and if you had control over something other than the ul you could give it an actual parent i think this could be a solution where they wouldn't travel at different speeds but yeah i'm gonna get rid of those for now and i think the that white space no wrap thing would work as well um but i think what i'm gonna do now is actually do a display of grid instead uh items let's do a list style of none i like putting that at the top list style of none margin zero padding zero and let's give this a grid template columns how many columns three so repeat three one fr um and then my lis let's just give these a bit of padding 0.25 m border one uh yeah we'll do one pixel solid and var color that one we can add a gap to these gap of 1m oh 0.25 m maybe 1m would be a lot that sucks let's change the font size first of all actually on these font font size one rem only that would fix that and it does make it kind of small though but that's for a quick solution which might not hold up actually one thing that could be good here uh instead of doing that could be repeat auto fit let's put this on another line so it doesn't get weird uh auto fit auto fit min max there's auto fit and auto fill and i always mix the two up uh minimum would be i always just go with a really small number you have to give it a like a set number and then one fr uh i think would work wouldn't it and then at small screens yeah then it breaks into two and then it goes back up to three so you don't need a media query or anything we can just get that to work maybe this could be a little bit bigger um if you want to prevent this this is where it's a little bit awkward if you are using grid so actually would it be better not to use grid in this case um because even i couldn't suck these up standard has a good question i'm going to get to in a second um but um with grid like i could do a line self start but it's always going to leave these spaces underneath because the um here if we look at the grid this is in firefox i know chrome i think has added i don't know if it's only in canary or if they've added it to their um the regular one now but we can see the grid um but i still like firefox like i can't make some grid cells smaller than other grid cells every cell's height is dictated by the ones in that row i could make all of them equal so i could set like a set size to all of them um but it's you know people want these like the the pinterest style layout you can't do that with grid right now there's talk of adding a masonry style layout it might be something that's implemented as part of grid or it might be its own thing but we're not there yet right now if you really want masonry style the two options are columns or javascript but i think you know we start with columns we went away from columns but here honestly uh columns because there is a bit more you can do with columns i could set uh let's just say two let's do a 12 12m and three isn't it like that that i do it okay let's just do three to start with columns three i broke it oh display grid turn that off columns three that's working i have a gap there so i would have to add a margin to these so marg and again this is where if you wanted to uh you could do a gap of i did .25 m so i could then use var this is where i love locally scoped property properties because i want to use it here but i also want to use it on its child so then here i could do margin bottom is my var gap and so it sort of simulates that style and then here if i came and i changed my gap it's going to change both of them at the same time let's just make it really big for now just so you can see it's updating the margin bottom and the gap in between them which is because this gap is only doing between and it's not like a grid that has different cells in it so that could be an option here um for that type of thing and where css columns come in and it's a locally scoped custom property because it's only going to work in this ul and in the children of that ul and nowhere else so which is different from my ones up here which are globally scoped custom properties that i can use anywhere in my site frederick can you give me an example of somewhere left a strange comment i'm hoping nobody hacked my account because i definitely haven't been uh leaving comments anywhere i know there's some weird bug or something where that is a thing and hopefully my account isn't one of the ones that's doing it um there was a question about the ul's in navigations it's really common practice there is talk about whether it should still be there or not from an accessibility standpoint i'm going to keep doing it until someone really tells me i should stop it's not that much harder to style i do know that some screen readers when you do list style none they don't even treat it like a list anymore so that's one of the reasons there's some talk about not bothering with it anymore part of it also is you want to look at a website um always always always for any site um think about what it's going to look like if the css doesn't load so if the css didn't load it would be kind of handy for the navigation to be you know it makes it a bit more obvious it's a navigation i think i'm always taking into account what it looks like if you have no css as something that's important here i would i don't need my key frames anymore uh let's put a board uh border ray radius of uh i don't know 0.2 m something small uh i want to shrink that gap back down and the last thing here is now does this work 10 m i think so maybe 10's too big now but i think like i'm telling it it should be three columns but i'm also saying that it should be 10m um so it's going to adjust see there like there's no media query here now 10 maybe i guess is too big let's just go with five and see what happens um so they're gonna adjust five's too small you can use pixels obviously um so there it's okay and then it goes up to three and then it stays at three and i think if there was room i don't know if i have room for for it so you could you know you could have it it's two then it's going to three then it's going to four um as long as it can fit so something like that can be kind of cool um a nice use of css columns really uh to be able to do stuff like that so i think i'll leave that that's a fun use of css columns the advantage here again is this can be tall and you know it goes across multiple of those whereas in css grid you can't do that so it's kind of neat the point of nav um nav is really important it's telling it that this list who asked that uh jarrett um semantic html is really important um so the nav is saying like this is the main navigation or the primary navigation for my site you can have multiple navs on a site but it's saying like it's it's a primary navigation you might have something has a few links in it it doesn't make it a nav but you could have another nav in your footer for example but it's letting like screen readers and other things know that this is actually a navigation and it's going to bring me to different places within that site and then you have your list of links that are you know we have the here's a navigation and here's a bunch of links and it is a list i'm giving you a list of different pages in my page that you can now visit which is one of the reasons that we started using lists is because really it's just a list of pages and we style it to look a little bit different simhala i'm not gonna be doing any live coding tomorrow um i'm thinking about once a month i might come back in a couple of weeks and do this every like week or every two weeks until this page is done um but it's not something i plan on doing too often just because it's hard for me to find the time to do it all the time and i think i'm going to have to cut it there i said i wanted to finish this part i just want to see does this have uh where's that list again i sort of wanted to style this a little differently but there's not really there's i could select this paragraph no problem because i can say the paragraph after my ul i can't say the paragraph before my ul so i guess not because this is just in a container oh okay we could but that's which container is that container about and then another container i didn't realize we had a double container hmm that's okay if i go to about let me just see if i got this right i have a section and a second section and then it's my so what i could do is about section uh nth of type 2 p and of type two ah did work so you can i mean you can select anything with css you want as long as you're willing to dive in there deep enough uh so even here i could just do like font weight uh font weight is font weight of var if i just did font wait does it make it into a var oh i didn't even know that okay that's gonna make my life easier uh color can be so i don't have to write var i just have to do color how did i never know this until now you learn something every day that's so cool thank you vs code i don't know about other text editors but that's cool um 400 looks a lot like a link but it's not underlined i just i wanted this to be a little bit different so we're sort of highlighting this whole area i sort of want i'm really debating at one point to make this i want to give like a background to all of this so like this to show that like this is linked with this um it's sort of making like a faux h3 so i have my title and some examples and i have this little thing of examples i really gotta go so i'm not gonna do it this time but what i would do is turn this whole area into a grid and then that i could get a pseudo element to be a background on that section of my grid that would be the idea there but i'm gonna leave it there i really gotta go uh there's been like 300 people here throughout so i just want to say so much like thank you so much for sitting here and bearing with me this was a lot different from my regular videos obviously where they're a lot more focused um i was all over the place in this one so i do hope you enjoyed it uh let me know obviously uh through comments and stuff like that to let me know um if you do like this style i do plan on doing more live streams but i can always have a lot more focused things or i could do it more like this where i'm sort of building on something but stopping asking questions answering questions and we're just sort of playing around so really this was had zero planning other than i want to look at this one website and try and style it so if you did like this let me know and we'll definitely keep going with them and having fun with it because i wanted to play with this and i said why not do it as a live stream and i enjoyed it i had fun doing it i hope you learned a few things you got a few ideas along the way as i did this um yeah thank you guys so much for being here it was it was a blast it's fun having some people to you know partake while i'm coding it's definitely a different experience the laptop survived long enough for me to be it didn't die so that's a good thing too it's in the batteries in the red before it was in the yellow so we've just made it so i'm going to end it now thank you guys so much i'll be in the chat for maybe two minutes i think the chat stays open even once i end the stream so thank you guys so very much for being here and uh of course don't forget until next time to keep on making your core on the internet just a little bit more awesome i don't know why i remember to say that but thanks a lot guys

Channel: Kevin Powell

Views: 19,775

Rating: 4.970015 out of 5

Keywords:

Id: LRFE-xirmnQ

Length: 157min 15sec (9435 seconds)

Published: Thu Jul 23 2020