Tag Archives: coding projects

Get young people making interactive websites with JavaScript and our ‘More web’ path

Post Syndicated from Pete Bell original https://www.raspberrypi.org/blog/more-web-learn-javascript/

Modern web design has turned websites from static and boring walls of information into ways of providing fun and engaging experiences to the user. Our new ‘More web’ project path shows young creators how to add interaction and animation to a webpage through JavaScript code.

A colorful illustration of a snail, a penguin, and a person with short dark hair against a blue background. There is a large question mark in the middle.

Why learn JavaScript?

As of 2024, JavaScript is the most popular programming language in the world. And it’s easy to see why when you look at its versatility and how it can be used to create dynamic and interactive content on websites. JavaScript lets you handle events and manipulate HTML and CSS so that you can build everything from simple animations, to forms that can be checked for missing or nonsensical answers. If you’ve ever seen a webpage continuously load more content when you reach the end, that’s JavaScript.

Two girls code together at a computer.

The six new projects in the ‘More web’ path move learners beyond the basics of HTML and CSS encountered in our ‘Introduction to web’ path. Youn people will explore what JavaScript makes possible in web developmnent, with plenty of support along the way. 

By the end of the ‘More web’ path, learners will have covered the following key programming concepts: 

HTML and CSS JavaScript 
Navbars, grid layouts, hero images and image sliders

Form design and handling user input

Accessibility and responsive design

Sizing elements relative to the viewport or container

Creating parallax scrolling effects using background-attachment

Fixing the position of elements and using z-index to layer elements

 Local and global variables, and constants

Selection (if, else if, and else)

Repetition (for loops)

Using Console log

Concatenation using template literals

Event listeners

Use of the intersection observer API to animate elements and lazy-load images

Use of the localStorage object to retain user preferences

Writing and calling functions to take advantage of the Document Object Model (DOM)

Use setTimeout() to create time delays

Work with Date() functions

We’ve designed the path to be completed in six one-hour sessions, with one hour per project. However, learners can work at their own speed and the project instructions invite them to take additional time to upgrade their projects if they wish.

Built for our Code Editor and with support in mind

All six projects use our Code Editor, which has been tailored specifically to young people’s needs. This integrated development environment (IDE) helps make learning text-based programming simple, safe, and accessible. The projects include starter code, handy code snippets, and images to help young people build their websites. 

A screenshot of the code editor interface showing a garden with colorful flowers, an umbrella and a watering can.

The path also follows our Digital Making Framework, with its deliberate format of six projects that become less structured as learners progress. The Explore projects at the start of the path are where the initial learning takes place. Learners then develop their new skills by putting them into practice in the Design and Invent projects, which encourage them to use their imagination and make projects that matter to them. 

Meet the projects: Welcome to Antarctica (Explore project 1)

An animated image of a penguin and a seal on a snowy surface.

Learners use HTML and CSS to design a website that lets people discover a place they may never get a chance to visit — Antarctica. They discover how to create a navigation bar (or navbar), set accessible colours and fonts, and add a responsive grid layout to hold beautiful images and interesting facts about this fascinating continent. 

Comic character (Explore project 2)

An animated illustration of a man with short red hair on the left, a woman with short dark hair on the right, and a yellow lightning bolt in the center.

In the second Explore project, young people build an interactive website where the user can design a superhero character. Learners use JavaScript to let the user change the text on their website, show and hide elements, and create a hero image slider. They also learn how to let the user set the colour theme for the site and keep their preferences, even if they reload the page. 

Animated story (Explore project 3)

An animated image of a snail reading a book.

Young people create an interactive story with animated text and characters that are triggered when the user scrolls. They will learn how to design for accessibility and improve browser performance by only loading images when they’re needed.

Pick your favourite (Design project 1)

An animated checklist with numbered boxes. A cursor hovers over the middle box. Various icons surround the checklist, including a video game controller, a guitar, a basketball, and a book.

