Can ChatGPT write decent CSS?
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2024
- ChatGPT is all the rage these days, and people are even using it to write code for them, so I thought it'd be fun to see if it could write the CSS of a hero section of a website for me.
🔗 Links
✅ Give it a try yourself: chat.openai.com/
⌚ Timestamps
00:00 - Introduction
00:37 - Having it write some HTML
01:32 - The CSS - round 1
07:21 - The CSS - round 2
10:17 - Can it make it responsive?
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I had changed some audio settings for a different project I was working on, and forgot to change them when I recorded this, so sorry that the audio isn't as good as usual. Should be fixed going forward though :) (sidenote: audio is a black art and I have a lot of respect for anyone who works with it 😅)
no problem
Sir Have a nice day😊
So this is what replacing all programmer in next 3 months
I didn't even notice anything weird 👍🏻
Maybe you should ask ChatGPT for some audio tips? 🤣
Rather than fix it, use the bot to fix it by tell it what to fix. That's the key. Great video!!!
Very much this, it’s interesting how over a longer conversation it remembers about the context of the code you’re writing and can develop it iteratively… although it does make some howling mistakes along the way. Not really tried much css. I needed help centring a div one time, and it got me on the right track but didn’t quite succeed (not even joking… I did manage to centre my div eventually).
@@xinaesthetic margin: 0 auto; and width:fit-content; if the div is a block that covers the screen. if its inside a grid or flex there is some other ways to
While this can sometimes work you have to make sure that what you tell it to fix is not something small.
You can fall into the trap of telling ChatGPT to fix things that you could fix much faster yourself.
ChatGPT is best for coming up with an initial draft of stuff but is not really good at iterative improvements unless any of the iterations is large enough that it would actually save time using ChatGPT.
@@xXJM01Xx I say it's the other way around, you can do the simple easy stuff yourself and start a template, then feed it into chatgpt and explain the more complex things you want done with your code.
@@umadbroimatroll7918 it could depend on the flow of your conversation but in my experience it's been much faster to make some small changes myself rather than ask chatgpt.
For example say you know you already wanted to style the body with a certain font. You could do that much faster typing it yourself rather than asking chatgpt, waiting for it's response and then having to check if it is right or not.
For me more often than not it has been slower to ask it to make small changes rather than doing it myself.
I asked it to write "modern css" and it worked a lot better. You should also take advantage of the iterative feedback cycle by asking it to improve things that look bad.
What I've found with ChatGPT and coding is that the more SPECIFIC you are, the better the code is. You can be quite verbose with your request too. You can also request it to FIX the bad code and it does a fairly good job. In truth, I do see this as something that will only get better over time and ultimately make coding much easier. However, I still think, no matter how sophisticated it becomes, you will always need a human who knows how to code to put it all together properly.
absolutely -
I think these are only tools, not actual replacements of human brain power. Will help improving efficiency and ease the learning curve, but it needs your help to understand what you are doing so if you are clueless, the bot is clueless too.
@@TheThirdWorldCitizen this is the worst use i have seen so far like he would be the worst client.
I think it won't take long before it's able to 'put it all together', but one will always need a human expert to oversee, check and correct the result.
>always
You sure about that now?
GPT is not a mind reader. If you specify your request more, it will do it properly. You also can reference to other templates, like "write a html code with css similar to XY website". Or just tell to him what you want, including the gaps, alignments, borders, colors, animations, etc. Talk to it like you would talk to a human if you need something for them. I mean what would you do if I told you only that, to make me a hero page? :) GPT is a tool, what you have to learn to use properly, like the google search or stack overflow.
I’m gonna call user error on this rather than chatGPT fail. The prompts mean the difference between average output and precise. I’d humbly request this video has a part two with top prompts for top css
A large part of working with these AIs is learning how to ask them to do what you want. You can get so much further with the right prompts.
Of course, there are still major limitations. Especially for something like styling a page, since there can be so many interlocking parts where even a small mistake has the potential to break something important.
I was messing around with this a few days ago to see if it could recreate a few projects I had worked on with CSS in the past. It could do the simpler one after proper prompting but when I tried to push it to recreate a more complex example it produced a result that included python code within the CSS.
It's certainly a very useful tool but it's still lacking in creativity. It'll be really fun to see where this goes in the future!
The more specific you can be with the prompt, the better chance it has at outputting a better first shot. Within the same chat, it keeps the same color scheme it seems most times, but you can ask it to change the scheme and it will. You can ask it to rewrite the code using a different naming convention and it will. Ask it to output using BEM or a custom naming structure you teach it. It still does require the user to know how to guide and teach it, but it's a nice little assistant when you want to try something on the fly.
It seems like it always gives you an idea on the first response of what you need, like a starting point. Then with the instructions on what is not working as you would want it to work, it improves drastically. Now I'm not sure about CSS side, but it did manage to fix all the issues I had with my little API based JS project (simple issues, but I only been learning JS for like a month and a half now). I think AI can be a great tool for quick finding of information you need, yet it needs information to learn what information is redundant. Doubt it will replace people's jobs, but will make them a lot easier.
same - my Javascript journey is but a few weeks and building my own e-commerce website from scratch. The time it saved me is tremendous
This was very interesting to see how you fixed it. I only dabble in web design, so I learned a lot about your approach for certain issues.
Could be very funny if you would try to do a complete front mentor challenge with only using ChatGPT telling it what to do
Many people have completed them and uploaded to GitHub. So the AI would've scanned them already. It will be better if he took an image from dribble or figma and describe it for the AI.
@@shazam314 not true it can't access the internet and scan repositories
@@RickyTanTriads It literally contains the internet, where do you think this incredible data comes from?
@@s7v7n97 It’s been trained with data from the internet and remembers it similar to how humans remember from the internet.
When your “talking” to ChatGPT it pulls the information from it’s “memory” ( probably a database ). It does not make active queries to the internet - when you’re using it.
"Well, If droids could think, there'd be none of us here, would there?" - Obi-Wan
It's easier for ChatGPT to generate programming code which gives deterministic results (eg. Fibonacci).
It doesn't know how good design looks like.
Eg. Responsive design could mean anything in this case.
Gha ! I used it to add borders to a clip path element and it worked. Also used it to make a color scheme and an complete sheet for accessible components . Took 2-3 very specific prompts
Omg this is so interesting! Thank you for showing
we're calling it 'Ch-ai' and sometimes it returns hysterical totally bogus code and when asked to check the code it generated it calls it "...your code..." lol!!! Love how it says "You are correct" when you fix it's errors ;) Really exciting to be able to experience this - especially explaining code in a language you're not familiar with - makes it easier to learn. Don't see it replacing jobs but def improving productivity
You should ask more detailed question. I want fancy hero with image stacked and fancy animated title
I asked chat-gpt to write out a modular type scale and it provided a rem and calc function solution. Probably could refine and specify the clamp function, too. Its just so satisfying to see what it comes up with and its so quick. Even if the results needs editing, it is great to get the ball rolling.
Kevin you’re amazing!! I’d love to work with you soon
Hey bro, I literaly made it come up for a code for an app idea i've had for a year but now I have all this code lol
1- Not even sure if it's good or not
2- I don't know what to do with it now
I've been playing with it for a week now and learned TONS of prompts and certain triggers that are fantastic. Also, I've noticed, some prompts that didn't work even 2 days ago are now being taken and making it work.
I can tell you for sure in a year or 2 this thing will be amazing. Just not sure how to proceed now
I've been doing this with C++ code; You have to be very specific with it, and keep reiterating over the code until it does what you want. Will it replace programmers or CSS writers? Not yet, but we can use it to help craft difficult code, or even automate some code writing, especially with it's new history function.
5:45 I always use `rem` for font size, as well as almost everything else, because I like being able to basically scale the whole site with elastic design. I can set a breakpoint to bump the root `font-size` to something in `vw` and increase that at lower screen sizes to make things lay out predictably while maintaining that elastic design.
You should never use VW for font-size, it's inaccessible. clamp(xrem, 10vw + 1rem, xrem) is fine though, and no need for a media query then either
@@KevinPowell agread clamp + rem and or calc is far more scalable whereas vw and vh and very problematic on scaling (especially divs) and especially on ios mobile where repaints occur.
@@KevinPowell huh... never thought it was inaccessible. I always found it an easy way to keep the element-to-screen sizing predictable. I'd use just a few media queries to adjust that ratio, and the whole layout would snap to the next predictable view.
Most website builders heavily rely on media queries to make something responsive, but I'll have to look into clamps as a way to make my designs intrinsically responsive. Great idea!
@@r77madderwhat does repaint mean in that context? Thanks
@@MasayaShida if you set an image height in vh, when you test on apple mobile devices, when you scroll down and url bar disappears , the viewport changes height so the height of the image "repaints" or refreshes causing the image height to oscillate a bit like layout or content shift.
The nervous laughter when you realize your job is in danger
It was quite good at creating unittests for typescript and Python functions, although it didn’t understand a function that I wrote to calculate Python. Didn’t try it for css yet.
Btw : if it stops along the way you can ask ‘please continue with the code above’
ChatGPT is incredible. Me and Rob 🤖 have coauthored several novellas over the past couple of days. 😂
lol!!!
"This code is actually really *really* far off"
**Looks at my own code in absolute shambles**
I've been playing with this a bunch. I find that this gets you 70% there and handles a lot of the repetitive work and with a couple of tweaks to finalize it all.
Love your politeness to ChatGPT, Kevin.
Where it does help alot is when learning to program. I can use it to help me understand how certain elements/functions work. Thats how i mainly use it, when i do.
Thank you kelvin powell
Even though it was not the goal of your video, I picked up more about css in your video than in any youtube tutorial.
the thing with this bot is, it uses logic that it learned from us. But it can't understand something as purely illogical as the style tastes that vary from human to human very illogically. If you want to use it as an assistant for some logic based languages like C for instance (which I've been shamelessly using in my university assignments btw) you'll get some really efficient and scarily accurate to the task that you give type of answers. You can also customize the code to be as fast as possible and check for any dangling pointers / security issues with your code or even have it revise your code and compare it to the code that it generated to give you some insight on where you could have improved. Truly an awesome tool for students like me tbh
we need more episodes its fun to watch
One thing that really works well with chatGPT is if you provide a lot of context, and then point out errors or things you do not like about its code solution, it remembers what its doing, so the more you add to the prompt the more it will provide. Its actually pretty good when you tell it, Hey I got this error, and it gives you solutions to those errors. If you suggest things to modify, it will. Its pretty basic and has no idea what your goal is, so providing a lot of description will help it narrow down and focus on the solution you personally want.
“You are correct. I apologize about the mistakes in my previous reply.”
Try asking: Let's play a trivia game about HTML, CSS, and JS
When working with ChatGPT you have to be a Project Manager. You can have the whole conversation and it takes in account everything you say in that single conversation. It is incredible. You can just tell him what to fix. No need to even change it yourself, just be super specific in the beginning.
great technologies & Nice job
you should give him clear discription to what you want from him .
I let it create the same with little extras :) and it got the job done, all i did was saying him what i wanna have or how i wanna have it, css is part is not perfect but is working after a 2 fixes.
It created a hero section with dark and light mode and it moves the button around depending on the size of the screen,
The only errors / bugs was thats the button color in dark mode was wrong and the image got to big if the screen was to big but got fixed after deleting 1 line
i have seen a couple videos about chatGPT so i signed up for it hoping to speed up development time, i find it useful for getting basic structure down, but i wonder how much time is wasted explaining to the AI what you want rather than just coding, it crashes a lot, i have found if you ask it to print the changes only you will get those before it decides to print everything anyway and crash. I don't remember and i will check, but have you done any videos on web components, i am having trouble putting more than one on a page.
“Return, after Xmas and, I, will be, kicking it on, upwork 😉 “ - Yours artificially ChatGPT
I can't get @container working in visual studio. Any ideas why it's not supported?
I have asked it to make a 3d rotating cube, it worked very well.
Hello, I am new to VS code, what extension or shortcut are you using to automatically comment out lines if code? Thanks!
Ctrl /
@@codexic3365 Okay, thanks so much!
@@randomwatermelons6542 thank you for asking - was wondering the same ;)
@@randomwatermelons6542 No problem :D
Have you done a video for the "no-brainers" or "must-do's" for CSS? For example, your critique of the choices around the 6-7 minute mark are font-size in rems (of course), but also you mention it's "fine" that margins are in ems. Are rems better for margins, whereas ems are better for padding? Then you mention that it's good that the button is inline-block and that :hover and :focus should share the same styling. If you have done a video like that, would you share the link, or would you do something like that? Or is that something you cover in your courses?
There was a time when a computer couldn't beat a human at chess. Today it's no big deal. As for CSS we are still in times when a computer can't beat a human at CSS. For now. Kevin, it would be an interesting video to see you train AI on what you want. It might be a 10 hour long video, though.
Generating code for known thinks works very well with ChatGPT.
For example "create css gradient red to dark red". The generated code remainds you how it works.
I had similar expirience in C#. It generate random classes and when you ask for this classes, it write some dummy comments in the methods. So you have to ask for them. After some time it looses the context and generate thinks whom doesnt fir together. So yeah for simple thinks its amazing but it has its limits. What you are asking is generate me somthing.
On its defense CSS is probably the last thing we should expect from it, its too subjective, too complex and probably more bad data is there for it to learn than in any other field. Like people dont write as much bad Java code as they write bad css.
2:07
**ChatGPT 4 has entered the chat**
ChatGPT will really come of age when also starts posting questions to get answers on stackoverflow.
like how you think! That would save a ton of time
Imagine the poor photographer that took that walrus picture, getting compared to this CSS...
The thing with ChatGPT is, it indeed isn't perfect, but you have to give it more information for it to do it right
I don't think AI will directly replace someone's job, but it might make developers more efficient, so that projects don't need that many people. In that way it will take jobs more indirectly. Then again, when everything is more efficient, it will probably also increase the demand, so that there might be more projects, and more jobs. And hopefully a tool like this will also create inovation that will create new types of jobs we don't even know about yet.
agree - us humans always see change as bad like the Croods - it's an awesome tool and can't wait to see what awesome stuff we're going to be able to do with it
This tool can be good and bad at the same time. In US students are already using it to cheat on essays and this will make some people more dumber than they already are.
there is one problem with chat GPT i found that is if i give it a description for a function and also give it example input output it gives that function and shows example output just as i gave it but when running that code in browser is different result it fakes the output in chat
Did a good job based on your demand in the start. No details at all was mentioned
ChatGPT is good for JS, it explains well and it helped me make navbar and parallax scroll effects
In your tutorial about using em for font size or sizes , they do create a problem if you dont know what you are doing.
You still need to learn coding ,so, using this may save time or help if you cant type
You can easily nudge it in a direction. Just compile “Coding Guidelines” … so, you start with … Read this and only say “Coding Guidelines acknowledged: [PASTE YOUR GUIDE HERE IN NATURAL LANGUAGE OR CSS EXAMPLES]” … then ask it your questions, and you will like the output more as it is tailored more to your expectations. Yeah, the visual component is missing … but that is coming with multi-modal AI (next year).
Finally a real challenge
For the AI to give you the best result you have to be really detailed right off the bat. If you are looking for a mobile first, responsive site, base on Material Design, using bright colors tell it at the very beginning. AI is very literal, annoying so at times so the more detailed you are the better.
I second the @abdicateDotNet comment saying you should tell the box what you wanted fixed instead of fixing it. that's the power of chatgpt.
Hmmmmm. nah it can't take my Job
Kevin I hope you will create sass course, I want to know how too use sass variable with css, for create responsive and modern design, every sass course ignor css variable today but we know how powerfull it is ....
Hey Kevin, can you give a shot to this chrome extension named Merlin. It gives different answers than ChatGPT and also available on just one click on any website. Would love to see your view on this tool for coder community.
I think, frontend is kinda more creative process than backend stuff and I don't really consider the AI as a potential replacement becasue AI will never have the same knowledge what's good looking or not .
Well it can provide some templete Or idea to get started. Not actual solution more like stack overflow...but in ui format
great upload sir
I love the way you sort of dissing the AI. Imagine this is still new(ish) After training and us telling it what to fix it's going to be amazing. I really love it for creating content for me.
he should be dissing himslf he fed it garbage he got garbage back
Walruses are going to be upset that you insulted them at 2:30
I think it wants the image to just cover the entire background for the header.
It would be neat if you could interrupt it when it's almost finished with your request and completely change the requirements. Just like a real client. I'd imagine that after a while of this, the output would just be a giant ASCII middle finger.
i think its good for getting like 80% of the way there really quickly.
One thing is for sure salary of developers might come down..this is just the opening version
It can do even much better job, but you need to phrase your questions in much smarter way.
FYI it only understands tailwindcss 2.0 for now incase you are wondering.
"I'm not worried about losing my job yet" 💀
Thanks for this video.
Love and respect from Afghanistan.
Please pray for us to get rid of barbarian talibans (proxies of ISI / pakistan).
you just broke my heart - peace ♥
I fear what GPT4 with 100 trillion parameters vs the current 200 billion will be capable of.
I was thinking in trying to use the bot to reorganice some awfull legacy SCSS code (That isn't actually SCSS. It's just CSS on a SCSS file). Sadly the file is too big to send trough the chat, so I'll probably shoul try puting chunks of the code to test it...
It's very good at scss, it extends a lot of bootstrap
Are these thechology (CHATGPT) going to put in danger programmer jobs ,in the future?I assume that it can generate code in many languages not only web languages(html.css,js)?
I did this and it worked fabulous. It is pretty cool. But it was a simple text animation.
a background image hero would look much nicer. I wonder if It could do a better job with that.
i think if you arre learning css and html it is a greath tool if you get stuck. for a macheen this is awsom i think lets see over 5 til 10 years it is like a pro
People (consumers) won’t like what it creates, but people who run dev sweatshops in India will love it.
1. I really like your haircut 👍
2. This video was so useful for me, not because of chatGPT, because the great code review you did. Hope to see more code reviews 🙏 I can send mine 😆
No. It sucks. It includes all kinds of random parameters into it and often finishes halfway. And don't get me started on styled components, that's even worse.
It does however, write great javascript visuals.
Yeah, I think the problem with CSS is, it doesn't really know what the result is. With other langauges, it's solving a problem... more complex than 1 + 1, but it's here is a problem that needs a solution... CSS is a little bit different in that regard. With enough prompting maybe you could get better results, but at that point you might as well have written it yourself :D
I find the better the prompts and parameters the better results
If you actually use a real programming language you will see how good it is
@@KevinPowell you will not write the css yourself if you are a product manager who wants to use AI software(or atleast a better AI than what is curently available) instead of paying a developer.
I had terrible frustrating experience with ChatGPT. And I wasn't even trying any coding questions🤭
I’ve coded a whole professional webpage for a client using chatgpt only - yes it can tho it’s like working with a fresh junior- basically you need to attend everything it does.
It’s not there atm but this is just version 3, version 4 is already made so I think development will finally soon be a thing of the past we just stream a page on fly based on simple word commands
Can I see the website?
I think chatgpt was not even made for programming, its just an ai that is supposed to give you a human-like answer. So if it does this good now, just imagine when its been trained more. I think its good to tell it when its wrong, this way it will improve its output.
@@Muheeb_ I call BS
Let's be real, chatGPT is like Google but on steroids.
Lol, I just open yt after asking chatgpt to write some in html, css. It made a pretty decent login screen but couldn't make a good calculator.
I asked it for css for a hex grid. It gave me back code that put hexagons in a square grid. Hmm, not quite.
I creatted a bug in my pdo application and try to debug in chatgpt. He taked a lot of time and many questions to catch the simple bug where one variable dont existed. He helps sometimes, but is not perfect.
It works when it works. When there is an issue it is a big one since you don't even understand the code since the computer has written it.
it does not do as good as people think on compound things like what you asked. I have played alot with it and I use it to get me small segments of things. In programming principles we say that you write a function and that function one thing only. Treat it like that ask it to do single functions one by one. That's one way to build things with it.
for exmple if you wanna build a quizzing app that will give the user tools recommendations based on the answers. You have to ask it to make a quiz UI minimalist and then work on the functions etc. for instance, you say make 3-4 questions with 4 multiple choices of tools attributes to recommend a tool for user after answering the questions. It will not do as good, so you have to break it down into steps and it will understand how to add new code to the current one.
i'm trying to get chatgpt to code a tournament bracket with css/html they are getting close
It can save you a lot of time, but you will always need to validate the output.
Conclusion: Lets write still bad code to not able to learn it by AI = we will still have job. FTW!
It will be a great idea if you are porfessional at css and html and you just want to save time by not writing to much codes and just change the errors and mistakes that chatGPT did
fr kevin it's so dumb but it has the information, it's like having all sport cars and you only drive a bicycle
You're saying sports cars are better than bicycles?
@@31redorange08 that's not the point actually but I love bicycles alot
You should ask it to center a div. This is always an interesting thing to see from junior devs 😊
My problem right now … can you help me out ?
@@justiceshore8017Are you being serious?