Rik Cross, Author at Raspberry Pi Foundation https://www.raspberrypi.org/blog/author/rikcross/ Teach, learn and make with Raspberry Pi Thu, 05 Jan 2023 17:11:10 +0000 en-GB hourly 1 https://wordpress.org/?v=6.2.2 https://www.raspberrypi.org/app/uploads/2020/06/cropped-raspberrry_pi_logo-100x100.png Rik Cross, Author at Raspberry Pi Foundation https://www.raspberrypi.org/blog/author/rikcross/ 32 32 Get kids creating webpages with HTML and CSS https://www.raspberrypi.org/blog/learning-html-and-css/ Thu, 03 Nov 2022 11:03:17 +0000 https://www.raspberrypi.org/?p=81793 With our new free ‘Introduction to web development’ 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.  With all the website…

The post Get kids creating webpages with HTML and CSS appeared first on Raspberry Pi Foundation.

]]>
With our new free ‘Introduction to web development’ 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. 

At Coolest Projects, a young person explores a coding project.

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

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.

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.

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

With our new ‘Introduction to web development’ 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.

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. 

Accessibility first

We believe that young people should find out about website accessibility right from the start of their learning journey. That’s why the path for learning HTML shows creators how they can make their websites accessible to all their users regardless of the users’ needs or digital devices.

That’s why our new path uses semantic HTML. Older HTML tutorials might show you how to structure a webpage using tags like <div> and <span>. In contrast, the meaning and purpose of tags in semantic HTML is very clear. For example:

  • <main> is used to tag the main content for the webpage
  • <footer> is used for content to be displayed in the footer
  • <blockquote> contains a quote and typically the author of the quote
  • <section> contains a portion of content that usually sits within the main part of the webpage

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. 

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. 

Good and bad examples of colour contrasting on webpages.
It’s very important to use contrasting colours on a webpage

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. 

With the path, young people will learn how to design webpages that respond to the device of the user

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.

Key questions answered

Who is the ‘Intro to web development’ path for?

We have written the projects in this path with young people of around the age from 9 to 17 in mind. 

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. 

Young people attending a Dojo.

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 ‘Discover’ project. With this Discover project, young people can choose between the themes ‘space’, ‘sunsets’, ‘forests’, or ‘animals’ to see how they can create their first webpage in just five steps. (We’re still working on the ‘Discover’ project type, so if you have any feedback about it, let us know.)

An example step from the Discover project, forest theme.
Young people can experiment with our Discover project to build their own webpage in just a few steps

What will young people learn with the path?

Creators will learn how to use HTML and CSS to build webpages that have:

  • Images
  • Lists
  • Quotes 
  • Links 
  • Animations
  • Imported fonts

They will also learn about how to make their webpages accessible to all through use of:

  • Semantic HTML
  • Alternative text for images
  • Colour contrast checking
  • Responsive design (means the webpage adapts to the device on which it is viewed)

How long does the path take to complete?

We’ve 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. 

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 instructions and use an online code editor to create their webpages. 

What can young people do next?

Explore our other projects for learning HTML

There are 28 other step-by-step projects for creators to choose from on our website. They can browse through these to see what cool things they’d like to make and what new skills they want to learn.

Build a webpage for Coolest Projects 

If your kid is proud of the webpage they create with the final ‘Invent’ 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 Coolest Projects homepage.

Two teenage girls participating in Coolest Projects shows off their tech project.
Details about the projects in ‘Intro to web development’
The ‘Intro to web development’ path is structured according to our Digital Making Framework, with three Explore projects, two Design projects, and a final Invent project. You can also check out our learning graph to to see the progression of young people’s skills and knowledge throughout the path.

Explore project 1: Anime expressions


In the ‘Anime expressions’ 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.  

Explore project 2: Top 5 emojis


With the ‘Top 5 emojis’ 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. 

Explore project 3: Flip treat webcards


With the ‘Flip treat webcards’ 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 Google Fonts

Design project 1: Mood board


This Design project gives creators the chance to develop the skills that they have learned in the three ‘Explore’ projects. With the ‘Mood board’ 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. 

Design project 2: Sell me something

 
The ‘Sell me something’ project is another chance for creators to practise the skills that they have gained in the ‘Explore’ projects. They create a webpage to ‘sell something’ to the webpages visitors. It could be anything they like, from an object they love, to a game they like to play. 