This is where learners can practise their skills and bring in their own interests to make a fan website, which lets a user make choices that change the webpage content. 

Quiz time (Design project 2)

A white question mark in the center of a purple background. Animated icons of various shapes surround the question mark, including a television, musical notes, an X, and two cards with numbers "12" and “9”.

The final Design project invites young people to build a personalised web app that lets users test what they know about a topic. Learners choose a topic for their quiz, create and animate their questions, and then show the user their final score. They could make a quiz about history, nature, world records, science, sports, fashion, TV, movies… or anything else they’re an expert in!

Share your world (Invent project)

An illustration of a computer screen displaying a web page. The web page has a blue background and a white arrow cursor hovers over a blue section. A globe icon is located below the cursor.

In this final project, young people bring everything they’ve learnt together and use their new coding powers and modern design skills to create an interactive website to share a part of their world with others. They could provide information about their culture, interests, hobbies or expertise, share fun facts, create quizzes, or write reviews. Learners consider what makes a website useful and informative, as well as fun and accessible. 

Next steps in web design

Encourage your young learners to take their next steps in web design, learn JavaScript, and try out this new path of coding projects to create interactive websites that excite and engage users. 

Two young learners using a laptop, one of them points at a laptop screen.

Young people can also enter one of their Design or Invent projects into the Web category of the yearly Coolest Projects showcase by taking a short video showing the project and the code used to make it. Their creation will become part of the Coolest Projects online gallery for people all over the world to see! 

The post Get young people making interactive websites with JavaScript and our ‘More web’ path appeared first on Raspberry Pi Foundation.

New micro:bit coding projects for kids

Post Syndicated from Author original https://www.raspberrypi.org/blog/microbit-coding-projects/

Young people can now learn to code and create with our brand-new path of micro:bit coding projects. The ‘Intro to micro:bit’ path is free and kids can follow it to code projects that focus on wellbeing, including topics like mental health, relaxation, and exercise.

As you might know, a micro:bit (pronounced “microbit”) is a small, programmable device designed for education. You can program it using any computer. It’s easy to use and learn with, and suitable for beginners, especially young people in and out of school.

The theme of the new project path: Wellbeing

Our aim for this new micro:bit project path is to help young people explore how they can create their own tech tools that help them look after themselves and others. By designing the micro:bit coding projects around wellbeing, we want to not only help kids develop programming and digital literacy skills, but also promote open conversations about the important topic of mental health.

Kids coding a microbit project.
Credit: David Bird

The six micro:bit coding projects in our new path all cover different aspects of wellbeing in a fun, creative way:

  1. Good sleep patterns
  2. Relaxation
  3. Self-confidence
  4. Happiness
  5. Health 
  6. Entertainment

We hope that following the path and making projects helps encourage learners to ask questions, share their experiences, and feel like they can ask parents, teachers, or mentors for support, and help support their friends and peers.

What is in the ‘Intro to micro:bit’ project path?

The ‘Intro to micro:bit’ path is designed according to our Digital Making Framework. Its aim is to encourage young people to become independent coders and tech creators as they progress along the projects in a path by gently removing scaffolding.

  • Our project paths begin with three Explore projects, in which learners are guided through tasks that introduce them to new coding skills.
  • Next, learners complete two Design projects. Here, they are encouraged to practise their skills and bring in their own interests to personalise their coding creations.
  • Finally, learners complete one Invent project. This is where they put everything that they have learned together and create something unique that matters to them.

The structure of the path means that learners are led through the development process of a coding project and learn how to turn their ideas into reality. The path structure also supports them with fixing programming errors (debugging), showing them that errors are a normal part of computer programming and just temporary setbacks that they can overcome.

Credit: David Bird

Because community is important for learning, the path also offers young people the chance to share the projects they make with peers around the world.

What coding skills and knowledge will young people learn?

