recursal/MDN huggingface dataset:
Building Angular applications and further resources
===================================================

* Previous
* Overview: Client-side JavaScript frameworks

This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.

|  |  |
| --- | --- |
| Prerequisites: | 
 Familiarity with the core HTML,
 CSS, and
 JavaScript languages,
 knowledge of the
 terminal/command line.
  |
| Objective: | To learn how to build your Angular app. |

Building your finished application
----------------------------------

 Now that you are finished developing your application, you can run the Angular CLI `build` command.
 When you run the `build` command in your `todo` directory, your application compiles into an output directory named `dist/`.

In the `todo` directory, run the following command at the command line:


```bash
ng build -c production
```


 The CLI compiles the application and puts the output in a new `dist` directory.
 The `--configuration production`/`-c production` flag with `ng build` gets rid of stuff you don't need for production.

Deploying your application
--------------------------

 To deploy your application, you can copy the contents of the `dist/my-project-name` folder to your web server.
 Because these files are static, you can host them on any web server capable of serving files, such as:

* Node.js
* Java
* .NET

You can use any backend such as Firebase, Google Cloud, or App Engine.

What's next
-----------

 At this point, you've built a basic application, but your Angular journey is just beginning.
 You can learn more by exploring the Angular documentation, such as:

* Tour of Heroes: An in-depth tutorial highlighting Angular features, such as using services, navigation, and getting data from a server.
* The Angular Components guides: A series of articles that cover topics such as lifecycle, component interaction, and view encapsulation.
* The Forms guides: Articles that guide you through building reactive forms in Angular, validating input, and building dynamic forms.
Summary
-------

That's it for now. We hope you had fun with Angular!

* Previous
* Overview: Client-side JavaScript frameworks
Use HTML to solve common problems
=================================

The following links point to solutions to common everyday problems you'll need to solve with HTML.

### Basic structure

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

* How to create a basic HTML document
* How to divide a webpage into logical sections
* How to set up a proper structure of headings and paragraphs
### Basic text-level semantics

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

* How to create a list of items with HTML
* How to stress or emphasize content
* How to indicate that text is important
* How to display computer code with HTML
* How to annotate images and graphics
* How to mark abbreviations and make them understandable
* How to add quotations and citations to web pages
* How to define terms with HTML
### Hyperlinks

One of the main reasons for HTML is making navigation easy with hyperlinks, which can be used in many different ways:

* How to create a hyperlink
* How to create a table of contents with HTML
### Images & multimedia

* How to add images to a webpage
* How to add video content to a webpage
### Scripting & styling

HTML only sets up document structure. To solve presentation issues, use CSS, or use scripting to make your page interactive.

* How to use CSS within a webpage
* How to use JavaScript within a webpage
### Embedded content

* How to embed a webpage within another webpage
Uncommon or advanced problems
-----------------------------

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

### Forms

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

* How to create a simple Web form
* How to structure a Web form
### Tabular information

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

* How to create a data table
* How to make HTML tables accessible
### Data representation

* How to represent numeric and code values with HTML — see Superscript and Subscript, and Representing computer code.
* How to use data attributes
### Advanced text semantics

* How to take control of HTML line breaking
* How to mark changes (added and removed text) — see the `<ins>` and `<del>` elements.
### Advanced images & multimedia

* How to add a responsive image to a webpage
* How to add vector image to a webpage
* How to add a hit map on top of an image
### Internationalization

HTML is not monolingual. It provides tools to handle common internationalization issues.

* How to add multiple languages into a single webpage
* How to display time and date with HTML
### Performance

* How to author fast-loading HTML pages
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.

#### 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 already have covered the basics of HTML — see 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 (most of) 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 fundamentals of creating tables in HTML.

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.

HTML table advanced features and accessibility

This article looks 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.

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

The following assessment will test your understanding of the HTML table techniques covered in the guides above.

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.
Test your skills: Multimedia and embedding
==========================================

The aim of this skill test is to assess whether you understand how to embed video and audio content in HTML, also using object, iframe and other embedding technologies.

**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 embed a simple audio file onto the page. You need to:

* Add the path to the audio file to an appropriate attribute to embed it on the page. The audio is called `audio.mp3`, and it is in a folder inside the current folder called `media`.
* Add an attribute to make browsers display some default controls.
* Add some appropriate fallback text for browsers that don't support `<audio>`.

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 mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides. You need to:

* Add an attribute to make browsers display some default controls.
* Add some appropriate fallback text for browsers that don't support `<video>`.
* Add multiple sources, containing the paths to the video files. The files are called `video.mp4` and `video.webm`, and are in a folder inside the current folder called `media`.
* Let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time.
* Give the `<video>` a width and height equal to its intrinsic size (320 by 240 pixels).
* Make the video muted by default.
* Display the text tracks contained in the `media` folder, in a file called `subtitles_en.vtt`, when the video is playing. You must explicitly set the type as subtitles, and the subtitle language to English.
* Make sure the readers can identify the subtitle language when they use the default controls.

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:

* Embed a PDF into the page. The PDF is called `mypdf.pdf`, and is contained in the `media` folder.
* Go to a sharing site like YouTube or Google Maps, and embed a video or other media item into the page.

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 images
=============================

The aim of this skill test is to assess whether you understand images and how to embed them in HTML.