Invent project: Build a webpage

 
The ‘Build a webpage’ project is the final project in the path and allows young people to independently build a webpage on any topic they’re interested in. This Invent project offers info cards to remind creators of the key skills they’ve learned with the path, and a light structure to support them through the process of making their webpage. Young people are encouraged to showcase their final webpages in the path gallery to inspire other creators. 

The post Get kids creating webpages with HTML and CSS appeared first on Raspberry Pi Foundation.

]]>
New free resources for young people to become independent digital makers https://www.raspberrypi.org/blog/free-coding-resources-children-young-people-digital-making-independence/ https://www.raspberrypi.org/blog/free-coding-resources-children-young-people-digital-making-independence/#comments Wed, 22 Sep 2021 10:16:45 +0000 https://www.raspberrypi.org/?p=75798 Our mission at the Raspberry Pi Foundation is to help learners get creative with technology and develop the skills and confidence they need to make things that matter to them using code and physical computing. One of the ways in which we do this is by offering learners a catalogue of more than 250 free…

The post New free resources for young people to become independent digital makers appeared first on Raspberry Pi Foundation.

]]>
Our mission at the Raspberry Pi Foundation is to help learners get creative with technology and develop the skills and confidence they need to make things that matter to them using code and physical computing. One of the ways in which we do this is by offering learners a catalogue of more than 250 free digital making projects! Some of them have been translated into 30 languages, and they can be used with or without a Raspberry Pi computer.

Over the last 18 months, we’ve been developing an all-new format for these educational projects, designed to better support young people who want to learn coding, whether at home or in a coding club, on their digital making journey.

An illustration of the 3-2-1 structure of the new Raspberry Pi Foundation coding project paths.
Our new free learning content for young people who want to create with technology has a 3-2-1 structure (click the image to enlarge)

Supporting learners to become independent tech creators

In the design process of the new project format, we combined:

  • Leading research
  • Experience of what works in Code Clubs, CoderDojos, and our other programmes for young people
  • Feedback from you in the community!

While designing the new format for our free projects, we found that, as well as support and opportunities to practise while acquiring new skills and knowledge, learners need a learning journey that lets them gradually develop and demonstrate increasing independence.

Therefore, each of our new learning paths is designed to scaffold learners’ success in the early stages, and then lets them build upon this learning by providing them with more open-ended tasks and inspirational ideas that learners can adapt or work from. Each learning path is made up of six projects, and the projects become less structured as learners progress along the path. This allows learners to practise their newly acquired skills and use their creativity and interests to make projects that matter to them. In this way, learners develop more and more independence, and when they reach the final project in the path, they are presented with a simple project brief. By this time they have the skills, practice, and confidence to meet this brief any way they choose!

The four new paths we’re sharing with you today focus on the Scratch language (including a physical computing path!), with a Python and a web development path coming very soon, and even more learning content in development.

Our new path structure for learning coding and digital making

When a learner is ready to develop a new set of coding skills, they choose one of our new paths to embark on. Each path is made up of three different types of projects in a 3-2-1 structure:

  • The first three Explore projects introduce learners to a set of skills and knowledge, and provide step-by-step instructions to help learners develop initial confidence. Throughout these projects, learners have lots of opportunity to personalise and tinker with what they’re creating.
  • The next two Design projects are opportunities for learners to practise the skills they learned in the previous Explore projects, and to express themselves creatively. Learners are guided through creating their own version of a type of project (such as a musical instrument, an interactive pet, or a website to support a local event), and they are given code examples to choose, combine, and customise. No new skills are introduced in these projects, so that learners can focus on practising and on designing and creating a project based on their own preferences and interests.
  • In the final one Invent project, learners focus on completing a project to meet a project brief for a particular audience. The project brief is written so that they can meet it using the skills they’ve learned by following the path up to this point. Learners are provided with reference material, but are free to decide which skills to use. They need to plan their project and decide on the order to carry out tasks.

As a result of working through a path, learners are empowered to make their own ideas and create solutions to situations they or their communities face, with increased independence. And in order to develop more skills, learners can work through more paths, giving them even more choice about what they create in the future.

More features for an augmented learning experience

