AI Assisted Coding for Secondary Students

8 Steps for Getting Started

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.

Notice

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 do 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 to make all of your website. Here are some "Do's" and "Don't's" when using AI coding assistance:

The Do's and Don't's of AI Assisted Coding

✅ 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 wrote 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

Instructions

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 process 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.

Step 1: Brainstorming an idea

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.

Step 2: Drafting the text

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.

Step 3: Writing the code

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!

Step 4: Before using the AI assistant

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.

Step 5: Questioning the AI assistant about problems with the code

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.

Step 6: Using the AI assistant for help with coding

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.

Step 7: Learning from the AI assistant

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!

Step 8: Testing the website

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.

Going Forward

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!