Tag Archives: web development

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.

Code Editor update: Support for HTML and mobile devices 

Post Syndicated from Mel Farrington original https://www.raspberrypi.org/blog/html-code-editor/

Earlier this year, we launched our Code Editor, a free online tool to help make learning text-based programming simple and accessible for kids age 9 and up. We focus on supporting the needs of young people who are learning programming at school, in Code Clubs and CoderDojos, and at home.

A young coder using the Code Editor.

Today, we have two exciting updates to share: support for web page projects with HTML/CSS, and an improved mobile and tablet experience.

What’s the Code Editor?

Learners can use the Code Editor to write and run code in a web browser without installing any additional software. The Editor is currently available as a beta version, and we’ve already received really positive comments: 

“The Editor looks really nice! I have tried the Python part, and it is intuitive and concise. My little program worked no problem, and I am sure the Editor will be easy, intuitive, and quick to learn for the young [learners].”

— Volunteer in the CoderDojo community

Introducing HTML and CCS in the Code Editor 

The Code Editor now supports the HTML and CSS web development languages, giving young people the ability to create and preview their own websites directly in the Editor interface. Learners can have their code and the preview panel side by side, and they can also preview their websites in a separate, larger tab.

A web project in the Code Editor.

We have embedded the Editor in our ‘Introduction to web‘ path on the Projects site. The path contains six HTML and CSS projects for beginners and helps them create fun websites like the ones shown here.

We want the Code Editor to be safe, age-appropriate, and suitable for use in classrooms or coding clubs. With this in mind, we have excluded certain functions, like being able to add links to external websites in the code. Rather than enabling image uploads, we provide a library of images when projects in our free learning paths contain images, in order to support multimedia projects safely.

A web project in the Code Editor.

Whether users are coding in Python or HTML/CSS, the Editor offers accessibility options so you can easily switch settings between light and dark mode, and between small, medium, and large text size. The text size feature is useful for people with visual impairments, as well as for educators who want to demonstrate something to a group of learners.

Improved experience for mobile and tablet devices

Our Code Editor now offers a new and improved experience for users of mobile and tablet devices. This improves access for learners in classrooms where tablets are used, and in low- and middle-income countries, where mobile phones are commonly used for digital learning.

A web project in the Code Editor.

The Editor now includes: 

  • A clearer and simpler navigation for small-screen devices
  • Separate Menu, Code and Output/Preview tabs
  • The same features on mobile/tablet devices as on desktop of laptop computers, such as responsive panels and the option to open HTML/CSS projects in a new tab

Try the Code Editor today

We’re continuing to develop the Code Editor and have more improvements planned. If you would like to try it out and provide us with your feedback, we’d love to hear what you think of our latest updates. 

Code Editor developments have been made possible with generous support from Endless and the Cisco Foundation.

The post Code Editor update: Support for HTML and mobile devices  appeared first on Raspberry Pi Foundation.

Kids’ coding languages

Post Syndicated from Marc Scott original https://www.raspberrypi.org/blog/kids-coding-languages/

Programming is becoming an increasingly useful skill in today’s society. As we continue to rely more and more on software and digital technology, knowing how to code is also more and more valuable. That’s why many parents are looking for ways to introduce their children to programming. You might find it difficult to know where to begin, with so many different kids’ coding languages and platforms available. In this blog post, we explore how children can progress through different programming languages to realise their potential as proficient coders and creators of digital technology.

Two kids share their Scratch coding project on a laptop.

ScratchJr

Everyone needs to start somewhere, and one great option for children aged 5–7 is ScratchJr (Scratch Junior), a visual programming language with drag-and-drop blocks for creating simple programs. ScratchJr is available for free on Android and iOS mobile devices. It’s great for introducing young children to the basics of programming, and they can use it to create interactive stories and games.

Scratch

Moving on from ScratchJr, there’s its web-based sibling Scratch. Scratch offers drag-and-drop blocks for creating programs and comes with an assortment of graphics, sounds, and music for your child to bring their programs to life. This visual programming language is designed specifically for children to learn programming fundamentals. Scratch is available in multiple spoken languages and is perfect for beginners. It allows kids to create interactive stories, animations, and games with ease.

