Creating a website is a chance to express yourself and learn valuable skills.
To get started, visit a page you love. Look at the colours it uses and how the information is presented. Use this to inspire ideas for building your website.
You need three tools: HTML, CSS, and JavaScript (see graphic). As you build, think about how others will experience your site. You should make your website easy and fun to use.
Learn how code makes computer games come alive
Step 1: Build the basics with HTML
HTML (Hypertext Markup Language) is your website’s skeleton. A clear structure can guide your visitors to the information they are looking for. If your homepage is just a list of links and long paragraphs, it can feel like looking for something on a messy desk.
Instead, create different sections for your website – for example, “About me”, “Projects” and “Photos”. Use headers to create titles for each section. Then, add text to tell your story.
Reflect on your layout: is it easy to find content? If it’s messy, remove something or separate it into another section.
Step 2: Add style with CSS
CSS (Cascading Style Sheets) adds the decoration for your website. Choose fonts and colours that show your style.
Make sure to find colours that work well together. For example, you might like yellow and red, but using both of them at once might be a bit tough for visitors to look at. Instead, use a soft yellow background with darker text in black or grey. This helps your information shine.
For the fonts, make sure your website’s text is big enough for most people to look at without difficulty.
Then, add images to the page. Make sure the photos are big enough for people to see easily.
Finally, check your site on a phone and computer – does it look organised and fun on both versions? For another perspective, ask someone else to test your page.
Step 3: Get visitors involved with JavaScript
JavaScript makes your site interactive. It is similar to switches that turn on and off the lights or faucets that start and stop the flow of water.
On your website, add buttons that show more content when they are clicked. You can even design quizzes with emojis and cute images.
Step 4: Experiment and explore
Once you’ve built your website, try adding other features, like a gallery of photos or an effect that makes photos sparkle when your mouse hovers over it. If a section feels boring, add a bold feature.
As you continue learning HTML, CSS and JavaScript, keep practising and experimenting. You will gain confidence and improve your coding skills. This is a creative playground, so play around, try new things and make it yours!
