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.

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 young people 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! 

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 young people 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, Ireland.

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, Community Manager

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 Manager

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 Code Club

Explore our free educational project paths

You can find all the Code Club classics on our projects webpage or explore our educational project paths, where coders 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 chart and sticker template from your club dashboard: log in to your resource page and find them under ‘Progress charts’.

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