The Raspberry Pi Foundation has a wealth of free Scratch resources we have created specifically for young people who are beginners, such as the ‘Introduction to Scratch’ project path. And if your child is interested in physical computing to interact with the real world using code, they can also learn how to use electronic components, such as buzzers and LEDs, with Scratch and a Raspberry Pi computer.  

Young person using a laptop to code in Scratch, our favourite of all kids' coding languages.

MakeCode

Another fun option for children who want to explore coding and physical computing is the micro:bit. This is a small programmable device with an LED display, buttons, and sensors, and it can be used to create games, animations, interactive projects, and lots more. To control a micro:bit, a visual programming language called MakeCode can be used. The micro:bit can also be programmed using Scratch or text-based languages such as Python, offering an easy transition for children as their coding skills progress. Have a look at our free collection of micro:bit resources to learn more.

HTML

Everyone is familiar with websites, but fewer people know how they are coded. HTML is a markup language that is used to create the webpages we use every day. It’s a great language for children to learn because they can see the results of their code in real time, in their web browser. They can use HTML and CSS to create simple webpages that include links, videos, pictures, and interactive elements, all the while learning how websites are structured and designed. We have many free web design resources for your child, including a basic ‘Introduction to web development’ project path.

Three kids coding at laptops.

Python 

If your child is becoming confident with Scratch and HTML, then using Python is the recommended next stage in their learning. Python is a high-level text-based programming language that is easy to read and learn. It is a popular choice for beginners as it has a simple syntax that often reads like plain English. Many free Python projects for young people are available on our website, including the ‘Introduction to Python’ path.

A kid coding in Python on a laptop.

The Python community is also really welcoming and has produced a myriad of online tutorials and videos to help learners explore this language. Python can be used to do some very powerful things with ease, which is why it is so popular. For example, it is relatively simple to create Python programs to engage in machine learning and data analysis. If you wanted to explore large language models such as GPT, on which the ChatGPT chatbot is based, then Python would be the language of choice.

JavaScript 

JavaScript is the language of the web, and if your child has become proficient in HTML, then this is the next language for them. JavaScript is used to create interactive websites and web applications. As young people become more comfortable with programming, JavaScript is a useful language to progress to, given how ubiquitous the web is today. It can be tricky to learn, but like Python, it has a vast number of libraries of functions that people have already created for it to achieve things more quickly. These libraries make JavaScript a very powerful language to use.

Try out kids’ coding languages

There are many different programming languages, and each one has its own strengths and weaknesses. Some are easy to learn and use, some are really fast, and some are very secure.

Two kids coding together on Code Club World.

Starting with visual languages such as Scratch or MakeCode allows your child to begin to understand the basic concepts of programming without needing any developed reading and keyboard skills. Once their understanding and skills have improved, they can try out text-based languages, find the one that they are comfortable with, and then continue to learn. It’s fairly common for people who are proficient in one programming language to learn other languages quite quickly, so don’t worry about which programming language your child starts with.

Whether your child is interested in working in software development or just wants to learn a valuable — and creative — skill, helping them learn to code and try out different kids’ coding languages is a great way for you to open up new opportunities for them.

The post Kids’ coding languages appeared first on Raspberry Pi Foundation.

Get kids creating webpages with HTML and CSS

Post Syndicated from Rik Cross original https://www.raspberrypi.org/blog/learning-html-and-css/

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.

Try web development with Digital Making at Home

Post Syndicated from Kevin Johnson original https://www.raspberrypi.org/blog/web-development-digital-making-at-home/

Join us for Digital Making at Home: this week, young people can find out how to create web pages with us! Through Digital Making at Home, we invite kids all over the world to code and make along with us and our new videos every week.

So get ready to contribute to the World Wide Web:

Let’s create web pages this week! Watch our video to get coding now.

And tune in on Wednesday 2pm BST / 9am EDT / 7.30pm IST at rpf.io/home to code along with our live stream session and ask us all your question about the World Wide Web, the internet, and web development.

The post Try web development with Digital Making at Home appeared first on Raspberry Pi.