Index

Found 361 pages:

# Page Tags and summary
1 Learn web development Beginner, CSS, HTML, Index, Intro, Landing, Learn, Web
Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with all that they need to start coding websites.
2 Accessibility ARIA, Accessibility, Articles, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module
Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.
3 Assessment: Accessibility troubleshooting Accessibility, Assessment, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, WAI-ARIA
In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
4 CSS and JavaScript accessibility best practices Accessibility, Article, CSS, CodingScripting, Guide, JavaScript, Learn, color, contrast, hiding, unobtrusive
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.
5 Test your skills: CSS and JavaScript accessibility Accessibility, Assessment, Beginner, HTML, JavaScript, Learn, test your skills
This aim of this skill test is to assess whether you've understood our CSS and JavaScript accessibility best practices article.
6 HTML: A good basis for accessibility AT, Accessibility, Article, Beginner, Buttons, CodingScripting, Forms, HTML, Learn, Links, a11y, assistive technology, keyboard, screenreader, semantics
A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
7 Mobile accessibility Accessibility, Article, Beginner, CodingScripting, Learn, Mobile, responsive, screenreader, touch
With web access on mobile devices being so popular and renowned platforms such as iOS and Android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
8 Accessible multimedia Accessibility, Article, Audio, Beginner, CodingScripting, HTML, Images, JavaScript, Learn, Multimedia, Video, captions, subtitles, text tracks
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
9 Test your skills: HTML accessibility Accessibility, Beginner, HTML, Learn, test your skills
This aim of this skill test is to assess whether you've understood our HTML: A good basis for accessibility article.
10 WAI-ARIA basics ARIA, Accessibility, Article, Beginner, CodingScripting, Guide, HTML, JavaScript, Learn, WAI-ARIA, semantics
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
11 Test your skills: WAI-ARIA Accessibility, Assessment, Beginner, Learn, WAI-ARIA, test your skills
This aim of this skill test is to assess whether you've understood our WAI-ARIA basics article.
12 What is accessibility? AT, Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Tools, Users, assistive technology, keyboard, screen reader, screenreader
This article starts the module off with a good look at what accessibility is — this overview includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
13 Common questions CodingScripting, Infrastructure, Learn, Web, WebMechanics
This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.
14 What text editors are available? Beginner, Composing, Guide, Tools, text editor

In this article we highlight some things to think about when installing a text editor for web development.

15 How do you make sure your website works properly? Beginner, Document, Guide, NeedsActiveLearning, Web, Web Development, WebMechanics, troubleshooting

In this article we go over various troubleshooting steps for a website and some basic actions to take in order to solve these issues.

16 What do common web layouts contain? Beginner, CSS, Design, HTML, NeedsActiveLearning

When designing pages for your website, it's good to have an idea of the most common layouts.

17 How can we design for all types of users? Accessibility, Beginner, Design, Example, Intro, Mobile, NeedsActiveLearning

This article provides basic tips to help you design websites for any kind of user.

18 How do you host your website on Google App Engine? Beginner, Google App Engine, Google Cloud Platform, Guide, Host, Learn, Web, publish, website
Google App Engine is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine.
19 How does the Internet work? Beginner, Tutorial, WebMechanics

This article discusses what the Internet is and how it works.

20 How much does it cost to do something on the Web? Beginner, WebMechanics, cost, hosting, web development tools

Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.

21 What HTML features promote accessibility? Accessibility, Beginner, HTML, Learn, NeedsContent
The following content describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
22 What is the difference between webpage, website, web server, and search engine? Beginner, NeedsActiveLearning, WebMechanics

In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!

23 How do you set up a local testing server? Beginner, Express, Flask, Learn, Node, PHP, Python, django, lamp, server-side, servers

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

24 How do I start to design my website? Beginner, Composing, NeedsActiveLearning, needsSchema
This article covers the all-important first step of every project: define what you want to accomplish with it.
25 How do you upload your files to a web server? Beginner, FTP, GitHub, Uploading, WebMechanics, hosting, rsync, sftp

This article shows you how to publish your site online using file transfer tools.

26 How do I use GitHub Pages? Beginner, GitHub, Guide, Web, gh-pages, git, publish
GitHub is a "social coding" site. It allows you to upload code repositories for storage in the Git version control system. You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using Github's gh-pages feature.
27 What are browser developer tools? Beginner, Browser, CSS, CodingScripting, Dev Tools, HTML, JavaScript, Learn

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.

28 What are hyperlinks? Beginner, Infrastructure, Navigation, NeedsActiveLearning

In this article, we'll go over what hyperlinks are and why they matter.

29 What is a Domain Name? Beginner, Domain names, Infrastructure, Intro, NeedsActiveLearning, Web
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
30 What is a URL? Beginner, Infrastructure, URL, resources, urls

This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.

31 What is a web server? Beginner, Infrastructure, needsSchema

In this article, we explain what web servers are, how web servers work, and why they are important.

32 What is accessibility? Accessibility, Beginner, Intro, NeedsActiveLearning, Web

This article introduces the basic concepts behind web accessibility.

33 What software do I need to build a website? Beginner, NeedsActiveLearning, WebMechanics

In this article, we lay out which software components you need when you're editing, uploading, or viewing a website.

