Taking on HTML & CSS challenges

Key Takeaways

e e e e hello my frontend friends I think I think we're live I think I'm here hope you can hear me and yeah I haven't done a live stream in a while so I always feel a little bit uncomfortable and don't know well not uncomfortable but I don't know if it's working or not because I always forget how to set everything up so uh yeah hi everybody thanks for coming to join me today I think it's going to be fun as I said I haven't done a live stream in quite a while so I'm looking forward to doing this and to hanging out with all of you um yeah there we go it looks like the chat has caught up with me so if my audio levels are off or anything like that uh please do let me know uh because I think they're all good on my end but it's possible that it's a little bit low so if it is just tell me and I can boost the audio up a little bit um I don't know let's see we're already have quite a few people here so thank you all for coming I definitely saw uh first of all actually anybody who was coming from my Discord I apologize uh if for forgetting the timing wrong there I realized I set the event to an hour early a little bit low we can boost the audio up hopefully let me know if that's any better I just boosted it some people saying louder some people saying it was good so I've put it up a little bit hopefully that improves things awesome I see Chris here uh who I I think it was it on email no we chatted on um Discord uh where I he mentioned that he was happy to see me doing iode this stuff and I know he's a big fan I think he's done a lot of the challenges if not all of them um so that's pretty cool I haven't done too many but I've done a few I think it's a cool platform and a fun platform it's what we'll be using uh to do at least one challenge we'll see how time goes cuz I also want to do another thing I'm a little bit disorganized I couldn't find my glasses for the last 10 minutes and I've just been looking all over for them luckily I found them I can see without them but um it's not as clear like after half an hour of coding without them even with the large font sizes I use uh it it gets a little bit hard on the eyes um so yeah I also found I'm trying to find the link for it there it is an HTML tags memory test that I want to do uh during the live stream as well I'm going to leave that tab open so I don't forget about it um we'll probably do a few little amas and a few other things like that along the way as well uh shabam your first time joining a live awesome thank you for coming uh for a lot of people I'm guessing it's your first time seeing me do a live stream again just cuz I space them out so much I'm might do them more we'll see every time I do one I say I'm going to do more of them the problem is I end up spending too much time on them most of the time um because I sort of said a hard time limit and then I always go over by like an hour um just see what else is people saying the sound is better so I'm glad to hear that perfect um tar thank you very much saying you enjoy my teaching Style I appreciate that um I'll talk just since we just got started I'll let some more people come in um and just before we dive into the first challenge there's I I find it Fun on YouTube because people either it's YouTube and actually I will I'm going to preface it because I did a video a little while ago where I mentioned like negative comments I was getting in general my comments are really positive it's like the friendliest place the comment section on most of my videos um but every now and then I still get people complaining that I go on too long to cover stuff and I'm like I've been doing this for almost 8 years now I have over 800 videos which is wild um so like I think we found my style of making video uh I don't want to be like that stubborn old man who's like I'm not going to change for the better but um yeah if you just want like here's the code I'm not the right place for that if you want to understand why I'm writing all the code I'm writing I think um I'm better at that Alvaro challenge given a div with resize both resizable in both directions Center the largest possible perfect square div that fits inside of it that's actually not that hard to do we could start with that challenge before we get into the real one why don't we do that let me open a code pen um my I have a stream deck that I usually use for all of my recording and for when I do live streams and it it's not working with OBS for the last few days for some reason um so I have to manually figure out there we go I'm going to try this instead of the circle version um I also wouldn't mind if people would let me know if they like um this because I've been experimenting with this this on YouTube as well I find where code pens and stuff it works well um whereas with vs code um just because with code pens it's easier to like resize and I have control over stuff a little bit more uh so let's just do div or let's do yeah we'll do parent with a child and I'm going to let's say the parent has uh width for now of 300 pixels height of 300 pixels oh I'm going to cheat a little bit at this well that's not cheating it's using modern CSS uh let's give it a background so we can see it pink uh there we go and we want a resize of both and for resize we do need to do an overflow right Auto I think is that correct I always forget yeah there we go so now I can resize it um and then the child so we'll say child is so for the width we just say one second I got to think now yeah width will be 100 container query Min and height will be 100 container query Min does that not work I oh and then we have to define the container so container type inline size oh size size size not often I do a container type of size and let's give this a background of light blue uh so now it will always be a square and it will always be as large as it can possibly be there we go fun little challenge to start things off uh if I wasn't using modern CSS it'd be a little bit harder but you could probably do something similarish I'm not sure how I would do it to be honest but we have container queries so I might as well use them a circle version border radius 100 BW whatever that would be a circle we can even do uh margin Auto I should change the color of this actually let's make it steel blue so we can see it better uh or uh yeah margin Auto and then we can do justify on the parent justify content Center am I wrong what's the one we can do now items Place justify we can do block centering anyway there we go it's always a circle um oh the circle might have been talking about my head yeah you get to see more of my screen if I'm using the circle except I always forget to my face is in the way so then I don't leave it [Music] um how to make a table uh I'm not with horizontal and vertical scroll not today I can't maybe I could do a video on that uh tar I've sort of done that before a smooth slider Carousel without using JavaScript library um if you I'm going to open it in another tab just because I'm going to go to my YouTube Studio to find it um but I'll put a link in the description um yeah uh horizontal probably this is I think this would be the right video I'll put it in the chat uh yeah this one here oh no you're not going to see it I this is one thing okay I'll just put a link in the chat it's not perfect but so CQ never heard of CQ Min so CQ Min and CQ there's other CQ it's container queries so uh you might have seen like Ci for container inline uh cqi container query inline um and other stuff this is actually the first time I use a CQ Min so that's kind of cool always keep a child centered at all times um yeah I mean why isn't this working on the vertical axis whatever I'm going to we'll just do uh display grid Place content Center that should work there we go it'll always always be centered this will always Center the children in the middle uh there's Place content and place items Place items it depends on how many children you have sometimes you need one sometimes you need the other will this be uh you joined late you didn't miss anything yet Ravi uh yes it will be saved though you'll be able to watch the full replay and I'm going to take certain parts of it and actually make some individual videos Around It browser support for container query is probably about 90 something per I'm guessing can I use CQ Min uh 88% not bad oh firef what oh whoops that's the function I was like no that's not right even better 90 almost 92% it's all the major browsers um for the container query length units now nville you stopped thinking about grid when you discovered Flex wow that's surp I'm a little bit Blown Away by that to be honest um I'm actually I've planned some time during this to to talk about Flex boxing grid a little bit at one point um so I'm I'll answer let's go back to my to the is it this one oh I got the right one okay uh I'll answer a couple more questions and we'll dive into the first challenge that we're going to be doing um or that I'm going to try it's you saw it already it's nothing too complicated but I think it' be fun to do and I'll talk I could use some time there to actually talk it' be kind of a flex box you want actually maybe we can do that with grid we'll see I have to yeah it' be easier with box for responsiveness but anyway um Mah is asking if it's important to learn SAS it really depends on the Scopes of your projects I definitely do still use SAS within my workflow it's part of one of my courses um Beyond CSS so I do think um it's still relevant but it depends um if you don't feel like you need mixins which are coming to CSS probably eventually but that's years down the road at this point uh if you don't need custom functions um if you don't there's some features of it that I still like I do a lot of stuff with loops still which I don't think are even on the horizon so it really depends on what you like doing um for and also sorry if I miss any questions guys I'm probably won't be able to keep up with everything um that's that's going on but uh even just asking what challenge I'm going to be doing it's give me number 45 it's called social login I'll uh I didn't put it I'll put the link to the chat this is the first one I'll be doing media query variables is a really big one yeah um B1 mentioning that so I don't know why they're not making progress on that it's really frustrating that they're not but it's been you can do that with post CSS too though so Roland's here welcome Roland [Music] um Carl I am reading the chat I'm going to be coming back and forth to the chat depending if I'm coding or not um there was oh this was a question from um that I'd wanted to answer which was what's the minimum browser compatibility that I look at uh the first thing I'd say is look at your audience and if you do have access to analytics on that that's the best place to start because then you sort of know um if not it depends on the project a little bit and it depends on the feature uh I've held off on using layers and other things like that uh even held off on subgrid because the layers especially was a big one because if you use layers uh it the CSS won't work if the browser doesn't support it whereas there's other feature like view transitions right now have terrible browser support but you could use it right now and it just means that people that have browsers that support it will get the view transition so for me it's even with um the scroll what's it called the scroll driven animations with animation timeline I'll use that now knowing just making sure that if it doesn't load and I'll test it in the browsers where it doesn't work to make sure that everything is in the right place and I haven't like animated it off to start with or something like that but it's really easy to do Progressive enhancements so if that's the case I'll use the feature right away uh if it's a feature where it literally will break the website if it doesn't work then I'll hold off on it or I'll see if there's a polyfill or something else uh and then it depends completely on the project if it's going to be public facing for my own audience I'm pretty willing to take some chances on on anything past [Music] 90% I'll I'll risk it if it's something that would be for a larger audience I'd probably wait for for quite a bit higher than that actually um so it does depend a lot J Gigi asking is it possible to do a hamburger menu without JavaScript it 100% is possible and I wouldn't recommend it uh when you have user interactions there's anything where you sort of have to hack something you can do look up the checkbox hack um and could find out how to do it um but it's not good for accessibility reasons uh it makes it harder to for a lot of users to actually interact with it probably Jonathan I still am doing my weekly emails if you haven't seen one in a while though I did Purge my list recently so it's possible you got purged um I tried to prevent that from happening um I sent out a few things um but you might have to resubscribe I apologize it's the first time I did a purge it took like 20 to 30,000 people off my list so um there might have been some casualties by accident I hope not but that's a possibility Joseph I don't have any plans for uh JavaScript courses right now no Nikolai does my free course has actual state I'm not sure what you mean if you want to ask again I hopefully can answer or um someone else um difference between SAS and scss is just the syntax they're the same language just with different ways of writing it uh and I think we're going to jump in oh Sebastian can I make a minimalist 71 pattern as possible beyond CSS as a skeleton template I could I'm finishing some content for module 5 it's going up tomorrow or Friday one of the two uh and then that is something I could add to the course and I've seen a few people saying you enjoy my content uh thank you all very much Sergio is the one I just saw now but for anyone else uh yeah I'm glad car how long has it been since I wrote my first line of CSS code I don't know exactly uh cuz I started writing or I played around as a hobby project with making websites in the late '90s uh when I was still in high school so I don't know when I actually would have written like real CSS cuz at the time it wouldn't I probably started without CSS maybe I was doing CSS from then I'm not 100% sure all right so I think I'm going to dive into it oh uh J GS say um I don't have any plans on covering Tailwind I do sorry um but it's not not in the plans right now so let's jump into into this uh my plan for this is I'm actually going to clip this part down and turn it into a regular video so I probably won't be looking at the chat very much while I'm creating it uh unless I get stuck and there's a typo that I need so I'll just let you know uh that there won't be tons of user interaction while I'm doing it but I plan to um yeah I will I will be coming back to the chat or I might take breaks during it to look at the chat and then go back in and I'll just edit those parts out or something um yeah so I think we're going to oh Ryan's here no way hey Ryan that's amazing how you doing I went to high school with Ryan it has been a long time I hope you're doing good um I'm never on Facebook anymore so I think that's where we generally where where I usually saw updates so uh I'm glad I glad that You' stopped by that's super cool um cool so yeah I'm going to dive into this uh so let's start the challenge social login um if you don't know um I code this there's a link to it in the description it is an affiliate link but you don't have it's free if you want to sign up uh I guess we're going to get rid of all of this actually because we have tail and stuff on all of it uh so let's get rid of all that and just bring our body back in uh so yeah you can sign up for I code this for free um and it's like a challenge website used to be daily I don't think they do daily challenges anymore but but they give you these things that you want to try and like build out um and and yeah then you can submit it you can see other people's versions of it um and stuff like that so this is what we're going to be trying to create and body right there uh so what do we have here I'm just going to call this a section uh for a lack of knowing the context of anything else uh that would be on the site I'm going to assume that I would have a it would be in a bigger site so there' be other content on here uh we don't need Tailwind so we can whoops don't want to get rid of everything we just want to get rid of that there that there perfect uh so yeah I think that's all we need uh do actually let's just I think I forget how to do it settings it's here right let's make the font size slightly bigger 32 that sounds huge but when you're recording oh cancel one second copy that oh let a save and then change the font size save oh I can zoom with the mouse wheel I think it said too there we go that that's more what I'm used to when I'm recording um so okay let's go back to what I'm creating so and we're doing this I have the section itself just a little bit of content a little thing this is sort of like the trickiest part of this is getting the button inside of the little input here I don't know why I called it a little input but whatever uh and then we have the images down at the bottom uh again nothing too complicated but I thought it'd be a fun little warmup that we could do and knowing me it's going to take me longer to create this this uh than I planned so we have the section I guess we could give that a uh we don't need a class on there because we don't have anything else going on I'm going to put an H I guess we'll give it a class uh already working together log into your account to connect with your teammates so we'll call this section class equals I'll just say login CTI uh and we'll do this as login CTA I'm overthinking it I'm just going to call it title we're just going to do that uh we'll call it section title actually I'm guessing like I'm thinking larger scope all the titles probably look the same uh then we have the paragraph in here and then we have an input oops paragraph is there and then we have the input uh it might be in a form or something uh I'm going to talk about a few different things here because I'm actually going to put a label for this as well well so this will be for email for email this is an input type of email the placeholder on that will be uh your email address.com by the looks of it and then we need a button here uh so I am going to put that in a form I guess because that would actually make it work technically speaking so we can do that it's not actually going to work we're not going to do that but uh this for now we'll just do a fake arrow and then we're going to come back to this is that going to break things I think we'll be okay if I do that um yeah so my label would just be email here this is all the one thing with I code this is they don't Supply you with the like the assets or anything so you sort of do have to find your own uh log into your account and connect with your teammates is team me is it teammates team I can't read that small is teammates one word I don't know I guess so um there we go I think and then we need the images down at the bottom so that's my form and then here we need the images right yeah so we'll just call uh Flex group for now uh centered we'll try this and see if we can get away with that as a couple utility classes there uh and then there we'll just do image times 5 and we'll get some images afterwards I hate how EMT if you do inline elements puts it all in one line which makes sense uh but yeah I think that's what we'll do for there and now let's see what's going on in the chat I'm going to scroll up a little bit um and I'm just scrolling to see if Ryan answered I do apologize for everyone else but it's cool that he's here yeah I'm I'm glad that you're doing well I am doing well too um all right uh Florence's here too hello I thought you were on a cruise Floren you better not be on your cruise watching this oh he's on a cruise limited internet thanks for coming in and and supporting um I appreciate that all right not too much going on uh can you explain HTML structure on designs with drawing rectangular for yeah we can do that why not a list is that for the images nville I'll start breaking down the layout a little bit and what I'm thinking of uh for this and then I just want to know if it's the images that you're asking for the it why it's not a list um so let's grab that as a screenshot this is going to cause a problem I'm going to have to add this in uh let's open my screenshot first of all the reason it's a problem is I'm only OBS doesn't have everything here one second if I turn this on it doesn't break anything oh let's turn that off we're going to go here we got the same window magically appearing and then oh no that's not going to work oh that sucks I don't know if I can draw on it then because I'm not one of those people that has like cool stuff to draw on how come I can't C I can't show my Snipping Tool uh let edit in paint I can probably open it we can probably do it that way instead let's find out this is going to be paint let's go here let a see paint paint doesn't want to work either H that's weird I apologize we can't draw on it then or if there is a way I don't know um there's probably some extensions or something you can have that let you drawn stuff basically the section is the entire thing H2 is there paragraph input um and then I'm just I guess the box would be around those pictures and then I just have the images in there okay so there are people it was for the images people asking if that should be a list um I don't see a a purpose for making this a list uh just because like if this had their name and other information Rel like something else other than just the images then I could see it being a list uh there is an issue just in general online where people overdo lists and use thing lists for things that shouldn't actually be lists and most um it's one of the reasons I think Safari screen reader won't announce if you take if you do a list style none Safari screen reader won't actually um treat it like a list anymore they've updated it recently if I know properly if anybody's here um if anybody's here that can confirm this would be good uh but if you have a list in a nav now it will keep it as a list even if you do a list change the Or List style none on it but um yeah I screen clipped it the problem is uh I'm sharing the window and all the windows that I'm trying like when I'm trying to open the screenshot it's just showing a blank window for some reason um I close that let's try that again but here this is what I'd want to draw in and it's I see it on my screen but it's not showing it for you guys and I don't know why um yeah for me the images there definitely don't need to be a list it's it's not a in my opinion it's not a list it's just a bunch of images uh again if there was more content here I and even I would leave the alt on all of these blank the reason I would leave that blank is this is just decorative it's just a way to make the design look nicer um if it was actually your like that person's actual teammates and you had to name that would go with each one even then I probably would leave it blank cuz I still kind of see it in this context as decorative um and yeah it would you're not really adding any context to the page here other than saying like oh there's other people in there right that's that's sort of what this design is trying to convey so to me that's my thinking of it anyway uh one of the fun things with semantics is there's a lot of what's the right word like there's a lot people can interpret things in different ways the meaning of things can be interpreted in different ways CU there's no hard rules it's one of the reasons HTML is probably the hardest of all the languages we have to write um Sebastian yeah I could okay we'll do this sh I could do that one second I just I'm SC uh I don't have anything on screen that you guys will see if we do I have to find the right screen to share one second this one now you actually see my screen uh but then I need to change this to this to then bring that in We Go full screen there and now ha there we go I was just sharing a window but I thought I'd be able to share different Windows um just with the setup I have the face the other way it doesn't work so yeah we have the entire section H2 paragraph This is my input my label and that button so that's like the form that's going there and then I just have the images that are all going to be wrapped together at the bottom um there's a few different ways we could do the images but this one's fairly straightforward I think a few people saying sound is very low my thing is showing me my sound being okay and a few people have told me earlier on that the sound was okay uh I could boost it up a little bit more but I can't put it up very much more uh we'll do that we'll see let me know if that's better I can't really go any higher than that though or I'm going to start hitting the limit um for my mic so uh I'm going to hit save on that because I don't want to lose anything and I want to click this there we go a nice beautiful website uh so let's just oh that's JavaScript we don't want that you're in the wrong Channel if you want some JavaScript uh let's just do a body it looks so small I'm not oh I am zoomed out why am I zoomed out that's why the font size looks small I was zoomed for some reason uh okay actually no before we even do that let's go back to the image I'm going to do a Windows shift C and I have windows power tools installed and that gives me a Color Picker if you don't if you're on Windows and you don't have power tools installed you'll get them installed um it does a lot more than just the Color Picker but it gives me a handy Color Picker so I can get all my values that I need really easily uh so that's going to be my color primary one I'm not going to overthink my my color names for this one uh this is this one which will be we're going to do some fun things here actually that I wasn't planning on I was going to keep this one really beginner friendly but I can't help myself uh so we're doing that I need my white so we'll just say color neutral I'm just going to say one uh and that's an FFF I think that's all we're going to need for this one cool so yeah we're going to do some mod CSS mixed in here um even it'll be beginner friendly enough right um all right so with that done let's jump back on to here uh actually we're going to we're I'm going to do one thing just cuz I'll be nice to your eyes we're going to do a uh color scheme of dark a font family of system UI uh just so it's a little nicer on everybody I don't like having bright backgrounds um we'll we'll switch it back later maybe uh to see or we could even do a light and dark theme on it maybe um my body will have a Min height of 100 we'll do svh um then that's oh uh I was like why do I have scroll bars because I always forget there's a margin that's going to come in with that uh and then let's just do display grid Place items Center sorry tickle in my throat there one really nice thing about using color scheme dark is it will change all your inputs to match it'll match your scroll bars other things like that so things that you wouldn't necessarily think of right away you can always tweak the colors afterwards it's just setting um the the defaults like the user agent Styles all to a dark scheme um all right uh to me I saw a question about why am I using primary 1 and primary 2 here the main reasons I'm doing that are just because if I look here like it's blue and blue so I don't have a secondary color white I would never consider a color i' just always call it neutral usually I use like 100 200 300 400 500 iing instead of one and two but I only have three colors here so I don't want to overthink it uh if I had an orange here then I'd probably have my primary and an accent if I had a purple then I'd probably have a secondary but because those are the only colors I have those are the ones I'm going to stick with here um system UI has been around for a really long time now people just don't know about it um the color scheme is dark you can actually do dark light uh or light dark and it's going to go based on the user um system preferences uh if you do if you include both keywords words uh if you say only light it will only be the light one if you say only dark it will only be the dark um so as I said we can always come in with a so maybe my neutral here should actually be a dark color but I I'll follow the design is I said I wasn't going to look at the chat while I'm doing this but I that was a fail that's okay um let's look at the design again uh the whole thing is a text align Center so we can do that here text align Center while we're at it the font size looks a little bit bigger so um there's this funny thing now where it's because we have we have a whole bunch of new CSS units that are all um based on the root stuff I still think it's one of the reasons I like putting my font family here now um but I line height actually makes more sense to put it on the HTML element but I like having my font size here cuz I don't like getting away from a base 16 on my HTML um so I have this weird dichot I don't know split now between my HTML and my body selector uh but yeah let's come and a font size here of just something bigger we can always play with that a little bit as we're going uh I didn't do the general reset so we're going to do um box sizing border box we'll do that I don't know if I'm going to need any pseudo elements but just in case before and after can get that too um I'm going to do my margin of zero and up padding zero here too I know some people don't like doing that I don't really need it for this project but uh yeah we're going to do that because I want to get rid of the margins anyway uh I used svh here just because I find it's the safer one to use on things you could also use a dvh you could for a simple example like this you could just use VH um I'm just trying to get into the habit and actually speaking of trying to get in the habit block size is what I should be using there uh I'm trying to get in the habit of using logical properties in for my widths and my Heights CU my brain just hasn't clicked over on that yet uh so block size is your vertical axis the block axis uh and then your inline size would be your horizontal axis um yeah the S the S here will take if they if you're on a phone and you haven't scrolled yet you have the UI elements on the phone so it's going to take those UI elements into account basically it's the smallest small it's small viewport height right you have LVH dvh and svh um it for and again for an example like this it really doesn't matter which one we're using um I forgot if I decide I called it login CTA we don't really need a name but whatever uh login CTA I'm just letting you know that I'm not really foll like if I was doing this as part of a bigger project I'd probably have a lot more of a reset going on first instead of just diving into it but it's such a small example uh I just I'm going to code what we have uh though like we do have an input and we have the button we don't have anything but you might want to include like your select and your text area uh on those I often do a font family inherit font size inherit you can also just do the font inherit as well uh just cuz font all the font properties are inherited everywhere except in these types of elements and I might be forgetting one uh we do have images coming in so we might as well do the uh Max with 100% and a display block on those um for when they do come in just to make it easier to work with um yeah login CTA now let's see so I guess we'll start with the background on there background image because it's a gradient is our linear gradient of our VAR one I'll put this on multiple lines just because it's easier for everybody to read including me VAR Color Oops two this should be primary there we go awesome uh I I said we wanted to beginner friendly so I'm going to sort of level up things I think instead of just going pure beginner friendly like normally here we do padding three rem or something like that um you could even do it in in pixels if you prefer it's not going to be a big difference I'm basically only looking at this padding up and down right now um in terms of how big it's going to be uh that's not terrible actually I'm going to leave it like that but different things you could do here if you are worried about responsiveness is like it would actually to me make sense to do this in a clamp and have it as like a 1.5 REM we looked at cqs before so we could say something like 10 container query uh Min and then we could do three as the largest and that just means as the screen gets smaller um it's going to reduce I'm going to make that bigger and make this bigger just so we can actually see it like kicking in so it's really big there you go you can I have to adjust those numbers but you can see the top and bottom are sort of shrinking down I know it's a bit under my head when I'm doing that um maybe this would be something like five actually there we go you can see it working a bit more now where it's shrinking down as that's getting smaller I think it's a little bit too much at the moment um but I like doing that for elements just so like as the screen gets smaller the padding will shrink uh yeah it's maybe I don't need it in this case so I'm going to get rid of it but throw that idea out there anyway uh we need a border radius obviously border radius of it looked really big to even oh it's a lot smaller one I guess I was thinking of the outer one uh now for that outer one actually because we have like this color on the background uh and I didn't get that color when I created this right um just when it was going behind my head before that's why I have started using that other War the the non- circle version um more often uh because I always forget that stuff is going under my head Nick you don't know when the clamp values come in so they do become kind of magic numbery that's the only issue with them um and I will say that if you don't mind the lower browser support of container query units that you might as well use them instead of viewport units this point because unlike a container like if you're doing a regular container query you need to have a defined container for it to work it won't just turn in like it won't work at all unless there's a defined container container query units if there's no defined container we'll just use the viewport size um so I don't know if there's a point to well that's not true there's always going to be a point to viewport units but they're not very often um okay yeah for that outer color it looks consistent so let's fix our gradient I guess uh is it 45° - 45 I always just it's it is 45 but this way around right whoops we going that way there we go from the light to the dark something like whoops 35 we'll do something like that um I think that's what it looked like more or less my padding is not enough and we need it's going to space out more so I'm not worried about getting the padding perfect I need a lot more on this sides and stuff but I'm going to worry that more once my content is actually laid out properly um yeah I want to get that odor thing first though which I think the easiest way to do that is actually just with either an outline or a BLX Shadow they both work I'm going to use an outline uh one R the nice thing let's just do solid black for or white I guess so we can see it um so the nice thing with the outline is it's going to bring in the Border radius on its own the Border radius is going to look like it fits the right size everything else you can do this even as a border I don't know why I said the Box Shadow oh that's why the Border won't do that uh and I think they fixed the the Safari issues with outline right um I'm pretty sure they have anyway uh but then if if they haven't you could always do a box Shadow if you need like browser support that's better uh it would be 0 0 0 one R and then you don't need the solid and you can get the same effect going on doing it this way uh there's not really a benefit or let's stick with the Box Shadow but the o line would work fine uh what I wanted to show here all right we yeah let's use our primary one so the problem with variables as colors is you can't lower their opacity you can see it more on this side uh oh I can do this even now I forgot I have this uh if I want to highlight stuff I think that's a power toys thing too um so yeah you um I can't lower the opacity of it when normally but now we can do this uh I know many get it wrong uh it would be an hsl I'm going to wrap this entire thing in an hsl function and it would be from is it from I forget I did a video on this but I don't use it hsl let's see if that works it did work okay so it is it's so I want an hsl value from this and then I have my H my SS my L and then I can do like over I always say over it's a this is just a delineator it's not a division um but then I can bring in and lower the opacity of that custom property and it doesn't have or yeah the custom property and this could even be like ff0 or whatever it can be anything here and it's going to work which is cool uh so yeah I like that and the reason I'm doing it on that blue color is cuz even if we had this as a light color scheme uh then it would probably I'm guessing that matches the design pretty good there we go uh let's see what's happening in the chat um Faith asking always use pixel when you should use REM the only time you should 100% always use or I won't say use REM I'll say the only time you should avoid pixels all the time is when declaring font sizes anything else you probably won't have any issues if you use pixel 4 um and that's because if a user changes their preferences in their browser uh if if you set it in pixels it's going to take that pixel value for the font size so if I'm a user who 16 pixels is too small for and yes I'm getting to the point where I'm I'm old enough that that tends to be the case if someone has a lot of websites that have a font size of 16 I'll just zoom in um but some people instead of zooming in will just change their browser settings because they want that everywhere and if you use pixels then it won't adapt and it won't change uh and then that annoys them so if somebody's taking the time to adjust their browser settings you want to uh account for that so setting your font sizes in rem would be a good idea and then as far as the other things it comes down to like do you want the size of the Border radius or the Box Shadow to adapt when that font size changes or not uh you might want it where there's more padding because the font size has changed or maybe you want this to be hardcoded in at 16 pixels and even if the browser has the font size changed you don't care the Border radius will stay so that be comes down to personal preference at that point and that's not the same as zooming in and out if you zoom in and out it affects even if you use pixels um so I'll keep going if if you have more General CSS questions that aren't related to this project I'll answer some some stuff a little bit later on but I do want to get through this uh relatively quickly um I'm going to have to do I'm going to open this and then no we can do it here uh visually hidden CSS class uh hide content there we go so I'll put a link to this actually in the chat for anyone who wants to read more about it but I'm basically just going to copy this uh and I'm going to bring that in it's a utility we'll leave it at the bottom uh did it come with visually hidden it did so uh yeah I want this visually hidden class which and the reason I want that is because I have a label and you should always have a label and I should have an ID on here ID equals email uh so that label serves a purpose uh you always want to label on your inputs even if your design doesn't have one and that's because if you a non-sighted user uh somebody's using a screen reader there's other assist of Technologies there's no context for what this is at all right well I guess uh yeah it because it doesn't even mention anything about email here so it's like log in they'd end up in an input and they have no idea what that input is for so you just have the label there and then you use a class of visually hidden and that makes the input there it's part of the website it's part of the content but cited users won't see it uh you might have worked on projects or seen things they use an Sr only which would be screen reader only I prefer visually hidden just because I feel like it's more descriptive of what it's actually doing um so if you've never seen something like that before it's more obvious uh what's happening whereas a lot of people might say like what's Sr uh you can use a area label uh area labels considered the last line of the last thing you want to do is an area label if there's no other choice uh so you actually one thing I could do here too even which I should have done CU a section won't have any semantic meaning to it unless it has a name so here I should probably do uh loog uh ID equals log login title and then here you could do an area label and actually label it or CU I don't think the title does anything um but you can do a area labeled by and that would be my login title right there so the section now actually becomes the way you probably think a section is um because now we've given the section an official title of this one and the general rule of them is if you can have it as actual content it should be actual content if you can't for whatever reason then you or or yeah in this case I can use the area labeled by because it's going to look at the actual content um so it's have something if you don't have like a thing itself then you you use an area labeled by and if you can't use area labeled by then you can use an area label I'm overly generalizing uh but that's sort of the the waterfall to go down um okay so oh yeah I need to put a name on this as well uh thank you Brent um on the input so it's useful so name equals email we can add that in there too um cool now it still doesn't look fantastic does it it's actually it's not too bad let's let's style up our our input a little bit here um so or you know what one thing before we do that this this could start my my Flex box versus Grid thing but I'm not going to yet uh grid and gap on there um I guess one is big enough because I just want consistent spacing and I think that gives it to me yeah that's not bad cool um now I notice one problem is this line of text is already is way too long uh now sometimes you want like a container you want padding you want other things that are going to limit the size of something the problem is do I have it opened here still I do so the problem here is I don't like if I say I put like padding pushing to the sides this way and this way if I did that it's going to give me this total size but then like my thing is so [Music] thick don't clip that um this is narrower even right and you the year would probably break onto its own like it wouldn't break the same way this is breaking so I do need this to actually be narrower uh it is interesting that the images are lining up to be the same width as this here but I think that's just more coincidence than anything or that's how I'm going to see it anyway um so in this case because this is the only thing that's actually smaller I'm we'll start with that so we could just say login CTA paragraph has a max width of 45 CH and if you don't know CH units they're awesome um the reason I like using CH for this is it's roughly the width of the zero character um more or less it depends on the font and if that information's provided or not but that's the estimate the reason I like using CH for that and you could technically use M and get the same type of thing but it's like and I guess you could count your characters and then it gives you a rougher or a bit easier way to estimate it but the good thing with using any relative unit like that instead of just saying REM um so either M or CH would work here uh would be if I came in and I say this is um the font size is bigger font size is two Ram it's going to still like the max width isn't based on a set value I've put I can grow or Shrink the font size and it's going to keep sort of the same relationship as it's Max width so that's why I like the CH unit there Ryan thank you very much for that it is I appreciate that that's thank you very much and it's super cool that you're here and a super nice surprise uh to see you here so thank you for that super very much appreciated um all right cool uh so another thing so part of the issue here is this has gotten a lot narrower too just cuz it's basing it on like the size of this the reason that's happening and this is the problem when you do these like silly demos or individual components that aren't based on like something bigger is this because I'm using a place items of Center here on the body so like if I take whoops if I take the grid off of there um it's going to be a lot bigger right and it's not centered and there's other issues that are coming in so that can become um an issue oh I can show a cool trick here that actually works with CSS now too if you have text where this can become an issue um so yeah I'll look at that with you it uses nesting but it's a fun one um oh is it gonna we'll try it anyway um so I don't know what the like if I should we put this in a container instead just to make it a bit more realistic um I don't like containers really okay so we're going to do this instead we're going to keep our display grid but we're going to try and make it a little bit more realistic we're going to say grid template Columns of min max uh we'll do this on multiple lines again to make it easier for everybody min max uh we'll do a Min in the middle and then yeah we're doing it easier remember this is beginner tutorial uh so the min max will be a 1fr uh sorry a one REM comma 1fr I should have just copied and pasted or used multic cursor there um and then the Min in the middle will be 100% comma 100% will be a bit wrong minus 2 REM I might have to do that I'll explain all this in a second we'll do multiple lines uh and then the largest let's just say it's going to be 800 pixels or something that should give us a layout uh and then all the content so star will be grid column one over uh two 2 over three and let's just see the width so the width actually doesn't look too bad I'm make it a little bit smaller 700 maybe we'll stick with that and then we want for this example I will keep the place we'll do align align items of Center again for something just because it's a oneoff I wouldn't this is a bit complicated you wouldn't have to do this for a challenge like this uh what this is doing for the grid is it's basically creating a container like you might normally do where we have the uh this min max on the side is one REM 1fr so that's taking up the space on this side and this side and then the middle area is sort of becoming my containery area uh and then I'm using a Min of 100% minus two REM just because I have the one REM on the two sides here that's going to get treated there and actually I should make these two and I'll explain why in a second and then this would become a four and you can use custom properties to make this a little bit more user friendly um so if we do that so I get like the space on the sides will always be two REM unless the middle hits 700 pixels and then those two sides can grow and fill up more space and then it can shrink back down uh so yeah that works then we have the place item oh yeah I took that off uh yeah I think we're good there we go I'm happy with that um I've done a lot of content on this concept it's a a little bit more complicated maybe than it needs to be but whatever we're going with it anyway um cool so for this there's a couple of different things we could do because I have the text align I'm actually going to take this text align center off of I have it on the body I did that at the beginning but I'm going to bring that text align Center onto my login CTA because this is you don't know again what the rest of it is it would only be in this component you'd probably have this I'm just trying to think I'm going to put it here um actually no we're going to put it up here so because I'm doing a text align Center on it and you might have things that are narrower you could do this where um then it's a align no justify justify justify content Center uh and then it centers it again so if you were doing this you probably would do this anyway but if ever you have you oh we don't have a text Center class I was if you if you're using something like a text Center uh with has a text text align Center on it if you ever do something like that that's you're like a utility class that you're using to Center things you can run into the problem with your paragraphs getting stuck on the edge like that so what you can if if ever this is the case you can actually do something like on a paragraph where you have your max width of 35 CH or whatever it is uh you can then now use nesting where you say uh text Center amp sand and then do a margin inline Auto uh you're you're if you're working in a a team they might not like seeing this because nobody's going to know what's actually happening uh but I'll just show you that it does work fingers crossed class equals text Center and it should oh it's not going to work something like that should work CU what this is doing is it's any paragraph the ampers sign is a placeholder so a paragraph that's nested in inside of the text Center I'm trying to think why that's not working I know I'm getting a syntax error here uh but I think that's just like nesting is supported in this is it not compiling it or did I just muck something up I'm curious now Max width is working my margin in line Center doesn't want to work hm maybe I mck something up there but I've done stuff I used to do this in SAS but I'm pretty sure it works now uh in CSS you can yeah somebody saying is it scss you can do this in regular um CSS now maybe that trick doesn't work but I'm pretty sure that would work not sure anyway it doesn't matter too much for this context because I don't think it makes much sense to use it here I would just do the justify content Center I think that makes more sense uh and already we're much closer to the layout that we wanted uh because I was using the Amper sand it wouldn't it's taking it as a placeholder for that element um so it would work just because of the way that it breaks it apart as soon as you use the placeholder it sort of compile it doesn't get compiled if you're a native CSS but it doesn't treat it as a nested selector it treats it as a placeholder for the original selector uh I I should be able to do it one second I saw Mark I I you shouldn't no I don't want to do that you should be able to do that oh it would be like that yeah but you should be able to do that this would be yeah okay the nesting is a bit weird there paragraph text Center no no no this would be what I wanted I'll have I'll I'll play with it after I'm not going to go down that rabbit hole right now and trying to figure I'll open up a code pen once we finish this maybe if somebody reminds me and cares enough and we'll get it working um yeah let's let's get this one done uh so my email address now let's get that looking a little bit better uh we'll just text Center wel come here so we'll do a login CTA oh oh my everything's working my graphics cards having some issues lately so my screen is frozen even though I know everything's working 3 2 1 there we go um input whoops input uh you probably wouldn't necessarily want to do it this way just but I know it's my only input um so whatever we're going to do it that way anyway uh so we want that once again to have a bit of a transparent let's look at it we'll take some actually I have a screenshot of it I'm going to uh can I just erase we can probably oh I do have an eraser there we go um so we want a white border on it we want the placeholder be white we want a border radius on there so we'll start with that uh a bit of padding it's probably way too much uh top and bottom look okay make it a bit smaller point 75 top and bottom and maybe like a 1.5 on the left and the right um then border radius 100 VW if you ever need a pill shape that's always going to work every single time um maybe somebody can answer in chat I only realized this the other day and I don't know why when you put a border radius and you change the Border radius on an input it loses the background like the default background oh is it only if it's a really big one what's 10 pixels do here if you put a really big border radius it lo oh no they all did yeah why if I change the Border radius does it lose the background I don't know I'm curious if anybody knows the answer to that uh the border is a one pixel solid we'll just oh I made a color for that so we should use it a it doesn't autocomplete the VAR for me VAR so interesting thing actually I found out at CSS day talking to tab apkins why they did the double hyphen and you're going to be seeing a lot more of it in CSS if anybody's looked at the popover API uh you'll notice that you name or not the not the popover if you've looked at anchor positioning um where it uses the double hyphen as well uh and there's one thing that you can custom name that I don't remember what it is now that doesn't involve the double hyphen and they just said it's a mistake but tab was saying that anything that something that we now name in CS s will'll always start with a double hyphen just to differentiate anything that's CU not everything's going to be a VAR there's some like when you if you use anchor positioning you're just going to have like a double hyphen thing there's no VAR involved in it so it's any custom name that you do it will always have the double hyphen just to say this is user created and not something that's actually in you know a regular property or value or anything um all right uh we need a transparent background or yeah we'll do the transparent background first so we'll use the same trick we used before which was uh background color if you're using backgrounds I would suggest not using the shorthand you in something like this you wouldn't run into an issue but there's all background colors and images um it's easy to use the shorthand but there's it can come to bite you so uh background color is going to be an hsl from our neutral white hey look at that we have an auto complete giving us probably what we want but this value might be a bit higher uh five let's go look at the design oh it's very white 75 9 85 oh it's really high why doesn't that look dark enough why is it why is my background transparent I haven't changed the background color on things in a long time and I'm just don't know that I'm missing something here uh we'll do the placeholder where I wait for chat to help me out uh Place holder uh color white oh I should use my bar color neutral uh see this is working I have the Ampersand this is just the this code editor syntax highlighting is a bit out of date oh primary thank you uh okay so we'll do that again hsl from VAR neutral hsl over again sorry I I should I need to stop saying over because it's really bad habit of mine um because it's just it's a visual separator people when I I think because I say over people think it's dividing uh it's not a division it's your hsl value that's a divider visual divider and then it's the opacity um yeah that makes more sense use the right color you're going to get what it should actually look like um all right so here I did that all in the form so let's just come we'll do this my input CTA form uh is going to be position relative and the reason I'm doing that is because I'm using nesting here I haven't used it anywhere else just if anyone has hasn't seen this before you can do this in regular CSS browser support is so so um it'd be the same as doing login CTA uh yeah an login CTA input placeholder because here I have the input login CTA so instead of rewriting all of that you can Nest it inside the original selector and the Ampersand acts as a placeholder for this here uh sukuna it's hard to say um but start with the JavaScript sooner rather than later because you'll learn like things that you'd want to do with CSS just a little bit of JavaScript manipulation stuff like that can be good um all right cool so I think that's looking pretty good let's go on now to my login CTA button uh which we want that to be a display or display I was going to do it position of absolute uh just to take it out of the flow it's going to have a background of white border uh border zero cuz we don't want one border radius of one uh 100 to make it a circle uh color will be black just so we can see it for now the text my my fake Arrow uh let's give it an inset five pixels on the top five pixels on the right five pixels on the bottom and Auto on the left and see if that works it did not work did I do position did I not put everything in my form form my button is in the form position the fun of live coding and this is anyone who watches my tutorials who like thinks I know what I'm doing this is what a normal video see I made a mistake here because I don't have any so all I'm doing now is I'm looking and I found my form which is under my head let's switch back to this so I don't run into this problem again oops oops that one no I'm so confused oh I know what's wrong there I am I was like where' my face go there we go um okay am I going to run out of space here okay there we go I can see everything I need uh if I go and find this all I'm doing is I went on my form and then I looked here and I don't see anything that I've put on it which should be at the top even though if I look here I'm pretty sure I did so I made a typo somewhere in my selector uh login CTA input form oh see I put input CTA not login and I'm sure people in the chat were already telling me that but I think it's good to to show how I debug these things sometimes there we go we're on the big face mode again um so the other thing now the problem is it's like off to the right I'm going to have to fix the size of it I thought that was actually going to size it properly um width 100% that's better cool so that's much better um I'm going to actually now we can fix that after my issue let's try this I don't know if this would work in Safari or not um is so I'll I'll explain what this is doing in a second let's just give this an aspect ratio of one ah it did work perfect look at that um so the reason so aspect ratios one is just the height and width will match each other um the inset I'm doing five pixels from the top so inset is a short hand for top bottom left and right so I'm doing uh the distance from five pixels from the top five pixels from the right five pixels from the bottom but then the auto here is basically saying don't set a left value so then it's by not setting the left value it's hugging the right side um yeah cool I that worked better than I thought it would um awesome so one problem right now is the title is too small so let's just come here uh that was mytitle I guess I don't need the direct sibling combinator there but we'll go with it anyway font size to Ram or something it already is to remem or I didn't select it or it's not a direct child I know I called it tile didn't I oh I did I called it login title in the end we're going to go with title oh that's my ID whoops login title can stay section title aha that makes more sense section title can stay actually uh let's just see what that looks like now I broke it again again what justify content oh I did justify content maybe somebody mentioned this when I did it that should be an align items no align items is vertical justify oh justify items damn grid justify items ah there we go uh which sort of breaks my input but that's okay um even though this has a width of 100% on it minwidth 100% really it wants me to hardcode a value here inputs are so weird so maybe that wasn't the best solution let's just put 500 pixels for fun yeah okay why doesn't 100% oh I know why okay this is the problem with using percentages for sizing stuff because it's matching the size of the form and because I did the center on there the center is shrinking the form to as small as I can get which is the size of the input uh cuz inputs have a minimum size on it I guess if I put Min width on here Min width not width if I uh yeah if I put a minwidth zero there it might shrink away completely minwidth of zero it might just vanish no okay it doesn't probably because the width one I don't know there might be a weird connection there um but yeah it's a size so here let's just I have the form selected here already if I said that is with 100% we'd fix it there's probably better ways of doing doing that now it's too big but you get the idea 80% you muck around we're magic numbering things a little bit but whatever um yeah that's not bad uh let's take a little break I'll check what's going on in the chat forio saying that you do a 9999 pixel for Border radius it's essentially the same as what I it's less characters what I'm doing so that's why I do it that way um yeah any large number will make it a pill uh how does the light oh light dark function is a fun one but I don't really need it the minwidth fit content wouldn't work in this case and it was just because the form was shrinking to match the Min the width of the input and then so the yeah I think my my percentages there make sense ngu why don't I do these live every day because I don't have time to do that I don't see too many other stuff coming in so I'm going to keep going we just have the images left to do really and then we can make a little dark mode maybe for it it's wow I've been doing this for longer than I thought um so the images I'm just going to use this is one thing I'm going to I'm going to grab some images uh in another tab that I'll have off screen just to get them really fast um this is iode this if I don't think Floren is still here uh if you didn't know Floren was here before he's the one who who created iode this and runs it um the one thing I love with codepen is they have their little assets thing you can easily get to um so yeah a little assets tab where you can just pull images in from unsplash would be awesome uh person so I'm just going to grab some small URLs of pictures here really fast uh URL there's one person I'm not worried about them too much they're not that small I'm just grabing the first ones I see to get some images I'm also going to say if this was part of a whenever I do these they always come with a caveat that like on a larger project where there's more context oops I made a mistake on that one um I'd probably do things a little bit differently just because there's a you know you have more reference of how things are going to be used which can help uh you know how like setting the widths and everything I did there was probably not the best solution but it works so the line Heights are ugly the only line height that's a problem is the title right uh I mean this is part of the talking about part of a reset usually I have like an H1 H2 H3 oops anything that would have a large font size on it and then just do a line height of 1.1 as a default and then you play with it from there uh no comma there would help even a one might be okay on that cool um and now we can go and style that up so those images did I give that a name oh I did Flex group and centered okay there's a reason I called it Flex group and centered here is cuz usually the centered isn't usually how I use centered but um I usually have utility classes called the flex Group which will be a display of flex a gap of one R and then a uh I also do a flex wrap on that usually Flex wrap of wrap uh in this case it might not actually be the best thing just or okay let's just say we did that let's come back on these for a second these images would probably get what's the short yeah it's that shortcut um these probably would get like a class of Avatar or something like that cuz if this was part of a bigger project you would have I'm assuming the avatars would all look the same uh and so again I'm making assumptions but let's come in with our Avatar which would be border radius once again actually this time with 50% because we want to be a like that with an aspect ratio of one to make it a square or a circle uh Max width I don't know or even these could probably have a hard width on them width of 100 pixels for now just so we can see what that looks like OB object fit of cover are they too big they might be too big we'll do 75 so we can do something like that to get them in there um I might even do an avatars something like that just because we're going to have to move it or position it or yeah I think I'll do that um that's a little anyway yeah okay I'll talk about that in a second so that's okay and they all have the white border on them right and I think they have a box Shadow on them too so border is it looked pretty thick 5 pixels solid bar color neutral white we got the full the full auto complete kicking in there which we don't really need except it got rid of my VAR there we go perfect um that made them a bit smaller right so we'll boost that up uh this is why I like the flex wrap because it just keeps it responsive the reason I did the centered is the idea here would be the flex group could then get uh like if you have the centered on it usually centered I mean vertically centered um but we could say if it's a flex group that's also centered we could do an align content of Center uh just because isn't that how that works or it's just a there we go and then it it looks a little better I don't know if this is actually going to work since we need to drop it down anyway uh we could shrink them but I'm worried that when you shrink them it's going to look really funky so I sort of want them to break on multiple lines I think um we said a box Shadow on that too right we'll add one quick even though we won't really see it with the dark background that we put but box Shadow Zero five pixels five REM this is where I mix up pixels and REM um and we'll just do black for now even though that's way too dark oh so we can uh no I'll just do hsl hsl is the easiest to get black or actually RGB is easier RGB because you don't need units white is easier with hsl uh3 there we go something like that's fine uh so now we just need that so that was my avatars the only this is where nesting sort of makes sense because this was my login CTA and then I could choose my avatars like something like this where I want to shift it down um so we're just going to say margin bottom the and I'll talk about why I'm using margin here uh block end right I said I want to use logical properties I'll talk some of my decisions here margin top of one r or something just to add some spacing there um um there's a I could have done this in a few different ways uh instead of doing it that way but first the the nesting you might have groups of avatars and other places people talk about scope in CSS like I'm scoping this to my login CTA it's probably the only place where You' get something like this uh this login CTA might just be a CTA and you'd have this type of pattern repeated in other places I don't know so you do want to think about that a little bit um the reason I wanted to do I guess the two choices I could do the negative margin on there just to P it down which works right uh and people don't like negative margins I find for stuff like this they're fine the other choice on it though is to then do a position of absolute to pull it out of the flow uh which I guess could work too but the problem with pulling it out of the flow here is like oh maybe the spacing is the same though okay we'll do it that way because it will actually be easier to get it centered but if I do that I need more padding uh to match the design a bit better um but then we can say it's a bottom of zero which means my login CTA needs a position did I never log in CTA we'll just put it up here position relative um I'm all over the place sorry for scrolling up and down a lot uh here we go so this is easier to get it centered because then you can just do a translate of negative 50% uh 50% zero 50% positive translation um actually we need that a little bit more so I know this is where if you had more custom properties set up it could be more useful too uh 05 R just because I know that this the thickness of that like outer outline uh is one RM so I want it 50% down of its own height plus half the distance of that ex other thing here and then I know it's perfectly centered um in that space and then we'll scroll all the way back up and as I said the padding here I guess would actually be bigger I'm going to leave three on the right and left because I think that's pretty big and then we'll say that it's like a five REM I guess on the top and bottom um and there we go we could come in with some styling of this for like different states stes and everything um and I can find an icon but I'm not going to stress too much about that this is sort of what I wanted to focus on oh let's see uh they will the the negative margin would also cause issues once it starts wrapping anyway I think uh that's true I didn't think of the that issue so maybe the negative margin makes more sense uh let's just see it are it's our it's so broken now anyway so let's I for I'm like I want it to RP and then I forgot um it's probably I guess that makes more sense actually uh yeah and can we do it this the problem with this I wish we could get like its own height the same way we can with translates um that's right whoops wait what why is the six Ram oh I know why um turn off that for a second yeah we've we've gone too far it's still going to once we get past a certain point we can't like yeah like it's it's causing problems cuz the top won't pull further away because of how uh what if I did align uh align self end ah there we go that fixes it it was cuz we were in a grid context so it was causing like the cell to stretch out um so the entire element was stretching so align self prevents that problem from happening um yeah now with the larger margins I don't know we play around I just it becomes very like magic numbery to get that to line up but I guess it does work better once they start wrapping uh and we'd have to play with that a little bit like at this size it doesn't really work that well maybe less padding on the left and the right would fix that um yeah okay that that shows another reason why the negative margin is probably a better solution though cool hide the images that are wrapping that would be really unless I set a I mean we could to do that you'd want to set a height of I don't know how big they are uh do I oh 80 uh 80 pixels and then [Music] overflow overflow y clip would that work oh it does work look at that uh I I prefer clip over hidden now clip is my new default um hidden would probably also work though the problem with hidden is it changes even if I'm changing the Overflow y to Hidden the x is actually going to change to Auto um and vice versa you can't change one without changing the other to Auto but with clip you do so clip is my D default and if clip doesn't work for what I want um then instead of using clip I will use the yeah instead of using clip I'll use hidden if whatever I'm doing doesn't actually work um oh that could work too yeah at small screens the images come on the side instead um since we have more vertical space that could definitely work um I don't want to limit the width of this uh I saw somebody mentioning like give this a minimum size it just it raises way too much chance of overflow issues coming in um my my first thing I would do to improve that would be the padding on the left and the right um I would let's it we'll do it with a choose the yeah I'm going to do a clamp uh clamp left and right of let's say one ram we'll do the cqs again I was having trouble with it before four and then we said three for the largest size um so it's smaller here so it's still not perfect but at least the padding is a lot smaller and we can get to a pretty decent size before we start losing that um and I think it's still pretty obvious what it's doing plus it's only the placeholder um so that's an option for sure though but I just the only other thing that could happen there is you start causing overflows which I wouldn't want to happen if I styled the form and not the input I wouldn't what issues would I not be running into B1 limit uh cool yeah that was a fun one nothing too challenging there let's well well people are if any people have General CSS questions I'll take some in a second um I think what I'm going to do really okay let's just see if I do this if I switch this to a light theme does it break anything oh look at that there's a problem that we didn't notice because we couldn't see my Shadows um because I put the clip on there so that could be fixed just by boosting up the height a little bit uh it's kind of uh be like 90 pixels it's kind of hackish a little bit but whatever and that I don't know if that mucked up the centering of it though so you might have to play around more with the sizes that's breaking more things because of the height uh yeah align items and uh start I need it on the start so we don't lose why does oops align items on the start so we keep the Shadows on the bottom there we go that fixes it uh the reason for that is cuz my avatars uh is also a flex group right I was looking for my display Flex there I did it within like the flex group here so display Flex means they're stretching so when I changed the height to be bigger than the children it was stretching them um so I needed the align align items of start there so it wouldn't stretch and it has to be start because if it's on the bottom then the drop shadow is getting clipped because we use clip along the way there um German Soo the main use cases I have for CH are generally for uh limiting line length of text I know some people who like using it for padding as well can you truncate the placeholder so it doesn't overlap with the button I don't think so the button overlapping but I need the button to overlap right like that's I'm just following the oh you're saying that's the form I see what you're saying you you'd style the entire form I mean you'd still get some the text would just get truncated in a different way instead of going underneath you just sort of like lose the side of it right jalou how I got my secret is years of writing it and teaching it the it's not very good secret but that's what it is um the text color looks dark now yeah just I switched the um sorry let's go find it again because I switched the color scheme to light the default values for the colors um changed um just cuz I was playing with that before so I could hardcode in the color the white color there for that it looks pretty good on a dark theme though I'll stick with that for now oh for the right arrow we can use that the problem with the text overflow ellipses is I won't see it because um I could use that does it work for placeholders um actually it would cause a bit of a problem because if you're writing something I guess you could write underneath it and you don't see what you're writing so yeah we could should we fix that we can fix that a little bit um because even the Ellipsis right now would show up underneath the button so okay we'll fix that I wasn't going to but uh where's my input button input so I can take that off I'm Pro uh let's take that off for now whoops I did an Ono that I didn't want to undo that's my button my input we can take all of this off we'll do background is transparent and we'll say border is zero um which is broken my button so we might have to do something to fix that as well but we'll just come here and I'm just pasting all the values that I had for the input onto the form instead um so we do have a so the width 80% I can take off now oh we actually want a width of 80% then cool so 80% um because of the text align Center so here this would just get a text align start there we go um so yeah it's still going to go underneath oh is that better or worse uh so on my input let's say the max width of the input is 80% uh so that means it will stop there instead which is probably a little bit better actually um and then you could even if you knew the size of your button you could probably fix that does the is it text text I don't know if I'd want text overflow uh Ellipsis does it work oh it does work I don't know if I'd want that on an input like if you're writing your email address in there oh it would still sort of work and then when you go H okay we can do that there we go we'll stick with that I think we'd want some padding and stuff like this looks weird with the way the outline is so we could probably fix that a little bit so it looks uh okay we'll fix that actually never ever do this uh I'm going to say an outline of none you generally don't want to do that because you want to keep an outline on things you really outline of none is an anti pattern you need to replace it with something if you're going to do this so what I'm going to replace it with is on my form we're going to say that on the form if we have Focus within we can say that the outline is 3 pixel solid white so if I have something now like I'm adding a focus state to the area that looks like the input uh so that's the only time you want to do an outline of none is if you're replacing it with something else that's going to make it make it obvious where the focus is um CM asking what about the the the text overflow only for the placeholder I don't know if that would work we could try it but I sort of don't mind if you come in with a long email address uh I put Max width we're just going to say we're on the right place uh we're going to say this is actually just the width and not the max width uh so if you come in with a long email address and then you click out I don't mind the ellipses showing up afterwards um I think that's okay because it's you know it's not actually being cut off there we go and then we have that coming in there perfect Caleb asking if we can have JavaScript tutorials like these if if you'll have to find someone else to do it awesome cool so I'm actually pretty happy with how that turned out um we're going to jump on over if people have just general questions we can definitely do those uh does tab index work does tab index work for what I guess my question would be ngu how much CSS is enough the least amount that you need dieo I'm starting to study Tailwind right now and I'm big sad that most of what I learned about CSS is being put aside well everything you learned about CSS shouldn't be put getting put aside cuz Tailwind is just another way to author CSS um so unless you're using like Catalyst or like their their framework things I don't think anything is actually getting put aside um it's just a different way to author it I'm not a big fan of using it myself but I I get why it's used um but yeah it's just you have the more you know CSS the better you will be at using Tailwind yeah you can tab here for sure Focus within will work um no problem and I can tab to my button I probably want to put a better focus State on the button uh just to make it obvious when you've got onto there but Sebastian can I make a dashboard not today I do get lots of requests for dashboards so maybe one day we'll do it but they're so long to make drizzle I want to make a three card layout but between these I want to have lines with a little padding so the lines don't touch each other but how do I fix this responsive oh yeah So eventually okay eventually we're going to have a we're probably going to have a way to decorate grid gaps right now we don't though um Sarah I'll answer this first cuz it's easier Sarah Ramen Saras Ramen is there a way to style option tag not really no U they very very very limited that's why we're getting a new element that's going to allow us oh sorry about that that's loud I apologize hey hey sorry sorry sorry but I thought I muted there and I paused my recording instead so it wasn't muted sorry about that um but yeah what were we talking about uh yeah we're getting a new element eventually to be able to make things more styleable um at one the other one okay the three card layout so let's open up a code pen one option if you needed to style something like that um no it wouldn't really work uh no it wouldn't work I was going to say you can use columns right because let's just do div * three uh that's fine or we'll do paragraph paragraph uh yeah whatever it doesn't matter what I put with lauram inside each one of them you could do let's just delete all that columns of three and then we have column Gap three R I don't remember call how do you decorate it I haven't done column rule three pixels solid red right uh so we do have this right now it works it's responsive um if you want it to always be three columns that's fine if you want it to be responsive in terms of like this you'll notice is if there's no column rule it's it's breaking uh it only decorates the column we have CSS has this ability so they are talking about bringing this to grid but we don't have it yet um yeah so that that would be cool if we could but we can't do that yet NG I'm probably do a monthly stream not a weekly stream I don't have a portfolio website anymore no I have my website that needs an very much if you go to it's Kevin powell. it needs an update I don't even let's go look at it uh that's fine we don't need to save that uh my hair is the wrong color there uh does this say how long we're where's the YouTube no it doesn't even say how many about does this say how many people I have now I think I took off the mention of how many subscribers I had because I just didn't feel like updating it anymore um but I don't have like an official portfolio type thing uh anymore this stream will be available to watch later yeah height transitions are coming um it's in Chrome Canary right now it uses I can't do it right now but you're going to be able to do this this is oh I have Chrome Canary let's see if we can get it working I've never tried using it I don't even know if I remember what the the the thing is to get it to work let me just bring this in it's the wrong size one second and we'll open a code pen here before I do anything else I know you can't see what I'm doing right now code pen do I'm probably not logged in but that's okay uh no it's okay one second pen. new let's see if this we can get this working let me switch this over to this uh so let's say we have a an element and let's make the font size my kids just got home so they might start causing problems uh element here oh wow the font size is so small by default I should log in um but let's just say my element has a background background color of pink and a height of 500 pixels I Zoomed In A Lot 200 pixels okay what we should be able to do uh I don't hopefully this works say we do element hover height Auto uh yeah height Auto let's go to my here let's just add a bit of content uh lauram 10 so we have some text in there perfect okay so I don't remember how you do this we want to transition the height transition would be height uh we'll say 1 second so right now that's not going to work right it just does this uh when I hover because we can't transition to height Auto this would be is it calc size Auto is that all it is Ah that's it yes cool right and that works uh so this is coming the other two browsers have said they're on board with this spec they're happy with it um so that's how it's going to work the reason this is cool and the reason we have Kelk size and you might be like this is stupid I just want to be able to get to height Auto but you can do this uh 200 pixels and so it's oh that's not working I was I was told you could do math in here maybe it doesn't work yet I was told you could do math in here I I hadn't tried it as you can see hm we'll have to see and but I think you able to do like a Max content a fit content um and other stuff with Cal size as well so it takes a fit content Max content Min content Auto but I thought we could do math right now it's not working with the math but uh just the fact that it works is amazing and something that people have wanted for a long time now uh animating a background like Shopify does um probably a canvas with some sort well depends on how intensive it is but the problem with any hard and you could do like gradients and other stuff as well um but you need that property to do that properly um yeah Sammy you want to learn web fulltime for one year is that enough to get a job maybe it's so hard to say because so many people get to different places after one year like giving a time frame is always really hard to say uh it potentially can be for sure me as far let's look it up kelai should be able to take uh Kel size CSS uh we I don't know how much we're going to get on it cuz as I said this is probably from the spec it is um this is just URL to the spec here we go reading the spec is always fun did I go too far I think I did uh Kel size the intrinsic size keyword production matches intrinsic side allowed for example width it matches Auto Min content oh we have stretch as well yeah [Music] um why why can calze be nested allowing Cal size as the basis arguments means that authors can use a variable as the basis like so you can use a custom property yeah you will be able to do math in here eventually and it'll always work as long as the variable was originally valid for that property doing the same with calc doesn't work for example Min content size plus 20 pixels or even just Min content thing fails the nesting is simplified away at computed value time so the basis always ends up as a single key word by the time blah blah blah if two arguments are given the first is the calc size basis and the second is the calculation oh I need a basis and then a calculation if a calc sum is given it must resolve to a length if only one is given and it's a CK sum then the provided argument this is where I'm waiting for someone to write this for MDM so we can actually understand what's happening if only one argument is given and it's a cal sum then the provided argument is the Cal size calculation and calc size basis defaults to any otherwise the provided argument is the calc size basis and the calze calculation defaults to size I don't know I'm going to wait a little bit to dive into this a bit more um but it even talks about why they didn't just use Cal and gives examples and everything else um but yeah we will be able to do different stuff here I'm gonna have to play with it I'm not going to dive anymore into it right now uh let me switch this back over to the other window I had open just because I don't want to be in Canary if we don't need to be uh one of the problems with Kel size is it only works if one side of the transition is non-auto I don't think it's possible to transition from Auto to Auto to a comminate dynamically added content that I have no idea I guess it would probably not uh I don't know but like how would it animate to do it for dynamically added content anyway like does the content get added and then it has to animate there but are you hiding that content is like I think that would be kind of complicated and just run into issues so there might be a reason why they don't don't do something like that um is it possible to adopted something if it goes smaller or bigger oh for the font size changing too yeah I don't know okay yeah men saying let's try oh I just closed the window I'm not going to try now but if you want to play around with calze a little bit you guys can go for it uh oh rest am man yeah that might be what you'd want like a single page view transition stuff might be better for what you guys are talking about for animating an individual element if the content of that element is changing that's probably more of a view transition thing yeah the best way to learn CSS I think is once you get past like getting through the fundamentals of it and understanding the basics of it and then just building lots of stuff and then look when you get stuck like why isn't this working how do I do this you look it up might be different but it gives you the knowledge you need to be able to do it uh the more you get stuck and find solutions to things the better you the more you will learn it's always going to be like that um cool so here's the next thing I had planned uh for this which is the HTML tag apparently this Wasing making the rounds and I just missed out on the boat completely uh there are 114 HTML Tags I'm going to try and get through as many of them as I can on my own and then I'm going to come to the chat to to fill in the blanks uh we'll do some of the ones we were just looking at or let's start with uh the HTML tag we have the body tag the head tag sort of working my way from outside to in I wonder if doc type counts doc type no it's not counting that okay uh HTML body okay so in let's go to the Head we have a title we have a meta uh we have link we have a we put that too I'm going to forget some of the stuff that you put in the head for sure so many of them are meta tags though so maybe we're okay um okay let's I guess I'm for sure forgetting some stuff uh I did body so we have our main header footer what else do we have paragraph uh H1 H2 H3 H4 H5 H6 uh we did a span div strong m i i b 91 still left to do this is going to get hard to remember which ones I've put in um okay we have style tags because those go in the head we have I'm trying to think of more stuff that goes in the head before I keep going uh script okay that's my content uh we just did inputs a whole bunch of them te when input we have a text area we have a select we have the option we have a button uh all the form stuff is coming through now select text area input I'm probably forgetting one of those now uh oh okay um content once was go back to there we had main header footer we have aside we have sections aside section oh my God I'm terrible at this aside section oh we have date time no isn't it date time is it just date or is that no it's not an input type isn't it oh no uh time ah okay time has the date time attribute on it if I'm remembering correctly uh strong m i did span does this count blink no Center no okay not counting the deprecated ones uh Marquee just for fun just in case um so it's not taking them if they're deprecated which is good oh my goodness um s is one for strike through okay I did my aside I did the aside my section there must be more oh nav oh uh UL o Li I as we did already uh DL DT table uh oh I have to remember the table ones table row table data tabular data uh T head T foot uh I'm probably forgetting some of the stuff you can do in a table because I don't use them often enough table table Road the row the cell the head the foot I don't remember any others I'm at 45 how many are left 69 um H how much longer do I go before I look at the chat I can see it moving out of the corner of my eye and I don't want to look at it yet I'm sure people are yelling at me uh oh we have buttons did I not oh I did button already darn it uh does SVG count oh SVG counts good does path count then no okay the SV the stuff that goes in an SVG doesn't count that's good cuz I would forget a bunch then I feel like I'm forgetting so many of the semantic ones though which is kind of embarrassing oh uh is H Group H group yes uh H group is there so that's good H group is if you it it doesn't really do anything yet but if you need to like group heading stuff um it's good um what else do I have have wow this is harder than I thought it would be I thought I'd get like at least 70 of them pretty quickly and then the last Bunch would be really hard to do I'm going to try and get to 50 before I look at the chat spand div strong M IB I did my paragraphs I did my list items I did links yeah my a is there I'm so embarrassed right now is there things I put I was trying to think of more inputs but all the ones I'm thinking of are just like input type whatever Nava DT oh uh di oh no dialogue is the only one I can think of there actually dialogue I was hoping that would unlock some uh dialogue is good what's the other one that's like dialogue what's not like a dialogue we have the summary details that's it details that's what I was thinking of dialogue details details and summary I'm stuck again I said I'd want to get to 50 I think I should be able to get more but I'm going to look at the chat oh yeah okay I saw video so we have picture we have video uh audio that's a few extras Mark I definitely wouldn't have remembered mark thank you for that HR site oh block quote of course uh oh with that too figure fig caption is there another thing no I think it's say figure and fig caption right did I not do section I did section okay good oh c code pre that was kind of silly I forgot those I use them all the time I forgot form I was putting in all the form things and I forgot to put form um I forgot image as well oh my goodness I just SP picture and I never put image VR text area I think I got text area right yeah I got text area I could make this a bit bigger for everybody I should have zoomed in earlier I'm sorry br oh sub and sub are good sub SU uh T there we go t- body what's the code snippet one copy logo called I'm not sure oh canvas yeah thank you Mark can canvas div I'm sure I did div already right yeah okay good iframe is definitely one I forgot Legend as well uh and oh legend legend uh Le Legend means I also forgot field Set uh cuz those go together oh there's no script ah nice that one I definitely would have forgot thanks be1 uh Source set isn't that's an attribute not oh the source is though yeah source goes for the source Set uh abbr is a good one for abbreviation I like that it's actually an abbreviation kbd I never would have remembered either uh thank you for that one style I did oh embed I did the data list already but I didn't do an embed LeBron James I feel like my kids are watching script I definitely have oh I forgot the DD yes ulol L I got pre I have span oh I didn't do label either thank you uh M I did with the strong right I think I got M yeah canvas I got it oh the Dell yes you think I would have got Dell with the S because they're sort of similarish time I got oh input and uh I did did I I did input for sure output I don't use it I did once on a live stream though use output I think that was only on Twitch though I tried the doc type it didn't take it oh is it because I did it like that though let's destroy doc type like this no okay uh oh meter and progress there we go meta I got oh you uh I didn't do you I got the other ones from those old school ones I knew I was missing one I got the DT and the DL already oh the base thank you I think I added block quote yeah we got block quote a while ago did I not put sight I thought I did site but I might not have I did okay marker I got section Marquee wasn't accepted I think I did the Su and the sub yeah did I not do link no I already got it thanks Thomas though uh oh in I did the Dell and I didn't do the ends oh article oh my goodness how did I forget article when I I knew I I said it I'm forgetting some of the semantic ones path doesn't work I think because it's not an HTML uh element it's an SVG element if frame and no script I've both done call group is that from tables yep uh frame set and frame as well frame set no uh frame though no okay it's not going that old school um th I already did I think right I didn't do th I thought I did th already I added form recently paragraphs I have I think I did title yes I did yeah 86 to get to article is kind of embarrassing map is one I never would have thought of wow there's how many more still 25 still oh I didn't do search either yeah uh T body I think I did yeah HR I got text area I got B MTR TR BR I have BR strike I did because that's the S right I don't think there's a strike yeah option group up opt group I didn't do s I didn't do script I have now thank you for the option group O template uh yeah link I definitely have data list I have oh uh did I do small oh look at that I didn't do small summary I have because I did yeah I did detail summary at the same time as uh uh dialogue there's 114 I think it was I should have put the this in the chat if anybody wants to try it on their own another time figurine field set I've got object nice no script we have radio is an attribute on an input so I think I did both code and pre yeah we've done those ones section I have strong I have I have all the headings I have kbd only because somebody recommended it call I did not have thank you bar at that picture I got text area we have there's a call group too oh I already had call group I didn't have call oh the call group's there yet oh Ruby I should have thought of the KB DMS res didn't think of the Ruby Ed I Got a side I have picture I oh uh slot slot works did I not do Canvas I did it okay good menu I should have thought of menu is very underused oh WB is a good one too I'm at scroll up or down Mark I have BR Armen BR meter I have Center doesn't work it's deprecated so they don't have any of the old ones doc type they don't take it is math a comment I didn't even know math was an element I don't think comments count because I'm not putting in like it's not really an element it's a comment right progress I have all I have no frames what's a track there's a few elements here that I definitely have never used acronym we have abbr for abbreviation is there an acronym one menu tag is a lot like the a nav but it's for a menu um you probably want to use a nav if it's something that's going to go in it um I'm trying to think of an example of a menu that would actually be a menu instead of just being a nav uh there definitely are examples of them but they're not super common like a menu that would you select stuff from um oh did I I don't think I did address yet nice audio I definitely did no script we have um yeah like a menu would take a list I think a menu is weird though because it takes a list the same way a nav would but I don't think it actually change like has any or you do a a menus instead of an o I think I don't use it often um menu HTML so I think you do it yeah so you have your menu and then you just put the list items inside of it um it just it gets treated like an unordered list specification as a semantic alternative to a UL but is treated by browsers and exposed to the accessibility to read no different than e so it's basically just eul um template I think I did yeah we don't have an email do we okay good BDO I just put in or BDI I mean is B BDO there we go okay kbd I have button I have site I have did I not put caption I didn't oh uh what about uh I'm forgetting something else I think that goes with your images you do yeah it it it's a UL for interactive stuff the only problem is it's not used like it doesn't actually provide much value to it being used I've already done insert I've already done div don't worry track I already have selected do you think it do like new stuff select menu probably not right no site I have t foot I think I did yeah Legend I defin RP hm what's RP RT I don't even know what those are th I have call I have output I have oh did not know definition I didn't there's a few of these where it's like I should have thought of that like when I did abbr I probably should have thought of dfn foram time I have HR I think I did yeah would I I definitely had the main an option group I have oh base font no okay it's not a thing anymore Center 2 is deprecated how many are we missing four oh yeah 100 there's 114 in total area and map I already had map but I didn't have area thank you Styles we've done IB I've done I think I did the meter yeah RTC no Q oh I didn't do Q quote I did block quote but I didn't do the Q thank you for that I did Source I think yeah I frame I did yeah text area I pretty sure I did Pam nope doesn't like Pam object I already did if frame I did Langs an attribute data L uh oh I was thinking DL but we're missing one oh my goodness I think I did yeah we've done map I can't believe we're only missing one I'm just going to anything somebody says in the chat at this point I wish yeah I don't I don't I could zoom out but like I'm I'm missing one so it's going to be obscure BDI I've done key genen no track I did I think yeah call and call group I just yeah I've done both of those ATR doesn't like it no frames no use no progress I think I got it yeah I did samp we already did dfn I did it recently pre I've already done base we've done I I've done ins I've done whoops don't want to save the page object we've already got it the doc type it won't take dock type oh okay if if it worked there because I was putting this in the front before I would have lost my mind H why is like five people said H7 so far Ruby I've done s I've done fig caption nav I've done fig I think I'm just writing them in now at this point SP probably did we forget something really dumb base I have big caption we're going to be one short we're not going to get there u i did code I definitely did I could scroll slowly we'll go to the top and I'll go slowly down and if anybody thinks of something Marquee I tried it doesn't work is BG sound an element time I've definitely done symbol I don't think will work o is O an element no okay field said I did oh I saw video there I think I did video though right I did audio did I not do video I'd be very mad at myself if I didn't do video okay good I didn't remember having written it picture I've definitely done yeah picture video audio we did at the same time I don't have strong I did with the [Music] BM few yeah BG sound is definitely not an element I did do map yeah command no copy no th I think I did yeah data list I did recently map I've done search I've done meter I've done yeah tfot I've definitely done did I forget button I'm pretty sure I did button right yeah okay if it's one of those really easy ones I'm going to lose my mind that might be it no okay a dirt uh I'm sure I did link yeah I already did link I think it was really early on data it was data we got it thank you everybody we made it that was that was painful a little bit we got all of them though I was hoping for like some confetti or something one one block missing from the dustar Lego set yeah exactly oh there we go I bet you some people said Data before and I saw something like date or something and I didn't get it cool all right it's our we've been at this for a while thank you all for your help that was that was that was fun um cool I'm going to go back to this for a second um and I'm just going to pull up my notion document I'm going to look at something um and do I want to do that thanks Ryan did I miss someone else's Super Chat because I just saw something saying that's the third Super on live stream so if I did miss yours while I was doing other stuff I do apologize um cool now explain them all I could explain a lot of them there's definitely some that I didn't know in there um let's look really quickly I'm not going to go in and I know I'm not on screen I remembered um this one okay uh I'm not going to go over obvious ones like the ones at the beginning that I did uh let's stop so I and B I don't use very often anymore but there are times um they actually do have semantic meaning now they took the semantic meaning away from them when they introduced strong in m and then they brought it back so B is bring attention to and I forget what I is for though what does I stand for now MDM I HTML uh idiomatic text yeah I wouldn't remember that uh I don't did they strip the semantics from it and I'm just misremembering I think they did though right um and then they added the semantics sort of back to it they don't act they have semantic meaning but they don't do they're not like strong which strong and M will like change how these actually mean more whereas those it's if you need bold text without it you just want it bold without it actually having more importance use B um option button aside so time is one that people don't use enough it's a little bit weird though because if you want to use it properly you have to give it the datetime attribute and for that you need your time but you're probably getting your date your times from JavaScript anyway so it's easy enough to use that and then use the date time because that takes the the iso version version of the the datetime attribute takes the iso version of it um but I mean this could even be good for is good for SEO if your articles are new um but it's good like if you have a published date on a blog post use the time element it makes sense s is for strike through text so when you cross your text out um table we're not going to get into so yeah H group I sort of mentioned it but if you have like a heading and paragraph that's more like a subheading technically it should go in with the age you do an age group you put your heading and then you put your paragraph or your paragraph and then your heading um and it will treat the paragraph like a subtitle it just doesn't work correctly yet or it doesn't really do anything yet but you might as well use it dialogues are cool um detail summary work well together well they work well together they go together picture video audio Mark Mark is if you want highlight text right if I'm remembering that correctly so yeah I don't know what the semantic meaning behind Mark is like if it actually changes anything semantically or not or if it's just used for visually highlighting text RP and RT I have no idea what they are we'll get to that in a second maybe someone in the chat can tell us math I'm guessing I don't use it but like if you ever see like actual math equations where you need like no one it it's like the the crazy math equations that I don't understand when I look at it I'm guessing you would put that inside a math element but I don't know for sure um site block quote sort of go together fig fig caption code pre form is um sub and sub like your your text that's higher and lower what it's it sub uh can't remember the right word for it but it makes the little text up and the sub makes the little number that goes down Legend is used with field set so you have a field set that has like all your radio buttons and then the legend would be like the name of what all those radio buttons are for type of thing abbr is abbreviation and in the abbr there's an attribute that I forget what it is but you'd use that to give the long form of it and then actually let's look at that one because that one's a cool one um pen. new just because um why am I so zoomed in there we go uh if we do an abbr title there we go uh so let's just say cascading cascading style sheets and then here you put CSS I'm sure people have seen this and not realized it it gives you like the dotted underline you can see there and then if I hover on top it gives me the oh you can't see the tool tip in my recording though I see a tool tip popping up uh let's change to the other face this one I think now you'll see it there we go you can see the my face oh you can also see a project I'm working on in the background um let's go back to the that one so yeah abbreviation is kind of cool because it gives that little tool tip automatically oh that's why it was zoomed in this is a code pen um kbd what is kbd I've never us I've seen it what's it used for keyboard input element that's why I've seen it I have used it uh yeah that makes more sense when you want to give the fake keyboard look uh to show its keyboard presses people should be doing haven't used that I don't use it enough obviously um any other weird ones here meter and progress people probably don't use a lot but it's not used too often Legend has a bug with display Flex yes it does I don't remember exactly what it is so the math is for the math ml stuff yeah which is the weird things right RT is for Ruby annotations which is what latex that's the one I was thinking of thank you RT for Ruby annotations so yeah I don't get into that we have the Ruby and then I guess it's the RT and there's probably another one there too um yeah don't avoid don't avoid tables if you're us putting together something that should be a table but um do avoid tables for things for layout um subscript and super script thank you so much John that was really frustrating um Christian K hi uh so yeah Ruby is for we had the RT there to the one with Ruby right um we saw menu before it's like an O but for interactive stuff the white break white space break when you know you're telling words where they can break if there's not enough room so if you have a long word you can put that in the middle of it and then if the space gets smaller it will wrap the text wherever you've put that I think I'm getting that one right um BDI and BDO I haven't used I don't think bidirectional oh and that was the other one too was the directional one bir directional isolate element bidirectional algorithm to treat text it contains an isolation from its surrounding text it's useful when a website dynamically insert some text and doesn't know the directionality of the text being inserted so yeah it's useful if you're switching between right and left right to left and left to write languages but they have to be mixed together by the looks of it which is why I haven't used it because I don't do very much that involves mixing them um there we go yeah tables can still be useful if you're doing email that is correct luckily I don't have to do emails am I going to do more JavaScript on the channel I don't have any plans to um except for bringing guests in or I mean if it's a random project I'm working on where it makes sense then I will and what do I think about HTM X I haven't used it enough to have a strong opinion about it but I don't there's stuff about it that I think is cool and then there's parts of it that I'm not I don't know it sort of bugs me a little bit sort of having everything there I guess if you know what I mean um but yeah I think it's a cool idea and something I probably should play with more before I form a strong opinion about it Mark thanks for hanging out it was yeah commun yes I plan on doing more Community challenges I just have to create them um one of these days I will maybe once I'm back I'm leaving on Saturday for a little well I'm going to be speaking at that conference and we're doing a little family vacation Leo Zeno bring in more scss videos instead of JavaScript that could potentially happen Community challenges and a pint night we could do those together as one thing uh is it Caleb uh Happy Birthday 10 May htx is using JavaScript underneath it yeah um all right so I think I was thinking doing another challenge before I left but it's already 4:00 where I live uh and I'm don't know if I'm going to have time to do another one um Remco if you're doing that where you have a lot of variables in a separate file uh and then import them I would I think the best way to do it still is to use something like post CSS that will do it uh as a pre-processor CR don't forget to submit my challenge okay I feel like I need to fix it up a little bit though I'll save I'm going to fix it a little bit I think before I hit submit on it um okay I guess okay two questions I'll I'll let you can I do a poll in here Q&A start oh I can do a Q&A in here too uh I'm going to start a poll in a second uh did I change my opinion about Mason regrid after the cssa talk um my main opinion is what Rachel Andrew said in that we should solve the problem of The Ordering of stuff and how that's going to get handled before we Implement masonry I think that makes a lot of sense and then worry about masonry um my main opinion is that I don't want to lose a lot of the functionality that the Safari team keeps talking about if they can Implement that in like a grid only way and it's not a pain for them to like like if a good feature comes to grid and then they also want that is it going to slow things down if they have to implement it twice um is always my main worry um you don't like my my arrow I I copied a code we could uh um what's an HTML entity thing that we could put there and then I never pasted it so I probably lost that from my clipboard by now um but I definitely agree that I have to do that but I'm going to start a little poll here um can I change the answers let's find out I've never done a poll in one of these uh fix the challenge oh that one might be is that really can I really do that I like the ones they make easier uh that's where's my button whoop why it copy that there we go so when they do these that're like right arrow so I guess that's left Arrow like I love when they make them easier like that oops we need the r there now it's not centered okay uh fix the challenge or talk about Flex box and grid so uh I'm going to say this is fix the ch chenge and then this one is flex box there uh okay so I'm going to put start a poll and you guys can vote because I'm only going to do about another 30 minutes um so fixing the challenge would involve like centering that uh doing a light dark mode for it because right now the light Mode's sort of broken a little bit um and maybe just mucking around and improving upon what we have here I want to add a better focus State we could do some better form validation not form validation but like hinting um andu stuff or I can do some flexbox and grid talk and go on a little mini rant at the same time so I'll let you guys decide which one you want I think I started the poll there we go um and I'll wait a couple of minutes and while that's coming in and I'm waiting for results I will take questions from people just order columns declaration for masonry we would just have it nothing to interfere with yeah should just order columns declaration foration so the the main thing there is like because the order of things to be able to fit things stuff goes out of order but the advantage too is if they do come in with those new properties they're talking about it would also mean if you rearrange stuff with either Flex box or grid we'd also be able to get like a visual tab order on things so if you mucked with order you could still get the visual tab order to actually win um or work instead see yeah only if the fix the challenge wins will they fix that off-centered button uh Ryan you've been looking at collaborating with a YouTuber is there any aspect of your channel that you could use help with even if it's in the background there are potentially depends what type of work you're looking at collaborating with uh so email me message me on on Facebook uh I do answer messenger so you can message me there um or email me hi Kevin powell. either one of those um but my email is a bit of a a mess so if you if I'm I do get I do get Messenger even though I'm never on Facebook so that might be the easier way since you actually have me on Facebook most people can't get me through Facebook so if you do need to if anybody does need to contact me for something else you can use uh my email that I just said which I can put right here if but uh here we go that's my the best way to reach me for email um you have a big problem I have a nav in a div and should make it sticky when you scroll through the page but the nav does not leave the parent div but the div should so yeah if something's positioned sticky it will only stay within its parent it won't stick like if the parent goes off screen it's going with the parent so if you want the element to always I just the only solution there is your nav the div is the thing that's positioned sticky instead of the nav or you move the nav outside of the div any book recommendations related to CSS or HTML uh there's a good one that I can't think of the name of right now um let me see if I can find it one second we'll go we'll hide my screen for a second uh is it this one sorry one second yeah it is this one um I haven't read it but I know both authors know the topic really well I haven't read the fifth edition I've gone through other ones of it uh here we go the definitive guide um Eric Meer I know knows CSS uh and Estelle does as well Estelle actually does a lot of the um MDM if you if you read MDM stuff on CSS you're probably written reading a lot of things that Estelle has written she does a lot with them um yeah Lori yeah I could I should do some stuff on like the basic SAS things I probably have a little bit I probably could do like more individualized videos on things like that um it looks like fix the challenge is barely winning but we're probably going to go with that is there a way to detect when element has wrapped using CSS no there isn't is there sort of it depends okay before I fix the challenge um we're going to look at this because you can it depends is this is a very much uh it depends one uh because I've seen let's do and it depends on browser support here um but let's say we do uh I'm just going to do a section with two divs in it div time two no let's do a div in an image so we'll use the assets panel here uh photos I should I use this one uh where's my assets your files this this is coming up in a video as image we'll use this guy he's pretty great uh okay uh so image we'll just say Max width width 100% uh and this div let's just put a bit of text in here hello world and a paragraph with some laurum ipsum uh and then my entire section is going to get a display of flex we'll put a gap of two REM on there and let's say that the section children are a no uh no I don't want to do a flex one because that's what okay uh I'm just trying to think section i' I've never I've done it like once or twice but just testing so I have to remember how this is going to work uh so the section div so I only have one div so I can just do this this is not production ready code uh let's say this has a flex basis of 50% but we're going to give it a minwidth of 500 pixels uh is that just because we're Flex boxing so my image is crazy big or did I make a mistake somewhere um and then anyway it doesn't matter because this is also going to get a flex wrap on it of wrap so I think okay image we'll just do this here uh image width will be let's try this and see what happens uh 30 I can give it a hard value yeah we'll do that so we have this right where I have like this and then it wraps down at a smaller size um and then the fun if I go on that is this going to work let's just try section no no I want to keep it like that actually that's fine and so this is where you can actually on this div I'm going to say this is no on my image we're going to give it a flex grow of one uh so it's going to grow and then it's going to go down so so what I can actually do here is on the section we're going to say that we have this is a container type in inline size this isn't going to work that's on there H how does this work again okay so it's the image needs a div okay I'm going to have uh mucking this up but whatever we'll do it quickly I'm going to have to change the names of some of my stuff the image goes inside the div uh and that means my div let's call this one class equals content and this one is class equals image image is okay this one is my content okay there we go plus that naming just makes more sense anyway right uh okay and then this isn't my image this is my do image so there we go same same behavior we had before but my image which is this is going to get a container type of inline size uh so again browser support this is going to use a container query so that's the only caveat here where let's just say my image I'm going to give it a background color now because that's the easiest way to see if it's working and it's a PNG so I can change the background color and then I can say at container Min width 100 VW uh or yeah I think that'll work not like that though width is uh or we'll do like 80 if the width is greater than 80 VW my image gets a background that is blue and then it will uh know it now knows when it wraps uh so it's an interesting way to use viewport units with a container query is basically what that comes down to uh so yeah this was I got that from Andy Bell on something he was doing that was in a much more practical use case than this example that I'm doing here uh but it just it changed the size of something else or I don't remember exactly what the context of his example was but when it wraps because it gets wider and takes up the available space because of the flex grow you can do that if it's not going to change in the way that I'm doing now then you can't really detect when things wrap but yeah I thought that was kind of cool that you could do that Burak I'm glad the subtitles are working that is pretty neat um how do you do the text title of song playlist and Spotify when the viewport has small width smaller text yeah so that's using clamp for sure you just it we could do that now um section whatever it doesn't really matter font size clamp one R uh I don't know five ort width plus5 REM and then two REM as an a bit of an exaggerated Val version but the text will get smaller and bigger um three two you you always have to magic number that middle value which is always like the thing that sucks but the text gets smaller or bigger my widths here are mucking stuff up oops not that one this one is sort of breaking things um yeah text gets bigger and smaller depending on it that's the smallest he can get that's the biggest he can get and that's the growth factor in the middle Jonathan Bel is CSS only overflow menu what do you mean uh the Discord is here htps uh . coisc did that oh yeah it worked it also highlighted my name for some reason uh okay so we're going to go fix the challenge and then we'll call it a day um so we want to Center that centering stuff in buttons like this is always a pain in the butt um because it relies on the fonts and the way fonts are but we'll try a few different tricks on how I would do it um let's find my button there we go uh so the first thing usually that helps if you just have something something like this is a line height of one uh or even zero so that did actually change things it's very subtle you can see a small change there uh if you go to zero if you don't have any text that can sometimes help too but um just a one helps set the stage a little bit better you can also do a display flex and Aline uh items Center it might not work um here because as you can see it didn't uh did it Center it let's change the font size on there too font size is going to be like a 1.5 R just to make it a bit bigger that didn't render very well um so that's pushing it down more so let's just inspect on there because we might see what's actually causing the issue by highlighting it not at all uh is that just cuz I don't have enough room uh so actually okay there's the button oh it's not letting me H this is where sometimes how did did I do this with padding at all I didn't set any padding on it uh because often just doing the display flex and the Align items is enough to sort of uh just bring it up um Place items it won't make a difference here I just wanted to vertically and horizontally Center it um but yeah that's throwing it off a little bit it's CU it's a font so fonts are always a bit funky often with buttons let's see if there's anything in the chat but dubia I'd say the opposite use grid for most things and then Flex box if grid doesn't do what you want it to yeah HT it's because it's part of a font so it's like these little HTML entities or whatever they're called um they're always a little bit funky um and just sometimes take some playing around with uh with anything it's font related that's small like this it's always going to be a little bit like mucked up compared to if it's just an SVG if you have an SVG it's going to be a lot EAS easier to center it um my first padding this might actually change the shape of my button though but uh let's just try 10 pixels I'm just curious yeah I would probably just like magic number if I really was doing this um it sucks you leave a little comment in the code on why that padding is there you use magic your number way that where you need it to go um I don't really like that but sometimes that's what you need to do um on that I'm also since we said we're going to improve it let's do uh hover and at Focus visible if you don't know Focus visible just use Focus visible instead of focus uh it's better it's the better version it's actually the default browser uh what what the browsers use by default now um so I guess the background could be changed then to my VAR color primary 2 and the color can change over to my VAR color neutral one and the reason I want to do that there we go maybe the primary one would be better just because it's going to be a little nicer no the two there we go so we do something like that maybe a different color on that would actually be better but it's just oh look at that that's so ugly that Focus ring wow what if I did an outline off set of like three pixels or something too wow that's so weird I guess it's just the padding I threw on there is really mucking up that outline uh putting a span on it wouldn't actually change it if you take um let's just put something at the top here um so this is in my HTML right at the top before my section let's just put in uh I don't know I'll do a button for the fun of it hello I wouldn't suggest doing this um but if you do button height of 50 pixels or something ridiculous uh let's do bigger 150 um and then I do or it's already centered look at that uh let's do this as a uh div class equals example uh and that's a Clos div do example background is blue so my hello is stuck to the top uh you can do a display flex and align content Center and it will align the content align items Center um so even though I don't have a span on that it's still going to center it it takes whatever the content is so no need to wrap it in a span to be able to do that thanks for hanging out Peter a font we bold we could uh button there we go is it going to change it oh it didn't even change it 700 oh that's as bold as we're getting apparently a custom font where the letters are on like they're off shifted a little bit I don't think I've ever seen specific use cases unless there's like weird zooming in and out um but custom fonts unless it's a well-crafted one on the web they can sometimes be kind of weird and not work great um so yeah another thing I wanted to do was actually make this work at light modes which I don't think is going to take much but we sort of wanted so this is my root so we're just going to do an at media media for color scheme of dark and let's redefine our colors uh actually I'm going to stick with these colors here and I'm just going to add one more which is color neut neutral we'll just call it nine for my dark of uh black I don't even know if we're going to need a black for anything but what I sort of have started doing because I I do this when I'm using bigger projects or I'm using SAS or something where I have like two levels of variables because then what I'll do I don't think this is the best idea actually cu the only thing that really needs to change it's not the yeah it's not the best example but what I tend to do is I'll do like then a color text uh we'll get one of like whatever I need need and then I just all I'm doing is redefining like I have all of sort of the color palette in that stays in the same place all the time and then I'm just redefining these within my media query [Music] um the problem here is that doesn't really need to happen I wanted to get a little bit more creative with that um but where did I declare my font oh I never declared a color that would be why so I uh I probably wouldn't change it on the body because if I had other text outside here I would want it to change so that would just be here uh color bar color neutral one I mean that fixed my my color scheme and I don't even need to do anything here which is kind of more boring so if anybody wants to see something we can do with that or even better now in a way is the new way of doing it uh which has worse browser support we're going to do it for the title just for fun that was my I don't remember we called it uh section title right so you can do this now section title uh this is not well supported but I think Chrome does so I can say the color is light dark and I can say that it's going to be green at light screens and red in dark mode and then if I change my color scheme to light it's going to go over to Green and dark and so you just have like a single declaration here uh so that's kind of neat too because here you do like your bar whatever you can just set it as variables instead um but yeah I'm looking forward to the browser support increasing on that and then the other thing you would be able to do is here you could have your uh light dark uh sorry is it light dark I just did it it is okay um I could do my you know text is light dark and then just put the two values I want here and then here I would just do my color is my VAR text and then it's going to grab whatever I have there so you don't have to keep writing them all out and stuff like that yeah it'll be cool I'm looking forward to that being a thing another way to over engineer this would be the text rep balance yeah you can definitely use a text WP balance uh I don't think it would actually change anything on this one though because of where the brakes are happening and stuff um but I think text balance is a nice sort of default to have and text pretty as well please fix the images so they are aligned in the center of the dark blue oh they're a little bit off eh we magic numbered that though avatars um that was the problem with this approach oh that looks pretty good I'd make them have the one problem with dark modes is you light drop Shadows look terrible so if you have drop Shadows they're Never As Good have you ever done a challenge with tunde Alo I haven't I don't know if I said his name right either but I definitely haven't yeah letting trim was delayed because of a lot of other stuff they were talking about and they're not calling it leting trim anymore they're now calling it something else um but it behaves the same way line height same as height of button in pixels uh I don't think it I don't know what the height of my button is and I'm not going to put a height on it because that would just be really hard to get it to be there getting yeah the line height trick haven't used in years and I'd rather not the height of 90 isn't I I needed the height of 90 instead of 80 here oh yeah it was centered and then we threw it off okay would this no I was trying to think if I would fix something but no it wouldn't if I could do it less Magic numbery the button's not 80 in height I don't that's my avatars are with height of 80 for these types of things I don't mind setting a height but for the button I don't because I need it to always fit like right now if I went on my form and I don't know why let's just do font size font size of two REM because they change the design my buttons always going to match it with how I set that up so I don't like having a height set on that cuz I just want to to follow the size of the element that it's inside of and if I set a height it would just be again anytime I can avoid like here for the positioning of these I magic numbered it and actually because we don't need to magic number that anymore because we fixed it anyway right so let's get rid of that magic numbering avatars um I went this approach because of the wrapping but since we're not wrapping stuff anymore we can take this off we can actually put this back to 80 I can make this 100% no no we keep that at 80 actually ideally we I'd do that with a custom property because this is still kind of oh no I need the height 90 I need the height here to be larger than that one um because of the Overflow but then we can use my positioning and I broke everything because I need a closing comment there we go um except I still need you and I still need the height there we go and now it's not magic numbered uh height oh there we go and the Align self end there we go uh why is it only align items start that's the one I wanted and now that's better and now it's not magic numbered uh it yeah I guess it's not magic numbered I was saying it looks a little bit off but it should be perfect a transition and a cursor on the button would be nice we can do that know what we could do to make we'll do a fancy transition uh there's my button so uh let's over engineer this one background well actually I I earlier on I said don't use the shorthand background image we're going to background image this uh let's say that it's linear gradient gradient the linear gradient is going to be VAR color neutral one VAR color primary one and the VAR color primary 2 and we have a problem oh no it's working okay perfect it's weird the coloring does not like the coloring there syntax highlighting um and then we're going to do this at 90° so it's left to right and then this is going to go up to 50% uh sorry no uh yeah is it easier to do that probably we'll do that at 50% but then we're going to change the background size to 200% so we get a white background come in um and then when we hover and focus we won't change the background color we're going to change the uh background Position will change to right um and we can transition that transition background position 500 uh 250 milliseconds My Coloring is going to have to be fixed a little bit but then we get the little uh let's just make that 300 if that goes to 50 I would have thought it would have been pushed farther whatever we'll go with that instead or I could just change and make that smaller but uh there we go we get a little slide in instead and then we can also just do the uh pointer is cursor no the cursor is pointer I always mix those up here we go so that's a if we could also register custom properties for the colors and then you can just actually animate the colors instead of having to move the gradient along but it's a nice little trick there to get that type of behavior textbox trim yes that's the one Josh yeah if you do want to trans transition gradients um you just have to do it with registered custom properties let's see if I remember how to do it uh which again uh actually browser it just shipped in Firefox right so all of them support it now at property uh we're going to call it we'll do color uh test one and so the syntax is color inherits will be true and initial value will be red um and by doing it if you do this this is it's sort of like typescript a little bit um where you're registering your custom property so you're telling it what it is there's a whole bunch of different you can have um string here I think there's numbers I think it's number if you need it as a percent it's a percent number or number percent I forget you'd have to look at the full list but I do know color is one of them and the advantage is as soon as you do this let's just um I'm trying to think of what we could do let's just do it on our body body background color is uh my we probably don't want red then let's do steel blue steel blue so it doesn't hurt our eyes and then we can do our VAR color color test and it's not working if somebody could tell me why uh test one I don't know let's just do test there we go so that's working uh so the advantage now is I can actually say body and then I wouldn't do it for hover necessarily but on my hover of my body I can actually change what that is so I can say my color uh test is now going to be uh purple and then I can transition my color whoops transition color test 500 milliseconds I might need to say that's variable oh no you don't there we go so by registering a custom property you can then transition the custom property so the advantage with that is if I had this as a gradient so instead of a background color we did that as a background image and I say that's a linear gradient uh we have the color test comma black let's say and now it will transition that color it's not transitioning the gradient itself it's transitioning the value of the gradient uh and you can do both of them or whatever you want but that opens up that door and yeah Firefox just added support for custom properties so it's uh for registered properties um and I've heard that debugging can also be easier if you do it I think it was anator maybe who posted on socials um that she likes registering them because it's easier to debug if you're using it with JavaScript and stuff or something something like that anyway um but yeah kind of a neat uh thing that you can do and I the other thing that's cool with this is because I'm changing the value of the custom property uh technically like I could do body hover and change a custom property that I'm using in other places um so it can have pretty big effects and and stuff that you're doing too but the the first use case people always have it for is just doing gradients you can definitely do that too a pseudo element that has the opacity zero and then you change the opacity that would definitely work and then the advantage of doing it with a pseudo element instead is it won't have to slide across necessarily um you can add a gradient in or change a gradient or do other stuff yeah so I think it's time for me to go because I've been at it for a while now I want to say thank you for everyone who's been hanging out with me uh this whole time I know every time I do these people say I should do more of them so I'll definitely think about doing more uh I don't know when I will but uh eventually I'll do another one of these um and I'm just looking really fast to see if there's any other questions I guess we'll take this off is there any other impr if anybody thinks of a quick Improvement I can make to here I'll I'll throw it in there before I submit the challenge um to finish things off or if there's any last minute questions that just pop up I'm good at saying I'm going to leave and then stay on for an hour but I do got to get going um it's to start making some supper thanks for hanging out Chris I hope you enjoyed it it took me I was hoping to get through two challenges um but the the HTML game took longer than I was planning I said I was going yeah I don't think anything last okay everyone's saying bye anyway so thanks for hanging out Ryan nice having you here do more stuff on I code this yeah I'm definitely going to do it once in a while if anybody does want There's the link to it if you want to try this challenge or any of the other ones um they have tons of stuff it's free to sign up they have more stuff if you pay um but you definitely don't have to and if you're looking for more challenges and you've done a whole bunch of front end Mentor stuff or whatever uh I would definitely recommend checking out I code this as well move the arrow pixel up one pixel I I'll do it once I end the stream all right thank you everybody uh please do more I'm guessing you mean live streams but uh yeah we'll we'll figure out something I want to do live streams as some sort of semi-regular content but at one point I was doing them weekly on Twitch and it just took so much of my time so maybe one day those will come back too I'm working on a side project the problem is working on it at like random times and with like 15 minute little boats whenever I have time but that could be something I could do on a stream too one day um but yeah let's I'm trying to see if I have a thank you screen but I don't think I have one before I go um but the problem is there's a delay and if I hit end end I think it ends it for everybody even though you haven't caught up with where I am yet La I hope I've I'm guessing it's La even though it looks like Allan uh but you're in France so I I'm glad that I've helped you uh with your with what you've been doing how could I have done it how fast could I have done it without interacting with the chat probably not that much faster faster but not like insanely much um it always slows me down when I'm talking things out loud too but awesome so yeah I'm going to get going I guess I can't find any thank you screens that I had I have my countdown which I don't think is the right one um so I'm just going to end the Stream uh or you know what I could do I could just no I don't want to do that I don't know what half of these scenes are I have an OBS anymore oh maybe it's done in twitch actually I have my twitch ones yeah there we go I did have a thank you one after all so thank you all for watching I appreciate it um if last thing actually I'll put it in the chat while we're on this screen but if you do want anything else uh there's the Discord where I hang out uh not there as much lately cuz I'm busy working on a course but uh you can definitely um get help there in general and if I am around I'm always diving in the help channels to see if I can help as well so thank you everybody and I'll see you eventually next time uh whatever it is and of course until next time don't forget to make your corner of the internet just a little bit more awesome e e e e e e e e e e e e e e e e e e e e e e e e for