The Explore projects at the start of the path are where the initial learning takes place. Learners then develop their new skills and knowledge by putting them into practice in the Design and Invent projects, where they add in their own ideas and creativity.

The key programming concepts covered in this path are:

  • Variables
  • Using selection (if, else if, and else)
  • Using repetition (for loops)
  • Using randomisation
  • Using functions
Kids coding a microbit project.
Credit: David Bird

There are two versions of the micro:bit (V1 and V2) and learners can use either version to create the micro:bit coding projects in the path, using the micro:bit’s input and output features:

Input features:

  • Buttons
  • Accelerometer
  • Sound sensor/microphone (micro:bit V2 only)
  • Capacitive touch sensor
  • Light sensor

Output features:

  • LED display
  • Speaker
  • Headphones connected via GPIO (micro:bit V1 only)

Explore project 1: Music player

In this Explore project, kids create a music player on the micro:bit to explore how listening to music can improve their mood. While creating their music player, young people get to choose melodies that they enjoy or that make them feel more relaxed. They also add a range of functions such as pausing, skipping, and shuffling tracks.

Explore project 2: Sound level meter

Noise levels can affect people’s well-being, so in this project, kids create a program to use the micro:bit to display how noisy their environment is. They will also learn how to save the noise data the micro:bit measures so they can identify the noisiest times in their day.

Explore project 3: Sleep tracker

Sleep is an important factor that contributes towards well-being. With this third Explore project, kids create a program to track their sleep movements using the micro:bit. This teaches them about variables and about using the micro:bit’s accelerometer, and its LEDs to display data.

Design project 1: How’s your day?

The first Design project of the path gets young people to build a mood checker program using the question ‘How’s your day?’. Kids get creative design control over the mood checker’s outputs according to the user’s replies, including displaying an animation or positive messages, or playing music. Kids can also make use of sensors to measure the various factors in the environment that could be affecting the user’s mood.

In this project, young people apply all of the coding skills and knowledge covered in the Explore projects, including selection, repetition, variables, functions, and randomisation.

Design project 2: Active assistant

In the second Design project, young people create an assistant that helps them get active.The project provides examples, a structure, and brief summaries of what kids have learned to do on the path so far to inspire and motivate them. This mean young people can work independently to produce their own outcomes and the functionality of their assistant is up to each young tech creator.

Invent project: Party game

The final project, Party game, encourages learners to independently replicate their favourite party game for entertainment and relaxation. Learners will combine all of the knowledge and skills they’ve gained throughout the path to make something of their own around the theme of well-being. This is a chance for them to unleash their creativity and reflect on real-life games they enjoy. The outcome will be unique, and fun for them to share with their friends and family.

Key questions answered

Who is this path for?

We have written these micro:bit coding projects with young people around the age of 6 to 13 in mind. Building the projects on the path does not require any previous coding experience, although complete beginners may want to try our free ‘Intro to Scratch’ path first.

What software do learners need to code these projects?

A web browser on a computer. In every project, starter code is provided in the MakeCode online code editor. Learners can either download their project code to a physical micro:bit (recommended) or use the micro:bit simulator in MakeCode.

Kids coding a microbit project.
Credit: David Bird

Young people who live where there isn’t constant internet connectivity can also download the offline version of the MakeCode editor. There are also free micro:bit coding apps for smartphones and tablets.

How long will the path take to complete?

We’ve designed the ‘Intro to micro:bit’ path to be completed in six one-hour sessions, with one hour per project. However, the project instructions invite learners to take additional time to upgrade their projects if they wish.

What can learners do next?

Take part in Coolest Projects

At the end of the micro:bit path, learners are encouraged to register a project they’re making with their new coding skills for Coolest Projects, our annual online technology showcase for young people around the world.

Taking part is free, and beginners as well as more experienced young tech creators are invited. This is their opportunity to share their ingenuity in an online gallery for the world and the Coolest Projects community to celebrate.

The post New micro:bit coding projects for kids appeared first on Raspberry Pi Foundation.