Index - Learn web development 编辑

Found 348 pages:

#	Page	Tags and summary
1	Learn web development	Beginner, CSS, HTML, Index, Intro, Landing, Learn, Web
1	Learn web development	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
2	Accessibility	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
3	Assessment: Accessibility troubleshooting	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
4	CSS and JavaScript accessibility best practices	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, JaavScript, Learn, test your skills
5	Test your skills: CSS and JavaScript accessibility	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
6	HTML: A good basis for accessibility	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
7	Mobile accessibility	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
8	Accessible multimedia	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
9	Test your skills: HTML accessibility	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
10	WAI-ARIA basics	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
11	Test your skills: WAI-ARIA	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, screan reader, screenreader
12	What is accessibility?	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
13	Common questions	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
14	What text editors are available?	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
15	How do you make sure your website works properly?	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
16	What do common web layouts contain?	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
17	How can we design for all types of users?	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
18	How do you host your website on Google App Engine?	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
19	How does the Internet work?	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
20	How much does it cost to do something on the Web?	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
21	What HTML features promote accessibility?	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
22		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
23	How do you set up a local testing server?	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
24	How do I start to design my website?	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
25	How do you upload your files to a web server?	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
26	How do I use GitHub Pages?	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
27	What are browser developer tools?	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
28	What are hyperlinks?	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
29	What is a Domain Name?	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, NeedsActiveLearning, URL, resources, urls
30	What is a URL?	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
31	What is a web server?	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
32	What is accessibility?	This article introduces the basic concepts behind web accessibility.
33	What software do I need to build a website?	Beginner, NeedsActiveLearning, WebMechanics
33	What software do I need to build a website?	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
34	Learn to style HTML using CSS	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
35	CSS 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
36	A cool-looking box	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
37	Advanced styling effects	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
38	Backgrounds and borders	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	Cascade and inheritance	Beginner, CSS, Cascade, Inheritance, Learn, rules, source order, specificity
39	Cascade and inheritance	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.
40	Test your skills: The Cascade	Beginner, CSS
40	Test your skills: The Cascade	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.
41	Creating fancy letterheaded paper	Assessment, Background, Beginner, Boxes, CSS, CodingScripting, border, box, letter, letterhead, letterheaded, paper
41	Creating fancy 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.
42	Debugging CSS	Beginner, CSS, DOM, Debugging, DevTools, Learn, source
42	Debugging CSS	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.
43	Fundamental CSS comprehension	Assessment, Beginner, CSS, CodingScripting, Selectors, Style, Syntax, box model, comments, rules
43	Fundamental CSS comprehension	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.
44	Handling different text directions	Beginner, CSS, Learn, logical properties, writing modes
44	Handling different text directions	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).
45	Images, media, and form elements	Beginner, CSS, Forms, Images, Learn, Media, replaced content
45	Images, media, and form elements	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.
46	Test your skills: Images and Form elements	Beginner, CSS
46	Test your skills: Images and Form elements	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.
47	Organizing your CSS	Beginner, CSS, CodingScripting, Learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide
47	Organizing your CSS	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.
48	Test your skills: Overflow	Beginner, CSS
48	Test your skills: Overflow	The aim of these tasks is to help you check your understanding of overflow in CSS.
49	Overflowing content	Beginner, Block Formatting Context, CSS, Data Loss, Learn, overflow
49	Overflowing content	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.
50	CSS selectors	Attribute, Beginner, CSS, Class, Learn, Pseudo, Selectors, id
50	CSS selectors	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.
51	Attribute selectors	Attribute, Beginner, CSS, Learn, Selectors
51	Attribute 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.
52	Test your skills: The Box Model	Beginner, CSS
52	Test your skills: The Box Model	The aim of this task is to help you check your understanding of the CSS Box Model.
53	Combinators	CSS, Selectors, combinators
53	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
54	Pseudo-classes and pseudo-elements	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
55	Test your skills: Selectors	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
56	Type, class, and ID selectors	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
57	Sizing items in CSS	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
58	Test your skills: sizing	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
59	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
60	Test your skills: tables	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
61	Test your skills: backgrounds and 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
62	The box model	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
63	CSS values and units	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
64	Test your skills: values and units	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
65	Test your skills: Writing Modes and Logical Properties	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
66	CSS layout	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
67	Test your skills: 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
68	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
69	Test your skills: floats	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
70	Floats	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
71	Test Your Skills: Fundamental layout comprehension	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
72	Test your skills: Grid Layout	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
73	Grids	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
74	Introduction to CSS layout	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
75	Legacy layout methods	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
76	Beginner's guide to media queries	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
77	Test your skills: Multicol	The aim of this task is to get you working with the CSS `column-count`, `column-width`, `column-gap`, `column-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
78	Multiple-column layout	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
79	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
80	Test your skills: position	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
81	Positioning	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
82	Practical positioning examples	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
83	Responsive design	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
84	Test your skills: Media Queries and Responsive Design	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
85	Supporting older browsers	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
86	CSS 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
87	Getting started with CSS	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
88	How CSS is structured	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
89	How CSS works	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
90	Using your new knowledge	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
91	What is CSS?	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
92	Use CSS to solve common problems	The following links provide solutions to common problems you may face when working with CSS.
93	create fancy boxes	Beginner, CSS, CodingScripting, Learn
93	create fancy boxes	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 annoying constraints and crazy freedom in the use of CSS. Let's do some fancy boxes.
94	CSS FAQ	CSS, Example, FAQ, Guide, Web, questions
94	CSS FAQ	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.
95	Using CSS generated content	Basic, Beginner, CSS, CSS:Getting_Started, Graphics, Guide, NeedsUpdate, Web
95	Using CSS generated content	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.
96	Styling text	Beginner, CSS, CodingScripting, Fonts, Landing, Links, Module, Text, font, letter, line, lists, shadow, web fonts
96	Styling text	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.
97	Fundamental text and font styling	Article, Beginner, CSS, Guide, Style, Text, alignment, family, font, shorthand, spacing, weight
97	Fundamental text and font styling	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.
98	Styling links	Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs
98	Styling links	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.
99	Styling lists	Article, Beginner, CSS, Guide, Styling, Text, bullets, lists
99	Styling 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.
100	Typesetting a community school homepage	Assessment, Beginner, CSS, CodingScripting, Link, Styling text, font, list, web font
100	Typesetting a community school homepage	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.
101	Web fonts	@font-face, Article, Beginner, CSS, CSS Fonts, Fonts, Guide, Learn, Web Development, Web Fonts Article, Web fonts documentation, font-family, web fonts
101	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.
102	Web forms — Working with user data	Beginner, Featured, Forms, Guide, HTML, Landing, Learn, Web
102	Web forms — Working with user data	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.
103	Advanced form styling	Advanced, CSS, Example, Forms, Guide, HTML, Web
103	Advanced form styling	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.
104	Basic native form controls	Beginner, Controls, Example, Forms, Guide, HTML, Input, Web, Widgets
104	Basic native form controls	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.
105	Client-side form validation	Beginner, Example, Forms, Guide, HTML, JavaScript, Learn, Web, regex
105	Client-side form validation	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.
106	How to build custom form controls	Advanced, Example, Forms, Guide, HTML, Web
106	How to build custom form controls	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.
107	Example 1	Forms, Guide, HTML
107	Example 1	This is the first example of code that explains how to build a custom form widget.
108	Example 2	Forms, HTML
108	Example 2	This is the second example that explain how to build custom form widgets.
109	Example 3	Forms, HTML
109	Example 3	This is the third example that explain how to build custom form widgets.
110	Example 4	Advanced, Example, Forms, Guide, HTML, Web
110	Example 4	This is the fourth example that explain how to build custom form widgets.
111	Example 5	Forms, HTML
111	Example 5	This is the last example that explain how to build custom form widgets.
112	How to structure a web form	Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Structure, Web
112	How to structure a web form	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.
113	Example	Beginner, CSS, Example, Guide, HTML, Intro, Reference
113	Example	This the example for a basic payment form for the article How to structure an HTML form.
114	HTML forms in legacy browsers	Example, Forms, Guide, HTML, Intermediate, Web
114	HTML forms in legacy browsers	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:
115	The HTML5 input types	Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
115	The HTML5 input types	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.
116	Other form controls	Beginner, Controls, Example, Forms, Guide, HTML, Web, Widgets
116	Other form controls	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.
117	CSS property compatibility table for form controls	Advanced, CSS, Forms, Guide, HTML, Junk, NeedsUpdate, Web
117	CSS property compatibility table for form controls	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.
118	Sending form data	Beginner, CodingScripting, Files, Forms, Guide, HTML, HTTP, Headers, Security, Web
118	Sending form data	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.
119	Sending forms through JavaScript	Advanced, Example, Forms, Forms Guide, Guide, HTML, HTML forms, JavaScript, Learn, Security, Web, Web Forms
119	Sending forms through JavaScript	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.
120	Styling web forms	Beginner, CSS, Example, Forms, Guide, HTML, Learn, Web
120	Styling web forms	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.
121	Test your skills: Advanced styling	Assessment, Beginner, Forms, Learn, Pseudo-classes, Styling, test your skills
121	Test your skills: Advanced styling	This aim of this skill test is to assess whether you've understood our Advanced form styling and UI pseudo-classes articles.
122	Test your skills: Basic controls	Assessment, Beginner, Forms, Learn, basic controls, test your skills
122	Test your skills: Basic controls	This aim of this skill test is to assess whether you've understood our Basic native form controls article.
123	Test your skills: Form structure	Beginner, Forms, HTML, Learn, Structure
123	Test your skills: Form structure	This aim of this skill test is to assess whether you've understood our How to structure a web form article.
124	Test your skills: Form validation	Assessment, Beginner, Forms, Learn, Validation, test your skills
124	Test your skills: Form validation	This aim of this skill test is to assess whether you've understood our Client-side form validation article.
125	Test your skills: HTML5 controls	Assessment, Beginner, Forms, HTML5, Learn, test your skills
125	Test your skills: HTML5 controls	This aim of this skill test is to assess whether you've understood our The HTML5 input types article.
126	Test your skills: Other controls	Assessment, Beginner, Forms, Learn, Select, datalist, test your skills, textarea
126	Test your skills: Other controls	This aim of this skill test is to assess whether you've understood our Other form controls article.
127	Test your skills: Styling basics	Assessment, Beginner, CSS, Forms, Learn, Styling, test your skills
127	Test your skills: Styling basics	This aim of this skill test is to assess whether you've understood our Styling web forms article.
128	UI pseudo-classes	Beginner, CSS, Example, Forms, Guide, HTML, Pseudo-classes, Styling, Web
128	UI pseudo-classes	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.
129	Your first form	Beginner, CSS, CodingScripting, Example, Forms, Guide, HTML, Learn, Web
129	Your first form	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.
130	Example	Beginner, CodingScripting, Example, Forms, Guide, HTML, Learn, Web
130	Example	This is the example code for the article Your first HTML form.
131	Front-end web developer	Beginner, CSS, Front-end, HTML, JavaScript, Learn, Tools, Web Standards
131	Front-end web developer	Welcome to our front-end web developer learning pathway!
132	Getting started with the Web	Beginner, CSS, Design, Guide, HTML, Index, l10n:priority, publishing, theory
132	Getting started with the Web	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.
133	CSS basics	Beginner, CSS, CodingScripting, Learn, Styling, Web, l10n:priority
133	CSS basics	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?
134	Dealing with files	Beginner, CodingScripting, Files, Guide, HTML, l10n:priority, theory, website
134	Dealing with files	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.
135	How the Web works	Beginner, Client, DNS, HTTP, IP, Infrastructure, Learn, Server, TCP, l10n:priority
135	How the Web works	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.
136	HTML basics	Beginner, CodingScripting, Doctype html, HTML, Learn, Web, l10n:priority
136	HTML basics	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.
137	Installing basic software	Beginner, Browser, Learn, Setup, Tools, WebMechanics, l10n:priority, text editor
137	Installing basic software	In Installing basic software, we show you what tools you need to do simple web development and how to install them properly.
138	JavaScript basics	Beginner, CodingScripting, JavaScript, Learn, Web, l10n:priority
138	JavaScript basics	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.
139	Publishing your website	Beginner, CodingScripting, FTP, GitHub, Google App Engine, Learn, Web, l10n:priority, publishing, web server
139	Publishing your website	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.
140	The web and web standards	Beginner, Front-end, Learn, Web, Web Standards
140	The web and 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.
141	What will your website look like?	Assets, Beginner, Composing, Content, Deprecated, Design, Fonts, Learn, Simple, l10n:priority, step by step
141	What will your website look like?	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?"
142	How to contribute to the Learning Area on MDN	Beginner, Contribute, Documentation, Guide, Learn, MDN Meta, l10n:priority
142	How to contribute to the Learning Area on MDN	On this page, you'll find everything you need to start helping improve MDN's learning content. There are many things you can do, depending on how much time you have and whether you are a beginner, a web developer, or a teacher.
143	Structuring the web with HTML	Beginner, Guide, HTML, Intro, Learn, Topic
143	Structuring the web with HTML	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.
144	HTML Cheatsheet	Beginner, Draft, Guide, HTML
144	HTML Cheatsheet	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.
145	Use HTML to solve common problems	CodingScripting, HTML
145	Use HTML to solve common problems	The following links point to solutions to common everyday problems you'll need to solve with HTML.
146	Add a hitmap on top of an image	Graphics, Guide, HTML, Intermediate, Navigation
146	Add a hitmap on top of an image	Here we go over how to set up an image map, and some downsides to consider first.
147	Tips for authoring fast-loading HTML pages	Advanced, Guide, HTML, NeedsUpdate, Performance, Web, Web Performance
147	Tips for authoring fast-loading HTML pages	These tips are based on common knowledge and experimentation.
148	Define terms with HTML	Beginner, Guide, HTML, Learn
148	Define terms with HTML	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.
149	Using data attributes	Custom Data Attributes, Example, Guide, HTML, HTML5, Web
149	Using data attributes	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()`.
150	Use JavaScript within a webpage	Beginner, HTML, JavaScript, OpenPractices
150	Use JavaScript within a webpage	Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.
151	Introduction to HTML	CodingScripting, HTML, Introduction to HTML, Landing, Links, Structure, Text, head, semantics
151	Introduction to HTML	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.
152	Advanced text formatting	Beginner, CodingScripting, Guide, HTML, Learn, Text, abbreviation, description list, quote, semantic
152	Advanced text formatting	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.
153	Creating hyperlinks	Beginner, CodingScripting, Guide, HTML, HTTP, Learn, Links, Title, absolute, href, hyperlinks, relative, urls
153	Creating hyperlinks	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.
154	Debugging HTML	Beginner, CodingScripting, Debugging, Error, Guide, HTML, Validation, validator
154	Debugging HTML	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.
155	Document and website structure	Beginner, CodingScripting, Guide, HTML, Layout, Page, Site, blocks, semantics
155	Document and website structure	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.
156	Getting started with HTML	Attribute, Beginner, CodingScripting, Comment, Element, Guide, HTML, entity reference, whitespace
156	Getting started with HTML	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!
157	HTML text fundamentals	Beginner, CodingScripting, Guide, HTML, Introduction to HTML, Learn, Text, headings, paragraphs, semantics
157	HTML text fundamentals	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.
158	Marking up a letter	Assessment, Beginner, CodingScripting, HTML, Links, Text, head
158	Marking up a letter	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.
159	Structuring a page of content	Assessment, Beginner, CodingScripting, Design, HTML, Layout, Learn, Structure, semantics
159	Structuring a page of content	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.
160	Test your skills: Advanced HTML text	Beginner, HTML, Learn, advanced text, test your skills
160	Test your skills: Advanced HTML text	The aim of this skill test is to assess whether you've understood our Advanced text formatting article.
161	Test your skills: HTML text basics	Beginner, HTML, Learn, Text, test your skills
161	Test your skills: HTML text basics	The aim of this skill test is to assess whether you've understood our HTML text fundamentals article.
162	Test your skills: Links	Beginner, HTML, Learn, Links, test your skills
162	Test your skills: Links	The aim of this skill test is to assess whether you've understood our Creating hyperlinks article.
163	What’s in the head? Metadata in HTML	Beginner, CodingScripting, Guide, HTML, Meta, favicon, head, lang, metadata
163	What’s in the head? Metadata in HTML	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.
164	Multimedia and Embedding	Assessment, Audio, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Images, Landing, Learn, Multimedia, SVG, Vector Graphics, Video, Web, iframes, imagemaps, img, responsive
164	Multimedia and Embedding	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.
165	Adding vector graphics to the Web	Beginner, Graphics, Guide, HTML, Images, Learn, Raster, SVG, Vector, iframe, img
165	Adding vector graphics to the Web	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.
166	Images in HTML	Article, Beginner, Guide, HTML, Image, JPEG, PNG, alt text, captions, figcaption, figure, img, scr
166	Images in HTML	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.
167	Test your skills: HTML images	Beginner, HTML, Images, Learn, test your skills
167	Test your skills: HTML images	The aim of this skill test is to assess whether you've understood our Images in HTML article.
168	Mozilla splash page	Assessment, Beginner, CodingScripting, Embedding, HTML, Images, JPEG, Multimedia, PNG, Video, iframe, img, picture, responsive, sizes, src, srcset
168	Mozilla splash page	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!
169	From object to iframe — other embedding technologies	Article, Beginner, CodingScripting, Embedding, Flash, Guide, HTML, Learn, Multimedia and embedding, Object, embed, iframe
169	From object to iframe — other embedding technologies	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 `iframe`, `embed` 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.
170	Responsive images	Article, Beginner, CodingScripting, Design, Graphics, Guide, HTML, Image, Intermediate, JPEG, PNG, Pictures, captions, hyperlinks, img, picture, sizes, src, srcset
170	Responsive images	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.
171	Video and audio content	Article, Audio, Beginner, Guide, HTML, Video, captions, subtitles, track
171	Video and audio content	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.
172	Test your skills: Multimedia and embedding	Beginner, Embedding, HTML, Learn, Multimedia, test your skills
172	Test your skills: Multimedia and embedding	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.
173	HTML Tables	<td>, <th>, <tr>, Article, Beginner, CodingScripting, Guide, HTML, Landing, Module, Tables
173	HTML 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.
174	HTML table advanced features and accessibility	Accessibility, Advanced, Article, Beginner, CodingScripting, HTML, Headers, Learn, caption, nesting, scope, sumary, table, tbody, tfoot, thead
174	HTML table advanced features and accessibility	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.
175	HTML table basics	Article, Beginner, CodingScripting, HTML, Learn, Tables, basics, cell, col, colgroup, colspan, header, row, rowspan
175	HTML table basics	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.
176	Assessment: Structuring planet data	Assessment, Beginner, CodingScripting, HTML, Learn, Tables
176	Assessment: Structuring planet data	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.
177	JavaScript — Dynamic client-side scripting	Beginner, CodingScripting, JavaScript, JavaScripting beginner, Landing, Module, Topic, l10n:priority
177	JavaScript — Dynamic client-side scripting	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.
178	Asynchronous JavaScript	Beginner, CodingScripting, Guide, JavaScript, Landing, Promises, async, asynchronous, await, callbacks, requestAnimationFrame, setInterval, setTimeout
178	Asynchronous JavaScript	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.
179	Making asynchronous programming easier with async and await	Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, await
179	Making asynchronous programming easier with async and 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.
180	Choosing the right approach	Beginner, Intervals, JavaScript, Learn, Optimize, Promises, async, asynchronous, await, requestAnimationFrame, setInterval, setTimeout, timeouts
180	Choosing the right approach	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.
181	General asynchronous programming concepts	JavaScript, Learn, Promises, Threads, asynchronous, blocking
181	General asynchronous programming concepts	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.
182	Introducing asynchronous JavaScript	Beginner, CodingScripting, Guide, Introducing, JavaScript, Learn, Promises, async, asynchronous, await, callbacks
182	Introducing asynchronous JavaScript	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.
183	Graceful asynchronous programming with Promises	Beginner, CodingScripting, Guide, JavaScript, Learn, Promises, async, asynchronous, catch, finally, then
183	Graceful asynchronous programming with Promises	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.
184	Cooperative asynchronous JavaScript: Timeouts and intervals	Animation, Beginner, CodingScripting, Guide, Intervals, JavaScript, Loops, asynchronous, requestAnimationFrame, setInterval, setTimeout, timeouts
184	Cooperative asynchronous JavaScript: Timeouts and intervals	This tutorial looks at the traditional methods JavaScript has available for running code asychronously 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.
185	JavaScript building blocks	Article, Assessment, Beginner, CodingScripting, Conditionals, Functions, Guide, Introduction, JavaScript, Landing, Loops, Module, events, l10n:priority
185	JavaScript building blocks	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.
186	Build your own function	Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Tutorial, build, invoke, l10n:priority, parameters
186	Build your own function	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.
187	Making decisions in your code — conditionals	Article, Beginner, CodingScripting, Conditionals, JavaScript, Learn, Switch, conditions, else, if, l10n:priority, ternary
187	Making decisions in your code — conditionals	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.
188	Introduction to events	Article, Beginner, CodingScripting, Event Handler, Guide, JavaScript, Learn, events, l10n:priority
188	Introduction to events	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.
189	Functions — reusable blocks of code	API, Article, Beginner, Browser, CodingScripting, Custom, Functions, Guide, JavaScript, Learn, Method, anonymous, invoke, l10n:priority, parameters
189	Functions — reusable blocks of code	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.
190	Image gallery	Assessment, Beginner, CodingScripting, Conditionals, Event Handler, JavaScript, Learn, Loops, events, l10n:priority
190	Image gallery	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.
191	Looping code	Article, Beginner, CodingScripting, DO, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
191	Looping code	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.
192	Function return values	Article, Beginner, CodingScripting, Functions, Guide, JavaScript, Learn, Return, Return values, l10n:priority
192	Function return values	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.
193	Test your skills: Conditionals	Beginner, Conditionals, JavaScript, Learn
193	Test your skills: Conditionals	The aim of this skill test is to assess whether you've understood our Making decisions in your code — conditionals article.
194	Test your skills: Events	Beginner, JavaScript, Learn, events, test your skills
194	Test your skills: Events	This aim of this skill test is to assess whether you've understood our Introduction to events article.
195	Test your skills: Functions	Beginner, Functions, JavaScript, Learn, test your skills
195	Test your skills: Functions	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.
196	Test your skills: Loops	Beginner, JavaScript, Learn, Loops
196	Test your skills: Loops	This aim of this skill test is to assess whether you've understood our Looping code article.
197	Client-side web APIs	API, Articles, Beginner, CodingScripting, DOM, Graphics, JavaScript, Landing, Learn, Media, Module, WebAPI, data
197	Client-side web APIs	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.
198	Client-side storage	API, Article, Beginner, CodingScripting, Guide, IndexedDB, JavaScript, Learn, Storage
198	Client-side 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.
199	Drawing graphics	API, Article, Beginner, Canvas, CodingScripting, Graphics, JavaScript, Learn, WebGL
199	Drawing graphics	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.
200	Fetching data from the server	API, Article, Beginner, CodingScripting, Fetch, JSON, JavaScript, Learn, Promises, Server, XHR, XML, XMLHttpRequest, data, request
200	Fetching data from the server	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.
201	Introduction to web APIs	3rd party, API, Article, Beginner, Browser, CodingScripting, Learn, Object, WebAPI, client-side
201	Introduction to web APIs	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.
202	Manipulating documents	API, Article, Beginner, CodingScripting, DOM, Document, Document Object Model, JavaScript, Learn, Navigator, WebAPI, Window
202	Manipulating documents	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.
203	Third-party APIs	3rd party, API, Beginner, CodingScripting, Google Maps, Learn, NYTimes, Third party, youtube
203	Third-party APIs	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.
204	Video and Audio APIs	API, Article, Audio, Beginner, CodingScripting, Guide, JavaScript, Learn, Video
204	Video and Audio APIs	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.
205	JavaScript First Steps	Arrays, Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Landing, Module, Numbers, Operators, Variables, l10n:priority, maths, strings
205	JavaScript First Steps	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.
206	A first splash into JavaScript	Article, Beginner, CodingScripting, Conditionals, Functions, JavaScript, Learn, Objects, Operators, Variables, events, l10n:priority
206	A first splash into JavaScript	Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.
207	Arrays	Arrays, Article, Beginner, CodingScripting, JavaScript, Join, Learn, Pop, Push, l10n:priority, shift, split, unshift
207	Arrays	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.
208	Basic math in JavaScript — numbers and operators	Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Math, Operators, augmented, increment, l10n:priority, maths, modulo
208	Basic math in JavaScript — numbers and operators	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.
209	Silly story generator	Arrays, Assessment, Beginner, CodingScripting, JavaScript, Learn, Numbers, Operators, Variables, l10n:priority, strings
209	Silly story generator	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!
210	Handling text — strings in JavaScript	Article, Beginner, CodingScripting, Guide, JavaScript, Join, Quotes, concatenation, l10n:priority, strings
210	Handling text — strings in JavaScript	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.
211	Test your skills: Arrays	Arrays, Beginner, JavaScript, Learn, test your skills
211	Test your skills: Arrays	This aim of this skill test is to assess whether you've understood our Arrays article.
212	Test your skills: Math	Beginner, JavaScript, Learn, Math, test your skills
212	Test your skills: Math	This aim of this skill test is to assess whether you've understood our Basic math in JavaScript — numbers and operators article.
213	Test your skills: Strings	Beginner, JavaScript, Learn, strings, test your skills
213	Test your skills: Strings	This aim of this skill test is to assess whether you've understood our Handling text — strings in JavaScript and Useful string methods articles.
214	Test your skills: variables	Beginner, JavaScript, Learn, Text your skills, Variables
214	Test your skills: variables	This aim of this skill test is to assess whether you've understood our Storing the information you need — Variables article.
215	Useful string methods	Article, Beginner, CodingScripting, JavaScript, Learn, case, indexof, l10n:priority, length, lower, replace, split, upper
215	Useful string methods	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.
216	Storing the information you need — Variables	Arrays, Booleans, JavaScript, Numbers, Objects, Updating, Variables, declaring, initializing, l10n:priority, loose typing, strings
216	Storing the information you need — Variables	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.
217	What is JavaScript?	3rd party, API, Article, Beginner, Browser, CodingScripting, Core, JavaScript, Learn, Script, comments, external, inline, l10n:priority, what
217	What is JavaScript?	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.
218	What went wrong? Troubleshooting JavaScript	Article, Beginner, CodingScripting, Debugging, Developer Tools, Error, JavaScript, Learn, Tutorial, console.log, l10n:priority
218	What went wrong? Troubleshooting JavaScript	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.
219	Solve common problems in your JavaScript code	Beginner, JavaScript, Learn
219	Solve common problems in your JavaScript code	The following links point to solutions to common problems you may encounter when writing JavaScript.
220	Introducing JavaScript objects	Article, Assessment, Beginner, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial
220	Introducing JavaScript objects	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.
221	Adding features to our bouncing balls demo	Assessment, Beginner, CodingScripting, JavaScript, Learn, OOJS, Object-Oriented, Objects, l10n:priority
221	Adding features to our bouncing balls demo	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.
222	JavaScript object basics	API, Article, Beginner, CodingScripting, JavaScript, Learn, Object, Syntax, bracket notation, dot notation, instance, l10n:priority, object literal, theory, this
222	JavaScript object basics	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.
223	Inheritance in JavaScript	Article, Beginner, CodingScripting, Constructor, Function, Getter, Inheritance, JavaScript, Learn, OOJS, OOP, Object, Object member, Prototype, extends, l10n:priority, setter
223	Inheritance in JavaScript	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.
224	Working with JSON	Article, Beginner, CodingScripting, Guide, JSON, JSON API, JSON Arrays, JSON parsing, JSON structure, JavaScript, Learn, Objects, Tutorial, l10n:priority
224	Working with JSON	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.
225	Object building practice	Article, Beginner, Canvas, CodingScripting, Guide, JavaScript, Learn, Objects, Tutorial, l10n:priority
225	Object building practice	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.
226	Object prototypes	Article, Beginner, CodingScripting, Constructor, JavaScript, Learn, OOJS, OOP, Object, Prototype, Prototype Chaining, create(), l10n:priority
226	Object prototypes	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.
227	Object-oriented JavaScript for beginners	Article, Beginner, CodingScripting, Constructor, Create, JavaScript, Learn, OOJS, OOP, Object, Object-Oriented, instance, l10n:priority
227	Object-oriented JavaScript for beginners	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.
228	Test your skills: JSON	Beginner, Example, JSON, JavaScript
228	Test your skills: JSON	This aim of this skill test is to assess whether you've understood our Working with JSON article.
229	Test your skills: Object basics	Beginner, JavaScript, Learn, Objects, test your skills
229	Test your skills: Object basics	This aim of this skill test is to assess whether you've understood our JavaScript object basics article.
230	Test your skills: Object-oriented JavaScript	Beginner, JavaScript, Learn, OOJS, Objects, test your skills
230	Test your skills: Object-oriented JavaScript	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.
231	Learning and getting help	Beginner, Learn, Learning, Web Development, getting help
231	Learning and 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..
232	Web performance	CSS, HTML, HTTP, JavaScript, Learn, Performance, Web Performance
232	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.
233	The business case for web performance	Web Development, Web Performance
233	The business case for 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.
234	CSS performance optimization	CSS, Performance, Reference, Tutorial
234	CSS performance optimization	CSS is render blocking
235	HTML performance features	HTML, Learning, Web Performance
235	HTML performance features	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.
236	JavaScript performance	Images, Media, Performance, Video, Web Performance
236	JavaScript performance	This article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing JavaScript for web performance.
237	Measuring performance	API, Beginner, Guide, Tools, Web
237	Measuring performance	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.
238	Multimedia: Images	Images, Media, Performance, Video, Web Performance
238	Multimedia: Images	This article looks at optimizing image and video to improve web performance.
239	Perceived performance	Perceived Performance, Web Performance
239	Perceived performance	Perceived performance is how fast a website seems to the user.
240	Multimedia: video	Images, Media, Performance, Video, Web Performance
240	Multimedia: video	This article looks at optimizing video to improve web performance.
241	Web performance resources	Best practices, Website performance
241	Web performance resources	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.
242	What is web performance?	Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance
242	What is 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, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization.
243	The "why" of web performance	Beginner, Introduction, Learn, Performance, Reference, Tutorial, Web Performance
243	The "why" of web performance	Web performance—and its assocatiated 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.
244	Learning area release notes	Learn, Release Notes
244	Learning area 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.
245	Server-side website programming	Beginner, CodingScripting, Intro, Landing, Learn, Server, Server-side programming, Topic
245	Server-side website programming	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.
246	Apache Configuration: .htaccess	301 redirect, Cache control, Custom Error pages, HTACCESS, Permanent Redirect, Redirect
246	Apache Configuration: .htaccess	Apache .htaccess files allow users to configure directories of the web server they control without modifying the main configuration file.
247	Properly configuring server MIME types	Apache, HTTP, MIME Types, nginx, server-side
247	Properly configuring server MIME types	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.
248	Django Web Framework (Python)	Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django
248	Django Web Framework (Python)	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.
249	Django Tutorial Part 4: Django admin site	Article, Beginner, CodingScripting, Learn, Python, Tutorial, django, django_admin, server-side
249	Django Tutorial Part 4: Django admin site	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.
250	Django Tutorial Part 8: User authentication and permissions	Article, Authentication, Beginner, Forms, Learn, Permissions, Python, Server, Tutorial, django, django authentication, server-side, sessions
250	Django Tutorial Part 8: User authentication and permissions	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.
251	Django Tutorial Part 11: Deploying Django to production	Beginner, CodingScripting, Deployment, Django deployment, django, web server
251	Django Tutorial Part 11: Deploying Django to production	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.
252	Setting up a Django development environment	Beginner, Development environment, Installing, Intro, Learn, Python, django
252	Setting up a Django development environment	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.
253	Assessment: DIY Django mini blog	Assessment, Beginner, CodingScripting, Learn, Server-side programming, blog, django, server-side
253	Assessment: DIY Django mini blog	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.
254	Django Tutorial Part 9: Working with forms	Beginner, CodingScripting, Django Forms, Forms, HTML forms, Learn, Tutorial, django, server side
254	Django Tutorial Part 9: Working with forms	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).
255	Django Tutorial Part 6: Generic list and detail views	Beginner, Learn, Tutorial, django, django templates, django views
255	Django Tutorial Part 6: Generic list and detail 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.
256	Django Tutorial Part 5: Creating our home page	Article, Beginner, CodingScripting, Learn, Tutorial, django, django templates, django views, server-side
256	Django Tutorial Part 5: Creating our home page	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.
257	Django introduction	Beginner, CodingScripting, Intro, Learn, Python, Server-side programming, django
257	Django introduction	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).
258	Django Tutorial Part 3: Using models	Article, Beginner, CodingScripting, Learn, Model, Tutorial, data, django, server-side
258	Django Tutorial Part 3: Using models	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.
259	Django Tutorial Part 7: Sessions framework	Article, Beginner, CodingScripting, Learn, Python, Server, Tutorial, django, django sessions, server-side, sessions
259	Django Tutorial Part 7: Sessions framework	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 behaviour for anonymous users in your own sites.
260	Django Tutorial Part 2: Creating a skeleton website	Article, Beginner, CodingScripting, Guide, Intro, Learn, Tutorial, django, server-side
260	Django Tutorial Part 2: Creating a skeleton website	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.
261	Django Tutorial Part 10: Testing a Django web application	Beginner, CodingScripting, Django Testing, Testing, Tutorial, django, server-side, tests, unit tests
261	Django Tutorial Part 10: Testing a Django web application	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.
262	Django Tutorial: The Local Library website	Article, Beginner, CodingScripting, Guide, Learn, Tutorial, django, server-side
262	Django Tutorial: The Local Library website	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.
263	Django web application security	Article, Beginner, CodingScripting, Learn, Python, Security, Server-side programming, Web security, django, server-side
263	Django web application security	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.
264	Express web framework (Node.js/JavaScript)	Beginner, CodingScripting, Express, Express.js, Intro, JavaScript, Learn, Node, Server-side programming, node.js
264	Express web framework (Node.js/JavaScript)	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.
265	Express Tutorial Part 7: Deploying to production	Beginner, CodingScripting, Deployment, Express, Learn, Node, heroku, server-side
265	Express Tutorial Part 7: Deploying to production	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.
266	Setting up a Node development environment	Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, nodejs, npm, server-side
266	Setting up a Node development environment	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.
267	Express Tutorial Part 5: Displaying library data	Beginner, Controller, Express, Learn, Template, View, nodejs, pug
267	Express Tutorial Part 5: Displaying library data	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.
268	Author detail page	Express, Node, displaying data, part 5, server-side
268	Author detail page	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`.
269	Author list page and Genre list page challenge	Express, Node, displaying data, server-side
269	Author list page and Genre list page challenge	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.
270	Book detail page	Express, Node, displaying data, part 5, server-side
270	Book detail page	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.
271	Book list page	Express, Node, displaying data, part 5, server-side
271	Book list page	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.
272	BookInstance detail page and challenge	Express, Node, displaying data, part 5, server-side
272	BookInstance detail page and challenge	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.
273	BookInstance list page	Express, Node, displaying data, part 5, server-side
273	BookInstance list page	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.
274	Date formatting using luxon	Express, Node, displaying data, part 5, server-side
274	Date formatting using luxon	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.
275	Asynchronous flow control using async	Express, Node, displaying data, part 5, server-side
275	Asynchronous flow control using async	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.
276	Genre detail page	Express, Node, displaying data, part 5, server-side
276	Genre detail page	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.
277	Home page	Development, Express, Express Server, Node, displaying data, nodejs, part 5, server-side
277	Home page	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.
278	LocalLibrary base template	Express, Node, displaying data, part 5, server-side
278	LocalLibrary base template	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.
279	Template primer	Express, Node, displaying data, part 5, server-side
279	Template primer	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).
280	Express Tutorial Part 6: Working with forms	Beginner, CodingScripting, Express, Forms, HTML forms, Learn, Node, server-side
280	Express Tutorial Part 6: Working with forms	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.
281	Create Author form	Express, Forms, Node, part 6, server-side
281	Create Author form	EdiThis subarticle shows how to define a page for creating `Author` objects.
282	Create Book form	Express, Forms, Node, part 6, server-side
282	Create Book form	EditThis 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.
283	Create BookInstance form	Express, Forms, Node, part 6, server-side
283	Create BookInstance form	EdiThis 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.
284	Create genre form	Express, Forms, Node, part 6, server-side
284	Create genre form	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.
285	Delete Author form	Express, Forms, Node, server-side
285	Delete Author form	This subarticle shows how to define a page to delete `Author` objects.
286	Update Book form	Express, Forms, Node, part 6, server-side
286	Update Book form	EditThis 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.
287	Installing LocalLibrary on PWS/Cloud Foundry	Beginner, Cloud Foundry, CodingScripting, Deployment, Express, Learn, Node, PWS, Pivotal, production, server-side
287	Installing LocalLibrary on PWS/Cloud Foundry	This article provides a practical demonstration of how to install LocalLibrary on the Pivotal Web Services PaaS cloud — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of our tutorial. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or feel like trying something different.
288	Express/Node introduction	Beginner, CodingScripting, Express, Learn, Node, nodejs, server-side
288	Express/Node introduction	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).
289	Express Tutorial Part 3: Using a Database (with Mongoose)	Beginner, CodingScripting, Database, Express, Learn, Node, ODM, mongoose, nodejs, orm, server-side
289	Express Tutorial Part 3: Using a Database (with Mongoose)	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.
290	Express Tutorial Part 4: Routes and controllers	Beginner, CodingScripting, Express, Express routes, Learn, Routes, nodejs, server-side
290	Express Tutorial Part 4: Routes and controllers	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!
291	Express Tutorial Part 2: Creating a skeleton website	Beginner, CodingScripting, Development environment, Express, Intro, Learn, Node, npm, server-side
291	Express Tutorial Part 2: Creating a skeleton website	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.
292	Express Tutorial: The Local Library website	Beginner, CodingScripting, Express, Intro, Learn, Node, Tutorial, nodejs, server-side
292	Express Tutorial: The Local Library website	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.
293	Server-side website programming first steps	Beginner, CodingScripting, Guide, Intro, Landing, Learn, Server-side programming
293	Server-side website programming first steps	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?".
294	Client-Server Overview	Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming
294	Client-Server Overview	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.
295	Introduction to the server side	Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming
295	Introduction to the server side	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.
296	Server-side web frameworks	Beginner, CodingScripting, Guide, Intro, Learn, Server, Server-side programming, Web frameworks
296	Server-side 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.
297	Website security	Beginner, CodingScripting, Guide, Intro, Learn, Security, Server-side programming, Web security, Website Security
297	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.
298	Node.js server without a framework	JavaScript, NeedsContent, Node, Server, no framework
298	Node.js server without a framework	This article provides a simple static file server built with pure Node.js without the use of a framework.
299	Tools and testing	Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Testing, Tools, Topic, cross browser, user testing
299	Tools and 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.
300	Understanding client-side JavaScript frameworks	Beginner, Frameworks, JavaScript, Learn, client-side
300	Understanding client-side JavaScript frameworks	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.
301	Ember Interactivity: Footer functionality, conditional rendering	Beginner, Ember, Frameworks, JavaScript, Learn, client-side, conditional rendering
301		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.
302	Getting started with Ember	Beginner, Ember, Frameworks, JavaScript, Learn, client-side
302	Getting started with Ember	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.
303	Ember interactivity: Events, classes and state	Beginner, Classes, Ember, Frameworks, JavaScript, Learn, Services, client-side, decorators, events
303	Ember interactivity: Events, classes and state	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.
304	Ember resources and troubleshooting	Beginner, Ember, Frameworks, JavaScript, Learn, client-side, resources
304	Ember resources and troubleshooting	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.
305	Routing in Ember	Beginner, Ember, Frameworks, JavaScript, Learn, Routing, client-side
305	Routing in Ember	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".
306	Ember app structure and componentization	Beginner, Components, Ember, Frameworks, JavaScript, Learn, client-side
306	Ember app structure and componentization	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.
307	Introduction to client-side frameworks	Beginner, Frameworks, JavaScript, Learn, client-side
307	Introduction to client-side frameworks	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.
308	Framework main features	Beginner, Frameworks, JavaScript, Learn, client-side, features
308	Framework main 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.
309	Accessibility in React	Accessibility, Beginner, Frameworks, JavaScript, Learn, React, client-side, focus management, keyboard
309	Accessibility in React	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.
310	Componentizing our React app	Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state
310	Componentizing our React app	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.
311	Getting started with React	Beginner, Frameworks, JavaScript, Learn, React, client-side, jsx, props
311	Getting started with React	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.
312	React interactivity: Events and state	Beginner, Frameworks, JavaScript, Learn, React, client-side, events, interactivity, state
312	React interactivity: Events and 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.
313	React interactivity: Editing, filtering, conditional rendering	Beginner, Frameworks, JavaScript, Learn, React, client-side, conditional rendering, filtering
313		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.
314	React resources	Beginner, JavaScript, Learn, React, client-side, framework, resources
314	React resources	Our final article provides you with a list of React resources that you can use to go further in your learning.
315	Beginning our React todo list	App, Beginner, Frameworks, JavaScript, Learn, React, Style, client-side
315	Beginning our React todo list	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.
316	Componentizing our Svelte app	Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, conditional rendering, passing data
316	Componentizing our Svelte app	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.
317	Deployment and next steps	Beginner, Deployment, Frameworks, JavaScript, Learn, Svelte, client-side, resources
317	Deployment and next steps	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.
318	Getting started with Svelte	Beginner, Frameworks, JavaScript, Learn, Svelte, client-side
318	Getting started with Svelte	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.
319	Advanced Svelte: Reactivity, lifecycle, accessibility	Accessibility, Beginner, Components, Frameworks, JavaScript, Learn, Lifecycle, Svelte, client-side, reactivity
319	Advanced Svelte: Reactivity, lifecycle, accessibility	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.
320	Working with Svelte stores	Beginner, Frameworks, JavaScript, Learn, Stores, Svelte, client-side
320	Working with Svelte stores	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.
321	Starting our Svelte Todo list app	Beginner, Components, Frameworks, JavaScript, Learn, Svelte, client-side, state
321	Starting our Svelte Todo list app	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.
322	TypeScript support in Svelte	Beginner, Frameworks, JavaScript, Learn, Svelte, Typescript, client-side
322	TypeScript support in Svelte	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.
323	Dynamic behavior in Svelte: working with variables and props	Beginner, Frameworks, JavaScript, Learn, Svelte, Variables, client-side, props
323		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.
324	Using Vue computed properties	Beginner, Frameworks, JavaScript, Learn, client-side, computed properties, vue
324	Using Vue computed properties	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.
325	Vue conditional rendering: editing existing todos	Beginner, Frameworks, JavaScript, Learn, client-side, conditional rendering, v-else, v-if, vue
325	Vue conditional rendering: editing existing todos	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.
326	Creating our first Vue component	Beginner, Components, Frameworks, JavaScript, Learn, client-side, props, state, vue
326	Creating our first Vue component	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.
327	Getting started with Vue	Beginner, Frameworks, Installation, JavaScript, Learn, client-side, vue
327	Getting started with 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.
328	Adding a new todo form: Vue events, methods, and models	Beginner, Forms, Frameworks, JavaScript, Learn, Methods, client-side, events, models, vue
328	Adding a new todo form: Vue events, methods, and models	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.
329	Focus management with Vue refs	Beginner, Frameworks, JavaScript, Learn, client-side, focus management, refs, vue
329	Focus management with Vue refs	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.
330	Rendering a list of Vue components	Beginner, Frameworks, JavaScript, Learn, client-side, lists, v-for, vue
330	Rendering a list of Vue components	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.
331	Vue resources	Beginner, JavaScript, Learn
331	Vue resources	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.
332	Styling Vue components with CSS	Beginner, CSS, Frameworks, JavaScript, Learn, Styling, client-side, vue
332	Styling Vue components with CSS	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.
333	Cross browser testing	Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, Testing, Tools, cross browser
333	Cross browser testing	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.
334	Handling common accessibility problems	Accessibility, Article, Beginner, CSS, CodingScripting, HTML, JavaScript, Learn, Testing, Tools, cross browser, keyboard
334	Handling common accessibility problems	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.
335	Introduction to automated testing	Article, Automation, Beginner, CodingScripting, Learn, Sauce Labs, Testing, Tools, Web Stack, cross browser
335	Introduction to automated testing	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.
336	Implementing feature detection	Article, Beginner, CSS, CodingScripting, JavaScript, Learn, Modernizr, Testing, Tools, cross browser, feature detection
336	Implementing 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`.
337	Handling common HTML and CSS problems	Article, Beginner, CSS, CodingScripting, HTML, Learn, Selectors, Testing, cross browser, linting
337	Handling common HTML and CSS problems	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.
338	Introduction to cross browser testing	Article, Beginner, CodingScripting, Learn, Testing, concepts, cross browser
338	Introduction to cross browser testing	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?"
339	Handling common JavaScript problems	Article, Beginner, CodingScripting, JavaScript, Learn, Libraries, Testing, cross browser, feature detection, linting, polyfills
339	Handling common JavaScript problems	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.
340	Strategies for carrying out testing	Article, Automation, Beginner, CodingScripting, Learn, Testing, concepts, cross browser, device lab, user testing, virtual machine
340	Strategies for carrying out testing	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.
341	Setting up your own test automation environment	Article, Automation, Beginner, Browser, CodingScripting, Learn, Testing, Tools, cross browser, selenium
341	Setting up your own test automation environment	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.
342	Git and GitHub	Beginner, GitHub, Learn, Web, git
342	Git and GitHub	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.
343	Understanding client-side web development tools	Beginner, CSS, Deployment, HTML, JavaScript, Learn, Tools, Transformation, client-side, linting
343	Understanding client-side web development tools	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.
344	Command line crash course	Beginner, CLI, Command Line, Learn, Terminal, Tools, client-side, npm
344	Command line crash course	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.
345	Deploying our app	Beginner, Deployment, GitHub, Learn, Netlify, Testing, Toolchain, Tools, case study
345	Deploying our app	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.
346	Introducing a complete toolchain	Beginner, Complete toolchain, Development environment, Learn, Tools, Transformation, case study
346	Introducing a complete toolchain	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.
347	Client-side tooling overview	Beginner, Introduction, Learn, Tools, client-side
347	Client-side tooling overview	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.
348	Package management basics	Beginner, Learn, Tools, dependency, npm, package manager, package repository, yarn
348	Package management basics	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.