Lesson 1: Using ChatGPT to Edit Your CSS
How ChatGPT Can Help Edit Code
Now that we have a working website, you may want to change how it looks. ChatGPT can help you modify the CSS file without needing to understand CSS fully. You can describe the change you want in plain English, and ChatGPT will generate the necessary code. This is where I find the real power of ChatGPT!
Lesson 2: Example – Adding a Border to the Flag Image
I'm sure when you looked at the website you created, you might have been underwhelmed. For example, the flag could definitely use a border. Let’s ask ChatGPT to add one. This is a two-step process. The first thing you may need to do is show ChatGPT your code in the styles.css page. This is a prompt that I use.
I want to make changes to my css file. I will paste my css code now and follow up with what I'd like to do.
[[[[I then paste the code from my css file here]]]]
This is the code we ChatGPT initially produced originally. Now we will then prompt me to ask what I'd like to change. In this case it is the image. Just for your information, you could probably guess what the other two items are: body is the general type of text and how it appears and select is the selction box.
Here is a possible prompt you could ask ChatGPT but be creative.
Add a black border around the flag image in my CSS file. The border should be 2 pixels thick.
Try to be as specific as possible but also try and experiment. You never know what could be achieved with a creative prompt.
ChatGPT's Response:
ChatGPT will likely output the following:
Now, replace your code in the styles.css file and use Netlify Drop to refresh and see what happens.
💡 By the way, you can set up a Netlify account if you wish so you're not getting a new URL all the time. It isn't too difficult though it might be a little intimidating because there is so much going on in the interface but you can drag and drop your folder into the space and it should update your site.
Lesson 3: Example – Adding a Styled Information Box
We can also ask ChatGPT to make bigger changes. I really don't like how the information spreads across the screen and I'd like to contain everything in a nice box. Let’s get ChatGPT to enclose the information in an off-white box on a blue background. You can adapt this any way you want. Add the prompt:
Make the information display inside a rounded-off white box with a subtle shadow effect, placed on a blue background.ChatGPT's Response:
ChatGPT will tell you exactly what to do, including any changes to other files. Here is the response I got when I added the prompt.
It told me that it updated the CSS with the following changes:
- A blue background for the page.
- A white box with rounded corners to display the information.
- A subtle shadow effect to give it a slight lift.
It then updated my code in the css file which I did like before. However, there was one more step! It needed me to update my index.html file. Here's what it said 😱
What if I had no idea what that meant? Well, ChatGPT is here to the rescue. I can simply tell it that I don't know how to do that and if I paste my index.html code, could they do it for me. Here's the prompt:
I don't know where to put this code. I am going to paste the code from my html file here so you can do it.
[[[[I then paste the code from my index.html file here]]]]
Et Voila! 🕺🏼
Simply paste this code into the index.html file and you're ready to drag and drop again!
🫨 But.....woah.... I don't like what it outputted!
Sometimes ChatGPT doesn't get it right. The code I got made the site look like this!
Yuck! However, panic not! All you have to do is tell ChatGPT what you want it to do. So I simply went back to ChatGPT and told it my problem and what I wanted fixed. In my case the prompt looked like this:
There is a problem with the drop down box. The drop down menu needs to be above the box.
Sometimes ChatGPT apologises and sometimes it doesn't! But the most important thing is it tells you how to update the files affected. Simply follow the instructions, drag and drop again and check! As you can see with coding, a lot of time is spent making changes and checking. Without ChatGPT, you'd have to come up with the code yourself. With ChatGPT, you're like some sort of boss telling an employee to do the coding. Even though it's recommended not to say please and thank you to ChatGPT, I generally do. 😂 If it still isn't looking right, keep telling ChatGPT the problem and keep editing. It took me a couple of goes but I got there. Here's what my site now looks like:
Lesson 4: More Ideas for Customisation
Try asking ChatGPT for the following modifications:
- "Make the text larger and bold inside the info box."
- "Add a hover effect to the country dropdown menu, making it change colour when hovered over."
- "Make the flag image slightly rounded at the edges."
- "Center everything on the page and give it a modern look."
Experiment with ChatGPT and see how easily you can tweak your site’s appearance! Remember, coding isn't instant, even with ChatGPT. It can take a number of tries before you get the result you want. The main thing to see is that with ChatGPT, you have a coder at your fingertips and you can simply tell it what to do!