 like a lot of people I've been playing around with chat gpt and having a lot of fun with it and one thing I've realized is it can write code and I was kind of curious about the type of css that it would write and I've decided to see if we can get it to write some decent css for us and then dive in and sort of break down maybe what it's doing right what it's getting wrong uh we'll give it a few chances because one thing I've noticed is that when it does do things it takes very different approaches if you give it a chance to sort of try a second time or a third time so we'll sort of dive into the type of css that chat gpt is actually writing and see how it does so let's start off by coming here and say can you write the html for a hero section of a website for me and let's see first what html it outputs here all righty there so there's the html let's copy this code and what I've already done is I've actually we've fired up vs code already I'm ready to go um and I was going to do something where I competed against it so we have AI versus Kevin but I'm not going to do that let's go and this should be on my local host and then saving that we can see what we got here which is this um not a bad start obviously the hero image itself is broken but hey look it actually put alt text which isn't great but we have something it's there I guess I see some good things I see some problems but let's come back to the chat here for a second and see if it can write the css for us so can you can you write the css for that html for me please if they're going to be our masterminds we might as well be a polite to them in the time being so we'll give this a second and I'll see you once it's finished typing out the css all right so it looks like it has finished and it wrote quite a bit I see I saw a bit of a red flag as it was typing out but let's go and paste that in here and let's go ahead save and see what happens I see a problem oh with the image right away um and that that okay so I'm not worried about losing my job just yet but let's let's do one thing here at first let's look at the html that it wrote um and I think what we'll do is let's just see if we can we'll do an on splash it oh we should probably do HTTPS let's give it an image to actually work with we'll say like 400 over 200 um just a placeholder image there we go we got an image in there now perfect and uh I think that image is actually kind of appropriate based on what we're what we got here it's not the most beautiful thing in the world uh what it's generated for us so a few things obviously I asked it to write the css for html so I guess it took it very literally um because it didn't do any body styling or anything so we still have our margin and stuff like that I'm not going to criticize it on that uh one of the problems is it actually did this which I was kind of impressed by the hero text container to sort of we have an image so like we have two columns I've kind of impressed that it figured that out and was able to do that the only problem is it didn't really seem aware that we had two columns then because it's center aligned this over here which looks really ugly and it didn't put a gap or anything I'm right so not the best approach there if we didn't have the image these lines would sort of make sense because we could center the text container within the space um but because we have the image it's kind of weird to bother doing this maybe the align item center because we have a height on there height on there is a little bit problematic let's see if we go into uh our dev tools and turn on responsive mode oh it's not okay so we're not hitting an overflow um because we don't have a ton of text but a fixed height like that's never a good thing so this you know that would be better as like a min height and just we'll do a min height we'll switch this for a second because say I did 300 you can see like this will actually grow and shrink with my my site whereas if we just put a height of 300 on there and it's overflowing it just overflows right so a min height would have been a little bit better and probably some padding on there would have been a bit of an improvement too um so yeah that we can throw a gap on there to add the space in between since you know let's do that gap of one rem um to add the spacing at least it chose accessible colors the contrast is nice and high the font sizes look decent um hero image max width so it made the image responsive we don't you know this probably would have been great but i'm in actually pretty good um that we have that uh it's not actually shrinking and it is causing overflow really early um I guess because it's using flex to make the columns so still some issues um one of those is then this which is completely useless I think um it's just making collapsing margins come into play that we didn't have so this probably could have gone out the window because it's stealing code from other places and seeing what other things do it probably has a lot of that where you have something you want to center stuff inside so that does accomplish this it did switch the flex direction which is cool so the text actually goes in the right order but honestly this is we didn't need that font sizes are in m's very nice because sometimes it does not do that um it usually likes font sizes in pixels so I'm impressed that it used m's even though I really would have preferred if that used rems instead of m's uh for font size and I'm actually curious where it would have picked up using font sizes as m's because again usually it's always pixels I think this is the first time I've seen it uh actually use m for font size you can use m's for font size it's just there's a chance for things to all of a sudden get a little out of control um if there's some weird nesting thing that comes in and you start whatever it doesn't really matter too much but I would suggest rems for your font sizes the margins being in m's isn't a big deal even though I think this one is 100 point less because that's the default value anyway uh this one is reducing it just a little bit uh the button inline block that's fine padding's fine I actually like that it's m's on there and the border radius is in m's too that's this is a pretty well done um we even have the cursor pointer even though it was a link probably doesn't know that so it doesn't have that reference or why it would do any of this the color switch obviously it's not as aware of the colors sorry I want to turn off it's not as aware of the colors so it doesn't really know that that's actually matching the background or maybe it does know that it just doesn't realize that's a bad idea uh so this was like a 2 2 2 it would probably be a little bit better even though or whoops I'm switching the wrong one I wanted to be switching this uh let's say one one one why did I break everything there we go um you know so at least we can see things there this is fine it actually did a hover it would have been nice if this also you know we could even throw this and then is is uh hover and focus but you know at the end for something like this considering so you know now we actually have a focus state on there um it's not perfect by any means it's actually really far off and it makes me not too worried now let's see if we can do a try again before I time out and we'll give it a second chance to see if it can redeem itself a little bit um so I'll see you in a second once the CSS is written for round two and see what happens this time all right so it is done you'll notice it says three and three I ran into a network error on the second one but it looks like it we finished this time and so I think it listened to me a little bit so let's actually just take all of this code and comment it out it's not going to let me do that uh that's fine we'll just delete it we don't need that paste in the new code and let's go look oh my goodness that's not good uh not sure what happened but it broke things uh so hero is display flex once again which is okay here's the problem um it tried to do one of those images that would sort of be interesting um actually let's take width off here and see if I take the width off or it's okay it likes these colors look we have the same site again oh we have a transition now on there though I really wish it would change the font can we get it to change the font can you change the font on this site to something nicer all right there we go it it has given us something to change the font at least so let's plug that in at the top and hit save and it looks a little bit nicer we have something different I'm a little disappointed the colors were the same as last time um I was hoping for something better there I am kind of intrigued by this one though um I love that it did that I think what the idea here um would be okay we have the flex the center the height 500 like this section I think is identical than what we had before the problem is coming up here and I'm just trying to think because it's a flex item you would think you would so let's put in um I'm gonna do like a width of 50 percent just you know let's get something so we at least have the two sides it's like semi responsive and stuff um it gives just one of those types of looks so we'll stick with that at least it's semi working a little bit um it's not responsive while I'm looking at this can you make this responsive I wonder if that will work we'll come back here in a second um let's see what else it did because it looked very similar but if I'm looking at some of the things here once again we could take all of this off and I think you'd have the exact same thing yep nothing even changed this time and that obviously uh so that's identical the width 50 percent here isn't I guess by I guess by having that we have that the padding it added some padding this time interesting font size it listened to me and it went with rems it's also going with short hands for padding and margin and everything which it wasn't doing before so I find that kind of interesting the button looks very similar except now it dropped it it fixed the font size problems and put them to rems but it's put the padding on this back to pixels um but I'm kind of cool that it added this uh which is nice and I realized before now that I see this we have the cursor pointer that it added last time but it didn't do a border of none and that means like if you're doing cursor pointer it means you're putting it on an actual button element as well so you probably would have wanted that in the first place um let's see could it make this responsive oh oh oh it did completely new css okay let's just I like how the font size is being in rammory yeah this is responsive now the okay oh my goodness there's a lot to unpack here so it just made a media query that this that has problems um let's just grab this and it's a max with media query too which confuses me even more but let's let's throw uh we don't need we don't need that okay hit save on there um how is that even gonna work I don't know what the plan of it was um we're just changing the height from what it was to a max of 300 which as we saw before can actually cause overflow um so probably not what you want to do the the the face palm before was this this is like one of those classic like it's not doing anything things people love declaring with 100 percent there's no reason to clear with 100 percent um I know I I manually or did it have the 50 percent here it did so I guess maybe there's a chance you sort of need it but it's within the media query I don't know like this is not that nothing here works basic or is worth anything like the font sizes it's like oh we're going to put font sizes in a media query that makes things responsive right and I mean it is in a sense they're going smaller to bigger so okay maybe that's fine except it's in the max width so we're doing desktop first which whatever you know I would have liked if it had actually made it like stack and actually made something a little better here um so I mean whatever it writes CSS that kind of works but it can't figure out context or do anything and I'm really maybe there's some places uh you know we see other code that it can write can actually be pretty good I'm not too worried about it on the CSS side yet I don't think it can make logic of what the layout it's creating is it's just taking code and sort of throwing it out there um but yeah let me know what you think if you've played around with it if you had better responses than I have leave a comment down below and let me know about it about yet right now um it's basically making ugly walruses that we don't have to worry about so uh yeah and instead of watching me look at really bad AI code if you'd rather look at some amazing creations that I don't even know how people could actually make that just blow the mind away uh there's a video right here where I take a look at some amazing things and with that I'd really like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome