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 😅)
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.
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.
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.
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!
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.
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'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.
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.
@@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.
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
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
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
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.
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
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.
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.
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.
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.
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.
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.
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.
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).
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.
@@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!
@@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.
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.
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.
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 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 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.
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.
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.
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
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 ....
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?
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 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 .
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
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’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
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.
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...
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
@@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.
If you think the CSS approach is bad, then try for JS. I think it's a start on certain things, but this AI can't replace a real coder/programmer. I might help clueless people, but I see a big risk of getting bad code. By the way, this chat also answers all kind of questions and often with faulty information. So this is something you should be aware of.
ChatGPT is only in a beginner state. It is far from finished. In 3 months from now... test it again and see if it does better. In a year from now it probably will be very useful.
AI vs Kevin? We shouldn't be bullying the machines. They may not be there yet but if you take a step back and think about it, we're pretty much competing an adult vs a 5 year old... Oh but even if we did advance nlp enough Kevin would still win lets be honest. I have a sneaky suspicion that he made/maintains css... Ooops editting lost the heart 🤣
Yeah, it's bad at layouts. Everything I've thrown at it so far I've gotten a downright wrong/bogus response. It's good a logic but for layouts this stuff has a ways to go. I would love for it to help me build this wild timeline page that I've been asked to do, but I can't honestly find a way for it to help me.
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 now use the AI on a daily basis. You learn to talk to it. It's like a junior developer who sometimes does stupid things and sometimes produces really amazing code. But you always talk to the AI, it learns that too. Especially with stupid work, the AI is a real help. I hate writing unit tests. Customer loves them. I write my code and when I'm done I give the code to the AI. I copy the 20/30 stupid tests over, take a quick look if it fits and push it. Even worse - I have absolutely no idea about writing tests. Seriously. But it seems to fit. So far, no one has complained. Write the invoice and then I'm done. ¯\_(ツ)_/¯
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
chatGPT is just about average at everything. this is huge for a ton of simple things, and also huge since YOU can be average at all these things without having to learn them. issue is, throw anything more complex at it and it’ll be mediocre or not really functional. or, try to actually use and maintain the code it writes and realize that you could’ve written it much better.
An honest CZcamsr. Other CZcamsrs praise the AI just to get some clicks on their videos. The truth is that it just consumes time and produces poor quality random code
He did nothing and him liking this comment proves he is ignoring the people that saying that he is putting garbage in and exoecrting good stuff he is just bad the Ai is better when you are not a idiot.
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.
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.
you expect too much from an AI given the lack of details in your request. in my experience chat GPT does a great job considering the fact that you only had to go through it and change just a little to make it work your needs.
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)?
It was not the case for CSS but when you ask a for a bit complicated things to ChatGBP, he fakes up things that doesn't exist in the target programming language.The problem is, he even insist on his errors if you're not sure about what you're talking about. You should ask him if he's sure about what he's talking, there he will apologize of making you confuse :)
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
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'm the first to discover that I wanted to send you a message about this topic, but I didn't know how
I didn't even notice anything weird 👍🏻
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!
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
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'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.
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.
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
You should ask more detailed question. I want fancy hero with image stacked and fancy animated title
"Well, If droids could think, there'd be none of us here, would there?" - Obi-Wan
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
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
ChatGPT is incredible. Me and Rob 🤖 have coauthored several novellas over the past couple of days. 😂
lol!!!
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.
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
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.
Btw : if it stops along the way you can ask ‘please continue with the code above’
Even though it was not the goal of your video, I picked up more about css in your video than in any youtube tutorial.
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.
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.
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.
Love your politeness to ChatGPT, Kevin.
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.
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.
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.
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.
Omg this is so interesting! Thank you for showing
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).
The nervous laughter when you realize your job is in danger
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.
Try asking: Let's play a trivia game about HTML, CSS, and JS
“Return, after Xmas and, I, will be, kicking it on, upwork 😉 “ - Yours artificially ChatGPT
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.
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.
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 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
2:07
**ChatGPT 4 has entered the chat**
Kevin you’re amazing!! I’d love to work with you soon
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 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
The thing with ChatGPT is, it indeed isn't perfect, but you have to give it more information for it to do it right
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.
"This code is actually really *really* far off"
**Looks at my own code in absolute shambles**
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.
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
Well it can provide some templete Or idea to get started. Not actual solution more like stack overflow...but in ui format
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
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.
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
Thank you kelvin powell
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 ....
Imagine the poor photographer that took that walrus picture, getting compared to this CSS...
I have asked it to make a 3d rotating cube, it worked very well.
“You are correct. I apologize about the mistakes in my previous reply.”
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.
great technologies & Nice job
you should give him clear discription to what you want from him .
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?
Hmmmmm. nah it can't take my Job
One thing is for sure salary of developers might come down..this is just the opening version
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.
we need more episodes its fun to watch
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 .
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
I did this and it worked fabulous. It is pretty cool. But it was a simple text animation.
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’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.
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...
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.
a background image hero would look much nicer. I wonder if It could do a better job with that.
Finally a real challenge
If you think the CSS approach is bad, then try for JS. I think it's a start on certain things, but this AI can't replace a real coder/programmer. I might help clueless people, but I see a big risk of getting bad code. By the way, this chat also answers all kind of questions and often with faulty information. So this is something you should be aware of.
I think it wants the image to just cover the entire background for the header.
ChatGPT is only in a beginner state. It is far from finished. In 3 months from now... test it again and see if it does better. In a year from now it probably will be very useful.
Ya it doesn’t seem like people understand this. CSS isn’t rocket science lol. The AI will have this corrected shortly
@@bane2256 yeah, many people think of it as a finished product, but it is only in its baby stage.
Walruses are going to be upset that you insulted them at 2:30
i think its good for getting like 80% of the way there really quickly.
AI vs Kevin? We shouldn't be bullying the machines. They may not be there yet but if you take a step back and think about it, we're pretty much competing an adult vs a 5 year old...
Oh but even if we did advance nlp enough Kevin would still win lets be honest. I have a sneaky suspicion that he made/maintains css...
Ooops editting lost the heart 🤣
the AI would win cause he just gave it garbage get somone who actually uses it right and he will be destroyed.
Yeah, it's bad at layouts. Everything I've thrown at it so far I've gotten a downright wrong/bogus response. It's good a logic but for layouts this stuff has a ways to go. I would love for it to help me build this wild timeline page that I've been asked to do, but I can't honestly find a way for it to help me.
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 now use the AI on a daily basis. You learn to talk to it. It's like a junior developer who sometimes does stupid things and sometimes produces really amazing code. But you always talk to the AI, it learns that too. Especially with stupid work, the AI is a real help. I hate writing unit tests. Customer loves them. I write my code and when I'm done I give the code to the AI. I copy the 20/30 stupid tests over, take a quick look if it fits and push it. Even worse - I have absolutely no idea about writing tests. Seriously. But it seems to fit. So far, no one has complained. Write the invoice and then I'm done. ¯\_(ツ)_/¯
considering you gave it less info then you would a other dev it did a good job on the first job.
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
chatGPT is just about average at everything. this is huge for a ton of simple things, and also huge since YOU can be average at all these things without having to learn them. issue is, throw anything more complex at it and it’ll be mediocre or not really functional. or, try to actually use and maintain the code it writes and realize that you could’ve written it much better.
An honest CZcamsr. Other CZcamsrs praise the AI just to get some clicks on their videos. The truth is that it just consumes time and produces poor quality random code
He did nothing and him liking this comment proves he is ignoring the people that saying that he is putting garbage in and exoecrting good stuff he is just bad the Ai is better when you are not a idiot.
I can't get @container working in visual studio. Any ideas why it's not supported?
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.
It's very good at scss, it extends a lot of bootstrap
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.
you expect too much from an AI given the lack of details in your request. in my experience chat GPT does a great job considering the fact that you only had to go through it and change just a little to make it work your needs.
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)?
It was not the case for CSS but when you ask a for a bit complicated things to ChatGBP, he fakes up things that doesn't exist in the target programming language.The problem is, he even insist on his errors if you're not sure about what you're talking about. You should ask him if he's sure about what he's talking, there he will apologize of making you confuse :)
i'm trying to get chatgpt to code a tournament bracket with css/html they are getting close
"I'm not worried about losing my job yet" 💀
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
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