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 brand-new ‘Introduction to web development: HTML, CSS and animation’ path provides the ideal foundation to support and encourage this exploration using webpages.

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 NEW web development path 

During the new ‘Introduction to Web development: HTML, CSS and animation’, 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!

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.

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 all-new 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

Download our new crib sheet from your resource library which gives you an overview of the path and a quick look at each project, as well as tips and guidance to help build your confidence.

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

Share your Code Club’s creations in our ‘Web development community galleries’ and help inspire others. To link a project, simply complete this form, selecting the ‘Introduction to web’ path.