**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 embed a simple image of some Blueberries into the page. You need to:

* Add the path to the image to an appropriate attribute to embed it on the page. The image is called `blueberries.jpg`, and it is in a folder inside the current folder called `images`.
* Add some alternative text to an appropriate attribute to describe the image, for people that cannot see it.
* Give the `<img>` element an appropriate `width` and `height` so that it displays at the correct aspect ratio, and enough space is left on the page to display it. The image's intrinsic size is 615 x 419 pixels.

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, you already have a full-featured image, but we'd like you to add a tooltip that appears when the image is moused over. You should put some appropriate information into the tooltip.

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, you are provided with both a full-featured image and some caption text. What you need to do here is add elements that will associate the image with the caption.

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.
Using data attributes
=====================

HTML 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, or extra properties on DOM.

HTML syntax
-----------

The syntax is simple. Any attribute on any element whose attribute name starts with `data-` is a data attribute. Say you have an article and you want to store some extra information that doesn't have any visual representation. Just use `data` attributes for that:


```html
<article
 id="electric-cars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  …
</article>
```

JavaScript access
-----------------

Reading the values of these attributes out in JavaScript is also very simple. You could use `getAttribute()` with their full HTML name to read them, but the standard defines a simpler way: a `DOMStringMap` you can read out via a `dataset` property.

To get a `data` attribute through the `dataset` object, get the property by the part of the attribute name after `data-` (note that dashes are converted to camel case).


```js
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```


Each property is a string and can be read and written. In the above case setting `article.dataset.columns = 5` would change that attribute to `"5"`.

CSS access
----------

Note that, as data attributes are plain HTML attributes, you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the `attr()` function:


```css
article::before {
  content: attr(data-parent);
}
```


You can also use the attribute selectors in CSS to change styles according to the data:


```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```


You can see all this working together in this JSBin example.

Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See this screencast for an example using generated content and CSS transitions (JSBin example).

Data values are strings. Number values must be quoted in the selector for the styling to take effect.

Issues
------

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.

See also
--------

* This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
* Custom attributes are also supported in SVG 2; see `HTMLElement.dataset` and `data-\*` for more information.
* How to use HTML data attributes (Sitepoint)
Test your skills: HTML text basics
==================================

The aim of this skill test is to assess whether you understand how to mark up text in HTML to give it structure and meaning.

**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 mark up the provided HTML using semantic heading and paragraph elements.

The finished example should look like this:

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 turn the first un-marked up list into an unordered list, and the second one into an ordered list.

The finished example should look like this:

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, you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis.

The finished example should look like this:

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: Advanced HTML text
====================================

The aim of this skill test is to assess whether you understand how to use lesser-known HTML elements to mark up advanced semantic features.

**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 turn the provided animals and their definitions into a description list.

The finished example should look like this:

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 add some semantics to the provided HTML as follows:

* Turn the second paragraph into a block-level quote, and semantically indicate that the quote is taken from Accessibility.
* Semantically mark up "HTML" and "CSS" as acronyms, providing expansions as tooltips.
* Use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly.
* Semantically associate machine-readable dates with the dates in the text.

The finished example should look like this:

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.
Use CSS to solve common problems
================================

This page rounds up questions and answers, and other material on the MDN site that can help you to solve common CSS problems.

Styling boxes
-------------

How do I add a drop-shadow to an element?

Shadows can be added to boxes with the `box-shadow` property. This tutorial explains how it works and shows an example.

How do I fill a box with an image without distorting the image?

The `object-fit` property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial.

Which methods can be used to style boxes?

A rundown of the different properties that might be useful when styling boxes using CSS.

How can I make elements semi-transparent?

The `opacity` property and color values with an alpha channel can be used for this; find out which one to use when.

### Box styling lessons and guides

* The Box Model
* Styling backgrounds and borders
CSS and text
------------

How do I add a drop-shadow to text?

Shadows can be added to text with the `text-shadow` property. This tutorial explains how it works and shows an example.

How do I highlight the first line of a paragraph?

Find out how to target the first line of text in a paragraph with the `::first-line` pseudo-element.

How do I highlight the first paragraph in an article?

Find out how to target the first paragraph with the `:first-child` pseudo-class.

How do I highlight a paragraph only if it comes right after a heading?

Combinators can help you to precisely target elements based on where they are in the document; this tutorial explains how to use them to apply CSS to a paragraph only if it immediately follows a heading.

### Text styling lessons and guides

* How to style text
* How to customize a list of elements
* How to style links
* CSS Selectors
CSS Layout
----------

How do I center an item?

Centering an item inside another box horizontally and vertically used to be tricky, however Flexbox now makes it simple.

### Layout guides

* Using CSS Flexbox
* Using CSS multi-column layouts
* Using CSS Grid Layout
* Using CSS generated content

**Note:** We have a cookbook dedicated to CSS Layout solutions, with fully working examples and explanations of common layout tasks. Also check out Practical Positioning Examples, which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel.
CSS 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.

#### 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 already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

**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 (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides
------

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

Fundamental text and font styling

In this article we go through all the basics 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.

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.

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.

Web fonts

Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

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

The following assessment will test your understanding of the text styling techniques covered in the guides above.

Typesetting a community school homepage

In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.