We’ve also introduced some new features to add interactivity, choice, and authenticity to each project in a path:

  • Real-world info box-outs provide interesting and relevant facts about the skills and knowledge being taught.
  • Design decision points allow learners to make choices about how their project looks and what it does, based on their preferences and interests.
  • Debugging tips throughout each project give learners guidance for finding and fixing common coding mistakes.
  • Project reflection steps solidify new knowledge and provide opportunities for mastery by letting learners revisit the important learnings from the project. Common misconceptions are highlighted, and learners are guided to the correct answer.
  • At the start of each project, learners can interact with example creations from the community, and at the end of a project, they are encouraged to share what they’ve made. Thus, learners can find inspiration in the creations of their peers and receive constructive feedback on their own projects.
  • An open-ended upgrade step at the end of each project offers inspiration for young people to give them ideas for ways in which they could continue to improve upon their project in the future.

Access the new free learning content now

You can discover our new paths on our projects site right now!

We’ll be adding more content regularly, including completely new Python programming and web development paths coming very soon!

For adults who want to help young people learn with the paths, whether at home or in a Code Club or CoderDojo, we’ve written a guide that helps you support your learners in the best way.

As always, we’d love to know what you think: here’s a feedback form for you to share comments you have about our new content!

For feedback specific to an individual project, you can use the feedback link in the footer of that project’s page as usual.

The post New free resources for young people to become independent digital makers appeared first on Raspberry Pi Foundation.

]]>
https://www.raspberrypi.org/blog/free-coding-resources-children-young-people-digital-making-independence/feed/ 2
Activities you can do at home this week! https://www.raspberrypi.org/blog/free-activities-to-do-at-home/ https://www.raspberrypi.org/blog/free-activities-to-do-at-home/#comments Fri, 20 Mar 2020 09:31:20 +0000 https://www.raspberrypi.org/?p=56947 At the Raspberry Pi Foundation, our mission is to put the power of computing and digital making into the hands of people all over the world. We know that a lot of families around the globe are navigating school closures and practicing social distancing right now to keep their communities healthy and safe. So in…

The post Activities you can do at home this week! appeared first on Raspberry Pi Foundation.

]]>
At the Raspberry Pi Foundation, our mission is to put the power of computing and digital making into the hands of people all over the world. We know that a lot of families around the globe are navigating school closures and practicing social distancing right now to keep their communities healthy and safe.

So in today’s post, we put together a list for you with some of our free online projects and resources that digital makers of all ages and experience levels can explore at home.

A family of digital makers (illustration)

For most of these projects, you don’t need any new software or hardware. And many of our online resources are available in multiple languages, so young learners can use them even if their mother language isn’t English!

Free activities for you at home

Beginner level:

  • Rock band: This activity is a great introduction to Scratch, a block-based coding language. You’ll learn how to get started with Scratch and start your dream music group. Rock on!
  • Pixel art: This is a great activity for anyone just getting started with programming. Grab some crayons or colored pencils and create your masterpiece!
  • Web page stickers: In this activity, you’ll learn the basics of HTML and create some stickers. We can’t wait to see what you make!

pixel art (illustration)

Intermediate level

  • Storytime with Python (the language not the snake!): Let your imagination run wild with this activity! You will use Python to create a program that generates a random story, based on what the user types in.
  • Meme generator: In this activity you will make a meme generator with HTML, CSS, and Javascript! Using an image of your choice (bonus points if the image is of your pet), you can create your own memes.

example of a meme

Advanced level

  • Getting started with GUIs: In this activity, you will create two simple GUIs (graphical user interfaces) in Python. This is where you can get fancy with buttons, menus, and even a text box!
  • Pride and Prejudice for zombies: Learn how to use Python web requests and regular expressions while creating a version of Pride and Prejudice that’s more appealing to zombies.

Not just for young learners

  • Build a web server with Flask: This is a great how-to project if you’d like to learn how to set up a web server and create a simple website using Flask, Python, and HTML/CSS. Be aware though, the guide may not always work smoothly, because of external updates.
  • Sign up for one of our free online courses. From programming to physical computing and running coding clubs, we’ve got something that will inspire you.
  • Check out The MagPi magazine! Download the free PDF of this month’s MagPi and read about the #MonthOfMaking, getting started with electronics, fancy ways to wear your Raspberry Pi, and more.

People creating a robot (illustration)

We are here to support you!

Our team is working hard to bring you more online learning experiences to support you, your children, and everyone in the community at this time. You can read our CEO Philip Colligan’s message about how we are responding to the novel coronavirus. And for people who are involved in running Code Clubs, CoderDojos, or Raspberry Jams, we’ve specifically put together guidance on how to keep your learners engaged.

