Connexion
HostDeal helps agencies run unlimited websites with domains, backups, SSL, email, storage, and dev tools.
The post Get HostDeal for $119.97 and Give Every New Website Somewhere to Go appeared first on TechRepublic.
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.
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.
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. Young people will explore what JavaScript makes possible in web development, 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 preferencesWriting and calling functions to take advantage of the Document Object Model (DOM) Use setTimeout() to create time delaysWork 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.
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.
The path 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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
Today, we have two exciting updates to share: support for web page projects with HTML/CSS, and an improved mobile and tablet experience.
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
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.
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.
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.
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.
The Editor now includes:
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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:
Lateo.net - Flux RSS en pagaille (pour en ajouter : @ moi) 
<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 webpageSemantic 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.
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.
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.
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.
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.)
Creators will learn how to use HTML and CSS to build webpages that have:
They will also learn about how to make their webpages accessible to all through use of:
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.
Young people only need a standard web browser to follow the project instructions and use an online code editor to create their webpages.
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.
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.
The post Get kids creating webpages with HTML and CSS appeared first on Raspberry Pi.
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.
