Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 3
Creating your own projects with AI
Unit 1 – Coding with AI
This unit will show you the possibilities of using AI to help you write code. You don’t have to bring any experience of code into this course, but if you have completed some coding projects then you will be able to get further with your own examples.
Lesson 1: Creating a website with AI
Websites use code technology to display text, images and interactions. Developing websites became easier when graphical tools to help write this code (usually html, css and javascript) became available. Now AI can help you write this code.
Generative AI chatbots have been trained with datasets containing code and code tutorials, so they can suggest this code if you ask in a detailed prompt.
​
INTERACTIVE
We will try to build a simple website using an AI chatbot. The aim is to see the possibilities for how the chatbot can help you learn how to code.
-
We will use a Generative AI chatbot so open your favourite one such as ChatGPT, Bard or Perplexity.
-
We will build the website using https://codepen.io. This is a website that provides an easy way to create a website. Go to the website and click "Start Coding" (or the "Pen" button if you're logged in) to create a blank website.
​
-
Go to your chatbot of choice and construct a prompt that will create the sort of website that you want. For example:
I'd like to create a website for my side hustle making fun pin badges. I want to make the website in CodePen. It should have an about page and a listing page to show off my products. Can you suggest all the code that I need?
The chatbot will respond with code “snippets”. These are blocks of code that you can copy and paste into CodePen. You can usually copy each snippet by clicking the copy button.
-
Copy the html and css code that the chatbot has suggested into the right places in CodePen.
You should see that the Preview pane in CodePen is starting to show you the correct text. Congratulations, you have just started a web page without writing any code!
To really progress and make a web page that looks good and works well, you’ll need to start to understand how each part works. If you already know, you can skip this part. If not, luckily we are already using a chatbot that can explain this to you! Try asking it:
-
Can you tell me how the html you suggested works?
-
What does the css do?
-
How can I change the colour of the font?
-
How would javascript help me make this website?
-
Why are there angle brackets <> in this code?
-
What does the word ‘div’ do?
Now that you have some idea of the code files, you can try to add some more functionality into your web pages. Ask the chatbot to suggest ways that you can use javascript to add products to your webpage.
For example:
Can you show me how to add my product items in a 'Products' section using JavaScript?
If you have time, you can continue to use the chatbot to edit and understand the web pages you are building. You could find out how to add images, backgrounds, animations, videos and buttons for different functions.
This is a short example of how using AI to generate code can be a powerful way to learn about and build digital projects. It would be difficult to build a fully-functional website without understanding any of the code, and it could be risky to do this. As the AI won’t have a full human-like understanding of your project, it could suggest code that:
-
Isn’t secure and could be vulnerable to the release of passwords and user details
-
Does’t work efficiently and becomes frustrating for users
-
Is difficult to update and doesn’t work well on all devices
This sort of coding using AI is great to help you learn about web pages, but make sure to use it with some caution.
