recursal/MDN huggingface dataset:
Test your skills: Multicol
==========================

The aim of this skill test is to assess whether you understand CSS multiple-column layout, including the `column-count`, `column-width`, `column-gap`, `column-span` and `column-rule` properties and values. You will be working through three small tasks that use different elements of the material you have just covered.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, we want you to create three columns, with a 50px gap between each column.

Your final result should look like the image below:

![Three columns of text](/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills/multicol-task1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we want you to create columns which have a minimum width of 200px. Then, add a 5px grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content.

Your final result should look like the image below:

![Three columns of text with a grey rule between them.](/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills/multicol-task2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, we want you to cause the element containing the heading and subheading to span across all columns so it looks like the image below:

![Three columns of text with a heading and subheading spanning all three in the middle.](/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills/multicol-task3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Responsive web design and media queries
=========================================================

The aim of this skill test is to assess whether you understand how to use media queries and get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the layout lessons in the CSS layout module.

**Note:** Because you need to test your design in multiple screen sizes, we do not have interactive editors on this page.
 Download the code and work locally, or use an online editor such as CodePen, JSFiddle, or Glitch.


If you get stuck, you can reach out to us in one of our communication channels.

Task
----

Download the starting point for this task. Open the downloaded HTML file in your browser and you will find a wireframed site which will load in a mobile device in a readable manner. You can drag your window smaller or use the responsive design view in Firefox DevTools to view this as if on a phone.

Your task is to create a desktop version of this layout which displays when there is enough screen width to accommodate it. Your final result should look like the image below:

![A two column wireframed layout.](/en-US/docs/Learn/CSS/CSS_layout/rwd_skills/rwd-task.png)

There are a number of ways that you could create the desktop layout, enjoy experimenting. You could also add a second breakpoint perhaps creating a layout that would work well on a tablet in portrait mode.
Test your skills: Flexbox
=========================

The aim of this skill test is to assess whether you understand how flexbox and flex items behave. Below are four common design patterns that you might use flexbox to create. Your task is to build them.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, the list items are the navigation for a site. They should be laid out as a row, with an equal amount of space between each item.

Your final result should look like the image below:

![Flex items laid out as a row with space between them.](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills/flex-task1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, the list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item.

Your final result should look like the image below:

![Flex items laid out as three equal size columns with different amounts of content.](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills/flex-task2.png)

Try updating the live code below to recreate the finished example:

Additional question:

* Can you now make the first item twice the size of the other items?

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, there are two elements in the HTML below, a `<div>` element with a class of `parent` which contains another `<div>` element with a class of `child`. Use flexbox to center the child inside the parent. Note that there is not just one possible solution here.

Your final result should look like the image below:

![A box centered inside another box.](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills/flex-task3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 4
------

In this task, we want you to arrange these items into rows as in the image below:

![A set of items displayed as rows.](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills/flex-task4.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: HTML accessibility
====================================

The aim of this skill test is to assess whether you've understood our HTML: A good basis for accessibility article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

HTML accessibility 1
--------------------

In this task we will test your understanding of text semantics, and why they are good for accessibility. The given text is a simple information panel with action buttons, but the HTML is really bad.

We want you to update it use appropriate semantic HTML. You don't need to worry too much about recreating the *exact* same look and text sizing, as long as the semantics are good.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

HTML accessibility 2
--------------------

In the second task, you have a form containing three input fields. You need to:

* Semantically associate the input with their labels.
* Assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single related group.
* Give the group a description/title that summarizes all of the information as personal data.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

HTML accessibility 3
--------------------

In this task you are required to turn all the information links in the paragraph into good, accessible links.

* The first two links just go to regular web pages.
* The third link goes to a PDF, and it's large — 8MB.
* The fourth link goes to a Word document, so the user will need some kind of application installed that can handle that.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

HTML accessibility 4
--------------------

In our final HTML accessibility task, you are given a simple image gallery, which has some accessibility problems. Can you fix them?

* The header image has an accessibility issue, and so do the gallery images.
* You could take the header image further and implement it using CSS for arguably better accessibility. Why is this better, and what would a solution look like?

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: WAI-ARIA
==========================

The aim of this skill test is to assess whether you've understood our WAI-ARIA basics article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

WAI-ARIA 1
----------

In our first ARIA task, we present you with a section of non-semantic markup, which is obviously meant to be a list. Assuming you are not able to change the elements used, how can you allow screen reader users to recognize this as a list?

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

WAI-ARIA 2
----------

In our second WAI-ARIA task, we present a simple search form, and we want you to add in a couple of WAI-ARIA features to improve its accessibility:

1. How can you allow the search form to be called out as a separate landmark on the page by screen readers, to make it easily findable?
2. How can you give the search input a suitable label, without explicitly adding a visible text label to the DOM?

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

WAI-ARIA 3
----------

For this final WAI-ARIA task, we return to an example we previously saw in the CSS and JavaScript skill test. As before, we have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version.

The problem we have now is that when the DOM changes to show a new description, screen readers cannot see what has changed. Can you update it so that description changes are announced by the screen reader?

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: CSS and JavaScript accessibility
==================================================

The aim of this skill test is to assess whether you've understood our CSS and JavaScript accessibility best practices article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

CSS accessibility 1
-------------------

In the first task you are presented with a list of links. However, their accessibility is pretty bad — there is no way to really tell that they are links, or to tell which one the user is focussed on.

We'd like you to assume that the existing ruleset with the `a` selector is supplied by some CMS, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the list.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

CSS accessibility 2
-------------------

In this next task you are presented with a simple bit of content — just headings and paragraphs. There are accessibility issues with the colors and sizing of the text; we'd like you to:

1. Explain what the problems are, and what the guidelines are that state the acceptable values for color and sizing.
2. Select new values for the color and font-size that fix the problem.
3. Update the CSS with these new values to fix the problem.
4. Test the code to make sure the problem is now fixed. Explain what tools or methods you used to select the new values and test the code.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

JavaScript accessibility 1
--------------------------

In our final task here, you have some JavaScripting to do. We have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list.

But it is not very accessible — in its current state you can only operate it with the mouse. We'd like you to add to the HTML and JavaScript to make it keyboard accessible too.

Download the starting point for this task to work in your own editor or in an online editor.
Design and accessibility
========================

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

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.

What do common web layouts contain?

 When designing pages for your website, it's good to have an idea of the most common layouts. This article runs
 through some typical web layouts, looking at the parts that make up each one.


What is accessibility?

This article introduces the basic concepts behind web accessibility.

How can we design for all types of users?

 This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins,
 and other such things.


What HTML features promote accessibility?

 This article describes specific features of HTML that can be used to make a webpage more accessible to people with
 different disabilities.
Web mechanics
=============

This section covers questions relating to general knowledge of the web ecosystem and how it works.

How does the Internet work?

 The **Internet** is the backbone of the web, the technical infrastructure that makes the web possible.
 At its most basic, the internet is a massive network of computers communicating with each other. This article
 discusses how it works, in broad terms.


What is the difference between webpage, website, web server, and search engine?

 In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These
 terms are often a source of confusion for newcomers to the web, or are used incorrectly. Let's discover what they
 actually mean!


What are hyperlinks?

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

What is a URL?

 With Hypertext and HTTP, URL is a key concept when it comes to the Internet. It is
 the mechanism used by browsers to retrieve any published resource on the web.


What is a domain name?

 Domain names are a key component of the Internet infrastructure. They provide a human-readable address for any web
 server available on the Internet.


What is a web server?

 The term "web server" can refer to the hardware or software that serves websites to clients across the web — or both
 of them working together. In this article we go over how web servers work, and why they're important.
Tools and setup
===============

This section lists questions related to the tools/software you can use to build websites.

What software do I need to build a website?

In this article we explain which software components you need to edit, upload, or view a website.

How much does it cost to do something on the web?

 When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we
 discuss how much everything costs and what you get for what you pay (or don't pay).


What text editors are available?

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


What are browser developer tools?

 Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to
 use the basic functions of your browser's devtools.


How do you make sure your website works properly?

 So you've published your website online — very good! But are you sure it works properly? This article provides some
 basic troubleshooting steps.


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.

How do you upload files to a web server?

This article shows how to publish your site online with FTP tools — one of the most common ways to get a website online so others can access it from their computers.

How do I use GitHub Pages?

This article provides a basic guide to publishing content using GitHub's gh-pages feature.

How do you host your website on Google App Engine?

Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.

What tools are available to debug and improve website performance?

 This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your
 website, using the tools to check memory usage, the JavaScript call tree, the number of DOM nodes being rendered, and
 more.
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.

Creating a Google Cloud Platform project
----------------------------------------

To use Google's tools for your own site or app, you need to create a new project on Google Cloud Platform. This requires having a Google account.

1. Go to the App Engine dashboard on the Google Cloud Platform Console and press the *Create* button.
2. If you've not created a project before, you'll need to select whether you want to receive email updates or not, agree to the Terms of Service, and then you should be able to continue.
3. Enter a name for the project, edit your project ID and note it down. For this tutorial, the following values are used:
    * Project Name: *GAE Sample Site*
    * Project ID: *gaesamplesite*
4. Click the *Create* button to create your project.
Creating an application
-----------------------

Each Cloud Platform project can contain one App Engine application. Let's prepare an app for our project.

1. We'll need a sample application to publish. If you've not got one to use, download and unzip this sample app.
2. Have a look at the sample application's structure — the `website` folder contains your website content and `app.yaml` is your application configuration file.
    * Your website content must go inside the `website` folder, and its landing page must be called `index.html`, but apart from that it can take whatever form you like.
    * The `app.yaml` file is a configuration file that tells App Engine how to map URLs to your static files. You don't need to edit it.
Publishing your application
---------------------------

Now that we've got our project made and sample app files collected together, let's publish our app.

1. Open Google Cloud Shell.
2. Drag and drop the `sample-app` folder into the left pane of the code editor.
3. Run the following in the command line to select your project:

```bash
gcloud config set project gaesamplesite
```

4. Then run the following command to go to your app's directory:

```bash
cd sample-app
```

5. You are now ready to deploy your application, i.e. upload your app to App Engine:

```bash
gcloud app deploy
```

6. Enter a number to choose the region where you want your application located.
7. Enter `Y` to confirm.
8. Now navigate your browser to *your-project-id*.appspot.com to see your website online. For example, for the project ID *gaesamplesite*, go to *gaesamplesite*.appspot.com.
See also
--------

To learn more, see Google App Engine Documentation.
MathML first steps overview
===========================

MathML is the markup language used to write mathematical formulas in web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML.

#### Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

**Get started**

Prerequisites
-------------

Before starting this module, you should have:

1. Basic familiarity with using computers and using the Web passively (i.e. looking at it, consuming the content.)
2. A basic work environment set up, as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
3. Basic familiarity with HTML, as described in Introduction to HTML.

**Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out the code examples in an online coding program such as JSBin or Glitch.

Guides
------

This module contains the following articles, which will take you through all the basic theory of MathML, and provide opportunities for you to test out some skills.

Getting started with MathML

In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way.

Text containers

Now that you get a better idea of MathML, we move on to text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas.

Fractions and roots

Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots.

Scripts

We continue the review of basic math notations and focuses on building MathML elements with scripts.

Tables

Once all basic math notations are known, it remains to consider tabular layout which can be used for matrix-like expressions and other advanced math layout.

Assessments
-----------

The following assessment will test your understanding of the MathML basics covered in the guides above.

Three famous mathematical formulas

With the things you have learned in the last few articles, you should already be able to write relatively sophisticated MathML formulas. This assessment gives you a chance to do that.