We want to make sure digital makers of all ages have the resources they need to explore and create with code. What do you think of these activities, and what else would you like to see? Tell us in the comments below!

The post Activities you can do at home this week! appeared first on Raspberry Pi Foundation.

]]>
https://www.raspberrypi.org/blog/free-activities-to-do-at-home/feed/ 9
Scratch 2.0: all-new features for your Raspberry Pi https://www.raspberrypi.org/blog/scratch-2-raspberry-pi/ https://www.raspberrypi.org/blog/scratch-2-raspberry-pi/#comments Tue, 27 Jun 2017 11:21:26 +0000 https://www.raspberrypi.org/?p=33552 We’re very excited to announce that Scratch 2.0 is now available as an offline app for the Raspberry Pi! This new version of Scratch allows you to control the Pi’s GPIO (General Purpose Input and Output) pins, and offers a host of other exciting new features. Offline accessibility The most recent update to Raspbian includes the app, which…

The post Scratch 2.0: all-new features for your Raspberry Pi appeared first on Raspberry Pi Foundation.

]]>
We’re very excited to announce that Scratch 2.0 is now available as an offline app for the Raspberry Pi! This new version of Scratch allows you to control the Pi’s GPIO (General Purpose Input and Output) pins, and offers a host of other exciting new features.

Offline accessibility

The most recent update to Raspbian includes the app, which makes Scratch 2.0 available offline on the Raspberry Pi. This is great news for clubs and classrooms, where children can now use Raspberry Pis instead of connected laptops or desktops to explore block-based programming and physical computing.

Controlling GPIO with Scratch 2.0

As with Scratch 1.4, Scratch 2.0 on the Raspberry Pi allows you to create code to control and respond to components connected to the Pi’s GPIO pins. This means that your Scratch projects can light LEDs, sound buzzers and use input from buttons and a range of sensors to control the behaviour of sprites. Interacting with GPIO pins in Scratch 2.0 is easier than ever before, as text-based broadcast instructions have been replaced with custom blocks for setting pin output and getting current pin state.

Scratch 2.0 GPIO blocks

To add GPIO functionality, first click ‘More Blocks’ and then ‘Add an Extension’. You should then select the ‘Pi GPIO’ extension option and click OK.

Scratch 2.0 GPIO extension

In the ‘More Blocks’ section you should now see the additional blocks for controlling and responding to your Pi GPIO pins. To give an example, the entire code for repeatedly flashing an LED connected to GPIO pin 2.0 is now:

Flashing an LED with Scratch 2.0

To react to a button connected to GPIO pin 2.0, simply set the pin as input, and use the ‘gpio (x) is high?’ block to check the button’s state. In the example below, the Scratch cat will say “Pressed” only when the button is being held down.

Responding to a button press on Scractch 2.0

Cloning sprites

Scratch 2.0 also offers some additional features and improvements over Scratch 1.4. One of the main new features of Scratch 2.0 is the ability to create clones of sprites. Clones are instances of a particular sprite that inherit all of the scripts of the main sprite.

The scripts below show how cloned sprites are used — in this case to allow the Scratch cat to throw a clone of an apple sprite whenever the space key is pressed. Each apple sprite clone then follows its ‘when i start as clone’ script.

Cloning sprites with Scratch 2.0

The cloning functionality avoids the need to create multiple copies of a sprite, for example multiple enemies in a game or multiple snowflakes in an animation.

Custom blocks

Scratch 2.0 also allows the creation of custom blocks, allowing code to be encapsulated and used (possibly multiple times) in a project. The code below shows a simple custom block called ‘jump’, which is used to make a sprite jump whenever it is clicked.

Custom 'jump' block on Scratch 2.0

These custom blocks can also optionally include parameters, allowing further generalisation and reuse of code blocks. Here’s another example of a custom block that draws a shape. This time, however, the custom block includes parameters for specifying the number of sides of the shape, as well as the length of each side.

Custom shape-drawing block with Scratch 2.0

The custom block can now be used with different numbers provided, allowing lots of different shapes to be drawn.

Drawing shapes with Scratch 2.0

Peripheral interaction