34 Learn to style HTML using CSS Beginner, CSS, CodingScripting, Debugging, Landing, Style, Topic, length, specificity
Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
35 CSS building blocks Beginner, CSS, Learn, building blocks
This module carries on where CSS first steps left off — now that you've gained familiarity with the language and its syntax, and got some basic experience using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.
36 A cool-looking box Assessment, Beginner, CSS, Learn, backgrounds, borders, box, box model, effects
In this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
37 Advanced styling effects Article, Beginner, Blend modes, Boxes, CSS, CodingScripting, Filters, Styling, box shadows, effects, shapes
This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
38 Backgrounds and borders Background, Beginner, CSS, Image, Learn, Position, borders, color
In this lesson, we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.
39 Test your skills: The Box Model Beginner, CSS
The aim of this task is to help you check your understanding of the CSS Box Model.
40 Cascade and inheritance Beginner, CSS, Cascade, Inheritance, Learn, rules, source order, specificity
The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.
41 Test your skills: The Cascade Beginner, CSS
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on The Cascade and Inheritance.
42 Creating fancy letterheaded paper Assessment, Background, Beginner, Boxes, CSS, CodingScripting, border, box, letter, letterhead, letterheaded, paper
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look.
43 Debugging CSS Beginner, CSS, DOM, Debugging, DevTools, Learn, source
Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. Perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on.
44 Fundamental CSS comprehension Assessment, Beginner, CSS, CodingScripting, Selectors, Style, Syntax, box model, comments, rules
You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.
45 Handling different text directions Beginner, CSS, Learn, logical properties, writing modes
Many of the properties and values that we have encountered so far in our CSS learning have been tied to the physical dimensions of our screen. We create borders on the top, right, bottom, and left of a box, for example. These physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. English or French) better than right-to-left languages (such as Arabic).
46 Images, media, and form elements Beginner, CSS, Forms, Images, Learn, Media, replaced content
In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
47 Test your skills: Images and Form elements Beginner, CSS
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on Images, Media and Form elements.
48 Organizing your CSS Beginner, CSS, CodingScripting, Learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
49 Test your skills: Overflow Beginner, CSS
The aim of these tasks is to help you check your understanding of overflow in CSS.
50 Overflowing content Beginner, Block Formatting Context, CSS, Data Loss, Learn, overflow
Overflow is what happens when there is too much content to fit in a container. In this guide you will learn what overflow is and how to manage it.
51 CSS selectors Attribute, Beginner, CSS, Class, Learn, Pseudo, Selectors, id
In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.
52 Attribute selectors Attribute, Beginner, CSS, Learn, Selectors
As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors.
53 Combinators CSS, Selectors, combinators
The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
54 Pseudo-classes and pseudo-elements Beginner, CSS, Learn, Pseudo, Pseudo-class, Pseudo-element, Selectors
The next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements. There are a large number of these, and they often serve quite specific purposes. Once you know how to use them, you can look at the list to see if there is something which works for the task you are trying to achieve. Once again the relevant MDN page for each selector is helpful in explaining browser support.
55 Test your skills: Selectors Beginner, CSS
The aim of this task is to help you check your understanding of selectors in CSS.
56 Type, class, and ID selectors Beginner, CSS, Class, Learn, Selectors, id
In this lesson, we examine some of the simplest selectors, which you will probably use most frequently in your work.
57 Sizing items in CSS Beginner, CSS, Intrinsic size, Learn, max size, min size, percentage, sizing, viewport units
In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.
58 Test your skills: sizing Beginner, CSS, Example
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on Sizing items in CSS.
59 Styling tables Article, Beginner, CSS, CodingScripting, Guide, NeedsUpdate, Styling, Tables
Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.
60 Test your skills: tables Beginner, CSS, Example
The aim of this task is to help you check your understanding of the skills you studied in the lesson on styling tables.
61 Test your skills: backgrounds and borders Assessment, Beginner, Learn, Skill test, backgrounds, borders
This aim of this skill test is to get you working with CSS backgrounds and borders using the skills you have learned in the previous lesson.
62 The box model Beginner, CSS, Learn, border, box model, display, margin, padding
Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS Box Model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
63 CSS values and units Beginner, CSS, Function, Image, Learn, Number, Position, color, length, percentage, units, values
Every property used in CSS has a value type defining the set of values that are allowed for that property.  Taking a look at any property page on MDN will help you understand the values associated with a value type that are valid for any particular property. In this lesson we will take a look at some of the most frequently used value types, and their most common values and units.
64 Test your skills: values and units Beginner, CSS, Example
The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on CSS Values and Units.
65 Test your skills: Writing Modes and Logical Properties Beginner, CSS
The aim of this task is to help you check your understanding of Writing Modes and Logical Properties. The things you need to know to complete these tasks are covered in the lesson on Handling different text directions.
66 CSS layout Beginner, CSS, Floating, Grids, Guide, Landing, Layout, Learn, Module, Multiple column, Positioning, alignment, flexbox, float, table
At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.
67 Test your skills: Flexbox Assessment, Beginner, Learn, Skill test, flexbox
The aim of this task is to get you working with Flexbox and demonstrate your understanding of how flex items behave. Below are four common design patterns which you might use Flexbox to create, your task is to build them.
68 Flexbox Article, Beginner, CSS, CSS layouts, CodingScripting, Flexible Boxes, Guide, Layout, Layouts, Learn, flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.
69 Test your skills: floats Beginner, CSS, Example, Floats, Guide, Layout
The aim of this task is to get you working with the CSS float and clear properties covered in our lesson on Floats. You will be working through three small tasks which use different elements of the material you have just covered.
70 Floats Article, Beginner, CSS, Clearing, CodingScripting, Floats, Guide, Layout, columns, multi-column
Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of flexbox and grid it has now returned to its original purpose, as this article explains.
71 Test Your Skills: Fundamental layout comprehension Assessment, Beginner, CSS, Layout, Learn
If you have worked through this module then you will have already covered the basics of what you need to know to do CSS layout today, and to work with older CSS as well. This task will test some of your knowledge by way of developing a simple webpage layout using a variety of techniques.
72 Test your skills: Grid Layout Beginner, CSS, Guide, Learn
The aim of this task is to get you working with CSS Grid Layout, and test that you understand how a grid and grid items behave. You will be working through three small tasks which use different elements of the material you have just covered.
73 Grids Article, Beginner, CSS, CSS Grids, CodingScripting, Grids, Guide, Layout, Learn, Tutorial, grid design, grid framework, grid system
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.
74 Introduction to CSS layout Article, Beginner, CSS, Floats, Grids, Introduction, Layout, Learn, Positioning, Tables, flexbox, flow
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
75 Legacy layout methods Beginner, CSS, Floats, Guide, Layout, Learn, grid system, legacy
Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.
76 Beginner's guide to media queries Beginner, CSS, Layout, Learn, media query
The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.
77 Test your skills: Multicol CSS, Example, Guide
The aim of this task is to get you working with the CSS column-countcolumn-width, column-gapcolumn-span and column-rule  properties and values covered in our lesson on Multiple-column Layout. You will be working through three small tasks which use different elements of the material you have just covered.
78 Multiple-column layout Beginner, CSS, Guide, Layout, Learn, Learning, Multi-col, Multiple columns
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.
79 Normal Flow Beginner, CSS, Layout, Learn, float, grid, normal flow
This article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
80 Test your skills: position CSS, Example, Guide
The aim of this task is to get you working with the CSS position property and values covered in our lesson on Position. You will be working through two small tasks which use different elements of the material you have just covered.
81 Positioning Article, Beginner, CSS, CodingScripting, Guide, Layout, Positioning, absolute, fixed, relative
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
82 Practical positioning examples Article, Beginner, CSS, CodingScripting, Guide, Layout, Learn, absolute, fixed, relative
This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
83 Responsive design Images, Media Queries, RWD, Responsive web design, flexbox, fluid grids, grid, multicol, typography
In the early days of web design, pages were built to target a particular screen size. If the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. As more diverse screen sizes became available, the concept of responsive web design (RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it.
84 Test your skills: Media Queries and Responsive Design Beginner, CSS, Guide
This aim of this task is to get you working with responsive web design with a practical task. Everything you need to know to complete this task was covered in the guide to Media Queries, and the other layout lessons in this section.
85 Supporting older browsers Beginner, CSS, Guide, Layout, Learn, feature queries, flexbox, float, grid, legacy
In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.
86 CSS first steps Beginner, CSS, Landing, Learn, Module, first steps
CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.
87 Getting started with CSS Beginner, CSS, Classes, Elements, Example, Learn, Selectors, Syntax, state
In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.
88 How CSS is structured Beginner, CSS, HTML, Learn, Selectors, Structure, comments, properties, shorthand, values, whitespace
Now that you are beginning to understand the purpose and use of CSS, let's examine the structure of CSS.
89 How CSS works Beginner, CSS, DOM, Learn
We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.
90 Using your new knowledge Beginner, CSS, Learn, Playground
With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This assessment gives you a chance to do that.
91 What is CSS? Beginner, CSS, Introduction to CSS, Learn, Modules, Specifications, Syntax
CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.
92 Use CSS to solve common problems Beginner, CSS, Learn
This page rounds up questions and answers, and other material on the MDN site that can help you to solve common CSS problems.
93 How to add a shadow to an element Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to add a shadow to any box on your page.
94 How to add a shadow to text Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to add a shadow to any text on your page.
95 How to center an item Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to center an item inside another element, both horizontally and vertically.
96 create fancy boxes Beginner, CSS, CodingScripting, Learn
CSS boxes are the building blocks of any web page styled with CSS. Making them nice looking is both fun and challenging. It's fun because it's all about turning a design idea into working code; it's challenging because of the constraints of CSS. Let's do some fancy boxes.
97 CSS FAQ CSS, Example, FAQ, Guide, Web, questions
In this article, you'll find some frequently-asked questions (FAQs) about CSS, along with answers that may help you on your quest to become a web developer.
98 How to fill a box with an image without distorting it Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can learn a technique for causing an HTML image to completely fill a box.
99 Using CSS generated content Basic, Beginner, CSS, CSS:Getting_Started, Graphics, Guide, NeedsUpdate, Web
This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images.
100 How to highlight the first line of a paragraph Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you will find out how to highlight the first line of text in a paragraph, even if you don't know how long that line will be.
101 How to highlight the first paragraph Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to highlight the first paragraph inside a container.
102 How to highlight a paragraph that comes after a heading Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to highlight a paragraph that comes directly after a heading.
103 How to make a box semi-transparent Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
This guide will help you to understand the ways to make a box semi-transparent using CSS.
104 How to fade a button on hover Basic, Beginner, CSS, CSS:Getting_Started, Guide, Web
In this guide you can find out how to do a gentle fade between two colors when hovering over a button.
105 Styling text Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts
With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
106 Fundamental text and font styling Article, Beginner, CSS, Guide, Style, Text, alignment, family, font, shorthand, spacing, weight
In this article we'll start you on your journey towards mastering text styling with CSS. Here we'll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
107 Styling links Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
108 Styling lists Article, Beginner, CSS, Guide, Styling, Text, bullets, lists
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
109 Typesetting a community school homepage Assessment, Beginner, CSS, CodingScripting, Link, Styling text, font, list, web font
In this assessment we'll test your understanding of all the text styling techniques we've covered throughout this module by getting you to style the text for a community school's homepage. You might just have some fun along the way.
110 Web fonts @font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, font-family, web fonts
In the first article of the module, we explored the basic CSS features available for styling fonts and text. In this article we will go further, exploring web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
111 Web forms — Working with user data Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web
This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.
112 Advanced form styling Advanced, CSS, Example, Forms, Guide, HTML, Web
In this article, we will see what can be done with CSS to style the types of form control that are more difficult to style — the "bad" and "ugly" categories.
113 Basic native form controls Beginner, Controls, Example, Forms, Guide, HTML, Input, Web, Widgets
In the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices. Next we will look at the functionality of the different form controls, or widgets, in detail — studying all the different options available to collect different types of data. In this particular article we will look at the original set of form controls, available in all browsers since the early days of the web.
114 Client-side form validation Beginner, Example, Forms, Guide, HTML, JavaScript, Learn, Web, regex
Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. This article leads you through basic concepts and examples of client-side form validation.
115 How to build custom form controls Advanced, Example, Forms, Guide, HTML, Web
There are some cases where the available native HTML form controls may seem like they are not enough. For example, if you need to perform advanced styling on some controls such as the select element or if you want to provide custom behaviors, you may consider building your own controls.
116 Example 1 Forms, Guide, HTML
This is the first example of code that explains how to build a custom form widget.
117 Example 2 Forms, HTML
This is the second example that explain how to build custom form widgets.
118 Example 3 Forms, HTML
This is the third example that explain how to build custom form widgets.
119 Example 4 Advanced, Example, Forms, Guide, HTML, Web
This is the fourth example that explain how to build custom form widgets.
120 Example 5 Forms, HTML
This is the last example that explain how to build custom form widgets.
121 How to structure a web form Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Structure, Web
With the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
122 Example Beginner, CSS, Example, Guide, HTML, Intro, Reference
This the example for a basic payment form for the article How to structure an HTML form.
123 HTML forms in legacy browsers Example, Forms, Guide, HTML, Intermediate, Web
To understand common patterns, it helps to read browser documentation. If you are reading this on MDN, you are at the right place to start. Just check the support of the elements (or DOM interface) you want to use. MDN has compatibility tables available for most elements, properties and APIs that can be used in a web page. There are other resources that can be amazingly helpful:
124 The HTML5 input types Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
In the previous article we looked at the input element, covering the original values of the type attribute available since the early days of HTML. Now we'll look at the functionality of newer form controls in detail, including some new input types, which were added in HTML5 to allow collection of specific types of data.
125 Other form controls Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
We now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the output element (which we saw in action in the previous article), and progress bars.
126 CSS property compatibility table for form controls Advanced, CSS, Forms, Guide, HTML, Junk, NeedsUpdate, Web
The following compatibility tables try to summarize the state of CSS support for HTML forms. Due to the complexity of CSS and HTML forms, these tables can't be considered a perfect reference. However, they will give you good insight into what can and can't be done, which will help you learn how to do things.
127 Sending form data Beginner, CodingScripting, Files, Forms, Guide, HTML, HTTP, Headers, Security, Web
Once the form data has been validated on the client-side, it is okay to submit the form. And, since we covered validation in the previous article, we're ready to submit! This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
128 Sending forms through JavaScript Advanced, Example, Forms, Forms Guide, Guide, HTML, HTML forms, JavaScript, Learn, Security, Web, Web Forms
HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript, for example via XMLHttpRequest. This article explores such approaches.
129 Styling web forms Beginner, CSS, Example, Forms, Guide, HTML, Learn, Web
In the previous few articles we looked at all the HTML you'll need to create and structure your web forms. In this article we will move on to looking at how to use CSS to style your form controls. This has historically been difficult — form controls vary greatly in how easy they are to customize with CSS — but it is getting easier as old browsers are retired and modern browsers give us more features to use.
130 Test your skills: Advanced styling Assessment, Beginner, Forms, Learn, Pseudo-classes, Styling, test your skills
This aim of this skill test is to assess whether you've understood our Advanced form styling and UI pseudo-classes articles.
131 Test your skills: Basic controls Assessment, Beginner, Forms, Learn, basic controls, test your skills
This aim of this skill test is to assess whether you've understood our Basic native form controls article.
132 Test your skills: Form structure Beginner, Forms, HTML, Learn, Structure
This aim of this skill test is to assess whether you've understood our How to structure a web form article.
133 Test your skills: Form validation Assessment, Beginner, Forms, Learn, Validation, test your skills
The aim of this skill test is to assess whether you've understood our Client-side form validation article.
134 Test your skills: HTML5 controls Assessment, Beginner, Forms, HTML5, Learn, test your skills
This aim of this skill test is to assess whether you've understood our The HTML5 input types article.
135 Test your skills: Other controls Assessment, Beginner, Forms, Learn, Select, datalist, test your skills, textarea
This aim of this skill test is to assess whether you've understood our Other form controls article.
136 Test your skills: Styling basics Assessment, Beginner, CSS, Forms, Learn, Styling, test your skills
This aim of this skill test is to assess whether you've understood our Styling web forms article.
137 UI pseudo-classes Beginner, CSS, Example, Forms, Guide, HTML, Pseudo-classes, Styling, Web
In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.
138 Your first form Beginner, CSS, CodingScripting, Example, Forms, Guide, HTML, Learn, Web
The first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML form controls and other HTML elements, adding some very simple styling via CSS, and describing how data is sent to a server. We'll expand on each of these subtopics in more detail later on in the module.
139 Example Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web
This is the example code for the article Your first HTML form.
140 Front-end web developer Beginner, CSS, Front-end, HTML, JavaScript, Learn, Tools, Web Standards
Welcome to our front-end web developer learning pathway!
141 Getting started with the Web Beginner, CSS, Design, Guide, HTML, Index, l10n:priority, publishing, theory

Getting started with the Web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.

142 CSS basics Beginner, CSS, CodingScripting, Learn, Styling, Web, l10n:priority

CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?

143 Dealing with files Beginner, CodingScripting, Files, Guide, HTML, l10n:priority, theory, website

A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server. Dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website.

144 How the Web works Beginner, Client, DNS, HTTP, IP, Infrastructure, Learn, Server, TCP, l10n:priority

How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.

145 HTML basics Beginner, CodingScripting, Doctype html, HTML, Learn, Web, l10n:priority

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

146 Installing basic software Beginner, Browser, Learn, Setup, Tools, WebMechanics, l10n:priority, text editor

In Installing basic software, we show you what tools you need to do simple web development and how to install them properly.

147 JavaScript basics Beginner, CodingScripting, JavaScript, Learn, Web, l10n:priority

JavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.

148 Publishing your website Beginner, CodingScripting, FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server

Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.

149 The web and web standards Beginner, Front-end, Learn, Web, Web Standards
This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
150 What will your website look like? Assets, Beginner, Composing, Content, Deprecated, Design, Fonts, Learn, Simple, l10n:priority, step by step

What will your website look like? discusses the planning and design work you have to do for your website before writing code, including "What information does my website offer?", "What fonts and colors do I want?", and "What does my site do?"

151 Structuring the web with HTML Beginner, Guide, HTML, Intro, Learn, Topic
To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
152 HTML Cheatsheet Beginner, Draft, Guide, HTML
While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.
153 Use HTML to solve common problems CodingScripting, HTML
The following links point to solutions to common everyday problems you'll need to solve with HTML.
154 Add a hitmap on top of an image Graphics, Guide, HTML, Intermediate, Navigation

Here we go over how to set up an image map, and some downsides to consider first.

155 Tips for authoring fast-loading HTML pages Advanced, Guide, HTML, NeedsUpdate, Performance, Web, Web Performance
These tips are based on common knowledge and experimentation.
156 Define terms with HTML Beginner, Guide, HTML, Learn

HTML provides several ways to convey description semantics,  whether inline or as structured glossaries. In this article, we'll cover how to properly mark up keywords when you're defining them.

157 Using data attributes Custom Data Attributes, Example, Guide, HTML, HTML5, Web
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().
158 Use JavaScript within a webpage Beginner, HTML, JavaScript, OpenPractices

Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.

159 Introduction to HTML CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics
At its heart, HTML is a fairly simple language made up of Element, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.
160 Advanced text formatting Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic
There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
161 Creating hyperlinks Beginner, CodingScripting, Guide, HTML, HTTP, Learn, Links, Title, absolute, href, hyperlinks, relative, urls
Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.
162 Debugging HTML Beginner, CodingScripting, Debugging, Error, Guide, HTML, Validation, validator
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML.
163 Document and website structure Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics
In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.
164 Getting started with HTML Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace
In this article we cover the absolute basics of HTML. To get you started, this article defines elements, attributes, and all the other important terms you may have heard. It also explains where these fit into HTML. You will learn how HTML elements are structured, how a typical HTML page is structured, and other important basic language features. Along the way, there will be an opportunity to play with HTML too!
165 HTML text fundamentals Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics
One of HTML's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. This article explains the way HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
166 Marking up a letter Assessment, Beginner, CodingScripting, HTML, Links, Text, head
We all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills. In this assignment, you'll have a letter to mark up as a test for your HTML text formatting skills, as well as hyperlinks and proper use of the HTML <head> element.
167 Structuring a page of content Assessment, Beginner, CodingScripting, Design, HTML, Layout, Learn, Structure, semantics
Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
168 Test your skills: Advanced HTML text Beginner, HTML, Learn, advanced text, test your skills
The aim of this skill test is to assess whether you've understood our Advanced text formatting article.
169 Test your skills: HTML text basics Beginner, HTML, Learn, Text, test your skills
The aim of this skill test is to assess whether you've understood our HTML text fundamentals article.
170 Test your skills: Links Beginner, HTML, Learn, Links, test your skills
The aim of this skill test is to assess whether you've understood our Creating hyperlinks article.
171 What’s in the head? Metadata in HTML Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata
The Head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page title, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.) In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
172 Multimedia and Embedding Assessment, Audio, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Images, Landing, Learn, Multimedia, SVG, Vector Graphics, Video, Web, iframes, imagemaps, img, responsive
We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
173 Adding vector graphics to the Web Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img

Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.

