{"id":1071638,"date":"2022-11-03T07:03:17","date_gmt":"2022-11-03T11:03:17","guid":{"rendered":"https:\/\/www.prime-wow.com\/?p=1071638"},"modified":"2022-11-03T07:03:17","modified_gmt":"2022-11-03T11:03:17","slug":"get-kids-creating-webpages-with-html-and-css","status":"publish","type":"post","link":"https:\/\/www.prime-wow.com\/?p=1071638","title":{"rendered":"Get kids creating webpages with HTML and CSS"},"content":{"rendered":"<p>With our new free \u2018<a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/web-intro\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to web development<\/a>\u2019 path, young people are able to learn HTML and create their own webpages on topics that matter to them. The path is made up of six projects that show children and teenagers how to structure pages using HTML, and style them using CSS.\u00a0<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"333\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/48035309701_7a5bae0d61_k-500x333-1.jpg\" alt=\"At Coolest Projects, a young person explores a coding project.\" class=\"wp-image-78174\" \/><\/figure>\n<\/div>\n<h2><strong>With all the website tools available today, why learn HTML?\u00a0<\/strong><\/h2>\n<p>Webpage creation has come a long way since the 1990s, but HTML is still the markup language that is used to display almost every page on the World Wide Web. By knowing how it works, you can deepen your understanding of the technology you use every day.<\/p>\n<p>If you want to build your own website today, there are many tools to get you quickly up and running. These tools often involve dragging and dropping predefined elements and choosing from a wide collection of themed looks. Learning HTML and CSS skills is important for web designers, developers, and content creators who want to build unique webpage designs that make their content stand out.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1066\" height=\"204\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/webpages.png\" alt=\"Six webpages, each with a unique design and based on a topic important to the creator.   \" class=\"wp-image-81809\" \/><figcaption>The path helps young people express themselves through their own webpages  <\/figcaption><\/figure>\n<p>With our new \u2018<a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/web-intro\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to web development<\/a>\u2019 path, we want creators (the young people who use our projects) to be able to quickly make fantastic-looking websites that follow modern best practices, while they also learn how HTML and CSS work together to create a webpage. Creators write their own HTML to develop the content and structure of their webpages. And they customise our pre-built CSS style sheets to get their webpages to look like they imagine.<\/p>\n<p>This really is a fun and unique approach to learning HTML and building a webpage, and we think young people will quickly engage with it. They start by finding out how to structure pages using HTML before applying CSS styles that bring their pages to life. Through the six projects, they build all the skills and independence they need to make webpages that matter to them.\u00a0<\/p>\n<h2><strong>Accessibility first<\/strong><\/h2>\n<p>We believe that young people should find out about website accessibility right from the start of their learning journey. That\u2019s why <a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/web-intro\" target=\"_blank\" rel=\"noreferrer noopener\">the path for learning HTML<\/a> shows creators how they can make their websites accessible to all their users regardless of the users\u2019 needs or digital devices.<\/p>\n<p>That\u2019s why our new path uses <strong>semantic<\/strong> HTML. Older HTML tutorials might show you how to structure a webpage using tags like <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code>. In contrast, the meaning and purpose of tags in semantic HTML is very clear. For example:<\/p>\n<ul>\n<li><code>&lt;main&gt;<\/code> is used to tag the main content for the webpage<\/li>\n<li><code>&lt;footer&gt;<\/code> is used for content to be displayed in the footer<\/li>\n<li><code>&lt;blockquote&gt;<\/code> contains a quote and typically the author of the quote<\/li>\n<li><code>&lt;section&gt;<\/code> contains a portion of content that usually sits within the main part of the webpage<\/li>\n<\/ul>\n<p>Semantic HTML supports accessibility because it allows people who use a screen reader to more easily navigate a webpage and read it in a logical way.\u00a0<\/p>\n<p>Another element of accessible design that the path introduces is the colour combinations used on webpages. It is really important that contrasting colours are used for the background and the text. High contrast makes the text more readable, which means the webpage is more suitable for visually impaired users.\u00a0<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"794\" height=\"123\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/contrast-examples.png\" alt=\"Good and bad examples of colour contrasting on webpages. \" class=\"wp-image-81818\" \/><figcaption>It\u2019s very important to use contrasting colours on a webpage<\/figcaption><\/figure>\n<\/div>\n<p>The path also shows creators the importance of adding meaningful alternative text for images. Good alternative text helps visually impaired users, and users who have a very low bandwidth and therefore turn images off in their web browser.\u00a0<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"688\" height=\"361\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Build-a-webpage.png\" alt=\"\" class=\"wp-image-81799\" \/><figcaption>With the path, young people will learn how to design webpages that respond to the device of the user  <\/figcaption><\/figure>\n<\/div>\n<p>Finally, our path for learning HTML introduces creators to the concept of responsive web design. Responsive design is helpful because websites can be viewed on thousands of different devices. Some people view pages on large, high-resolution monitors, 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 works best for the specific screen on which a user is viewing them.<\/p>\n<h2><strong>Key questions answered<\/strong><\/h2>\n<h3>Who is the \u2018Intro to web development\u2019 path for?<\/h3>\n<p>We have written the projects in this path with young people of around the age from 9 to 17 in mind.\u00a0<\/p>\n<p>HTML and CSS are text-based markup languages. This means a young person who wants to start learning HTML needs to be familiar with typing on a keyboard. It would also be helpful to have experience of using the copy and paste function, which is useful when changing the layout of a page or copying similar pieces of code.\u00a0<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"334\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/CoderDojo-DL-3-500x334-1.jpg\" alt=\"Young people attending a Dojo.\" class=\"wp-image-32821\" \/><\/figure>\n<\/div>\n<p>If a young person is unsure whether they have the right skills to get started with the path, they can first try out a short \u2018Discover\u2019 project. With this Discover project, young people can choose between the themes \u2018<a href=\"https:\/\/rpf.io\/web-discover-space\" target=\"_blank\" rel=\"noreferrer noopener\">space<\/a>\u2019, \u2018<a href=\"https:\/\/rpf.io\/web-discover-sunsets\" target=\"_blank\" rel=\"noreferrer noopener\">sunsets<\/a>\u2019, \u2018<a href=\"https:\/\/rpf.io\/web-discover-forests\" target=\"_blank\" rel=\"noreferrer noopener\">forests<\/a>\u2019, or \u2018<a href=\"https:\/\/rpf.io\/web-discover-animals\" target=\"_blank\" rel=\"noreferrer noopener\">animals<\/a>\u2019 to see how they can create their first webpage in just five steps. (We\u2019re still working on the \u2018Discover\u2019 project type, so if you have any feedback about it, let us know.)<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1156\" height=\"434\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Forests-Discover-project.png\" alt=\"An example step from the Discover project, forest theme.\" class=\"wp-image-81815\" \/><figcaption>Young people can experiment with our Discover project to build their own webpage in just a few steps<\/figcaption><\/figure>\n<\/div>\n<h3>What will young people learn with the path?<\/h3>\n<p>Creators will learn how to use HTML and CSS to build webpages that have:<\/p>\n<ul>\n<li>Images<\/li>\n<li>Lists<\/li>\n<li>Quotes\u00a0<\/li>\n<li>Links\u00a0<\/li>\n<li>Animations<\/li>\n<li>Imported fonts<\/li>\n<\/ul>\n<p>They will also learn about how to make their webpages accessible to all through use of:<\/p>\n<ul>\n<li>Semantic HTML<\/li>\n<li>Alternative text for images<\/li>\n<li>Colour contrast checking<\/li>\n<li>Responsive design (means the webpage adapts to the device on which it is viewed)<\/li>\n<\/ul>\n<h3>How long does the path take to complete?<\/h3>\n<p>We\u2019ve designed the path so young people can complete it in six one-hour sessions, with one hour for each project. Since the project instructions encourage creators to upgrade their projects, they may wish to go further and spend a little more time getting their projects exactly as they imagine them.\u00a0<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"333\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/CoderDojo-Docklands-500x333-2.jpg\" alt=\"A CoderDojo coding session for young people.\" class=\"wp-image-32819\" \/><\/figure>\n<\/div>\n<h3>What software is needed to create the projects in the path?<\/h3>\n<p>Young people only need a standard web browser to follow the project instructions and use an online code editor to create their webpages.\u00a0<\/p>\n<div class=\"wp-container-1 wp-block-buttons\">\n<div class=\"wp-block-button aligncenter has-custom-font-size has-medium-font-size\"><a class=\"wp-block-button__link has-vivid-green-cyan-background-color has-background\" href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/web-intro\" target=\"_blank\" rel=\"noreferrer noopener\">Start learning HTML now<\/a><\/div>\n<\/div>\n<h3>What can young people do next?<\/h3>\n<h4><strong>Explore our other projects for learning HTML<\/strong><\/h4>\n<p>There are <a href=\"https:\/\/projects.raspberrypi.org\/en\/projects?software%5B%5D=html-css-javascript\" target=\"_blank\" rel=\"noreferrer noopener\">28 other step-by-step projects<\/a> for creators to choose from on our website. They can browse through these to see what cool things they\u2019d like to make and what new skills they want to learn.<\/p>\n<h4><strong>Build a webpage for Coolest Projects\u00a0<\/strong><\/h4>\n<p>If your kid is proud of the webpage they create with the final \u2018Invent\u2019 project in the path, they can share it with a worldwide community of young creators in our free Coolest Projects tech showcase. Project registration will open again in spring 2023. You can sign up to hear news about the showcase on the <a href=\"https:\/\/online.coolestprojects.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Coolest Projects<\/a> homepage.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"333\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/CoolestProjects_03072020-159-500x333-1.jpg\" alt=\"Two teenage girls participating in Coolest Projects shows off their tech project.\" class=\"wp-image-77904\" \/><\/figure>\n<\/div>\n<details>\n<summary>\n<strong>Details about the projects in \u2018Intro to web development\u2019<\/strong><br \/>\n<\/summary>\n<p><\/p>\n<p>The <a href=\"https:\/\/projects.raspberrypi.org\/en\/pathways\/web-intro\">\u2018Intro to web development\u2019 path<\/a> is structured <a href=\"https:\/\/www.raspberrypi.org\/blog\/free-coding-resources-children-young-people-digital-making-independence\/\">according to our Digital Making Framework<\/a>, with three Explore projects, two Design projects, and a final Invent project. You can also check out our <a href=\"https:\/\/docs.google.com\/drawings\/d\/1NsWZB6gk9Y9OtYgwGUVVkgqqjD7VeZvtby2incfLcls\/edit\">learning graph<\/a> to to see the progression of young people\u2019s skills and knowledge throughout the path.<\/p>\n<h4>Explore project 1: Anime expressions<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Anime.png\" alt=\"\" \/><br \/>\n<br \/>\nIn the \u2018Anime expressions\u2019 project, creators build and style a webpage for an anime drawing tutorial. They learn how to use HTML tags to structure a webpage; use CSS to apply layout, colours, and fonts; and add images and text content to their page.\u00a0\u00a0<\/p>\n<h4>Explore project 2: Top 5 emojis<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Top-5-emojis.png\" alt=\"\" \/><br \/>\n<br \/>\nWith the \u2018Top 5 emojis\u2019 project, young people create a webpage displaying their top 5 list of emojis. They learn how to add emojis, create a list, use a block quote, and animate elements of the page.\u00a0<\/p>\n<h4>Explore project 3: Flip treat webcards<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Flip-treat-webcards.png\" alt=\"\" \/><br \/>\n<br \/>\nWith the \u2018Flip treat webcards\u2019 project, creators make a webpage showing a flip card with a treat from around the world. They use CSS to make the card flip over when a user interacts with it. Creators also learn how to apply gradients and import fonts from <a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>.\u00a0<\/p>\n<h4>Design project 1: Mood board<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Mood-board.png\" alt=\"\" \/><br \/>\n<br \/>\nThis Design project gives creators the chance to develop the skills that they have learned in the three \u2018Explore\u2019 projects. With the \u2018Mood board\u2019 project, young people create a webpage 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 redesign of their bedroom, or a website; or it could show reminders of all the things that make them happy.\u00a0<\/p>\n<h4>Design project 2: Sell me something<\/h4>\n<p>\u00a0<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Sell-me-something.png\" alt=\"\" \/><br \/>\n<br \/> <br \/>\nThe \u2018Sell me something\u2019 project is another chance for creators to practise the skills that they have gained in the \u2018Explore\u2019 projects. They create a webpage to \u2018sell something\u2019 to the webpages visitors. It could be anything they like, from an object they love, to a game they like to play.\u00a0<\/p>\n<h4>Invent project: Build a webpage<\/h4>\n<p>\u00a0<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2022\/11\/Build-a-webpage-1.png\" alt=\"\" \/><br \/>\n<br \/> <br \/>\nThe \u2018Build a webpage\u2019 project is the final project in the path and allows young people to independently build a webpage on any topic they\u2019re interested in. This Invent project offers info cards to remind creators of the key skills they\u2019ve learned with the path, and a light structure to support them through the process of making their webpage. Young people are encouraged to <a href=\"https:\/\/wakelet.com\/wake\/OlSSWmmvRo3NcbLtEIDhB\">showcase<\/a> their final webpages in the path gallery to inspire other creators.\u00a0<\/p>\n<\/details>\n<p>The post <a rel=\"nofollow\" href=\"https:\/\/www.raspberrypi.org\/blog\/learning-html-and-css\/\">Get kids creating webpages with HTML and CSS<\/a> appeared first on <a rel=\"nofollow\" href=\"https:\/\/www.raspberrypi.org\">Raspberry Pi<\/a>.<\/p>\n<p>&#013;<br \/>\n&#013;<br \/>\nSource: Raspberry Pi &#8211; <a href=\"https:\/\/www.raspberrypi.org\/blog\/learning-html-and-css\/\" target=\"_blank\" rel=\"noopener\">Get kids creating webpages with HTML and CSS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With our new free \u2018Introduction to web development\u2019 path, young people are able to learn HTML and create their own webpages on topics that matter to them. The path is made up of six projects that show children and teenagers &hellip; <a href=\"https:\/\/www.prime-wow.com\/?p=1071638\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1071639,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[77,110],"tags":[5],"class_list":["post-1071638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rpi","category-unfiltered-rss","tag-rpi"],"_links":{"self":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1071638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1071638"}],"version-history":[{"count":0,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1071638\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/media\/1071639"}],"wp:attachment":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1071638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1071638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1071638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}