Another feature of Scratch 2.0 is the addition of code blocks to allow easy interaction with a webcam or a microphone. This opens up a whole new world of possibilities, and for some examples of projects that make use of this new functionality see Clap-O-Meter which uses the microphone to control a noise level meter, and a Keepie Uppies game that uses video motion to control a football. You can use the Raspberry Pi or USB cameras to detect motion in your Scratch 2.0 projects.

Other new features include a vector image editor and a sound editor, as well as lots of new sprites, costumes and backdrops.

Update your Raspberry Pi for Scratch 2.0

Scratch 2.0 is available in the latest Raspbian release, under the ‘Programming’ menu. We’ve put together a guide for getting started with Scratch 2.0 on the Raspberry Pi online (note that GPIO functionality is only available via the desktop version). You can also try out Scratch 2.0 on the Pi by having a go at a project from the Code Club projects site.

As always, we love to see the projects you create using the Raspberry Pi. Once you’ve upgraded to Scratch 2.0, tell us about your projects via Twitter, Instagram and Facebook, or by leaving us a comment below.

The post Scratch 2.0: all-new features for your Raspberry Pi appeared first on Raspberry Pi Foundation.

]]>
https://www.raspberrypi.org/blog/scratch-2-raspberry-pi/feed/ 47
The Scratch Olympics https://www.raspberrypi.org/blog/the-scratch-olympics/ https://www.raspberrypi.org/blog/the-scratch-olympics/#comments Wed, 13 Jul 2016 22:22:30 +0000 https://www.raspberrypi.org/?p=24010 Since the Raspberry Pi Foundation merged with Code Club, the newly enlarged Education Team has been working hard to put the power of digital making into the hands of people all over the world. Among the other work we’ve been doing, we’ve created a set of Scratch projects to celebrate the 2016 Olympic Games in Rio. The initial inspiration for these projects…

The post The Scratch Olympics appeared first on Raspberry Pi Foundation.

]]>
Since the Raspberry Pi Foundation merged with Code Club, the newly enlarged Education Team has been working hard to put the power of digital making into the hands of people all over the world.

Among the other work we’ve been doing, we’ve created a set of Scratch projects to celebrate the 2016 Olympic Games in Rio.

The initial inspiration for these projects were the games that we used to love as children, commonly referred to as ‘button mashers’. There was little skill required in these games: all you needed was the ability to smash two keys as fast as humanly possible. Examples of this genre include such classics as Geoff Capes Strongman and Daley Thompson’s Decathlon.

With the 2016 Olympics fast approaching, we began to reminisce about these old sports-themed games, and realised what fun today’s kids are missing out on. With that, the Scratch Olympics were born!

There are two resources available on the resources section of this site, the first of which is the Olympic Weightlifter project. With graphics conceived by Sam Alder and produced by Alex Carter, the project helps you create a button-masher masterpiece, producing your very own 1980s-style keyboard-killer that’s guaranteed to strike fear into the hearts of parents all over the world. Physical buttons are an optional extra for the faint of heart.

A pixellated weightlifter blows steam from his ears as he lifts a barbell above his head in an animated gif

The second game in the series is Olympics Hurdles, where you will make a hurdling game which requires the player to hit the keyboard rapidly to make the hurdler run, and use expert timing to make them jump over the hurdles at the right time.

Pixellated athletes approach, leap and clear a hurdle on an athletics track

You’ll also find three new projects over on the Code Club projects website. The first of these is Synchronised Swimming, where you’ll learn how to code a synchronised swimming routine for Scratch the cat, by using loops and creating clones.

Six copies of the Scratch cat against an aqua blue background form a hexagonal synchronised swimming formation

There’s also an Archery project, where you must overcome an archer’s shaky arm to shoot arrows as close to the bullseye as you can, and Sprint!, which uses a 3D perspective to make the player feel as though they’re running towards a finish line. This project can even be coded to work with a homemade running mat! These two projects are only available to registered Code Clubs, and require an ID and PIN to access.

An archery target overlaid with a crosshair A straight running track converges towards a flat horizon, with a "FINISH" ribbon and "TIME" and "DISTANCE" counters

Creating new Olympics projects is just one of the ways in which the Raspberry Pi Foundation and Code Club are working together to create awesome new resources, and there’s much more to come!

The post The Scratch Olympics appeared first on Raspberry Pi Foundation.

]]>
https://www.raspberrypi.org/blog/the-scratch-olympics/feed/ 11