174 Images in HTML Article, Beginner, Guide, HTML, Image, JPEG, PNG, alt text, captions, figcaption, figure, img, scr
In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble img element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using figure, and detailing how it relates to CSS background images.
175 Test your skills: HTML images Beginner, HTML, Images, Learn, test your skills
The aim of this skill test is to assess whether you've understood our Images in HTML article.
176 Mozilla splash page Assessment, Beginner, CodingScripting, Embedding, HTML, Images, JPEG, Multimedia, PNG, Video, iframe, img, picture, responsive, sizes, src, srcset
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!
177 From object to iframe — other embedding technologies Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe
By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the iframeembed and object elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology that is on the way out, but which you'll still see semi-regularly.
178 Responsive images Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, JPEG, PNG, Pictures, captions, hyperlinks, img, picture, sizes, src, srcset
In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices. Responsive images are just one part of responsive design, a future CSS topic for you to learn.
179 Video and audio content Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track
Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the video and audio elements; we'll then finish off by looking at how to add captions/subtitles to your videos.
180 Test your skills: Multimedia and embedding Beginner, Embedding, HTML, Learn, Multimedia, test your skills
The aim of this skill test is to assess whether you've understood our Video and audio content and From object to iframe — other embedding technologies articles.
181 HTML Tables <td>, <th>, <tr>, Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables
A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.
182 HTML table advanced features and accessibility Accessibility, Advanced, Article, Beginner, CodingScripting, HTML, Headers, Learn, caption, nesting, scope, summary, table, tbody, tfoot, thead
In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
183 HTML table basics Article, Beginner, CodingScripting, HTML, Learn, Tables, basics, cell, col, colgroup, colspan, header, row, rowspan
This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
184 Assessment: Structuring planet data Assessment, Beginner, CodingScripting, HTML, Learn, Tables
In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
185 JavaScript — Dynamic client-side scripting Beginner, CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority
JavaScript is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.
186 Asynchronous JavaScript Beginner, CodingScripting, Guide, JavaScript, Landing, Promises, async, asynchronous, await, callbacks, requestAnimationFrame, setInterval, setTimeout
In this module we take a look at asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
187 Making asynchronous programming easier with async and await Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, await
More recent additions to the JavaScript language are async functions and the await keyword, part of the so-called ECMAScript 2017 JavaScript edition (see ECMAScript Next support in Mozilla). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know.
188 Choosing the right approach Beginner, Intervals, JavaScript, Learn, Optimize, Promises, async, asynchronous, await, requestAnimationFrame, setInterval, setTimeout, timeouts
To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.
189 General asynchronous programming concepts JavaScript, Learn, Promises, Threads, asynchronous, blocking
In this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.
190 Introducing asynchronous JavaScript Beginner, CodingScripting, Guide, Introducing, JavaScript, Learn, Promises, async, asynchronous, await, callbacks
In this article we briefly recap the problems associated with synchronous JavaScript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
191 Graceful asynchronous programming with Promises Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, catch, finally, then
Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after a previous action has completed, or respond to its failure. This is useful for setting up a sequence of async operations to work correctly. This article shows you how promises work, how you'll see them in use with web APIs, and how to write your own.
192 Cooperative asynchronous JavaScript: Timeouts and intervals Animation, Beginner, CodingScripting, Guide, Intervals, JavaScript, Loops, asynchronous, requestAnimationFrame, setInterval, setTimeout, timeouts
This tutorial looks at the traditional methods JavaScript has available for running code asynchronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), discusses what they are useful for, and considers their inherent issues.
193 JavaScript building blocks Article, Assessment, Beginner, CodingScripting, Conditionals, Functions, Guide, Introduction, JavaScript, Landing, Loops, Module, events, l10n:priority
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
194 Build your own function Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Tutorial, build, invoke, l10n:priority, parameters
With most of the essential theory dealt with in the previous article, this article provides practical experience. Here you will get some practice building your own, custom function. Along the way, we'll also explain some useful details of dealing with functions.
195 Making decisions in your code — conditionals Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary
In any programming language, the code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article, we'll explore how so-called conditional statements work in JavaScript.
196 Introduction to events Article, Beginner, CodingScripting, Event Handler, Guide, JavaScript, Learn, events, l10n:priority
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box. In this article, we discuss some important concepts surrounding events, and look at how they work in browsers. This won't be an exhaustive study; just what you need to know at this stage.
197 Functions — reusable blocks of code API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters
Another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters.
198 Image gallery Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events, l10n:priority
Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.
199 Looping code Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs.
200 Function return values Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Return, Return values, l10n:priority
There's one last essential concept about functions for us to discuss — return values. Some functions don't return a significant value, but others do. It's important to understand what their values are, how to use them in your code, and how to make functions return useful values. We'll cover all of these below.
201 Test your skills: Conditionals Beginner, Conditionals, JavaScript, Learn
The aim of this skill test is to assess whether you've understood our Making decisions in your code — conditionals article.
202 Test your skills: Events Beginner, JavaScript, Learn, events, test your skills
This aim of this skill test is to assess whether you've understood our Introduction to events article.
203 Test your skills: Functions Beginner, Functions, JavaScript, Learn, test your skills
This aim of this skill test is to assess whether you've understood our Functions — reusable blocks of code, Build your own function, and Function return values articles.
204 Test your skills: Loops Beginner, JavaScript, Learn, Loops
This aim of this skill test is to assess whether you've understood our Looping code article.
205 Client-side web APIs API, Articles, Beginner, CodingScripting, DOM, Graphics, JavaScript, Landing, Learn, Media, Module, WebAPI, data
When writing client-side JavaScript for web sites or applications, you will quickly encounter Application Programming Interfaces (APIs). APIs are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating data from other web sites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 
206 Client-side storage API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage
Modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. This article explains the very basics of how these work.
207 Drawing graphics API, Article, Beginner, Canvas, CodingScripting, Graphics, JavaScript, Learn, WebGL
The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML canvas elements, (see The Canvas API and WebGL). This article provides an introduction to canvas, and further resources to allow you to learn more.
208 Fetching data from the server API, Article, Beginner, CodingScripting, Fetch, JSON, JavaScript, Learn, Promises, Server, XHR, XML, XMLHttpRequest, data, request
Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as XMLHttpRequest and the Fetch API.
209 Introduction to web APIs 3rd party, API, Article, Beginner, Browser, CodingScripting, Learn, Object, WebAPI, client-side
First up, we'll start by looking at APIs from a high level — what are they, how do they work, how to use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.
210 Manipulating documents API, Article, Beginner, CodingScripting, DOM, Document, Document Object Model, JavaScript, Learn, Navigator, WebAPI, Window
When writing web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the Document object. In this article we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.
211 Third-party APIs 3rd party, API, Beginner, CodingScripting, Google Maps, Learn, NYTimes, Third party, youtube
The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.
212 Video and Audio APIs API, Article, Audio, Beginner, CodingScripting, Guide, JavaScript, Learn, Video
HTML5 comes with elements for embedding rich media in documents — video and audio — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
213 JavaScript First Steps Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays.
214 A first splash into JavaScript Article, Beginner, CodingScripting, Conditionals, Functions, JavaScript, Learn, Objects, Operators, Variables, events, l10n:priority
Now you've learned something about the theory of JavaScript and what you can do with it, we are going to give you an idea of what the process of creating a simple JavaScript program is like, by guiding you through a practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.
215 Arrays Arrays, Article, Beginner, CodingScripting, JavaScript, Join, Learn, Pop, Push, l10n:priority, shift, split, unshift
In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.
216 Basic math in JavaScript — numbers and operators Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo
At this point in the course we discuss math in JavaScript — how we can use Operator and other features to successfully manipulate numbers to do our bidding.
217 Silly story generator Arrays, Assessment, Beginner, CodingScripting, JavaScript, Learn, Numbers, Operators, Variables, l10n:priority, strings
In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!
218 Handling text — strings in JavaScript Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings
Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together.
219 Test your skills: Arrays Arrays, Beginner, JavaScript, Learn, test your skills
This aim of this skill test is to assess whether you've understood our Arrays article.
220 Test your skills: Math Beginner, JavaScript, Learn, Math, test your skills
This aim of this skill test is to assess whether you've understood our Basic math in JavaScript — numbers and operators article.
221 Test your skills: Strings Beginner, JavaScript, Learn, strings, test your skills
This aim of this skill test is to assess whether you've understood our Handling text — strings in JavaScript and Useful string methods articles.
222 Test your skills: variables Beginner, JavaScript, Learn, Text your skills, Variables
This aim of this skill test is to assess whether you've understood our Storing the information you need — Variables article.
223 Useful string methods Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper
Now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
224 Storing the information you need — Variables Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings
After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.
225 What is JavaScript? 3rd party, API, Article, Beginner, Browser, CodingScripting, Core, JavaScript, Learn, Script, comments, external, inline, l10n:priority, what
Welcome to the MDN beginner's JavaScript course! In this article we will look at JavaScript from a high level, answering questions such as "What is it?" and "What can you do with it?", and making sure you are comfortable with JavaScript's purpose.
226 What went wrong? Troubleshooting JavaScript Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority
When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some tips on how to find and fix errors in JavaScript programs.
227 Solve common problems in your JavaScript code Beginner, JavaScript, Learn
The following links point to solutions to common problems you may encounter when writing JavaScript.
228 Introducing JavaScript objects Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial
In JavaScript, most things are objects, from core JavaScript features like arrays to the browser API built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages and act as handy data containers. The object-based nature of JavaScript is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, then look at how to create your own objects.
229 Adding features to our bouncing balls demo Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority
In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.
230 JavaScript object basics API, Article, Beginner, CodingScripting, JavaScript, Learn, Object, Syntax, bracket notation, dot notation, instance, l10n:priority, object literal, theory, this
In this article, we'll look at fundamental JavaScript object syntax, and revisit some JavaScript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
231 Inheritance in JavaScript Article, Beginner, CodingScripting, Constructor, Function, Getter, Inheritance, JavaScript, Learn, OOJS, OOP, Object, Object member, Prototype, extends, l10n:priority, setter
With most of the gory details of OOJS now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. In addition, we present some advice on when and where you might use OOJS, and look at how classes are dealt with in modern ECMAScript syntax.
232 Working with JSON Article, Beginner, CodingScripting, Guide, JSON, JSON API, JSON Arrays, JSON parsing, JSON structure, JavaScript, Learn, Objects, Tutorial, l10n:priority
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.
233 Object building practice Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority
In previous articles we looked at all the essential JavaScript object theory and syntax details, giving you a solid base to start from. In this article we dive into a practical exercise, giving you some more practice in building custom JavaScript objects, with a fun and colorful result.
234 Object prototypes Article, Beginner, CodingScripting, Constructor, JavaScript, Learn, OOJS, OOP, Object, Prototype, Prototype Chaining, create(), l10n:priority
Prototypes are the mechanism by which JavaScript objects inherit features from one another. In this article, we explain how prototype chains work and look at how the prototype property can be used to add methods to existing constructors.
235 Object-oriented JavaScript for beginners Article, Beginner, CodingScripting, Constructor, Create, JavaScript, Learn, OOJS, OOP, Object, Object-Oriented, instance, l10n:priority
With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) — this article presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances.
236 Test your skills: JSON Beginner, Example, JSON, JavaScript
This aim of this skill test is to assess whether you've understood our Working with JSON article.
237 Test your skills: Object basics Beginner, JavaScript, Learn, Objects, test your skills
This aim of this skill test is to assess whether you've understood our JavaScript object basics article.
238 Test your skills: Object-oriented JavaScript Beginner, JavaScript, Learn, OOJS, Objects, test your skills
The aim of this skill test is to assess whether you've understood our Object-oriented JavaScript for beginners, Object prototypes, and Inheritance in JavaScript articles.
239 Learning and getting help Beginner, Learn, Learning, Web Development, getting help
It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
240 Web performance CSS, HTML, HTTP, JavaScript, Learn, Performance, Web Performance
Building websites requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of good user experience is ensuring the content is quick to load and responsive to user interaction. This is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites.
241 The business case for web performance Web Development, Web Performance
We've discussed the importance of web performance.  You've learned what you need to do to optimize for web performance. But how do you convince your clients and/or management to prioritize and invest in performance? In this section, we discuss creating a clear business case to convince decision-makers to make the investment. 
242 CSS performance optimization CSS, Performance, Reference, Tutorial
CSS is render blocking
243 HTML performance features HTML, Learning, Web Performance
HTML is by default fast and accessible. It is our job, as developers, to ensure that we preserve these two properties when creating or editing HTML code. Complications can occur when, for example, the file size of a video embed is too large, or when a webpage is not optimized for mobile devices. This module intends to walk you through the key HTML performance features that can drastically improve the quality of your webpage.
244 JavaScript performance Images, Media, Performance, Video, Web Performance
This article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing JavaScript for web performance.
245 Measuring performance API, Beginner, Guide, Tools, Web
To provide information about web performance metrics that you can collect through various web performance APIs and tools that you can use to visualize that data.
246 Multimedia: Images Images, Media, Performance, Video, Web Performance
This article looks at optimizing image and video to improve web performance.
247 Perceived performance Perceived Performance, Web Performance
Perceived performance is a subjective measure of website performance, responsiveness, and reliability. In other words, how fast a website seems to the user.
248 Multimedia: video Images, Media, Performance, Video, Web Performance
This article looks at optimizing video to improve web performance.
249 Web performance resources Best practices, Website performance
There are many reasons why your website should perform as well as possible.
Below is a quick review of best practices, tools, APIs with links to provide more information about each topic.
250 What is web performance? Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance
Web performance is all about making web sites fast, including making slow processes seem fast. Does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? Are scrolling and animations smooth? This article provides a brief introduction to objective, measurable web performance*, looking at what technologies, techniques, and tools are involved in web optimization.
251 The "why" of web performance Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance
Web performance — and its associated best practices—are vital for your website visitors to have a good experience. In a sense, web performance can be considered a subset of web accessibility. With performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed.
252 Learning area release notes Learn, Release Notes
This page details significant changes made to the learning area. Check back here if you want to know what new content is available, and what existing content has been improved.
253 Server-side website programming Beginner, CodingScripting, Intro, Landing, Learn, Server, Server-side programming, Topic
The Dynamic Websites  Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.
254 Apache Configuration: .htaccess 301 redirect, Cache control, Custom Error pages, HTACCESS, Permanent Redirect, Redirect
Apache .htaccess files allow users to configure directories of the web server they control without modifying the main configuration file.
255 Properly configuring server MIME types Apache, HTTP, MIME Types, nginx, server-side
MIME types describe the media type of content, either in email, or served by web servers or web applications. They are intended to help provide a hint as to how the content should be processed and displayed.
256 Django Web Framework (Python) Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django
Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.
257 Django Tutorial Part 4: Django admin site Article, Beginner, CodingScripting, Learn, Python, Tutorial, django, django_admin, server-side
Now that we've created models for the LocalLibrary website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end of the article we will show some of the ways you can further improve the presentation of the Admin site.
258 Django Tutorial Part 8: User authentication and permissions Article, Authentication, Beginner, Forms, Learn, Permissions, Python, Server, Tutorial, django, django authentication, server-side, sessions
In this tutorial, we'll show you how to allow users to log in to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their permissions. As part of this demonstration, we'll extend the LocalLibrary website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.
259 Django Tutorial Part 11: Deploying Django to production Beginner, CodingScripting, Deployment, Django deployment, django, web server
Now you've created (and tested) an awesome LocalLibrary website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.
260 Setting up a Django development environment Beginner, Development environment, Installing, Intro, Learn, Python, django
Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.
261 Assessment: DIY Django mini blog Assessment, Beginner, CodingScripting, Learn, Server-side programming, blog, django, server-side
In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog.
262 Django Tutorial Part 9: Working with forms Beginner, CodingScripting, Django Forms, Forms, HTML forms, Learn, Tutorial, django, server side
In this tutorial, we'll show you how to work with HTML Forms in Django, and, in particular, the easiest way to write forms to create, update, and delete model instances. As part of this demonstration, we'll extend the LocalLibrary website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).
263 Django Tutorial Part 6: Generic list and detail views Beginner, Learn, Tutorial, django, django templates, django views
This tutorial extends our LocalLibrary website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.
264 Django Tutorial Part 5: Creating our home page Article, Beginner, CodingScripting, Learn, Tutorial, django, django templates, django views, server-side
We're now ready to add the code that displays our first complete page — a home page for the LocalLibrary website. The home page will show the number of records we have for each model type and provide sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.
265 Django introduction Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django
In this first Django article, we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some of the advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application (although at this point you won't yet have a development environment in which to test it).
266 Django Tutorial Part 3: Using models Article, Beginner, CodingScripting, Learn, Model, Tutorial, data, django, server-side
This article shows how to define models for the LocalLibrary website. It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.
267 Django Tutorial Part 7: Sessions framework Article, Beginner, CodingScripting, Learn, Python, Server, Tutorial, django, django sessions, server-side, sessions
This tutorial extends our LocalLibrary website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behavior for anonymous users in your own sites.
268 Django Tutorial Part 2: Creating a skeleton website Article, Beginner, CodingScripting, Guide, Intro, Learn, Tutorial, django, server-side
This second article in our Django Tutorial shows how you can create a "skeleton" website project as a basis, which you can then populate with site-specific settings, paths, models, views, and templates.
269 Django Tutorial Part 10: Testing a Django web application Beginner, CodingScripting, Django Testing, Testing, Tutorial, django, server-side, tests, unit tests
As websites grow they become harder to test manually. Not only is there more to test, but, as interactions between components become more complex, a small change in one area can impact other areas, so more changes will be required to ensure everything keeps working and errors are not introduced as more changes are made. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate unit testing of your website using Django's test framework.
270 Django Tutorial: The Local Library website Article, Beginner, CodingScripting, Guide, Learn, Tutorial, django, server-side
The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.
271 Django web application security Article, Beginner, CodingScripting, Learn, Python, Security, Server-side programming, Web security, django, server-side
Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article Web security — this article provides a practical demonstration of how Django's in-built protections handle such threats.
272 Express web framework (Node.js/JavaScript) Beginner, CodingScripting, Express, Express.js, Intro, JavaScript, Learn, Node, Server-side programming, node.js
Express is a popular unopinionated web framework, written in JavaScript and hosted within the Node.js runtime environment. This module explains some of the key benefits of the framework, how to set up your development environment and how to perform common web development and deployment tasks.
273 Express Tutorial Part 7: Deploying to production Beginner, CodingScripting, Deployment, Express, Learn, Node, heroku, server-side
Now you've created (and tested) an awesome LocalLibrary website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.
274 Setting up a Node development environment Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, nodejs, npm, server-side
Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and macOS. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.
275 Express Tutorial Part 5: Displaying library data Beginner, Controller, Express, Learn, Template, View, nodejs, pug
We're now ready to add the pages that display the LocalLibrary website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database, and using templates.
276 Author detail page Express, Node, displaying data, part 5, server-side
The author detail page needs to display the information about the specified Author, identified using their (automatically generated) _id field value, along with a list of all the Book objects associated with that Author.
277 Author list page and Genre list page challenge Express, Node, displaying data, server-side
The author list page needs to display a list of all authors in the database, with each author name linked to its associated author detail page. The date of birth and date of death should be listed after the name on the same line.
278 Book detail page Express, Node, displaying data, part 5, server-side
The Book detail page needs to display the information for a specific Book (identified using its automatically generated _id field value), along with information about each associated copy in the library (BookInstance). Wherever we display an author, genre, or book instance, these should be linked to the associated detail page for that item.
279 Book list page Express, Node, displaying data, part 5, server-side
Next we'll implement our book list page. This page needs to display a list of all books in the database along with their author, with each book title being a hyperlink to its associated book detail page.
280 BookInstance detail page and challenge Express, Node, displaying data, part 5, server-side
The BookInstance detail page needs to display the information for each BookInstance, identified using its (automatically generated) _id field value. This will include the Book name (as a link to the Book detail page) along with other information in the record.
281 BookInstance list page Express, Node, displaying data, part 5, server-side
Next we'll implement our list of all book copies (BookInstance) in the library. This page needs to include the title of the Book associated with each BookInstance (linked to its detail page) along with other information in the BookInstance model, including the status, imprint, and unique id of each copy. The unique id text should be linked to the BookInstance detail page.
282 Date formatting using luxon Express, Node, displaying data, part 5, server-side
The default rendering of dates from our models is very ugly: Tue Oct 06 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time). In this section we'll show how you can update the BookInstance List page from the previous section to present the due_date field in a more friendly format: Oct 6th, 2020. 
283 Asynchronous flow control using async Express, Node, displaying data, part 5, server-side
The controller code for some of our LocalLibrary pages will depend on the results of multiple asynchronous requests, which may be required to run either in some particular order or in parallel. In order to manage flow control, and render pages when we have all the required information available, we'll use the popular node async module.
284 Genre detail page Express, Node, displaying data, part 5, server-side
The genre detail page needs to display the information for a particular genre instance, using its automatically generated _id field value as the identifier. The page should display the genre name and a list of all books in the genre with links to each book's details page.
285 Home page Development, Express, Express Server, Node, displaying data, nodejs, part 5, server-side
The first page we'll create will be the website home page, which is accessible from either the site ('/') or catalog (catalog/) root. This will display some static text describing the site, along with dynamically calculated "counts" of different record types in the database.
286 LocalLibrary base template Express, Node, displaying data, part 5, server-side
Now that we understand how to extend templates using Pug, let's start by creating a base template for the project. This will have a sidebar with links for the pages we hope to create across the tutorial articles (e.g. to display and create books, genres, authors, etc.) and a main content area that we'll override in each of our individual pages.
287 Template primer Express, Node, displaying data, part 5, server-side
A template is a text file defining the structure or layout of an output file, with placeholders used to represent where data will be inserted when the template is rendered (in Express, templates are referred to as views).
288 Express Tutorial Part 6: Working with forms Beginner, CodingScripting, Express, Forms, HTML forms, Learn, Node, server-side
In this tutorial we'll show you how to work with HTML Forms in Express using Pug. In particular, we'll discuss how to write forms to create, update, and delete documents from the site's database.
289 Create Author form Express, Forms, Node, part 6, server-side
This subarticle shows how to define a page for creating Author objects.
290 Create Book form Express, Forms, Node, part 6, server-side
This subarticle shows how to define a page/form to create Book objects. This is a little more complicated than the equivalent Author or Genre pages because we need to get and display available Author and Genre records in our Book form.
291 Create BookInstance form Express, Forms, Node, part 6, server-side
This subarticle shows how to define a page/form to create BookInstance objects. This is very much like the form we used to create Book objects.
292 Create genre form Express, Forms, Node, part 6, server-side
This sub article shows how we define our page to create Genre objects (this is a good place to start because the Genre has only one field, its name, and no dependencies). Like any other pages, we need to set up routes, controllers, and views.
293 Delete Author form Express, Forms, Node, server-side
This subarticle shows how to define a page to delete Author objects.
294 Update Book form Express, Forms, Node, part 6, server-side
This final subarticle shows how to define a page to update Book objects. Form handling when updating a book is much like that for creating a book, except that you must populate the form in the GET route with values from the database.
295 Express/Node introduction Beginner, CodingScripting, Express, Learn, Node, nodejs, server-side
In this first Express article we answer the questions "What is Node?" and "What is Express?", and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).
296 Express Tutorial Part 3: Using a Database (with Mongoose) Beginner, CodingScripting, Database, Express, Learn, Node, ODM, mongoose, nodejs, orm, server-side
This article briefly introduces databases, and how to use them with Node/Express apps. It then goes on to show how we can use Mongoose to provide database access for the LocalLibrary website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways in which you can access model data.
297 Express Tutorial Part 4: Routes and controllers Beginner, CodingScripting, Express, Express routes, Learn, Routes, nodejs, server-side
In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the LocalLibrary website. On completion we'll have a modular structure for our route handling code, which we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express!
298 Express Tutorial Part 2: Creating a skeleton website Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, npm, server-side
This second article in our Express Tutorial shows how you can create a "skeleton" website project which you can then go on to populate with site-specific routes, templates/views, and database calls.
299 Express Tutorial: The Local Library website Beginner, CodingScripting, Express, Intro, Learn, Node, Tutorial, nodejs, server-side
The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.
300 Server-side website programming first steps Beginner, CodingScripting, Guide, Intro, Landing, Learn, Server-side programming
we answer a few fundamental questions about server-side programming such as "What is it?", "How does it differ from client-side programming?", and "Why is it so useful?".
301 Client-Server Overview Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming
Now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing most of your own code.
302 Introduction to the server side Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming
Welcome to the MDN beginner's server-side programming course! In this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". After reading this article you'll understand the additional power available to websites through server-side coding.
303 Server-side web frameworks Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming, Web frameworks
The previous article showed you what the communication between web clients and servers looks like, the nature of HTTP requests and responses, and what a server-side web application needs to do in order to respond to requests from a web browser. With this knowledge under our belt, it's time to explore how web frameworks can simplify these tasks, and give you an idea of how you'd choose a framework for your first server-side web application.
304 Website security Beginner, CodingScripting, Guide, Intro, Learn, Security, Server-side programming, Web security, Website Security
Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand where threats come from, and what you can do to harden your web application against the most common attacks.
305 Node.js server without a framework JavaScript, NeedsContent, Node, Server, no framework
This article provides a simple static file server built with pure Node.js without the use of a framework.
306 Tools and testing Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Testing, Tools, Topic, cross browser, user testing
Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.
307 Understanding client-side JavaScript frameworks Beginner, Frameworks, JavaScript, Learn, client-side
JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks.
308 Building Angular applications and further resources Angular, Beginner, Building, Frameworks, JavaScript, Learn, Resources, client-side
This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.
309 Filtering our to-do items Angular, Beginner, Filtering, Frameworks, JavaScript, Learn, client-side
Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.
310 Getting started with Angular Angular, Beginner, Frameworks, Installation, JavaScript, Learn, client-side
It is now time to look at Google's Angular framework, another popular option that you'll come across often. In this article we look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture.
311 Creating an item component Angular, Beginner, Components, Data, Events, Frameworks, JavaScript, Learn, client-side
Components provide a way for you to organize your application. This article walks you through creating a component to handle the individual items in the list, and adding check, edit, and delete functionality. the Angular event model is covered here.
312 Styling our Angular app Angular, Beginner, Frameworks, JavaScript, Learn, Styling, client-side
Now that we've got our basic application structure set up and started displaying something useful, let's switch gears and spend an article looking at how Angular handles styling of applications.
313 Beginning our Angular todo list app Angular, Beginner, Components, Frameworks, JavaScript, Learn, Structure, client-side
At this point, we are ready to start creating our to-do list application using Angular. The finished application will display a list of to-do items and includes editing, deleting, and adding features. In this article you will get to know your application structure, and work up to displaying a basic list of to-do items.
314 Ember Interactivity: Footer functionality, conditional rendering Beginner, Ember, Frameworks, JavaScript, Learn, client-side, conditional rendering
Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
315 Getting started with Ember Beginner, Ember, Frameworks, JavaScript, Learn, client-side
In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
316 Ember interactivity: Events, classes and state Beginner, Classes, Ember, Frameworks, JavaScript, Learn, Services, client-side, decorators, events
At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
317 Ember resources and troubleshooting Beginner, Ember, Frameworks, JavaScript, Learn, client-side, resources
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
318 Routing in Ember Beginner, Ember, Frameworks, JavaScript, Learn, Routing, client-side
In this article we learn about routing, or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
319 Ember app structure and componentization Beginner, Components, Ember, Frameworks, JavaScript, Learn, client-side
In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
320 Introduction to client-side frameworks Beginner, Frameworks, JavaScript, Learn, client-side
We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
321 Framework main features Beginner, Frameworks, JavaScript, Learn, client-side, features
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
322 Accessibility in React Accessibility, Beginner, Frameworks, JavaScript, Learn, React, client-side, focus management, keyboard
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
323 Componentizing our React app Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article we will show you a sensible way to break our app up into components.
324 Getting started with React Beginner, Frameworks, JavaScript, Learn, React, client-side, jsx, props
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app — learning a bit about how React works in the process.
325 React interactivity: Events and state Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed.
326 React interactivity: Editing, filtering, conditional rendering Beginner, Frameworks, JavaScript, Learn, React, client-side, conditional rendering, filtering
As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
327 React resources Beginner, JavaScript, Learn, React, client-side, framework, resources
Our final article provides you with a list of React resources that you can use to go further in your learning.
328 Beginning our React todo list App, Beginner, Frameworks, JavaScript, Learn, React, Style, client-side
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
329 Componentizing our Svelte app Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, conditional rendering, passing data
In the last article we started developing our Todo list app. The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.
330 Deployment and next steps Beginner, Deployment, Frameworks, JavaScript, Learn, Svelte, client-side, resources
In the previous article we learned about Svelte's TypeScript support, and how to use it to make your application more robust. In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.
331 Getting started with Svelte Beginner, Frameworks, JavaScript, Learn, Svelte, client-side
In this article we'll provide a quick introduction to the Svelte framework. We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to setup our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.
332 Advanced Svelte: Reactivity, lifecycle, accessibility Accessibility, Beginner, Components, Frameworks, JavaScript, Learn, Lifecycle, Svelte, client-side, reactivity
In the last article we added more features to our To-Do list and started to organize our app into components. In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.
333 Working with Svelte stores Beginner, Frameworks, JavaScript, Learn, Stores, Svelte, client-side
In the last article we completed the development of our app, finished organizing it into components, and discussed some advanced techniques for dealing with reactivity, working with DOM nodes, and exposing component functionality. In this article we will show another way to handle state management in Svelte — Stores. Stores are global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change.
334 Starting our Svelte Todo list app Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, state
Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a todo list. In this article we will first have a look at the desired functionality of our app, then we'll create a Todos.svelte component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in subsequent articles.
335 TypeScript support in Svelte Beginner, Frameworks, JavaScript, Learn, Svelte, Typescript, client-side
In the last article we learned about Svelte stores and even implemented our own custom store to persist the app's information to Web Storage. We also had a look at using the transition directive to implement animations on DOM elements in Svelte.
336 Dynamic behavior in Svelte: working with variables and props Beginner, Frameworks, JavaScript, Learn, Svelte, Variables, client-side, props
Now that we have our markup and styles ready we can start developing the required features for our Svelte To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.
337 Using Vue computed properties Beginner, Frameworks, JavaScript, Learn, client-side, computed properties, vue
In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods, but only re-run when one of their dependencies changes.
338 Vue conditional rendering: editing existing todos Beginner, Frameworks, JavaScript, Learn, client-side, conditional rendering, v-else, v-if, vue
Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
339 Creating our first Vue component Beginner, Components, Frameworks, JavaScript, Learn, client-side, props, state, vue
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.
340 Getting started with Vue Beginner, Frameworks, Installation, JavaScript, Learn, client-side, vue
Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
341 Adding a new todo form: Vue events, methods, and models Beginner, Forms, Frameworks, JavaScript, Learn, Methods, client-side, events, models, vue
We now have sample data in place, and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
342 Focus management with Vue refs Beginner, Frameworks, JavaScript, Learn, client-side, focus management, refs, vue
We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
343 Rendering a list of Vue components Beginner, Frameworks, JavaScript, Learn, client-side, lists, v-for, vue
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
344 Vue resources Beginner, JavaScript, Learn
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
345 Styling Vue components with CSS Beginner, CSS, Frameworks, JavaScript, Learn, Styling, client-side, vue
The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.
346 Cross browser testing Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser
This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
347 Handling common accessibility problems Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Testing, Tools, cross browser, keyboard
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
348 Introduction to automated testing Article, Automation, Beginner, CodingScripting, Learn, Sauce Labs, Testing, Tools, Web Stack, cross browser
Manually running tests on several browsers and devices, several times per day, can get tedious, and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and how to use the basics of commercial browser test automation apps such as LambdaTest, Sauce Labs, BrowserStack, and TestingBot.
349 Implementing feature detection Article, Beginner, CSS, CodingScripting, JavaScript, Learn, Modernizr, Testing, Tools, cross browser, feature detection
Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
350 Handling common HTML and CSS problems Article, Beginner, CSS, CodingScripting, HTML, Learn, Selectors, Testing, cross browser, linting
With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handling CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
351 Introduction to cross browser testing Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser
This article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
352 Handling common JavaScript problems Article, Beginner, CodingScripting, JavaScript, Learn, Libraries, Testing, cross browser, feature detection, linting, polyfills
Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using Polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
353 Strategies for carrying out testing Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine
In this article we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
354 Setting up your own test automation environment Article, Automation, Beginner, Browser, CodingScripting, Learn, Testing, Tools, cross browser, selenium
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the previous article.
355 Git and GitHub Beginner, GitHub, Learn, Web, git
All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without the danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.
356 Understanding client-side web development tools Beginner, CSS, Deployment, HTML, JavaScript, Learn, Tools, Transformation, client-side, linting
Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.
357 Command line crash course Beginner, CLI, Command Line, Learn, Terminal, Tools, client-side, npm
In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
358 Deploying our app Beginner, Deployment, GitHub, Learn, Netlify, Testing, Toolchain, Tools, case study
In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
359 Introducing a complete toolchain Beginner, Complete toolchain, Development environment, Learn, Tools, Transformation, case study
In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
360 Client-side tooling overview Beginner, Introduction, Learn, Tools, client-side
In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
361 Package management basics Beginner, Learn, Tools, dependency, npm, package manager, package repository, yarn
In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.