
Explore the basics of web development from html skeleton and css styling to javascript logic, and understand how browsers and web servers exchange requests and deliver pages.
Learn how to install a web development editor, set up essential extensions for JavaScript and HTML, and create a simple website project from setup to code.
Learn the basics of HTML structure, including opening and closing tags, head and body, and how browsers render a simple webpage.
Learn how to link external scripts and styles, set encoding, description, and keywords, and implement viewport and responsive design to boost search visibility and accessibility.
Learn to structure HTML using headings and paragraphs, add external links, and format text with bold and italics, while managing line breaks and tag closures.
This live demo teaches html links and images, using anchor tags with href and target _blank, and image tags with src and alt, including unsplash image sources and sizing.
Demonstrate building and differentiating HTML lists, including ordered and unordered lists, with nesting and dynamic ordering in a live demo. Use headings and simple tables to organize content.
Build and structure forms in HTML by adding inputs, textareas, checkboxes, and a submit button, while configuring name attributes and a form action for data submission.
Navigate advanced HTML techniques by comparing inline blocks and blocks, crafting paragraphs and spans, and applying a border with a stylesheet to create and preview a template output.
Learn how IDs and classes work in HTML, why IDs must be unique, how classes can be reused, and apply CSS styling such as borders and colors.
Explore advanced html techniques, including using multiple classes across elements, inserting html entities such as non-breaking spaces and the copyright symbol, and practical copy‑and‑paste coding tips for clean markup.
Learn the HTML skeleton and basic CSS styling, including inline, internal, and external styles. Link stylesheets, adjust color and background, and understand how styling sources interact.
Explore CSS fundamentals by using element, class, and id selectors, and learn how to group selections and apply properties such as color and layout to styled pages.
Learn CSS basics: element, id, and class selectors; apply styles to single or grouped elements, and use developer tools to test colors and understand permanent versus temporary changes.
Explore css typography basics, including font-family stacks, font size, font weight, and color, with live examples and a boilerplate to preview changes on a web page.
Discover how to use web fonts by importing external font files, selecting fonts from sources like Google Fonts, and embedding the provided links into your css to preview typography choices.
Learn to use colors in CSS with color names, hex values, and RGB, and see live updates through a color picker and style changes.
Learn to style web elements with CSS by adjusting borders, colors, heights, widths, and border radii, then apply background images and precise positioning to create polished layouts.
Master the CSS box model, including padding, borders, margins, and box-sizing, through hands-on styling and practical debugging using inspect element.
Build a grocery store mockup to learn the CSS box model, borders, and floating layouts. Practice adjusting margins, text alignment, and container sizing to control layout and alignment.
Learn CSS basics in this tutorial, focusing on selectors and pseudo selectors for visited and active states, styling buttons and links with borders, backgrounds, colors, and alignment.
Learn to build a navigation bar with CSS by creating a boilerplate, styling the menu, removing bullets, handling overflow, and adjusting padding, alignment, and borders.
Explore JavaScript, a client-side scripting language that brings websites to life by adding logic, enabling dynamic actions, form submissions, and browser-based interactions while staying within the browser and memory-safe.
Learn core JavaScript basics, including writing and logging to the console, integrating with templates and Bootstrap, and building a responsive navigation bar with a hamburger menu.
Explore JavaScript basics by declaring variables, using unary and binary operators, and logging results to the console with hands-on examples of numbers and strings.
Explore JavaScript basics, including variables, strings, quotes, escaping, and console debugging, and learn to calculate string length and use simple string methods.
Explore JavaScript strings and string functions, including indexOf, slice, substring, replace, and the concatenated function, plus toUpperCase, toLowerCase, and handling of spaces.
Discover core JavaScript concepts, from string functions and variables to if statements and switch cases, including const and let scope, with hands-on demos and form validation tips.
Discover JavaScript basics by exploring primitive data types, arrays, and objects, manipulating mixed data, accessing properties, and using sort, length, push, and iteration.
Explore JavaScript functions by defining and calling functions, passing parameters, using default arguments, and understanding return values and console logging.
Explore JavaScript interactions by implementing alert boxes, prompts, and confirm dialogs, and practice user input, delete confirmations, default values, and console logging to enhance web page behavior.
Learn the Basics of Web Development
On this course from the Raspberry Pi Foundation, you’ll first build a website using HTML, style it with CSS, and then make it interactive using JavaScript.
Along the way you’ll learn about the box model, which describes how websites are laid out by browsers, and about the Document Object Model, which your JavaScript code will interact with to dynamically change your web pages.
Syllabus of Course:-
Welcome to the course
Build a website using HTML
Web architecture
Write your first HTML pages
Debugging HTML
Style websites using CSS
Styling your webpages
Cascading Style Sheets
Classes and ids
CSS layouts
Make websites interactive with JavaScript
Interactive webpages
The Document Object Model
Finishing your quiz
Your own interactive website
You will be able to design and create a quiz web page and demonstrate your new skills by making your own website.
Produce a HTML web page using suitable tags and attributes
Explain the advantages of CSS compared to inline styling
Apply classes and ids to style a website
Model web pages using the box model
Demonstrate how to use the Document Object Model (DOM) to access an element of a web page
Produce an interactive website using JavaScript
Who is the course for?
This course is designed for teachers delivering lessons at a GCSE level or equivalent, and for beginner programmers looking to start using HTML and JavaScript.
To take this course, you need to be familiar with basic programming structures such as loops and if statements, but you don’t need any experience of HTML, CSS or JavaScript.