HTML

Five HTML and CSS projects for your Code Club to try!

Get ready to dive into the basics of HTML and CSS with your Code Club! The Code Club team and friends share their favourite web design projects and why you should give them a go in your club. We have the perfect project that will make learning HTML easy and fun for everyone — from beginners to experienced coders.

Dive into the basics of HTML and CSS

What is HTML and CSS? 

Let’s start with the basics! HTML (Hypertext Markup Language) is used to structure webpages, and it provides the framework for content e.g. text, images, and videos. CSS (Cascading Style Sheets), on the other hand, sets the style and appearance of the content e.g., fonts, colours, sizes, and positioning. Together they create the visual appearance of a webpage. They are not programming languages, but using them effectively requires many of the same skills.

Why introduce web design into my Code Club?

Text-based languages like HTML and CSS are easy to learn and trouble-shoot. They provide the opportunity for creators to learn how they can code creatively to address real-world challenges or subjects that interest them. Alongside this, learners develop their problem-solving and logical thinking skills: all vital attributes to become a confident coder! 

Introduce web design into your Code Club

By exploring these languages in your Code Club, young learners get first-hand experience of real skills used in industry and an insight into future career paths.  

Try these HTML/CSS resources in your club (they’re our favourites!)

Express yourself!

Code Club provides a safe learning environment where creators can use digital technologies to express themselves in their own way. In our Mood board project, learners make design choices based on their interests.

“Code Club members who have learning disabilities have enjoyed working on this project as it enables them to communicate their moods and emotions, which they can sometimes find hard to verbalise.”

Darren Bayliss, Community Coordinator

Coding as a creative outlet 

Creativity and CSS go hand-in-hand and this sunrise animation project is a great way to light up any Code Club session! 

“The first time I tried this project, I was so excited to discover that CSS could be used to create animations! It’s a really fun project with lots of opportunities to add your own creative flair.”

Kat Leadbetter, Global Partnerships Manager

Sunrise animation project

Create your own meme! 

Bring the fun into your Code Club with our cat meme generator! This is a great little project for learners to explore CSS styles. 

“What could be more fun than a cat meme? There are great step-by-step instructions that make the whole project simple, easy to follow, and great fun. Your cat could be the star of your very own memes!”

Helen Gardner, Coolest Projects Programme Manager

insert hilarious caption..HAHAHA so funny.
Cat meme generator

Shiver Me Timbers – you can speak pirate too! 

Who doesn’t want to talk like a pirate! Your Code Club hearties will be introduced to HTML and Jquery to create live updates on a webpage in this simple Talk like a pirate project.

“When I first learned to control a webpage through code, I remember it feeling like a superpower. This project teaches learners how to do that whilst also having the fun of pirate speech!”

Mac Bowley, Learning Manager

Make me laugh!

If your Code Club always has a story or a joke to share, encourage your members to learn the HTML basics and create a club webpage with their favourite tales!

“Such a simple project, but so powerful as learners use it to express themselves and share their interests (or just a great joke). A great project when you have mixed abilities as there is so much personalisation and tinkering — everyone can approach it at their own level.”

Tamasin Greenough Graham, Head of Club Development and Operations

An illustration of a book with a robot on the front cover.
Create a club webpage

Explore our free project paths

You can find all the Code Club projects on our website, where creators are guided through new coding and design skills to make things that matter to them.

If you’re looking for other HTML resources to support learners with the basics of HTML and CSS, download our ‘Introduction to Web’ progress chart, which complements our ‘3…2…1…Make!’ Introduction to Web project path. As learners complete projects, they can collect stickers or colour the badges to mark their achievements.

You can access the progress maps on the Code Club website ready for creators to colour in the badges as they follow the ‘Introduction to web’ project path.

Looking for more inspiration to fuel your Code Club? Explore and discover the Scratch and Python projects that excite the Code Club team too!

Using HTML and CSS to boost self-expression in your Code Club

Empowering young people to see themselves as digital makers and not just consumers is a key ingredient of Code Club. Our ‘Introduction to web development: HTML, CSS and animation’ path provides the ideal foundation to support and encourage this exploration using webpages.

Two young coders and an adult looking at a screen of a laptop.

But why learn about HTML and CSS in your Code Club?

Creating webpages and websites enables young people to develop their own personal expression and creativity. It can empower them to connect with the world around them and share their voice on matters that are meaningful to them.

By learning about Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), young people develop skills to make their websites look and function in any way they want, untied to formats provided by website building companies.

These skills give learners the agency to design websites about topics and issues that matter to them, in a style that appeals to them and their friends. If they have a passion for reading, they could build a website sharing their book reviews, thoughts, and comments. They might design a website promoting a fundraiser or supporting a cause that is significant to them or impacts the community where they live.

Learning about these programming languages can give them an insight into different career paths. As well as experiencing life as a web designer or a front-end developer, they will also develop an understanding of the role that websites play in promoting a business or furthering a community campaign.

Introduction to our web development path 

Whilst completing the ‘Introduction to Web development: HTML, CSS and animation’ path, young coders will learn how to structure and style webpages with images, lists, fonts, quotes, links, and animation, and then use these skills to give life to their own ideas.

In the first project, ‘Anime expressions’, they will create and style a webpage for an anime drawing tutorial. They will use HTML tags to structure a webpage, and CSS styles to apply layout, colour palettes, and fonts, along with adding images and text. It’s a simple and satisfying start to their web design journey!

A GIF of a scrolling webpage showing the Anime expression project.
Anime expressions

In the subsequent projects they will build their skills to code emoji lists, flip cards, mood boards, and lastly to create their very own webpage!

As with all of our ‘3…2…1…Make!’ paths, learners work through six projects where they develop skills, knowledge, and increased independence.

The first three ‘Explore’ projects introduce new skills. Then two ‘Design’ projects invite them to practise their new skills and bring in their own interests, followed by one ‘Invent’ project where they get to bring their new knowledge together to meet a project brief.

Learn more about the ‘3…2…1…Make!’ paths and how they support young people to become independent tech creators.

Support available

To help you feel confident in delivering the path within your Code Club and talking about HTML and CSS, check out our comprehensive ‘Getting started with web development: HTML and CSS’ guide detailing all the skills that your young coders will encounter.

A GIF scrolling through the pages of the ‘Getting started with web development: HTML and CSS’ guide.
Getting started with web development: HTML and CSS’ guide

To learn more about the pedagogy behind the ‘3…2…1…Make!’ paths and how to use them in your Code Club, explore the Mentor guide. It’s packed full of amazing tips and ideas to support you.

“Since the launch of the new paths, we have received questions from Code Club leaders about the thought process behind the paths, tips for helping creators design projects that matter to their coders, and methods to encourage independence at any age.

This guide seeks to answer all of these things, and can be read then revisited at any time — though my preference is definitely to read it with a cup of tea and a large piece of cake!”

– Liz Smart, Learning Manager

Celebrate your club members’ achievements with our ‘Introduction to web development: HTML, CSS, and animation’ certificate. This is available on the resource page too.

Try one of our HTML and CSS projects today and inspire your creators to see themselves as the next generation of digital makers!