Over the years, AI has become more and more powerful in its ability to help developers with their code, allowing them to code more efficiently and effectively than ever before. It is a great tool that, if used correctly, can help aid in prototypes of projects and help put the finishing touches on an HTML website. With this article, you will learn how to use AI effectively to improve your HTML projects.
(Image of AI here or after h1?)
(Maybe a warning image here?)
When using AI as an assistant for coding, it is important to use it in the appropriate circumstances. We want to make it clear that we do not support using AI to all of the coding by itself. This is a bad practice as you will not learn from the coding process. AI does not think like humans and will arrange the code in a way that may not be optimal for any experienced developer. On top of that, having AI do all the work for you would be considered cheating. Work with your teacher and figure out the best way to use AI for your project. And trust us, any experienced teacher or developer will know if you used the AI make all of your website. Here are some "Do's" and "Don't's" when using AI coding assistance:
| Do's | Don't's |
|---|---|
| Ask the AI for help when you are stuck on something | Have the AI write all of the code for you |
| Ask the AI how it fixed an issue with your code | Have the AI write all of the text within your website |
| Use the AI to prototype or test an idea before committing to a project | Assume AI did write all the code correctly |
| Ask the AI any questions you may have | Let AI organize all of the code itself |
| Test out any code written by the AI (if you used AI at all, but testing is good to do in general) | Let the AI have complete creative control over your project |
Now that we've gone over the "Do's" and "Don't's" of AI coding assistance, we'll go through the step-by-step of using AI coding assistance effectively in a project. Follow the steps below to use AI assistance responsibly and effectively. Because of how accessible it is, we recommend using GitHub Copilot as it is built into applications like Visual Studio Code and GitHub. If you are unsure how to access the AI coding assistant in your preferred application, be sure to ask a teacher or search on Google for help. Every app is unique and won't have everything in quite the same place.
From every great project comes a great idea. Brainstorm what you want out of your website, the way it looks, the contents of it, everything that you can think of. This is the part of the project where you can let your imagination run wild. Just be aware that the final product may not turn out exactly as you thought.
(Brainstorming image here?)
Chances are you're making a website that contains written information in it. Now that you have an idea, start writing out your text on a separate text editing document, like a Microsoft Word document or Google document. Have a teacher or parent look it over to see what might need changes and apply them. Since this website is about the information, make sure you make adjustments to it now. It will be easier to edit and correct the text on the document itself rather than in the code.
(Image of a text document here?)
Now that you have your text written, it's time to start writing the code for the website. Start with the basics and once you get to the text, you can copy and paste it into the code itself. Make sure you follow good coding practices to make sure your code is readable and understandable to yourself and others. Every good website has code that is well organized and arranged!
(Image of a person writing code here?)
You should have quite a large amount of code written at this point in your project. It may be tempting now to use AI to help you with the rest, but there's another skill you can use before using the AI: Google search. Using Google search, there is a wealth of information at your fingertips, including information on HTML coding. If there is something that you would like to add to your website that you don't know how to do, Google it! For example, maybe you want the background of your website about galaxies in space to have a background of stars in space. Google it and try to find sources that will help you write this code on your own! There are plenty of great resources like Code.org and W3Schools.com that can help you achieve your website goals before resorting to using the AI assistant. Try your best to figure it out on your own before you resort to using the AI assistant.
(Image of a person using Google Search here?)
If you're at this step, you are probably confused on how to get some aspects of your design working, errors in the code may have popped up, or something is appearing on the website not like you expected. This is where the AI assistant can come in. Before having it fix all of the issues that have popped up, ask it to explain why some of the errors occurred. This can give you an idea about how to fix any of the issues without the AI assistant doing it for you.
(Image of person and a question mark above their head here?)
If you made it to this step, you probably don't have many ideas on how to fix the code. Now would be the best time to take advantage of the AI assistant to help you with your code. Click on the AI assistant icon on your code editor (it will look different between the different programs) and give it a prompt. For example, you may want a table of contents on the website that scrolls along with the user. Simply ask the AI to "set up the table of contents as a sidebar on the right of the screen that scrolls with the user." The AI will then go to work to make your idea a reality. Depending on the size of the request, it may take some time before it can complete the task. Once it has finished the prompt, test the code and make sure it is working the way you want it to. As mentioned before, the AI assistant isn't perfect and the code may not be flawless.
(Insert image of example prompt here?)
Now that the AI assistant has helped fix your issue, go back to the code that it wrote. Study it, take notes on it, do everything you can to learn about how it works. Experiment with the code itself to see how things change as you play with it. You can also make any tweaks to the code itself here. If you have trouble understanding the code, ask your teacher how the AI came up with that solution. You can even ask the AI itself how it got the result and it will explain it for you. The best part is that the AI will never get tired of your questions. Ask it whatever you like and ask as many questions as you like! Dive into it to really understand how the AI assistant came up with the solution it did and learn how you can replicate it for future projects. This is a big learning opportunity that you won't want to miss!
(Image of a person studying here?)
By now, you probably have all of the code for your website finished. As any good web developer would tell you, it's good to test your code often to make sure it is operating the way that you want it to. If something isn't working properly, fix it or ask the AI assistant for help. It's possible you may have even come up with more ideas as you worked on the project. Try adding those in! Any project is a great learning opportunity and will improve your coding skills. Practicing these skills will help develop good lifelong learning skills to become the best developer that you can be.
Below are some examples of prompts and projects that were made with the help of the AI assistant:
(Editor's Note: If either of you have any ideas for specific projects, please feel free to make adjustments to the titles of the bullet points)
As you continue on your coding journey, be sure to check out these resources to learn more about coding for websites and responsible use of an AI assistant. Below are more resources on where you can learn and grow as a developer. The best part, all of the resources listed are free to use!