Css style

Encourage children to create web pages with HTML and CSS

Reading time: 8 minutes

With our new ‘Introduction to web development‘, young people are able to learn HTML and create their own web pages on topics that interest them. The course is made up of six projects that show kids and teens how to structure pages using HTML and style them using CSS.

With all the website tools available today, why learn HTML?

Creating web pages has come a long way since the 1990s, but HTML is still the markup language used to display nearly every page on the World Wide Web. By knowing how it works, you can deepen your understanding of the technology you use every day.

If you want to start your own website today, there are plenty of tools to get you up and running quickly. These tools often involve dragging and dropping pre-made elements and choosing from a large collection of themed looks. Learning HTML and CSS skills is important for web designers, developers, and content creators who want to create unique web page designs that make their content stand out.

Six web pages, each with a unique design and based on a topic important to the creator.
The journey helps young people express themselves through their own web pages

With our new ‘Introduction to web development‘, we want creators (the young people who use our projects) to be able to quickly create fantastic websites that follow modern best practices, while learning how HTML and CSS work together to create a web page. Creators write their own HTML code to develop the content and structure of their web pages. And they customize our pre-built CSS style sheets to make their web pages look like they imagined.

It’s a really fun and unique approach to learning HTML and creating a web page, and we think young people will pick up on it quickly. They start by learning how to structure pages in HTML before applying the CSS styles that bring their pages to life. Through the six projects, they gain all the skills and independence they need to create web pages that matter to them.

Accessibility first

We believe young people should learn about website accessibility early in their learning journey. That is why the way to learn html shows creators how they can make their websites accessible to all of their users, regardless of their needs or digital devices.

This is why our new path uses semantics HTML. Older HTML tutorials can show you how to structure a web page using tags like

and . In contrast, the meaning and purpose of tags in semantic HTML are very clear. For instance:

  • is used to mark up the main content of the web page
  • is used for content to display in the footer
  • contains a quote and usually the author of the quote
  • contains some of the content that is usually found in the main part of the webpage

Semantic HTML supports accessibility because it makes it easier for people who use a screen reader to navigate a webpage and read it logically.

Another accessible design element that the path introduces is the color schemes used on web pages. It is really important that contrasting colors are used for the background and the text. High contrast makes text more readable, which means the web page is more suitable for visually impaired users.

Good and bad examples of contrasting colors on web pages.
It is very important to use contrasting colors on a web page

The path also shows creators the importance of adding meaningful alt text for images. Good alt text helps visually impaired users and users who have very low bandwidth and therefore disable images in their web browser.

With the path, young people will learn to design web pages that respond to the user’s device

Finally, our HTML learning path introduces creators to the concept of responsive web design. Responsive design is useful because websites can be viewed on thousands of different devices. Some people view pages on large, high-resolution screens, and others view them on a mobile phone screen. We show learners how they can use HTML and CSS to make their pages responsive so they display in the way that best suits the specific screen a user is viewing them on.

Answers to key questions

Who is the “Introduction to Web Development” course for?

We wrote the projects for this path with young people between the ages of 9 and 17 in mind.

HTML and CSS are text-based markup languages. This means that a young person who wants to start learning HTML must be familiar with typing on a keyboard. It would also be helpful to have experience using copy and paste, which is useful when changing the layout of a page or copying similar pieces of code.

Young people attending a Dojo.

If a young person is unsure whether they have the right skills to embark on the journey, they can first try a short “Discover” project. With this Discover project, young people can choose between the themes ‘space‘, ‘sunsets‘, ‘forests‘, Where ‘animals‘ to see how they can create their first web page in just five steps. (We’re still working on the “Discover” project type, so if you have any feedback on that, let us know.)

A sample step from the Discover project, forest theme.
Young people can experience our Discover project to create their own web page in just a few steps

What will young people learn along the way?

Creators will learn how to use HTML and CSS to create web pages that have:

  • Pictures
  • Lists
  • Quotation
  • Connections
  • Animation
  • Imported fonts

They will also learn how to make their web pages accessible to everyone using:

  • Semantic HTML
  • Alternate text for images
  • Checking the color contrast
  • Responsive design (means the web page adapts to the device it is viewed on)

How long does the path take to complete?

We have designed the course so that young people can go through it in six one-hour sessions, with one hour for each project. Since project instructions encourage creators to update their projects, they may want to go the extra mile and spend a little more time getting their projects exactly how they imagine them.

A CoderDojo coding session for young people.

What software is needed to create the projects in the path?

Young people only need a standard web browser to follow the project’s instructions and use an online code editor to create their web pages.

What can young people do next?

Discover our other projects to learn HTML

There are 28 more step-by-step projects for creators to choose from our website. They can browse through them to see what interesting things they would like to do and what new skills they want to learn.

Create a web page for the coolest projects

If your child is proud of the web page they’ve created with the final “Invent” project along the way, they can share it with a global community of young makers in our free Coolest Projects tech showcase. Project registration will reopen in the spring of 2023. You can sign up for news from the showcase on the coolest projects home page.

Two teenage girls participating in Coolest Projects show off their tech project.
Project details in ‘Intro to web development’

The Course “Introduction to Web Development” is structured according to our Digital Making Framework, with three Explore projects, two Design projects and a final Invent project. You can also view our learning graph to see the progression of skills and knowledge of young people throughout the course.

Explore Project 1: Animated Expressions

In the “Anime expressions” project, creators create and style a web page for an anime drawing tutorial. They learn to use HTML tags to structure a web page; use CSS to apply layout, colors and fonts; and add images and textual content to their page.

Explore Project 2: Top 5 Emojis

With the “Top 5 emojis” project, young people create a web page displaying their list of the 5 best emojis. They learn how to add emojis, create a list, use a block quote, and animate page elements.

Explore Project 3: Flip Processing Web Maps

With the “Flip Treat Webcards” project, the creators create a web page showing a card to be flipped with a treat from around the world. They use CSS to flip the map when a user interacts with it. Creators also learn how to apply gradients and import fonts from Google fonts.

Design project 1: Mood board

This design project gives designers the opportunity to develop the skills they learned in the three “Explore” projects. With the ‘Mood board’ project, young people create a web page to display a mood board for a real or imaginary project. The mood board could, for example, show ideas for a party, a fashion item, a bedroom redesign or a website; or it could show reminders of all the things that make them happy.

Design Project 2: Sell Me Something

The “Sell Me Something” project is another opportunity for creators to practice the skills they learned in the “Explore” projects. They create a web page to “sell something” to web page visitors. It can be anything they like, from an object they like to a game they like to play.

Invent a project: create a web page

The “Building a Web Page” project is the last project in the course and allows young people to independently create a web page on any subject that interests them. This Invent project offers information cards to remind creators of the key skills they learned with the path, and a lightweight structure to support them through the process of building their web page. Young people are encouraged to showcase their final web pages in the journey gallery to inspire other creators.

Website: LINK