Creating a magazine layout with CSS

[Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] hello everybody and thank you for coming and joining me today looks like my mic is working that's a good thing i never know when i do these live streams i always come on and my my mic's not working so good a good start to this friday stream looks like actually i don't know how many people are here i closed my other thing but you'll notice there it is i've set up a little thing here this was a little bit by accident but we're going to treat this stream as a 300 subscriber celebration and we'll see if we can get there on the stream or not because there's the live sub count oh so close so we'll see if we can make it today does kevin even like americans travis why would i not like americans i have i have friends in the states i never i never generalize you know there's nice people all over the world attachment studios you're going to be you're going to wait for it to get to to get closer and then you you'll click it at the the last second i should have i didn't get a sound effect i should have come up with a kind of a little celebration sound effect but let me see if i can just do one thing while i'm you know what anyway how are you guys well i figured this out how's everyone doing how are you doing today i hope you're doing good um oh you know what i think i have it opened what i'm looking for i just minimized it there it is yeah cool a lot of people here it's exciting so yeah thank you guys all for coming i think it's me a lot of fun um i didn't have a video up yesterday because i ran into some issues and i said let's do a live stream today instead and normally if you don't already know i normally live stream on twitch i'm live every single monday or yeah pretty much every single monday unless it's a holiday or something uh last week i was also live on tuesday to two live streams or this week this is my third live stream this week my goodness um so yeah i'm i'm live streaming primarily on twitch but every now and then we do these special youtube ones uh instead so here we want we want a q a we could do a little i don't know how long what i planned to do is gonna take so we could we could do a little q a at the end these youtube streams tend to turn into q and a's usually [Music] the chat is just flying by i'm gonna have trouble keeping up with you guys today muhammad you don't know how to use flexbox and grid in my website i'm going to be using a little bit i don't know if i'm going to be using either one today actually but i do have plans on having more content on that type of stuff so pascal i'm your favorite youtuber thank you very much only 28 to go i guess doing this people see the little look at that it's flying by won't be long edward thompson you loved the episode on 3d effects with css only i did too that was a really fun one for me i learned a lot on that one it was great having that with um with amit and we have some more stuff planned and actually i'm planning on doing more collaborative efforts because uh last tuesday i had adam argyle on um we just sort of talked about css this was on twitch on twitch i had adam on uh which i will be taking and turning into some youtube content so if you missed it no problem don't worry about it um but we're gonna be doing some coding stuff together too he's gonna teach me some some some fun stuff because as much as you guys like to call me i see it all the time like in comments and and on twitter um people calling me the king of css i'm i'm so far from the king of css there's so many people that know more about it than i do um and you know i think i'm a good communicator of how it works i i think i know my way around it but you know i don't mind guru or sensei and stuff like that i think i'm decent with it but there's a lot of other really good people too and king sort of puts me on top and i don't think i'm on top i just think i'm one of many who know about it can we do turing complete machine in cs can you do touring complete in the you know luke kleins thank you very much have a i will have a beer on you definitely thank you actually if you don't know i also make my own beer i just kegged another one yesterday so looking forward to trying that one out today it's friday so the end of the day we can relax with the beer vince having coder coder i have talked to her um when i did talk to her she was really busy so i should get back in touch with her but i know she's working on her course right now courses are so much where i should be working on my course right now but instead we're here doing a live stream but courses are a ridiculous amount of work but i'll get back in touch with her because yes i would love to do something with code reporter the quality of the stream is amazing glad to hear that i'm happy that it's good laksh deep singh should we use media queries with flexbox or flexwrap both seem to it depends on the situation and what you're trying to achieve uh i've used both it it really depends and if one works and it's doing the job stick with it if you try one and it doesn't do exactly what you're after then try the other one or just use grid do i have a c i don't know who said it the chat is going so fast a css roadmap question mark um css roadmap i don't have one i hear a lot about the idea of a css roadmap my issue with depends what you want to do but i guess at one point i should sit down and think about it paras so okay i might end up answering this multiple times so i'm gonna keep the question the answer to my question very short of what do i think of tailwind css um so i yeah i'm not going to deep dive it i've talked about it a lot i understand why other people like it and it's not for me i think that's the easiest solution or easiest answer to give css demystified someone is asking about it it will be relaunching very very soon uh in maybe two weeks or so i'm gonna be opening the doors to it so keep your eyes peeled the best way to know is if you're on my newsletter but i'll make sure to post on twitter and here on youtube as well when it does got tam jane do i prefer web dev node or python um yeah we'll go with web dev because that's all i know all right yeah i see i mean sorry if i miss any comments or anything i'm not i'm used to being on twitch where the chat is a little slower paced um so if i miss anything i do apologize uh but i'm going to would you like to push [Music] yeah we have some flex boxing grid stuff coming up uh miracle gaming all right i'm add thank you very much for the super chat i appreciate it and it was luke before right luke thank you very much as well i think i said it but then it got distracted as the chat moved by so thank you both very much for the super chats super generous of you um do i have a favorite css framework just writing my own css is my favorite way of doing it um neurotronic esports do i typically use css or sas i typically if it's my own projects i use sas more often the new sas course launch date i'm not giving a date until it's ready to go because i have seen vince a few people asking about it now so i'm working on a sas course it's taking longer than planned my kids are coming my kids school years about to finish which is gonna slow me anymore um so um no promises when it's done then people will know when it's gonna launch kathir how good am i at back end i am not good i'm very very very terrible i i just don't touch it it scares me uh how do you keep up with new things in css slash design uh experimental css properties do you keep in touch how do you keep up i'm so keeping track of things i'll use a lot of can i use pavan thank you very much for the super chat as well um thank you very much for providing valuable content no problem at all uh yeah so keeping up with css is pretty easy when that's your primary job so it makes my you know that's what i do now is i teach people about css so i can literally devote parts of my day to that and a large part of it is through things like css tricks twitter and seeing what people are talking about i follow a lot of people who are actively working or involved on creating these things and helping push the spec ahead so they're always talking about it so that always helps too um there's yeah css checks newsletter is a good place or just css tricks in general and then i also whenever i'm researching anything i'm usually on the mdm so i'm learning about something i want to make sure i'm saying all the right things when i'm planning out content and then i end up on rabbit holes and i start clicking on links that of things and then i just go deeper and deeper and then all of a sudden i found out find a property i've never heard of and especially if i see a property in the mdm that has a little experimental they have the little beaker thing next to it i dive in there and try and see um what it's all about um but i try and keep my ear to the floor as much as possible that's not the expression there's an expression about keeping your ear open that i can't think of but i it's just you know that's what i live and breathe these days so it's a bit easier the do you have a play oh just the chat just left uh someone was asking a playlist for css like to start i have a really old uh one it's on my home page that's like the beginner pat like it's html and css for beginners i think that's a good start uh it's a little bit old now just because i made it four or five years ago so it is a little bit old but i think it's still a really good series that goes into the very basics of css from there i have less of a path on my content here sadly um how do we create skeleton loading i do have that in my list of things paras uh so one day i'll have a tutorial on it um but it might be a little while all right a couple more questions and then i'm gonna jump in kathy i already answered that i'm terrible at back end uh wata what will css look like five years from now on very good question i'm very excited to find out uh we're gonna have a lot more power and a lot more control and it's gonna be a little bit more complex than it is now but um we were talking a bit about that with adam argyle because he's if you don't know adam argyle he's on the chrome team he's like their css evangelist for chrome and so he knows like everything that's up and coming um and what they're working on and everything so um there's some really exciting things on the way and some of it does add complexity but hopefully it's not just for complexity sake it should be to solve problems that people are having um but yeah star ash old viewer but new subscriber that's all right you don't i mean if people don't want to subscribe you don't have to subscribe but i do appreciate it but it's more of a fanny vanity stat here on youtube than anything else think and rewatch a css series from scratch uh maybe one day i could i have to it's a lot of work to um to really go through the whole thing but um we're almost at 300 we're getting there guys pretty close we're pretty close to 300. all right so we're going to jump in i am going to do some advanced anime i keep saying and then you guys distract me miracle gaming i will be doing some animation stuff coming up advanced animations are not for me this is one of the reasons i like not i don't like people saying i'm the king of css advanced animations is not who i am i do layout and typography and the fundamentals of css and understanding flexbox and grid that's my that's my jam um animations really good animations ten like it depends what type of advanced animations you mean keyframes i can do stuff with we're gonna be diving into that on youtube next month maybe um but yeah i when it gets into svgs and stuff like that it's it's tough people the count yeah this is the counter there is like youtube actually finally added one i think they saw people were using third-party services so in your analytics now you can actually get a real-time sub count which is pretty cool html a css or html books the only css html book i ever read is in my background somewhere there on my shelf uh which is the classic um html and css one i just i don't know if i haven't read it in years and i don't know if it's out of date and i would say if you're looking for newer books there's a list apart but i don't or a book apart i should say i don't know if they have anything that's really like html css specific or not there we go amit's in the house he can help with animations yeah so and i i think me and i would have already agreed that we're going to be doing some more stuff together so uh once we get around to that that will be the the collapse i do with with amit will be helping with advanced animations ian yeah if you can do some advanced stuff with svgs you are a wizard and you should definitely let us know how you do it two more to go guys two more subs and we're there three oh somebody unsubscribed that's all right what plant is that it's a there's a name for it but i don't remember uh and it's also a fake plant because i'm in my basement did i make that my for me says two nine nine nine nine nine oh there we go it just rolled over thank you all we made it now somebody's gonna unsubscribe right it's gonna go back down all right so we hit 300 we might as well get started with what i wanted to do uh so let me just move this over to here and we'll push this to go to my screen aha there we go we don't need to keep the chat there i'm going to move the chat to this side here um i guess we don't need the counter anymore since we hit it so let me turn off the counter there we go we don't need that and um so yeah thank you all we made it a basement must be chilly no it might the where i live houses the basements don't get too cold i have heating too so thank you guys yeah that's exciting um nora i noticed you made a more javascript tutorials one to two years ago am i planning more in the future it's as it i make javascript tutorials when i find like i did the intersection observer series because i started learning about them and i go into them and started using them for a project i was working on i'm like oh i should teach this um i haven't been doing a lot of stuff lately so with javascript so that's why there hasn't been too many tutorials on it fun gamer excited about windows 11 it looks like windows is trying to be a little too iosy for my taste but it looks kind of nice so we'll give it a chance um all right so yeah this is i found this and it looked kind of cool and i want to try and make it into a website so that's what we're going to be doing uh is trying to make this layout which is a magazine layout and i have a specific things that i want to focus on um so this is on behance i'll throw this in there and full credit this is buy let's credit dewey nguyen uh i hope i said his name right but he made this layout i thought it looked pretty cool so i want to make it um thank you everybody for your subscription uh your congratulations i do appreciate it um g g b day thank you very much for the super chat super nice of you um so what are we gonna do let's move this on over to here and i did we're not using the same image i don't have his images so i found a picture we're going to use and we should have vs code right here with nothing in it we're going to start from a a blank slate to make this uh so obviously we need an index.html and yeah i need a few more to catch pewdiepie i don't think we'll be getting there especially not when you're just talking about css style.css um so let's whoa we're in the style.css file save that and let's do this um and let's come here and do a link css there we go so we should be let's just make sure this is working um i think i can do this right open with live server and just to make sure this is working [Music] body is red ah perfect okay so everything is hooked up and working properly so we're ready to start working on it and i sort of want to focus on a couple of different things for this i want to focus the picture we can bring in afterwards um i and i sort of want to see i don't know if my resolution of my screen is going to be big enough to make this work as sort of like a spread that we can then change at responsive sizes but i sort of want to focus on the the right hand side for now um on this layout and then maybe afterward we could squeeze the other thing in if we have time and all of that just seeing what's happening in the chat slow down a little bit now which makes it easier for me if ever people you guys have questions it might i might not get to them right away as i'm writing code but um you know you can ask stuff anyway this music is um i'm allowed to play it on my stream red is i think it's the shortest you know it's only three characters and it just comes to mind really fast so um all right so what do we need for and i don't have a picture it would be nice if i had an svg for those glasses we're going to focus on like the text here so let's just say we have uh i guess that's in should we do it let's just do a main it's sort of an article so you know what r t call we might as well um i don't know if we need the main then whatever i'm going to leave it um so the article has an h1 which will be chip kid we need some lorem we have this underneath so it's gonna be a paragraph that paragraph should have a class on it actually uh so let's just call it subtitle or no it's um this hmm is it a subtitle or is it a lead i'm really going magazine i think that would be considered the lead so the lead is always like the first paragraph on a magazine article that's a little bit bigger that tries to get you to read that so you know what you're going into so we'll call that the lead we'll just do like a lorem 10 it's not very many words um this will be all with lorem and then we get these paragraphs here and there's a block quote that's in there too so let's start we need two columns so let's just do a uh let's just call it um do i call it columns do i call it we'll call it uh article article body article body is going to have p times three that looks like three paragraphs maybe four but we'll do p times no we'll do p times four uh with lorem they're pretty long 45 i don't know we can always play around with that a little bit and after the third paragraph we'll throw a block code in here too block quote of lorem one two ten let's just say there we go i think that's all we really need i'm not putting page numbers on the bottom if you want me to i guess we can do that um as i said should we look at how i could do that image too okay i'm not going to do the glasses image across the top but why don't we just from the very beginning try and make it look sort of magaziney and then we can see how we could actually get this to work at small screen sizes too um so let's just throw now this is making me think yeah let's throw an image here and i'll just call it um article will be a main image not the best names in the world but whatever image and i already have a picture to use and we'll just put for the where's my alt let's turn word wrap on uh my alt can be a man wearing glasses in the sun uh whatever man wearing glasses should be fine i actually found out i have an issue on my own site that we need to look at all right let's see what's happening in the chat before i keep going i'm not planning on doing the glasses if i have time maybe i could i could uh we can make an svg out of that they're not very hard to make by the looks of it but it's a subtitle the lead is the yeah whatever i guess yeah but this isn't the lead really isn't the lead usually like it's a like i guess it is a subtitle no they accept cookies there we go i've accepted the cookies cookie banners are like the bane of my exist like of web development in general these days i think um am i gonna no i'm not gonna make them pages flip mohammed we're just going to do straight css for this one because i don't think it's me very complicated i wanted something that'd be fun and um not too hard to do so we're just going to go with regular css and i tend to do that for if i do a bigger project on youtube which i know it's been a really long time and people have been asking me for something bigger i do have something cool coming next week actually um though we're not writing any css in that one um but yeah next big project i do will have sas in it uh you know we need some fonts here i don't know what font that is but let's see if we can find fonts.google.com um so it's a sauce era for sure we're gonna have two fonts um so the main body font like i'm looking here which is not the biggest can i zoom in on this i don't know how behance works i can't seem to zoom in on it even if i just make it bigger it looks like a regular sort of serif this one's like a more narrow one the letters are very squished and a bit more squared off so we definitely have two different fonts coming in here i'm not going to try and match them perfectly but we could do they can open size i think for this one so or do we have is open songs variable let's see if we can use just variable fonts because it makes life oh oswald might be perfect for that one so we're definitely going to grab oswald for the okay i always show this trick just if you're going to use one of the open um one of the variable fonts from google just select two styles doesn't matter which part the easiest thing to do is choose the light one and the bold one um and we only have a weight we only have the weight axis that we can play with as a variable font here um so if they had the italic one i would take those but i'm not going to use italic anyway so we'll just take those and i'll explain why you take the smallest and the biggest one in a second um so that one's good let's go back to my fonts only variable and uh not railway not rubric uh maybe carla hebu what's heboo i've never seen hibou it doesn't look bad with hebu i like the name uh so again i'm gonna take the the lightest one and i'm gonna go all the way and take the biggest one and now let's go and get this so we have both of them in there hebu and oswald good okay so we'll grab that we'll drop that in up here let's just call this uh chip kid i guess um and then we need these two guys right here so we'll copy those guys we only need a few things actually before i get to my body even um let's do our route we'll set up a few custom properties so we'll have let me just okay let's just do it let's just come on come on there we go okay so here we'll have my hebrew is my body so font family body um and then here we'll do font family heading and we can do that then my colors i think there's only two colors right we're gonna have color primary i'm just gonna just in case i decide we'll do that hsl oh you know what i'm gonna do yellow rgb what's yellow in in hex red no is it zero zero ffff is that yellow probably not no not even close whoops what's yellow oh f f f and then the zeros that's okay um okay so let's just do ff so it's pure yellow and then i'm going to switch that to an hsl [Music] there we go uh so that's my yellow and then my color neutral is it worth doing whatever i'm still gonna do it 900 it's hsl um it doesn't matter so zero zero percent zero percent is black and then my oh look vs code doesn't notice the new syntax uh neutral 100 will be hsl zero zero percent 100 not 10 100. the new syntax for hsl and rgb you do not need commas on anymore so uh so you know what let's be consistent it's annoying though that um vs code hasn't caught up with that you probably have an extension that can do it for us um and i guess some people are asking about font sizes and stuff so um and clamp i could see the title here so let's say font size um title or xl we'll call it xl is we could you like this could be i like doing clamp for these types of things where it's a really big font size this is we have to play with it so i don't know but let's say the smallest is three ram then we can do a one ram plus 10 vh and then we can say that the biggest is i guess it looks pretty big and we'll see if that works from there font size um so 400 for me is my body size so we'll just say it's 1.125 rem because that's not a bad font size to have um so my font size 500 whoops 500 [Music] i don't know why font sizes i always go from big to small but for my colors i usually go from anyway it doesn't matter font size 500 is sort of my subtitle i guess uh whatever 1.5 ram i don't have a lot to do here so i'm not setting up like a proper typography system font size 600 will be my block quote uh we'll just say that's a two ram and we'll play with it from there one reason i really like doing them here is if we decide that we need some breakpoints or to change these we can do that in a media query which is really nice um let's see what's [Music] vince minnie asked if you were using sasses it better use sass variables for color or custom properties i like custom properties for everything these days um i do have a video somewhere on youtube where i look at how i use a sas map to give to create my custom properties for me uh i like custom properties a lot just because you have a lot more control over them like they're they're custom there's still variables within the browser so it just leaves a lot of doors open uh for different theming and different things that you can do it's maybe less important for colors but there's so many cool things coming to colors too that are down the road for sas like mixing colors that you could do with custom properties so i think getting used to using custom properties is always a good thing even if you're using sas hsl is nice because you just get control over it so like this is my yellow and if i need a brighter yellow or if i need it like a less bright yellow i can just play with the saturation i can go closer you know wash it out or if i need it you know i can go closer to white by increasing the brightness or i can go closer to black by decreasing the brightness and then you know you don't have to worry about like with rgb or hex you're just i don't know it's it's hard to to do that stuff no i'm not cloning the image uh this picture is not going to happen with with css i have an image that i actually used because that would be really hard uh the next thing i do want to do i don't need a proper reset do i let's just do a body h1 h2 h3 block quote block quote margin of zero padding of zero i don't know if does does block quotes come with padding on them i'm not sure anyway i'm just going to reset all of it um is there anything else i want to do as a reset normally i would bring in a bigger reset but we don't have too much images display block and max width 100 it's a pretty stand i don't remember all the stuff i include in a reset because i never write resets every time i just always copy and paste them or use like a starting repo template that i can just reuse every time so i don't have to re so i'm trying to remember all the things that i might want to reset [Music] um we'll stick with that and see if we have to change anything else you could make this image in svg if you wanted to but yeah i'm not gonna we're not even gonna try um so okay before we do anything else let's just say h1 uh or actually i don't even have an h2 i just thought of that so whatever each one um font family is my font family heading there we go oh come on vs code don't do that to me usually if you choose from here there we go okay um actually let's just come up body um font family here too font family is my font family body then we want to have my font size is my uh font size 400 the what else do we need you know what i just thought it's using justified text which makes it look nice we'll see if we can get the justified text to look good we might uh i should have thought of that ahead of time but that's okay francesco i could do that as the reset um i just i don't know you know what i forgot the most important one uh i don't know if we're gonna need a pseudo-element but just in case we do uh before and my star after box sizing border box never ever leave home without that um should you preview your page before making more changes you should pre i don't have anything to preview yet though so like right now i'm just setting up the basics so i don't need to preview my page i will once i start doing layout 100 i'll be looking at it um i had my uh we called it lead even if it's not actually a proper lead uh font fam actually you know what i'll do let's just do h1 dot lead and it was my block quote so again this isn't like you could even have a utility class to set that if you wanted to which would be perfectly fine i know i'm not the biggest fan of tailwind but i am a fan of utility classes just in a little bit more limited fashion than tailwind does it yeah i had a business card stuck to the bottom of my glass there for the electrician i recently needed double decker couch yeah no i agree i don't know i'm gonna see it i might if we have time for it i might grab a js library or something to do justify text because normally on the web you do not do justified text mohammed do i know dev ed i know him i've talked well talked i've talked online with him um i don't know if what would happen i know he was thinking of moving to canada at one point so we were chatting a bit about that and what it's like to live here i don't know if i guess kovid got in the way of that or is he here and i just don't know it i'm not sure i haven't watched a dev ed video in a long time actually i should see what he's up to these days um h1 lead block quote uh okay now i guess we should look at what my page looks like so let's pull it up um okay so what do we need to do obviously we need to so actually let's do this and where do we put my design so i can see it okay how did i do this again i have my article and then my image whoops see doodles we don't need to open that uh i'm gonna leave the aha i don't like leaving it off screen we'll just do it really small like that for the moment um okay so we are doing responsive so there's a few things that are important oh i forgot to show you the fonts and okay before i go any further if you get the variable fonts off of google to actually give yourself access to all of them instead of having to select every single one of them here this only works if it's a variable font don't do this if it's a regular font you have the 100 to 900 you just put two dots there and that means you have access to the whole range of them so just like that we have access to all the font weights and you can see doing that actually switch this back over to the 400 from the 300 so that makes life a little bit easier um actually another thing okay we'll do my h1 now h1 font we'll do my font size first we'll see what that looks like is my font size xl and then we also had the um text transform of uppercase and let's just go in and mosey on over there and see what that gives us that's not terrible it's not quite the font family i wanted did i declare my font family i did is that really the right one is that oswald i thought it was more compressed anyway we'll stick with it um i guess all of these they all looked oh no my lead wasn't using it um so here what we could say is font weight let's see what the 900 gives us we'll go with that so actually the font doesn't look big enough that's a c that's as big as it's getting and if we make this smaller let's just see if the clamp is working here so the clamps working so the small sizes it doesn't look too bad um line height font size line height of whoops line height of one and actually my body here let's just do a line height of 1.6 um so here on my font size xl we can make the bigger size of this get bigger than seven rim that that looks like we'll be getting to a better size at the large screen size so ideally what's gonna happen i think this image is actually perfect right there um so actually i like that the image is touching the edge of the viewport but i don't really want anything else here to touch the edge so there's a couple different ways we could do that one way is just to wrap everything in a div which probably makes the most sense to be honest um there's a few different ways we could do it i'm going to show because this is just like a really not realistic example of something you would necessarily be doing um we'll do it the the cheating way so we're not changing the html it's not cheating at all but article star not uh an image we could do um [Music] padding of two ram uh zero two ram we could do that i don't know if i like that but we could do that um so it's adding padding to the left and the right of everything like all the direct children except for the image so this is getting padding left and right this is getting padding left and right and this big block is getting padding left and right again not an ideal solution probably but it works in a way so that's okay the other thing we want to do on the article so we can say article is a display of grid which is going to work where am i missing after my h1 uh low list height whoops line height and i have another typo somewhere 41 ah thank you ah thank you very much that looks much more like the font i was expecting to have thank you very much government uh badge guy oh a few people mentioned it thank you guys everyone who mentioned it i appreciate it line 54 oh this so it's any direct child so this like if you just do this it's any direct child of your article so if i do that my image gets the padding and then my image also won't touch the side because it's getting the padding on the left and the right so by saying all direct children but not my image or no yeah this is actually a better use case for not i was thinking we could use the is selector as well but i don't think the is selector makes a lot of sense there you know what the lead doesn't use this font so i'm going to take that off here and i'm going to move the font weight up here i think that makes more sense let's turn formatting on because that's going to help me out a little there we go okay that's better um so there we go all right so i'm going to use a grid for my main layout and i'm just declaring it here so if we have collapsing margins or anything like that um it's going to work all the time but then we can do an app media [Music] screen whatever i have i'm lazy with my media queries i don't bother most of the time um media min with 40m um if you want to know why i use m you can follow me on twitter i went on a big rant about it the other day i will i'm planning a video though on it specifically um we can do grid template columns actually i'm trying to think if this is going to be the best thing to do but let's just say 1fr 1fr whoops i'm so used to sass guys and nesting my media queries that i do this all the time article i forgot to get my selector in there and then grid template columns one fr one fr40 m is going to be too narrow 50. um and then we could actually use this same selector so actually let's just take my media query down we could use that same selector and i can even do it here i guess but um i want grid column of two over negative one okay okay so um okay and then for my image then i need my image to go from the top to the bottom which actually gives me a little bit of a problem if i want to use grid now that i think about it because of how well actually maybe it's okay let's try um i don't know if this is gonna work uh or i'm just doing article just because i didn't give it a class um grid row one over three is that gonna work oh um and then height one hundred percent object object fit cover let's see if this works you know what i have another solution that might actually work oh that worked cool okay there we go um so at the small screens it sort of just makes sense we have it like this then we're going to the bigger screens and the layout breaks across two and then what's gonna happen is when the layout gets to an even bigger size um at one point this text should be able to fall into like our two column oh look at that they added like a little swipey thing in firefox when you're in the touch mode or maybe that's always been there i don't know i'm not always in touch mode um but this text here i want it to switch um to being two columns so to be able to do that what we want to do let's go see how i did this in my html so here i'd made my article body and i did this on purpose so what i want to do for the article body is we'll do it here just in case we need a media query but i don't think we do um so we have my dot article body and we're gonna say that it has columns of two but say they're we want them to be 40 ch and this is one of those underused css properties so let's see if this works it's not working why am i not getting caught oh there it is it is it's just my 40 ch is too big cool nice so i think a few things i want to change um so let's change this 40 to a 30. so there we go we got two columns great um so at this ah that it is working perfect 30 is a nice number so you can see there we have my two columns um so here it's one it breaks into two because there's enough room for it it goes back to one because there's none it's almost like a container query but not quite um and then we get to back to our two columns and that's looking pretty cool actually i like that um the order i think it doesn't matter actually uh yeah so one thing it's important to see someone mention the object fit worked um this is only like it's it's really specific how this is set up because i said that the image had to go from column one to a row one to three let's turn on my article grid um the reason i was like oh this might not work is because you can't because i didn't declare my rows i'm it's implicit rows it's not explicit row so i didn't say i i have rows they're just automatically being generated i couldn't actually use the negative number to tell it to start at the bottom the negative numbers in grid if you want to use them to say like this is the start and that's the end they only work if you've declared your grid template columns or grid template rows but i knew i had three just because i know i had one for this i knew i had one for that and i had one for the whole body so i knew that there was three lines so we have one two three and then four at the bottom so i said that height 100 is important because if not the image isn't going to grow the image would actually just stay at its normal size it just has that space to live so i'm saying the height is also 100 and then the object fit cover allows it to be cropped um similar to a background image the other thing that's important on that is what else is important on that i guess that's it the other solution i was thinking is if that didn't work i could use position absolute but that i don't know if it would work absolute position with grid is amazing um it's really cool but i i try to avoid absolute positioning when possible um another thing in this layout actually i just thought of is the gap was really big so when you use columns you can use a gap it looked really big but i think the problem is if i follow how big they ah had it it's not going to get big enough but we're going to change this here um let's do this i mean really it's a magazine layout they would be equal size but maybe we want to throw a min max on that first one so the min [Music] min max can i do a 50 as the min and then a max of i'm just going to try a number and see what it looks like i'm worried it's going to break everything oh the 50 is going to be too big because of the padding and stuff oh maybe this is too big in general or is that mid max see i don't with min max this might have to be can't i do that or is the minimum it's doing the percentage as the mac uh so if i did like no it's not going to work the way i want it to it could probably do it oh wait it's not like that that's why maybe it would work 30 let's try again and what did i say let's just try 30 ram that might work better it is working better kevin you got to get these things right so maybe that's a little bit nicer maybe we could actually bump that to 40 and 40. um so it just means that really big screen sizes at one point like this guy doesn't keep increasing in size so here oh that's a problem see now what it's it's using it's using the 40 as the minimum in this case instead of the 40 percent um so instead of a min max actually here i could say use whichever is smaller let's just do a min use whichever is smaller is 40 whoopsie doodles my usb drive disconnected and reconnected 40 which is smaller 40 or 40 rem that will probably make more sense so now it's is it 40 or 40 ram is smaller so that's what i wanted so not a min max i just wanted a min so now it's at 40 because 40 is smaller than 40 ram but then once the image gets to 40 ram it locks into a certain size i think that works better and this is more for websites and not print so we don't really get that two-page layout i just think this overall looks a little bit better i'm also going to do another thing here which is my article body is going to have a max max width on it as well max width of we have two columns so two columns we could probably go as big as 80 ch and i like ch oh we can go bigger than that 120. let's see what that looks like are we hitting the maximum 100 maybe i like ch when it that looks pretty good like a maximum i like ch just because it's going to react to the font size um so for that it's good so if i change the font or the font size in here it would react to that because the ch character is chara it's literally characters um it's an estimation it's based roughly on the letter zero some fonts it's not included i think if it's not i think if the font doesn't have the information it even goes to an m anyway maybe someone might correct me on that though i could be wrong um this is i see somebody asking those grid lines are from the this is firefox so if you're in firefox and you can do the same in chrome you go to layout and then you get like a grid overlay which is the greatest thing in the world if you're using grid uh chrome also has one now as well and there's also in firefox there's a flex inspector i'm not using flex but there is a flex inspector and there is one coming to chrome i think it might be in canary right now there's a flex inspector maybe it's even in chrome the full version now i know there's like dev tools with it um they added more dev tools to chrome's flexbox stuff anyway um let me just see what else is happening in the chat before we keep on going i'll make my face a little bigger oh there's we're still we're over 300 we did it guys there we go i can turn that off again um it seems gap is not supported in safari it is it's it's supported in safari now or did i know they had an issue with 14.1 and i think things rolled back a little bit because there's bugs but as far as i know it's available in safari [Music] um [Music] flex inspector sounds like the gym police [Laughter] chrome has it already the flexbox one that's good i just wish the the flex i still prefer the flex inspector in firefox because it shows you some stuff that the chrome one doesn't but i really like those little buttons that the chrome one gives you where you can change your alignment really easily that's super cool uh yeah really nice i use i'm always i'm primarily in firefox so sometimes i don't notice when new stuff comes to chrome doesn't it let's go check out chrome and we'll do a little let's find a window i can open okay we'll just do here pull this over let's go to codepen i know there is an inspector i just don't know if it's this it's not the same anyway that's a secret project i'm working on uh let's just do um div times three with lorem five and then here let's just say body display flex and then let's go back to this one so you no not that one there we go that one um let's go see inspect uh [Music] what do we get what's new go away where's my uh this is good ol okay let's inspect you there we go so we get the little flex thing here so there is some sort of i knew this so this is cool where you can like change how the flex direction you can change the wrap no wrap so like this is really really cool um the only thing i don't think it has is do you have a grid overlay oh it has flexbox overlays too ha so we do have some flexbox overlays as well which this one's on this is all the stuff from codepen though so we're getting a big mess of stuff in here um so i don't i'm sure the one i'm actually using is in there somewhere is it this nope anyway you can see there this is all like flexbox visualizations it doesn't have the same as firefox definitely has more information on like how the sizes are being calculated and stuff though but that the little um where is it we're just on it on the styles this little thing is so cool i love this so much all right little side tangent we can leave that um okay next thing i want to do is i want to fix one thing that's a little actually that shouldn't be happening why do i still have margins i must have made a typo somewhere else because i still have margins on everything um because one thing that is a little bit annoying with columns is you get this with your if you have margins on because this paragraph is starting here this has a margin on the top but then like this is the middle of the paragraph so there's no margin in the middle of a paragraph so if you're using margin top on stuff you get problems like this so um whoops we don't want to do that i can close this and we can shrink this back down there we go uh the one problem with the mobile one is you have to shrink this down first and then you can shrink this down okay so uh what did i say we wanted to do i just got completely distracted oh the margins what i put margin zero i must have made a typo oh i did body but i didn't do my paragraphs paragraph there we go um and then i i got this from andy bell and i really like it so i'm going to use it here uh we'll do it before my h1 before my body utility classes i guess here uh we'll just call it flow and then we do flow uh flow uh margin top of uh margin top flow select all the direct children um and actually this is one uh where i always did it as not um first child right no i didn't do that i did plus plus people want me to do the the not first child this just is lower specificity um and there's even a way now we can instead of anyway there's ways of doing it on the not selector one to lower the specificity now but i'm just gonna stick with this uh we'll say margin top and i'll do color on it too so we can see what this is actually doing but margin top will be 1m and it's really handy doing this with a var uh we'll call it flow spacer comma 1m so the default is going to be 1m because this is an undefined custom property so the default is 1m but if you need to overwrite it somewhere you can overwrite it and i said we'd add a color red there so let's just say color red because what i'm going to do is start by coming in and on my article body we can add flow so it's like document flow and you can see it's selected everything except the first paragraph in there so by selecting everything except the first paragraph that means they all get the margin top now we don't want them to be read so we leave that off and they'll get the margins on them um so i can actually come in my article and add a class is equal to flow here too and then we get because this it is set to 1m it's going to follow the font size so if you find it too big in some places you can always modify that a little bit um and you know there's nothing stopping you from doing other stuff too and the reason doing margin top instead of margin bottom um you could set up something similar using margin bottoms if you preferred where you're just it's this is nice because it's no specificity with this so the not selected would use would bump the specificity a little bit um but you could do like star whoops if you prefer using margin bottom on stuff you could do a star not um uh last child and so you could do that and use margin bottom instead if you prefer that um but i'll go with this again it's lower specificity so it yeah it's called the lobotomized owl and it this has the only so flow does have specificity to it but this has none and so the advantage with that is uh it's just easier to override if you need to for something but again we have the flow spacer that we can also modify so just to show you actually why the flow spacer is cool is i can use the same one everywhere but then i could come on my article and say that my flow spacer is 3 or four m let's make it gigantic and then uh oh that's my whole article so there it's doing it for everything let's save there i could do it just on my article body and say that my flow spacer here is for m and it's going to overwrite it only in this area and everywhere else is still using that default value so that's why it's kind of cool to do it that way again that was i got that from andy bell he uses it quite a bit and i thought it was a good idea so i started using it um yeah we're not going to justify the text because it's not going to look good but so far so good that's there my spacing's okay we're just going to come and say that my lead lead has a font size of font size 500 i think oops you need a dot at the beginning there we go that looks better uh this also we can throw a max width down here max max width of like 20 ch ooh that's way too small 35. um i did notice in the original i'm maybe that's too short now i did notice in the original um article let's go see if i can find my original picture i lost it did i close it oh no it's here um the that looking it here like see how it's not the full length across the article so we can limit the max width on that it's probably the easiest way you could use a br somewhere too but something like that i think works so it can stretch across but we're just saying don't be too long because we don't want you to what if the column breaks right it is breaking in between paragraphs right now um you won't get kc so with the column property um it doesn't add margin where like it creates breaks so here like this paragraph at the bottom it is this is like this is all one paragraph here it won't add anything to the top of this because it's only a fragment of it this whole paragraph is getting a margin top but it won't affect this here this is firefox nightly right now uniba um i might i keep shrinking that without closing this down we don't have a lot left to do there's a couple of interesting things that i have left though um so let's do our block quote and then we'll worry about that later this that was just a drop cap so we're gonna see if we can make that a drop cap but let's just style the block quote first um i'll do it here just because it's sort of like generic block quote i didn't give it a class or anything uh font size was var font size 600 and it was also a text align center i believe uh we'll do a line height oops i like line height right after my font size line height i don't know if we'll keep that line height of one i don't know if i like that center a line on there 1.1 1.2 there we go um but one thing we'll definitely do on it is the margin bottom is also going to be 1m just so it's equal spacing on the top and the bottom and just because we can let's do a block block quote i talked about this on my tuesday video um before content is open quote oh no whoops don't put it in quotation mark i'm so used to having content like that there we go open quote you get your opening quotation mark automatically for free and i think if the design only had one let's open up the design again oh no it had at the beginning and at the end that's okay so we can do that and then i can just duplicate you and say the after is a close quote there we go that way you don't have to worry about it in your html and you don't have to have it like with the quotation marks inside your block quote you can just put the text and then it it drops those in for you so i sort of like that and it's not like from a semantic point of view having the quotations on there doesn't really do much um having it in a block quote is what's important the quotation marks are really just a visual clue for somebody looking at it can you prevent typographic widows and orphans with columns not that i know of um there are ways of doing it for print but i don't know if there's ways of doing it with columns you can prevent things because it is if you're using like regular paragraphs like this um it it works really well when it breaks across like that um but if you have like let's just say that my article body uh dot article body p oh no i'll show you two cool things p uh let's just put a border of one pixel solid black so like if these were cards rather like it's really awkward that it breaks across now because the way the border is working so you can when you declare columns you can do i just did a video on this break inside avoid nope or is that do i do that on the paragraph i just just did this on a video there we go okay so it's on it's on the paragraph itself so you can tell items that they're not allowed to break so that way it sort of keeps them together or sort of it always keeps them together they won't break across two columns so that you can do but widows and orphans i think are really hard to to have problems with another thing that's really cool with columns is column oh man what's it called column rule thank you column rule let's do two pixels solid yellow just because we haven't used it all right let's do something you can see red check that out it makes the vertical line for you in between them and why this is super cool is let's just say we wanted three columns that were smaller just so we can actually see them so it's putting it in between each but then when we get to two columns it goes to only having it in between those two and then if we did get down to one column there's none i love that so much so that's your column rule uh we don't really need it right now but um yeah if you need vertical spacing between your columns perfect that's just undo actually to get back to what we had there we go [Music] um yeah i see some people talking about something with the widows and orphans i know there is the property but i'm pretty sure when it says top of the page region or column or maybe it works in columns then but i do know it's it's i think much more for print like if you're printing things and making a print media query but i could be wrong okay um so that's working i think it's actually looking really good um so i want to do my drop cap now so the drop cap is surprisingly easy to do um and it's actually sort of what inspired me to start with this in general because there's not a lot of time you need drop caps on the web but if you're doing articles i think it could be really good um so article body okay i'm gonna get really specific here we're gonna do article article body p first child first child so it's only going to select it's only selecting the first child that is if it's a paragraph that's inside of article body um and i'll i'll give so well let's just style it oh you know what first child first letter so first letter is a pseudo class a pseudo-element that we can use so i'm placing this pseudo element on my pseudo class of first child so lots of pseudo's going on um here just so we can make sure we you guys can see the whole thing there we go and if i did it right we should be able to say color is red and it should change ah it did good it would look kind of silly if that didn't work um the joy of live i can usually hit undo if something doesn't work if i'm recording and just edit it out so i could say font size is 3m now it's not going to be as nice as a proper drop cap oh that's problematic too um it's okay um real drop caps on like if you're using print software you can you have so much control over them it's wonderful um in this what we actually want to do is a float so float oh is this going to work because it's in columns it does okay um so you can see it does work but there's an issue with the positioning of it and this is just because the way the letters and fonts are calculated so you do have to play around with it a little bit to get it to look good as you can see um and you can't really say actually is there there might be something for how many lines big it is but i don't think so um i might be i'm thinking of indesign right now the other it's a lot of the issue with this and getting it to line up properly properly is just like if you select something in css and that's not going to show me properly because for whatever reason but here let's just select kid see how when i select kid there's all this space on the why is it looking up with anyway that's so funny i'm getting definitions i didn't even know i had grammarly installed in firefox um when i select this text though you're getting that space on the top and the space on the bottom there so that's why when i did my 2m here or was it three when i did 3m like it looks really terribly aligned it's sticking out the top a bit it's this weird gap on the bottom it has to do partially at least with that um which is kind of annoying so you can play around with it to try and get the size that you want it to be um to get a nice drop cap you do want to do it with a float so the text actually wraps around it where else it's not a drop cap it's there's another name a raised cap i guess i don't know there's a name for the ones that aren't dropping um there are some things coming to css that will actually i think it's called trim letting there's like i don't remember the property is but there's a thing that will cut off that this extra space so if you were to select this like this and this would be cut off and it's actually the height of the rendered letters we just don't have access to it yet but i think if we had that it would be much easier to get things to be the size we want them to be for this type of stuff so yeah you could use a span and and pull off the same type of effect i just like anytime i don't have to access my html to be able to do something like this i like it um and even this like i'm doing it like this like me you could even have like a drop class a drop cap class on your paragraph and then you just anytime you want to drop cap you just use that class and i think that makes more sense for me because it's much easier like if if it's a personal project that's one thing but if you're working on something as a team and then you're like oh you have to use this span and then so they have to every time somebody wants it they have to put in the text then they have to go into the text and add a span and add a class to that span it's so much easier that if you just drop like here and then class equals uh drop cap and it's just there so you don't have to worry about like you're adding a class to the paragraph and that's it um and if you were to do that like your markups your your whoopsie your css is also a lot easier um you wouldn't need this whole thing you could just do um like drop dot drop cap first letter and that would work perfectly fine um so i'm just doing it as a little bit like this this is almost like if i was trying to do this with a wordpress theme or i couldn't or like something that's generating content and that's also the thing with an article like this a lot of the time it's gonna be generated content so you wouldn't even be able to put a span there anyway or you i think you probably it's a pain in the butt anyway um if you wanted to so like this is something if you're using generated content which articles generally would be every article coming in is just going to work automatically which is handy [Music] kevin toronto developer columns is a property of grid or which layer it is columns is columns it's its own thing it doesn't it's just columns um so you don't need flex you don't use grid you just use columns and actually i've seen cool examples of using columns with grid it's just because of the breaking stuff sometimes it gets a little awkward but you could lay out a grid within your columns and do some like you and it's really weird how because okay let's say that my body has the article body has the columns on it so like you could net inside of your thing that has two columns you could actually nest a grid and the grid gets broken up across the two columns it's really wild and if i've tried making a demo to do it and i was just breaking my head against the wall but if you could get it to work and harness it um for what you need it's kind of neat like you could set up a single grid for a form and then use columns to actually get it to be two and then one and two like one and two columns automatically without needing a media query to rearrange your grid it's it's cool it just it takes a bit of setup to actually get it to work uh can we get the source code i could put it on i'll at the end of the stream i'll copy and paste into a code pen and i can share the link there kevin can use display inline block then you can use margins on any side what do you mean fred like why would i want display inline block for what is there a rows property no only columns ian yeah column's been around forever vertical align text top for that i don't think it would oh um we could try that i don't use vertical line over text top we could try [Music] see because i actually think they are lining up pretty much along the top uh display block no oh it doesn't like this [Music] oh it's because my block that was some nice linting there thank you vs code [Music] my may yeah the stream will be available afterwards [Music] um i mean yeah you could i could do uh i mean i could do a display block to display a block just so it um it's floating so it doesn't matter and then margin top i don't know what would happen now 0.25 m so yeah you get you can sort of start playing with it and try and get it to but you always get like it's one of those things where you do it becomes like a bit of a a game where you're trying to like line it up and then play with the font size and play with the margin it's all a bit of a nightmare um and if i didn't do the float so let's say we took the float off um and then this is an inline block it's not really going to help because we like that's terrible right so you really want to have and this is that space that i said when you select something that extra space on the top and the bottom um that comes in so you definitely if you're doing the drop cap you definitely want to have a float on there um but then yeah you could play around with with different stuff after that if you want to try and line it up a little bit better [Music] um [Music] yeah we finally have support for everything these days which is nice um another thing just since we did first letter that you can also do is let's just take this same selector uh one thing i'm going to say i did first child here on purpose people learn about drop caps in the world of design um so design software and then they do this where they give every paragraph a a drop cap please don't do that um drop caps are used as a way to draw attention to the beginning of something it has a v like if i'm looking at this first of all to me it just looks really ugly it's to say it's sort of you learn about drop shadows and you start using drop shadows like crazy and you start experimenting with it um but drop caps should not be used everywhere they should be used at the beginning and that's it um because like they they bring they they attract the eye so you see the title you see this and then your eye is being pulled to the drop cap so the problem now is as i'm reading this my eye is being pulled to the v like i'm looking here but that v is like staring at me and it wants my eye to go to the v and then as i'm here like i see all these big things that are popping out so it doesn't help anything it just hurts so like if ever you do decide to use a drop cap make sure it's only and one paragraph and that's it because now we get this we go to here my eye is here these are always pull quotes and block quotes and that type of thing are always bigger just because it's really skimming and stuff it helps add a bit of visual interest to the page um but you know we can pull ourselves through the article and do different stuff with it but just just watch out with um drop caps and don't do anything silly with them um and that same piece of advice goes to what i'm about to do which is this um you probably won't use it very much but you do have first first line as well um so you try and in in the magazine and print world you don't usually do first line but um a lot of times it's like a certain amount of letters or words will be uppercase but that could be something you use um that could be kind of interesting whoops i keep selecting the wrong window when i'm making stuff bigger and smaller there we go so you can see the first line became uppercase and it's interesting because like as that first line changes it's adapting automatically so it's whatever is on the first line of text will be uppercase and then everything else and it's as the screen size is adapted adapts with it so it's a pretty cool pseudo element right there but it probably i don't i haven't run into many use cases for it but it is something that we have access to [Music] casey first time watching well welcome i'm glad that you found it uh you're a full-time front end dev full webdav with a friend in focus and you've already learned so much that's awesome great can you use sas to remove that fake beard um first line is bolt ah yeah first line is bold so you can do that too um that that could actually probably look better than all caps font wait we're using let's let's do an 823 because we we can that's way too much the joy of variable fonts right so you can do something like that that actually i think makes more sense bold looks pretty good there there we go super cool i love this type of stuff um and we do have a media query in here um but it's just for my grid and making sure things are on the grid like i love that this can be done without a media query [Music] oh i just got an amazon package delivered i think could you try initial letter two can we do initial letter is the initial letter a thing i don't think initial letter let me see mdn initial letter first letter i don't think we have something that does more than one letter do we i think the only one we have is first letter alfonso no we only have first line we don't have anything else josh friedman i do those once a month on twitch um so the next one is you have to be in my discord to submit um websites for it and if i open this i could no that's not the right one let me open that and then go to my calendar the next website review session is on july 8th over on twitch they're at 1pm eastern that i do them [Music] um oh safari has initial as far as had uh now now that paul said that i think safaris had initial we should be able to find initial letter css oh there it is we found it now so here first letter first letter everything same with first letter not initial um let me just see oh wait i could change the line height of the one that i did for the first letter initial letter two so yeah it's only safari that supports it right i think they've had it forever too but if it's only the first first one you're doing you can just use the first letter anyway so that might be why the browsers aren't doing it um oh it's only in the technical i think they've had it for a while though haven't they or maybe this is i don't know um yeah i'm just curious why you'd want to use initial letter over first letter because usually you don't want to drop unless you're doing i guess the first word but there'd be no way to you'd have to play with it every single time and it's always the first word as the drop if you want to submit your work for reviewing it um it's on my discord and it's only the day of actually i'll show you guys how to do it um i think my discord is probably linked in the description below uh so when you join there's a welcome channel and in the welcome channel you can add roles uh so here you can add your role to tell us what type of developer you are if you want um then here there is this role right here so if you choose you can get the role you just click on it so if i click that like i removed it i click that it adds the role to my account um if you have that role enabled when i open the channel where you can submit your reviews um it it's you get a notification so when i open it you'll get a notification within discord that the channel's been opened and we'll be doing some reviews uh i could also get the link to that i'll one second i always checks i don't want to check status invite people there we go edit invite link so it doesn't expire copy and there we go you can join the discord with that link i should link my discord on my website i think it's the only thing that's missing all right thank you qv my github link is not working huh whoops i guess if you look up if you look me up you'll probably find me just with a google search i guess i don't have tons of stuff on there but is it better to code with a windows machine um no probably not it's a bit more work to be honest it depends what you're doing let's start there um but you you if you start getting into a lot of the builds and stuff you're probably gonna have to do the subsystem the linux subsystem which it worked it's better than what we used to have to do which was you know you couldn't pretty much do it um and the issue is just like so much back-end stuff and um all the other stuff going on is based on linux and mac is based on either unix or linux um so it's all built like it's how their systems work whereas windows isn't so windows did make their subsystem for linux uh which helped the first version i think was pretty terrible but since the two it's not bad and you can sort of get by um but i mean you can you can you can use whatever you want pretty much kava thank you oh i can take that off here too i forgot now that we passed the 300 we don't need to have the sub counts on anymore oh and you can see we can move that over to here there we go and i can move the chat over to here because we're back to full screen face uh the windows file system is yeah and even with this um i've had problems with line breaks the biggest issue i've run up to actually is just the line breaks uh are different right so sometimes that actually is really annoying richard the full stream will be available i i think if it's not available immediately after i finish it's just however long it takes youtube to process it and then it will be available react native on wsl2 is a pain oh okay so um nando i have a video on the the marker pseudo element it's not that old either i don't think the not selector yeah we could look at that really fast um that's good the the os the subscriber count didn't go down when we yeah i don't think there is an easy coding language pro forever um let's look quickly at the knot selector and then i'll be having to get going but we can do that um so the not selector um what's a good example that i could use it here that's not like a complex selector it's basically like to exclude something so if we looked here and we so the star when i okay let's just come here and let's just say uh let's go all the way down if i say star and the color is uh red it's gonna select everything and make the stars just select everything so select everything and make the color red so everything gets changed to red if i add the not here so not i can exclude things from that so it says select everything but do not select my block quote so select everything except it's not working of course why not oh color is a bad example uh let's do background um it's because color's not working because of inheritance i think oh that's not working either ah come on what's a border border uh two because that's selecting the body uh two pixels solid red there we go okay we can finally see it so we're not relying on inheritance and the body is not getting it um so if i take that out and we take the knot off there we go uh everything is getting a border on it and then if i add the not block quote it means the block quote is not getting it and then we can also you can chain stuff here so not h1 so the h1 and my block quote aren't getting it and stuff like that um we also have others like we have an is and where selector now which are the opposite as well so they're kind of cool um i have i don't have a video that goes into how i name my things i've talked about it a lot though i just use um a lot of numbering systems so like 400 as a base 900 is more bold or darker if it's colors and then we'll so like i you know i usually have a bit more robust so it'd be like 400 500 600 700 um it's just a system i likes like font size 400 500 600 we're just getting bigger and bigger and then the other way three to one would be smaller and smaller and then with my colors four would be my base color 500 the darker version of that 600 is even darker and then if i go the other direction it's the other way around uh the will change property so the will change property is if you're going to animate something um you're letting the browser know ahead of time that it's going to be animated uh or change like there's some it's usually for animations or transitions because it means that that thing can change um you do if i remember correctly and i hope i'm not mixing this up with another property which i might be i should ah is it will change i know there's one of them that you shouldn't use too often um and you basically want to use it is it will change i don't want to say the wrong thing um mdm will change yeah okay it is will change so you don't want yeah this is the mdm is just saying will change is intended to be used as a last resort in a in order to deal with existing c performance problems so you don't want to start you putting will change on everything just because that thing is going to transition or change or do whatever like there's something animating with it um it's if there's a performance so say when you go to use that thing and it's all janky or something first of all you might be doing a sub-optimal way of animating it or transitioning it but if there's performance issues that are happening because of that you can use will change the issue is if you start doing it everywhere when something has will change my understanding is the browser actually renders out the entire thing like it figures out the whole animation before the animation actually happens so it does all the math it does all the calculations so when you actually go to animate that it it's already it's done the calculations ahead of time so it's nice and you have good performance the problem is if you use will change all over the place because these are all things that will be changing it has to do all that math ahead of time and it's actually going to hurt the overall performance of your site so don't use will change just because you it's something you're transitioning or animating only use it if there's an existing performance issue that you think it can help with and even then i would say be careful with it a little bit um but yeah i mean it obviously has its reasons for existing but just be careful rao1 games i do not have any courses on udemy i have courses on scrimba and i have courses on my own platform but nothing uh anywhere else the time profit not can be used in all browsers yes i think even internet explorer maybe i'm wrong on that though but please i mean look at your analytics and and don't stress too much about internet explorer ali k i like that it makes the browsers it makes the browsers do too much work if you're using it everywhere now rado so i answered the question earlier so i'll give the same answer i gave before um i don't want to get too deep into the whole tailwind discussion but i see why people really like it um and i you know i think it's a good solution uh if that's the type of thing you like but it's definitely not for me [Music] how can we give a transition to an element when it goes display block to none you can't because the browser doesn't so you have to think that if you have to be able to animate something the browser needs to know what the end state is before it actually gets there so if you're going from display block to display none like say you're going from 100 pixels to 200 pixels the browser knows you can't you can't do anything with like a height auto you can't use it for animate because the browser only knows what the height auto is when the height gets there so if you had a height of zero and you want to animate to a height of auto it has it only knows the auto height once it's there so it doesn't when it tries to do like say you'd say to do it over one second well it doesn't know how far it needs to go in one second so it can't do that animation um so that's why there are javascript libraries and javascript stuff you can do if you need to do that sometimes there's other solutions as well but yeah we can't if it's you're changing display properties you can't animate it if you're changing heights if you're doing things with auto values you can't because the browser only knows that result once it hits that point so that's why we can't stars the universal selector exactly will johnson i don't know if we're ever going to have a css for there's there's no there's some people talking about perhaps doing it but it's more of a marketing if we ever get a css for it's more of them trying to market things and try and hype up because css3 was such a big like hyped event uh when it happened so like if there ever is a css4 it's just about sort of saying like look we have all this new stuff but there's the way css works now is everything is on like there are they're working on this the level five spec of color and they're working on the level two spec of grid so like everything's on its own now do i get tired of what i think about tailwind um the contain property um so contain is saying that so contain has lots of possible values to it but it's basically saying like on a normal layout everything affects the other parts on the layout so if you have right so you have a box here and then a box here and then a box here and like the way those are all on the and like what's inside the middle box affects everything here which also affects other things when you use contain you're sort of telling the browser that this is a self-contained piece of content and that it doesn't have any influence on what's outside of it and this can be good for performance reasons if you're animating or transitioning or doing stuff within that box because if what's happening inside that box is not affecting the rest of the page normally what happens is a lot of different things we can transition or animate they cause repaints and then you're repainting the entire page so if you're saying contain this to this one area and this is not going to affect the rest of the page it won't repaint the entire page it's only going to repaint what's inside that contain thing but that's why you have layout you have reap paint you have style there's different things you can set for contains so you're telling the browser is it just the paint is it the layout like what is contained about it too so you do have to tell the browser that arjun nes jimin is yeah css and html now they're both on rolling releases and everything's in its own little subsection and is releasing based on on that [Music] yeah matthews i found that out and then i was going to make a video on that and decided not to just because i think if all of a sudden if you have lots of buttons that are are doing that you could hurt the overall performance of your site i'll just live with the blurry text blue watermelon do you prefer style components or css in react which should you when should you use i mean use when you say css in react you just mean writing css in the normal way i would argue that you could do both uh you can have a global style sheet and have styled components for individual things any alternative what's wrong with why do people hate media queries so much i mean i minimize the amount of media queries i use uh but there's nothing wrong with a media query you know if you if you need to change your layout you have a break point things need to change around and there's like i did you know i made my columns using the columns thing so i wasn't using a media query for that but i was changing my grid setup with with it because it was the easier way to do it um you could get creative with flexbox and or with grid and there's lots of things with those with wrap and other stuff that sort of make media you don't need as many media queries maybe there's nothing wrong even responsive text like please just use media queries like change your font sizes within a media query there's nothing wrong with that marissa clark clarity we i was about to leave and now you're asking your parent selectors and i haven't tried this yet and i think i can do it uh so i'm gonna let's try this out i think it's part oh wait what's this little button do um i don't give me one second uh flags oops chrome i don't know if it's behind a flag or not let me just check one hmm okay let's see if this works we're gonna try it it might just fail completely um chrome canary i think somewhere can you guys see my screen i can't see the chat anymore okay you can see my screen and let me find my chat window fast so i can i haven't tried this yet this just might be a total fail i've also lost my chat there's the chat um so let's just say a paragraph with an ah oh wait one second p lorem 10 and then that didn't work p lorem 10 0. lorem 10 there we go and then what we'll do is this one we'll do a p lorem five oh you know what uh p lorem five plus a with a lorem 3. uh we have to do that here too plus a lorem 3 4 3 plus p lorem 10. all right so we have two paragraphs one of them has a link in it uh if i set that up right which i apparently didn't do oh i did another p i should have just done another alarm okay there we go so we have two paragraphs one of them has that so i don't know if this is gonna work uh if we do p has a color red is it gonna work if it doesn't work this is what it would eventually be it doesn't work okay so maybe there's a flag i have to enable i am in chrome canary i thought they enabled it if anybody knows let me know in the chat but we will have something like this in the not too distant future so as far as i'm concerned that's pretty close to apparent selector so we're choosing the paragraph based on what is here so i mean you might be going well that's that's not exactly a parent selector but i'm i'm choosing the parent of the link um so another example that would be more like parent selector would be if i had a let's say i had dot dot columns uh as that and then in here i have three divs so we do um div times three and you just have three normal divs that are doing whatever you have a display flex but then you could have a class on one of them of card oops class is equal to card and then you have your content on that so here you would have dot columns oh you know what has maybe this do i have to do that so it would be columns has uh dot card and then it's you know you have it's still not working anyway i i have to look into it more i haven't used it as i said but then you could so i'm choosing the parent in this case of the columns it's not a perfect parent selector but it's something that they're they're working on and i need to figure out how it works but it's something that they're working on so we will sort of have a parent selector in the not too distant future um [Music] marissa you can yeah it's definitely yeah and it might be a while there was a i thought it was never gonna happen just based on all the talk that was going on about it and there was a lot of performance issues uh with it and now and now it's happening-ish so if you look it up you'll see i was on twitter where i saw them mentioning it so maybe it's not it's if i thought it was in canary but maybe it's behind a flag or maybe something else but i'm really looking forward to that being a thing js crash course for you i'm not the right guy for that there's a lot of you know i think brad travis he has lots of really good javascript content um web dev simplified has really good javascript content deved probably has a crash course on javascript you know i'm sure he does there's a lot of good javascript stuff out there parent selectors break the cascading part of css it's powerful well if you were saying select just like the general parent you could run into issues with it i guess and but even it's it doesn't break it it's just i mean you could say color red and then i think i think it works with the cascade you just have to think about it in the right way so like in that example i was looking at if i said if the columns have a card in it i could change the font color for all of like as like the whole thing it's still going to cascade down through that selector yes web dub simplified has a very in-depth javascript course um there's i think a beginner and advanced sections to it there's tons of projects so if you're looking for a javascript course uh and not like a youtube crash course i would definitely check that out css best practices yeah i should do a video on that do i have a screen schedule sounds every monday i'm live on sorry i'm moving back and forth a bit every monday i'm live on twitch that's my my streaming schedule monday 9 30 a.m eastern we're doing a special youtube one today for hitting 300 000 subs the quote css property i talked about it i mean the there's it's not so much property as something that we can play around like it's more there's like the open quote close quote um like i use today tech hacks and tricks idmx 220 i opened up behance and i put in magazine spread and just found the took the first one i think looked good is and where um is in where awesome selectors is so it's it's just instead of chaining your selectors together where you do like h1 comma h2 comma h3 comma h4 you can do like is and then well you chain them there too but it's more for like nest so you'd say like say you have like your general stylings h1 h2 h3h4 and then you want to have a different set of stylings okay this would be so much easier to explain in code so let's say and this isn't the best example but let's just say you have general stylings h1 h2 h3 h4 and then you do whatever style value whatever i'm not doing we're not looking at a realistic example um then let's say you want you had like your main article or even you know you have an article and then you want to redefine and you have article h2 article h3 because you need to change them and then you do you're overwriting the value there so what you could do instead is article is um and then so its article is h1 h2 h3 and you can do that instead so it's the it you know that that's the equivalent selector uh this has specificity on it so the highest so if this was like a class here whatever the highest ranking thing is in here is the specificity for this selector um which is just be careful with that because you could run into issues there's also wear which is a zero specificity selector so nothing inside of this gets any specificity on it so you can use the where like that too so isn't where they both do the same thing just one has an effect on specificity the other one has no effect on specificity um which also means you can create like resets that have no specificity hit which is kind of interesting uh there is i'm trying to think that works is there another way we would use where um yeah i mean there's other ways i think you could do it with some sort of creative stuff but this is to me the better way to do it than starting with the wear most of the time or the more useful way but yeah we have we do have that christian is it anything wrong with using tables over grid on real tables like in an admin panel well to me an ad when you say an admin table or admin panel like if it's a real tables like an excel sheet then tables make sense like here's like you're displaying the information if you mean like the layout of the admin panel i would use grid just because it's so much easier this is a it's a fake tree but no green screen i can touch it is it moving there's no natural light down here so it wouldn't survive too well if it was real [Music] no problem jose i have real plants upstairs where there's natural light but my wife mostly takes care of those don't uh kenny don't don't modify the height or width of the elements use the scale instead so transform scale and then it won't affect the elements that are around it ronald mobile first all the way [Music] zoom on hover so it depends what you're zooming in you could use transform scale to do it i do that in a lot of videos or if it's more of like a background thing too there's there's other ways of doing that too what mic do i use i noticed that you're using excel yeah um it's i forget i don't think is it oh it is it's upside down though a at4053b look that up and you'll find it i just it's um it's a shotgun mic that's made for interviews so i think the sound's okay and i like that it could be out of [Music] frame [Music] did you finish the javascript course with zelle i've done zell the course yes i didn't actually when i said finish it i've done i've gone through his course material i didn't finish it because by the time i got to it he hadn't finished the course and i haven't looked at the newest material that he has in there panda you're just starting just take it easy don't feel overwhelmed there's tons of stuff there's always more to learn so don't feel like you have to learn it all learn like make sure you understand what you're learning before you move on because there's always like right now i've been teaching it for seven years now and i'm still learning something new all the time so you know like you're always always always gonna be learning there's always gonna be something else don't look to move on and learn more look to understand what you're learning really well and then find the next thing to learn uh the is and where putting a space um so where when i just did it now i had my article space where because i want to select the children of my article so that's the reason why there's a space aman rj look at my video that i put up last week or two weeks ago um it goes pretty in depth in it all audio technical that's it yeah uh what is made mark what's margin scroll for uh margin scroll is like uh if you have say you using anchor links and you're using smooth scrolling or even if you're not using smooth scrolling but like when you use anchor links within a page when you click and it brings you somewhere else in the page if you don't it always lines up at the very very top of the page if you want a gap so when it gets there it leaves a space on the top you would use your margin scroll or scroll margin or whatever it's called [Music] styleable html form elements will be implemented in the spec there's talk of it i don't know where they're getting um there are some things you can start them firefox has implemented it and chrome is working on um where you can use accent color um to do some stuff but it's it's it might only be in firefox nightly i don't even know if it's made it into like the the real fire i think it's only firefox nightly and it's not even behind a flag in chrome it's like it it's they're working on it in chrome but i don't even think it's in behind a flag within um uh but yeah there's there's going to be an accent color that you can use and it will style the background color uh like for like check boxes radio buttons things like that tyrone i was here we can go quickly let's go find the layout i finished it though uh so i actually let's just go here i can show you what i did i'll share oh yeah i said i would share the code so let me grab the code um and do that but here i was just taking this layout and trying to make it into a responsive layout and i didn't do the glasses thing but we got this so i think it looks pretty good and then it shrinks down and then we get that so yeah let's grab so actually i'll keep this code pen let's go find vs code there it is copy paste go over to here and we'll grab from here to here copy paste and we also need my google font um i'm going to do it the lazy way oh we don't even need to pre-connect really copy uh there are ways of putting the google font in like in the html head but i'll just stick it there you know it should work you'll just have to come in with your own picture but i'll save that and we'll drop that in the chat that's fine go back to my face here you go there you go so if anybody wants the code that we worked on today there you go lucky thank you very much uh for the the super chat what do i think of the opera browser pretty i test on it occasionally just to make sure things are working i don't i don't really use it at all so i don't have much of a opinion on it i guess um i haven't played with astro yet via viorell i haven't uh it looks cool but i haven't tried it for anything yet lucky thank you for all keeping you motivated to code you're welcome i'm glad i could help how long till container queries are widespread um it all depends on how fast they make progress on the proposal they're still like looking right now container queries they're looking for like how are you gonna use them and what are different things you could come up and do with them i thought it was all based on size there's some really cool things that they're starting to think about that you could use them for um so it could even like yeah it looks really really neat what they're planning on doing with it so it's going to be a while probably just because they have so much stuff to figure out but there's a lot of momentum behind it so i could see it moving pretty quickly i use fire um andreas asked with firefox version i use i use firefox nightly um most of the time just because then i get access to all the fun stuff firefox 90 has form elements oh there we go victor thank you for the super chat as well is it possible to encounter a situation that you have to use an important tag in a well yes definitely um i'll use i'll put important on um uh what are they called utility classes for colors um like if i have utility classes for colors that are going to change the color of my text i think it sort of makes sense to have important on those because if i'm going into my html and i'm adding that class it means i want that color to be on there regardless of whatever color is being set on there and you might have something that's like somewhat high but like a higher specificity thing that's setting the color it might be like a class select like you're choosing i don't know dot card h1 so all of the cards look that way but you might have a one card in one situation that needs a different color for whatever reason it is and a utility class you want to overwrite it i think important makes sense there because you're not going to add that class unless you want that one specific thing to happen so for me that makes a lot of sense i don't think there's any issues with that and if you want to remove that color you're not going to try and overwrite it with your css you're just going to go into the html and take the class off so you know i don't see i see important we always teach people not to use important early on because then they don't use it properly they don't you start abusing it you get into specificity wars it becomes a band-aid and then you're just using it within higher specificity to overwrite it again it's a mess so at the beginning don't use important but once you have a better idea of well-organized css and things are working well you can probably run into situations where it's not a bad thing to have i've played a little bit with svelte but i haven't done a lot with it um much to brent's dismay i'm sure uh i have played with it though it was cool i liked it what did i do with it i just haven't had time to really dive in um and do more with it i'm not a brave is a browser i'm really conflicted about um yeah i just i don't like i don't i think they're dishonest with their business model personally um it sounds cool with the ad blocking and then that they're i don't know i i just find it i think it's a dishonest system um with how they've set it up with how they're ad blocking and then the three re-other ads that i don't know it seems weird to me um hassan fares the difference between a pseudo class and a pseudo element the easy way to explain that is if with the before and after pseudo elements so the before and after if you look in the dom after you use it you'll see them in there so it's actually injecting a new element into the your your dom into the html whereas a pseudo class is selecting something based on different states so and hover is a nice example is it hovering is it not hovering it's not changing the html it's just changing based on the state of that element so it's a class that's being it's sort of it's a suit it's a fake class because it only exists sometimes whereas a pseudo-element is being injected in it's harder to explain that when you start looking at like first letter first line but i wouldn't be surprised if you look at the shadow dom that it's actually like injecting span tags or something and that might be why am i ever going to talk about making a css library for design no it's too much work dion silly 93 is it good practice to do the box sizing border box with the universal selector 100 i do it every every single time if i think if they were to redo things that would be the default but we can't redo things so we just have to start our css files with that high above sea level yeah normally i'm on twitch today's a special youtube stream uh the dishonesty with brave so brave blocks ads but then they give you bat tokens but how do i say i'm say like for example on youtube right now you i don't know what does does brave block you ads from running on youtube just curious i don't know i don't use it uh but let's just say i don't run ads on my own website but let's say i ran ads on my website but i didn't sign up for their bat tokens how would i get anything from the ad like where their own like where as soon as you're blocking ads for free content you're making it less likely that that source is gonna keep making free content because there nobody can make stuff for free all the time um you know it you need some source of income to be able to continue doing something so when you start blocking ads on stuff you're it's sort of like watching you know you either watch commercials on tv which even you're paying for your tv and you're still getting commercials or you sign up for like netflix and you pay netflix a monthly fee so it's a little bit like you watch my videos on youtube you get ads with them or you can sign up for youtube premium or whatever or you buy a course and then there's no ads so you know there's it's the the creator can still be compensated one way or the other when you start introducing we're going to be a middleman that's going to take our own ads in here instead of the ones they want to run and then we might redirect the money to them if they signed up for for bats like i don't know what is the music that's playing in the background uh good question this song is called fumes by ocean jams that's what's currently playing um i'm john i'm gonna have a video on that at one point and hopefully the not too distant future for my default project template and i'm going to share with everybody i prefer um michael's asking for html css development firefox or chrome i prefer firefox because their css devtools are still better chrome's making a huge improvement but firefox has some like linting and stuff in there which is cool jimmy you have 200 in brave rewards but you're getting that as uh someone else is saying four dollars so like you're getting it as the person who's seeing the content but what about the content creator russ i normally stream mondays on twitch at 9 30 a.m eastern um using flex is it required media creators are never required but it just depends well brave will block ads but then they still show ads but it's them who are showing the ads and it's them that are profiting from those ads they become the primary profiter from the ads rather than whoever should be getting the money right that's my understanding of how it works and then they say that they'll redirect some of it to the user so whoever's using the browser gets a little bit and then they redirect some to like how does the person whose site that ad is running on get any money from it that's what i want to know why does overflow need to be set to hidden in order for nav bar to be visible i don't know i've never had that issue uh andreas i have a video that looks at five things that i mistakes i see people make even though i think one or two of them i would change m costco how do you make jam stacks sustainable i mean do you just mean when a project becomes huge like there's a lot of really big websites out there that are built on the jam stack i think even i could be wrong but i think um what's it called i think smashing magazine might have gone jam stack i think they have like a whole article and a whole thing on how they went jam stacks like if smashing magazine can go jam stack i think most sites could at dt i i i like twitch better for streaming stop dying you as far as i'm concerned you should never put an empty div or empty span tag on something that's what before and after meant for and having empty elements um first of all it's it means if you want to put like say you're doing a decoration on something so every time you have a block quote you want this little design element that's going to be next to it um if you're doing it with a spat an empty span or empty div you have to remember to put that there every single time whereas if you want that design element just to be there you just put it on that css class or on your block code or whatever and every time you use that class it just appears there so you don't have to do your if it's a decorative element it should be coming in through your css and not through empty spans that are then styled in your css it to me doesn't make any sense it's one of the things i really dislike about tailwind um and i know the guy who made tailwind says that well if you just do it this way it works but it's like yeah but then you have to follow that pattern in your html and remember to do that every time to me that's a flaw a big flaw in tailwind is that you don't have pseudo-elements i don't know if i have a favorite font these days praiag uh my chat just jumped um stony eagle my problem is ads that they say are intrusive and sometimes take over especially when youtube shows six to ten ads on a 15 minute video yeah i mean that is an issue i agree i pay for youtube premium so when i go on a device that doesn't have my i'm not logged in i'm just like oh that's that's unexpected uh so i do know ads can be intrusive i try to keep mine to a minimum um youtube's auto when you have mid-rolls enabled youtube automatically places them but then as a creator you can go in and add or remove or move them around um so i always try and limit it to one per 10 minutes type of thing at the most so if it's like a 15 minute video i would probably not have more than one running uh just because i agree it can be very intrusive and um but i've had videos where i go into like the auto placed one and you go to check to see what it did and it for some reason puts like six of them within three minutes of the video and then it's like it could be like a 45 minute long video that has six placed within five minutes and then there's nothing else and i don't know how it decides that but it's kind of annoying uh did you i see a super oh there it is trond thank you very much for the super chat i appreciate it from norway thank you very much need a complete tutorial on svg creation logos i mean that's then you're getting into the world of you're not doing if you're making a logo you shouldn't be you should be doing it with design software right so whether it's in inkscape illustrator some vector creation software oh there we go tailwind has two elements now that fixes that i guess i can't complain about that anymore [Laughter] i remember too that they people had been asking for it and asking for it and they were always giving the same response that you don't need it lior i'm a big fan of the bim approach yep um following uh something airbnb style guidelines are actually really good so there's nothing wrong with following something like that have i ever designed for email matthew reed's asking that uh yes i have and i'm never gonna make a video on it and i'm never going if i can avoid it for the rest of my life i will htm html i don't know what the question is pepper paper engine my sas course it's coming slowly i'll let you know when it gets closer um you're on one right now it's getting bigger and bigger wish html i mean maybe check out m casco checkout i'm almost certain it's smashing magazine did an article on how they switched over to the jam stack so it might give you some insights on how to maintain a bigger project and make sure it's not like a 10 minute build media queries or clamp how about both i don't like using clamp for all my fonts i think it's hard to control um i do like having it on big font sizes and some other things though sorry if i'm missing questions by the way the chat's going fast summit you accepted any project and how can we contact you do you mean to like for me to work on a project right now i'm not taking it on any work i already can't keep up with what i'm working on so no new projects jeremiah peeples the camera i'm using is the sony a6400 which isn't that top end it's not like a super dupe it's a good camera but i know there's a lot better models but it's i have the the picture quality is probably mostly through the lens which is this figma figma sigma 1.6 f fixed whatever it's a good lens that's why the picture looks good how did i choose sas why not less um a bit of a backstory i created my i um i got into sas primarily from way back when when uh if any of you guys know dev tips the channel when travis was there um the reason i started using sas was because he was using it now granted he was also using jade and that didn't get me into that but um so that's that's actually how i picked sas is because that was the first one i saw and then i kept with it it also was very popular so i stayed with it but uh john lothar i use netlify for almost everything just because i mostly deal with static stuff so like i don't need heroku or firebase or anything netlify does everything i need um if we if i needed something else i do think that firebase would probably be the first place i would look um i mean heroku is set up really well if you're doing uh ruby development right if you have a ruby back end i think am i getting that wrong uh which i probably wouldn't have well i don't know i probably wouldn't touch the back end and would ask someone else so i guess it would depend there um but yeah i think if i needed something that had something going on there i would be starting with firebase but i guess it depends too i don't have any email anything are our saint victor i don't have anything anything anything on email design or anything jose david mota um normalize is really good or sanitized they're both sort of based on each other um or sorry sanitize anyway look up normalize or sanitize i think it's a good one or there's i've been using lately andy bell's modern css reset thoughts on using javascript for using the resize observer uh i don't think it's worth it i mean if you really needed to do it i guess you could um but jeremiah peeples you have the same setup uh the lighting too maybe i don't know i have i only have one i have my main light there and then i have a secondary light on the side because if not the side of my face is too dark but i sculpt and sounds good for beginners beginner beginners for front end development i would just i like gulp i think gulps people have moved on to other things i find gulp pretty straightforward and easy to use so i have nothing wrong with gulp but i mean it depends how far into your journey you are when you say beginners martin robertson you still have one of travis's t-shirts that's awesome i was a big fan of travis where i still am i guess but just he's not making content anymore why do i use sass i used it once but now i use stylus i don't know i i learned sass i loved it and i never bothered learning anything else that's why i think it does what i need it to do i've always enjoyed it i've never felt like i i'm missing out when i see what other ones do so i've just kept using it they have trouble structuring your projects how can you improve practice makes perfect um and then asking other people too if you have people you can talk with or show your work to and say like you know look for i find most of the time and there's issues that's when you start writing your css you realize you should have done something differently in your html so then you learn from those mistakes too front end masters yeah front end masters is pretty cool i haven't looked at any of their stuff in a long time now but i liked it back when i was i i had a subscription to them and i enjoyed it [Music] correct ryan james so i used flow spacer there um i used flo spacer and i didn't define it in the root on purpose uh but i put it was flow space or comma like one m so if it doesn't find that variable defined anywhere it's going to go to the fallback so it's using 1m anywhere i use it and then within a component if i need to change the spacing i can define flow spacer within just that one area and it's going to sort of live within that block so it it's pretty powerful to use custom properties that way rahul thank you very much yeah we hit it while we were just just just at the beginning of the stream pretty much that was pretty cool ismail if i learn sas i don't need css incorrect well when you say you don't need css what do you mean i guess but you need see sas turns into css so you need to know css like know css pretty well before even touching sas um sas is like the next step afterward and it you need to know css or you can't write any sas because it is it's just like it's a fancier syntax that does more stuff so just be very careful there i think most people know that vs code is uh microsoft i don't think they hide that at so all github i mean um three to four months ravi yeah i think within three to four months do i always wear glasses no you'll see some videos i have them some i don't it depends if i forgot them upstairs or not um if i took them off now the chat is a little bit hard to read i'd probably want to hit command plus a couple times to increase the font size i can read it still but it's not super easy so but i i mean the nice thing when i'm doing videos especially is the font sizes on my screen are really big so i can i can easily do videos without having my glasses on um i also don't wear them if i'm not on the computer uh it's like 50 50. if i think of it i put it on if i don't it doesn't bother me if i don't have them on css demystified will be in a couple weeks thank you i just scrolled and lost somebody was complimenting the lighting in the plant so thank you wordpress development does not make wordpress development's been around for what 15 years now at least 10 years wordpress has been here for 10 years and website developer wordpress is super cool nothing any anyone who says wordpress development's not um web developer i mean i mean that's i started freelancing by making custom uh child themes for wordpress and just because you can make one with a pre-done theme doesn't mean that that's you know a lot of people are getting custom themes or semi-custom themes and it's still like a huge part of the internet and yeah i think it's definitely it doesn't hurt at all and it just means more if there's easier ways to make websites it just means people that wouldn't have a website now have a website it doesn't take away from those who have are already paying lots of money for them it might shift around the money a little bit and maybe there's less people using it or you know you might be able to go to a simpler solution because there's one available now but for the most part it just enables more people to have it i see oh there it is uh chubby shady thank you very much for the super chat would you rather use inline css rules for the rest of your life or be a java back-end engineer for five years using groovy so a funny story with java that was the first language i tried to learn when i was in high school i bought a book and i couldn't even get it to print hello world i spent like three weeks trying to like figure out what i was doing wrong and i just couldn't and i stopped um so if i had gotten that to work maybe this channel would be all back-end and java stuff instead of where we are now um [Music] but so based on that experience i guess inline rules but i also don't know what groovy is so i mean uh so you know that would also depend maybe a little bit martin that actually makes me kind of happy that you're i'm helping you get to know css deeply that makes me very happy them i'm a very big fan of bam if you've been watching my channel if you go back through my content enough you'll probably see me use i don't use it all the time but i do on bigger projects i do and i'm a big fan of them uh pram i can't do back-end tutorials because i don't know anything that would help with that i'm not somebody you can talk about back end because i have no experience there if i had to make a project where i needed some sort of robust back end i would just hire someone else to do that side of things or collaborate with someone else to do that side of things is react bootstrap bad for css i mean why react boots react bootstrap is just using bootstrap no so that's like saying his boots drop bad for css i learned a lot about css by using bootstrap so i don't know um no i don't use it anymore though so but should i use figma before writing c i think you should if you're really comfortable with css you could definitely design in the browser if you're not super comfortable with css or you're not a designee person having the layout ready first would probably help i've been making websites at least part of my income for 10 years now uh pujit i think it's sorry if i got it wrong it's been it's been a decade that i've been at least part time making money off making websites i'm going to scroll down just a little bit [Music] shamar i think i have two videos that look two i have two or three videos that look at grid template areas they're a bit older but i definitely have some chubby shady grid if i had to only choose one or the other and had i was never allowed to use the other one i would definitely use grid thank you again for the super chat um i just think it's it's yeah i like it better i think that said flex i i'm working on a video now that's grid versus flexbox um it's taking me a bit longer to put together than i wanted but it's because i want to have a really good answer for it and really good examples for it um and definitely the two of them are very very i if i had to choose i would choose grid but ideally i just keep both and yeah that's ideally can i do a course on web design um i don't know if i'm good enough gary simon has lots of good content on the design side of things yeah a lot of people not liking wordpress wordpress is is i think it's good for the industry personally it creates lots of jobs it doesn't take away jobs um it's a huge part of the industry and it's not going away anytime soon so if you don't like it you know it's you're gonna have to deal with it at one point probably um i think it's a good tool that's misused but it's still a good tool floor and welcome to the stream you just caught the end of it welcome though thank you for coming and joining neptune is solar should we learn bootstrap or in-depth i mean don't learn bootstrap if you don't know css in my opinion um if you know css you can pick up bootstrap really easily if you learn just bootstrap you're stuck with bootstrap you're not going to know how to do something outside of it you're not going to be able to customize it the way you want to be able to customize it you're going to have trouble using it period you won't be able to use it to its fullest potential if you learn css bootstrap if you needed to use it for something it's gonna be really easy to use you're gonna be able to customize it really easily you're gonna be able to get the most out of what is there um and that's the same for anything i think even like tailwind something like that like you might learn stuff more about like i think i know i think i knew css pretty well before i ever use bootstrap i learned a lot about css by using bootstrap back in the day because based on like class naming organization how they were doing things because i learned how i was looking at how they were doing it all um but so like i think there's good ideas that you can gain from these things i think by using them you start getting ideas on how you could do your own css too so i don't think there's anything wrong with playing with them and using them but i would definitely i'm always always always going to say like hey don't don't learn react if you don't know javascript like you know you're if it's if you're if what you're learning is built on something else learn what it's built on um because then you can change if you learn react you're sort of stuck with react you don't even know what's react what's javascript if you learn javascript then you can go to react and then switch to view and then switch this felt and you can make these you have to learn a little bit more each time but you know the core that they're built on top of so it makes moving around and doing different things much easier oh ricketts ra thank you very much very kind of you all right guys i'm gonna is the chat's still rolling along but i'm gonna have to uh get going because it's almost one o'clock here which is crazy and i have a few other things i need to do today um yeah i could have a video i'm not going to talk about it now because it's a big topic but we could i could look at something like that um actually though the video that i'm eventually going to come out which is like my starter template will sort of go into that a little bit too do i know any of the js frameworks views felt i've used react i haven't touched in a long time now actually but i've i've worked on projects with react uh i learned enough you just to play around with it um and and you know i built out a little thing with it just to see what it was about and i've touched svelte but i haven't done very much with it at all um but even react like i wouldn't do a react tutorial like i've used react but i'm not i don't know what i'm doing it's more time in the documentation and getting things to work than anything else all right yeah i'm gonna have to jump off uh oh my favorite movie star wars yeah we can do that one i grew up just a huge star wars fan boy so definitely star wars i did say i was gonna go 30 minutes ago but now i'm gonna go for real because i need to go eat lunch and get some things done so thank you all guys everybody guys and girls for coming hanging out having fun with me uh this was a lot of fun again i usually stream on twitch so if you want to um it should be linked in the description maybe i don't know but you can find me on twitch pretty easily i'm guessing um i'll probably link it on my website i don't even know if i have it there i'm not very good at marketing myself but yeah i'm usually on twitch mondays at 9 30 in the morning and every now and then i'll do this see somebody asking me about bitcoin i have zero bitcoin and i probably never will i just not my thing what do i use mostly just my videos are mostly css yeah if you're new here uh yeah and thank you guys all for we got to three hundred thousand so it was a fun a good day to stream on we made it on stream so that was kind of cool so uh thank you all for subbing and for being here and for hanging out and i'll see you all yeah i'll be live on monday and no not this tuesday the tuesday after that i'll have adam argyle on twitch again too so that should be fun i think anyway probably all right see everybody have a good one and um have you ever felt that css is weird look up the video why is css so weird uh on youtube it's by miriam susan it's a delight all right bye everybody i'm gonna switch scenes here i can the chat's gonna keep me distracted so i can't with that we'll put some music back on uh and i'll put a little outro scene not much of one uh where's my obs there it is all right i'm gonna keep getting distracted so we're gonna do that and oh you know what though i didn't update this yeah everybody's telling me my github link is broken i'm going to go check that out [Music] yeah it's not starting soon we're not starting soon anymore we're now there we go have a good one everyone bye [Music] [Music] [Music] do [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] do [Music] [Music] [Music] [Music] do [Music] [Music] [Music] [Music] [Music] huh [Music] [Music] uh [Music] [Music] [Music] uh

Channel: Kevin Powell

Views: 32,117

Keywords: HTML, CSS

Id: QJz81yva7r0

Length: 162min 40sec (9760 seconds)

Published: Fri Jun 18 2021