initial commit

28 files changed, 3859 insertions, 0 deletions

diff --git a/files/my/_redirects.txt b/files/my/_redirects.txt
new file mode 100644
index 0000000000..8254869bb0
--- /dev/null
+++ b/files/my/_redirects.txt
@@ -0,0 +1,3 @@
+# FROM-URL	TO-URL
+/my/docs/Learn/CSS/CSS-%E1%80%99%E1%80%AD%E1%80%90%E1%80%BA%E1%80%86%E1%80%80%E1%80%BA	/en-US/docs/Learn/CSS/First_steps
+/my/docs/Web/Guide/HTML	/my/docs/Learn/HTML
diff --git a/files/my/_wikihistory.json b/files/my/_wikihistory.json
new file mode 100644
index 0000000000..967f0c399a
--- /dev/null
+++ b/files/my/_wikihistory.json
@@ -0,0 +1,141 @@
+{
+  "Learn": {
+    "modified": "2020-07-16T22:43:45.027Z",
+    "contributors": [
+      "SphinxKnight",
+      "vonabbas",
+      "Ko.Kyaw.Zin.Htet",
+      "wuthmone",
+      "SetKyarWaLar"
+    ]
+  },
+  "Learn/CSS": {
+    "modified": "2020-07-16T22:25:35.633Z",
+    "contributors": [
+      "Ko.Kyaw.Zin.Htet",
+      "josh-wong"
+    ]
+  },
+  "Learn/CSS/CSS_layout": {
+    "modified": "2020-08-17T12:09:16.635Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flexbox": {
+    "modified": "2020-08-17T12:09:18.877Z",
+    "contributors": [
+      "sithuyannaing558"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-07-16T22:22:20.967Z",
+    "contributors": [
+      "Ko.Kyaw.Zin.Htet",
+      "waizinnaing"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-07-16T22:21:00.247Z",
+    "contributors": [
+      "Jeffrey_Yang"
+    ]
+  },
+  "Learn/HTML/Forms/HTML5_input_types": {
+    "modified": "2020-07-16T22:22:06.907Z",
+    "contributors": [
+      "wesleydanbury69"
+    ]
+  },
+  "Learn/HTML/Forms/Your_first_form": {
+    "modified": "2020-08-24T11:21:29.703Z",
+    "contributors": [
+      "robertaungzinpyae"
+    ]
+  },
+  "Learn/JavaScript": {
+    "modified": "2020-07-16T22:29:42.023Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Mozilla": {
+    "modified": "2020-12-07T20:30:31.755Z",
+    "contributors": [
+      "jsx"
+    ]
+  },
+  "Web": {
+    "modified": "2019-03-23T22:51:40.029Z",
+    "contributors": [
+      "Ko.Kyaw.Zin.Htet",
+      "Yhaza",
+      "royhowie"
+    ]
+  },
+  "Web/CSS": {
+    "modified": "2019-09-11T03:20:08.570Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/@font-face": {
+    "modified": "2020-10-15T22:32:44.803Z",
+    "contributors": [
+      "nainglinoo.mm127"
+    ]
+  },
+  "Web/CSS/CSS_Transitions": {
+    "modified": "2019-05-23T03:26:30.898Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Web/Guide": {
+    "modified": "2019-03-23T22:48:31.803Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/HTTP": {
+    "modified": "2020-10-13T11:14:22.959Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Web/HTTP/Connection_management_in_HTTP_1.x": {
+    "modified": "2020-10-14T02:51:32.014Z",
+    "contributors": [
+      "SphinxKnight",
+      "suran0425"
+    ]
+  },
+  "Web/JavaScript": {
+    "modified": "2020-03-12T19:42:07.096Z",
+    "contributors": [
+      "csdal",
+      "SphinxKnight",
+      "SetKyarWaLar",
+      "SuThaw",
+      "Markus Prokott"
+    ]
+  },
+  "Web/JavaScript/Reference": {
+    "modified": "2020-07-22T11:39:39.861Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements": {
+    "modified": "2020-10-15T22:32:02.841Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function*": {
+    "modified": "2020-10-15T22:32:02.196Z",
+    "contributors": [
+      "wilsunluk"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/files/my/archive/index.html b/files/my/archive/index.html
new file mode 100644
index 0000000000..c67d0390d8
--- /dev/null
+++ b/files/my/archive/index.html
@@ -0,0 +1,20 @@
+---
+title: Archive of obsolete content
+slug: Archive
+translation_of: Archive
+---
+<p>(my translation)</p>
+
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/my/learn/css/css_layout/flexbox/index.html b/files/my/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..03bc087105
--- /dev/null
+++ b/files/my/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,339 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("LearnSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> 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.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to use the Flexbox layout system to create web layouts.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Why_Flexbox">Why Flexbox?</h2>
+
+<p>For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>. These are fine and they work, but in some ways they are also rather limiting and frustrating.</p>
+
+<p>The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:</p>
+
+<ul>
+ <li>Vertically centering a block of content inside its parent.</li>
+ <li>Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.</li>
+ <li>Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content.</li>
+</ul>
+
+<p>As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!</p>
+
+<h2 id="Introducing_a_simple_example">Introducing a simple example</h2>
+
+<p>In this article we are going to get you to work through a series of exercises to help you understand how flexbox works. To get started, you should make a local copy of the first starter file — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> from our github repo — load it in a modern browser (like Firefox or Chrome), and have a look at the code in your code editor. You can <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">see it live here</a> also.</p>
+
+<p>You'll see that we have a {{htmlelement("header")}} element with a top level heading inside it, and a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. We are going to use these to create a fairly standard three column layout.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Specifying_what_elements_to_lay_out_as_flexible_boxes">Specifying what elements to lay out as flexible boxes</h2>
+
+<p>To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of {{cssxref("display")}} on the parent element of the elements you want to affect. In this case we want to lay out the {{htmlelement("article")}} elements, so we set this on the {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>This causes the &lt;section&gt; element to become a <strong>flex container</strong>, and its children to become <strong>flex items</strong>. The result of this should be something like so:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>So, this single declaration gives us everything we need — incredible, right? We have our multiple column layout with equal sized columns, and the columns are all the same height. This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this.</p>
+
+<p>To be clear, let's reiterate what is happening here. The element we've given a   {{cssxref("display")}} value of <code>flex</code> to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are being laid out as flex items — the next section will explain in more detail what this means. Note also that you can use a <code>display</code> value of <code>inline-flex</code> if you wish to lay out an element's children as flex items, but have that element behave like an inline element.</p>
+
+<h2 id="The_flex_model">The flex model</h2>
+
+<p>When elements are laid out as flex items, they are laid out along two axes:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>The <strong>main axis</strong> is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the <strong>main start</strong> and <strong>main end</strong>.</li>
+ <li>The <strong>cross axis</strong> is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the <strong>cross start</strong> and <strong>cross end</strong>.</li>
+ <li>The parent element that has <code>display: flex</code> set on it (the {{htmlelement("section")}} in our example) is called the <strong>flex container</strong>.</li>
+ <li>The items being laid out as flexible boxes inside the flex container are called <strong>flex items</strong> (the {{htmlelement("article")}} elements in our example).</li>
+</ul>
+
+<p>Bear this terminology in mind as you go through subsequent sections. You can always refer back to it if you get confused about any of the terms being used.</p>
+
+<h2 id="Columns_or_rows">Columns or rows?</h2>
+
+<p>Flexbox provides a property called {{cssxref("flex-direction")}} that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to <code>row</code>, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an English browser).</p>
+
+<p>Try adding the following declaration to your {{htmlelement("section")}} rule:</p>
+
+<pre class="brush: css  notranslate">flex-direction: column;</pre>
+
+<p>You'll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also lay out flex items in a reverse direction using the <code>row-reverse</code> and <code>column-reverse</code> values. Experiment with these values too!</p>
+</div>
+
+<h2 id="Wrapping">Wrapping</h2>
+
+<p>One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> example, and try <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">viewing it live</a> (take a local copy of this file now if you want to follow along with this example):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your {{htmlelement("section")}} rule:</p>
+
+<pre class="brush: css  notranslate">flex-wrap: wrap;</pre>
+
+<p>Also, add the following declaration to your {{htmlelement("article")}} rule:</p>
+
+<pre class="brush: css  notranslate">flex: 200px;</pre>
+
+<p>Try this now; you'll see that the layout looks much better with this included:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">We now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The <code>flex: 200px</code> declaration set on the articles means that each will be at least 200px wide; we'll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.</p>
+
+<p>But there's more we can do here. First of all, try changing your {{cssxref("flex-direction")}} property value to <code>row-reverse</code> — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.</p>
+
+<h2 id="flex-flow_shorthand">flex-flow shorthand</h2>
+
+<p>At this point it is worth noting that a shorthand exists for {{cssxref("flex-direction")}} and {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. So for example, you can replace</p>
+
+<pre class="brush: css  notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>with</p>
+
+<pre class="brush: css  notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Flexible_sizing_of_flex_items">Flexible sizing of flex items</h2>
+
+<p>Let's now return to our first example, and look at how we can control what proportion of space flex items take up compared to the other flex items. Fire up your local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, or take a copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> as a new starting point (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">see it live</a>).</p>
+
+<p>First, add the following rule to the bottom of your CSS:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up compared to other flex items. In this case, we are giving each {{htmlelement("article")}} element the same value (a value of 1), which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect.</p>
+
+<p>Now add the following rule below the previous one:</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Now when you refresh, you'll see that the third {{htmlelement("article")}} takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 = 4). The first two flex items have one unit each so they take 1/4 of the available space each. The third one has two units, so it takes up 2/4 of the available space (or one-half).</p>
+
+<p>You can also specify a minimum size value inside the flex value. Try updating your existing article rules like so:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>This basically states "Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared out according to the proportion units." Try refreshing and you'll see a difference in how the space is shared out.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>The real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser window, or add another {{htmlelement("article")}} element, the layout continues to work just fine.</p>
+
+<h2 id="flex_shorthand_versus_longhand">flex: shorthand versus longhand</h2>
+
+<p>{{cssxref("flex")}} is a shorthand property that can specify up to three different values:</p>
+
+<ul>
+ <li>The unitless proportion value we discussed above. This can be specified individually using the {{cssxref("flex-grow")}} longhand property.</li>
+ <li>A second unitless proportion value — {{cssxref("flex-shrink")}} — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</li>
+ <li>The minimum size value we discussed above. This can be specified individually using the {{cssxref("flex-basis")}} longhand value.</li>
+</ul>
+
+<p>We'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). They lead to a lot of extra code being written, and they can be somewhat confusing.</p>
+
+<h2 id="Horizontal_and_vertical_alignment">Horizontal and vertical alignment</h2>
+
+<p>You can also use flexbox features to align flex items along the main or cross axis. Let's explore this by looking at a new example — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">see it live also</a>) — which we are going to turn into a neat, flexible button/toolbar. At the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>First, take a local copy of this example.</p>
+
+<p>Now, add the following to the bottom of the example's CSS:</p>
+
+<pre class="brush: css  notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p>
+
+<p>Refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. We've done this via two new properties.</p>
+
+<p>{{cssxref("align-items")}} controls where the flex items sit on the cross axis.</p>
+
+<ul>
+ <li>By default, the value is <code>stretch</code>, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. This is how our first example got equal height columns by default.</li>
+ <li>The <code>center</code> value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.</li>
+ <li>You can also have values like <code>flex-start</code> and <code>flex-end</code>, which will align all items at the start and end of the cross axis respectively. See {{cssxref("align-items")}} for the full details.</li>
+</ul>
+
+<p>You can override the {{cssxref("align-items")}} behavior for individual flex items by applying the {{cssxref("align-self")}} property to them. For example, try adding the following to your CSS:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p>
+
+<p>Have a look at what effect this has, and remove it again when you've finished.</p>
+
+<p>{{cssxref("justify-content")}} controls where the flex items sit on the main axis.</p>
+
+<ul>
+ <li>The default value is <code>flex-start</code>, which makes all the items sit at the start of the main axis.</li>
+ <li>You can use <code>flex-end</code> to make them sit at the end.</li>
+ <li><code>center</code> is also a value for <code>justify-content</code>, and will make the flex items sit in the center of the main axis.</li>
+ <li>The value we've used above, <code>space-around</code>, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end.</li>
+ <li>There is another value, <code>space-between</code>, which is very similar to <code>space-around</code> except that it doesn't leave any space at either end.</li>
+</ul>
+
+<p>We'd like to encourage you to play with these values to see how they work before you continue.</p>
+
+<h2 id="Ordering_flex_items">Ordering flex items</h2>
+
+<p>Flexbox also has a feature for changing the layout order of flex items, without affecting the source order. This is another thing that is impossible to do with traditional layout methods.</p>
+
+<p>The code for this is simple: try adding the following CSS to your button bar example code:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Refresh, and you'll now see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:</p>
+
+<ul>
+ <li>By default, all flex items have an {{cssxref("order")}} value of 0.</li>
+ <li>Flex items with higher order values set on them will appear later in the display order than items with lower order values.</li>
+ <li>Flex items with the same order value will appear in their source order. So if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.</li>
+ <li>The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.</li>
+</ul>
+
+<p>You can set negative order values to make items appear earlier than items with 0 set. For example, you could make the "Blush" button appear at the start of the main axis using the following rule:</p>
+
+<pre class="brush: css  notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Nested_flex_boxes">Nested flex boxes</h2>
+
+<p>It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes. Have a look at <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>The HTML for this is fairly simple. We've got a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. The third {{htmlelement("article")}} contains three {{htmlelement("div")}}s. :</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Let's look at the code we've used for the layout.</p>
+
+<p>First of all, we set the children of the {{htmlelement("section")}} to be laid out as flexible boxes.</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Next, we set some flex values on the {{htmlelement("article")}}s themselves. Take special note of the 2nd rule here — we are setting the third {{htmlelement("article")}} to have its children laid out like flex items too, but this time we are laying them out like a column.</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Next, we select the first {{htmlelement("div")}}. We first use <code>flex:1 100px;</code> to effectively give it a minimum height of 100px, then we set its children (the {{htmlelement("button")}} elements) to also be laid out like flex items. Here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier.</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. This has a very interesting effect, which you'll see if you try resizing your browser window width. The buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.</p>
+
+<pre class="brush: css  notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Cross_browser_compatibility">Cross browser compatibility</h2>
+
+<p>Flexbox support is available in most new browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS, etc. However you should be aware that there are still older browsers in use that don't support Flexbox (or do, but support a really old, out-of-date version of it.)</p>
+
+<p>While you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.</p>
+
+<p>Flexbox is a bit trickier than some CSS features. For example, if a browser is missing a CSS drop shadow, then the site will likely still be usable. Not supporting flexbox features however will probably break a layout completely, making it unusable.</p>
+
+<p>We discuss strategies for overcoming cross browser support issues in our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a> module.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we'll have a look at another important aspect of CSS layouts — CSS Grids.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
+</div>
diff --git a/files/my/learn/css/css_layout/index.html b/files/my/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..4351951f84
--- /dev/null
+++ b/files/my/learn/css/css_layout/index.html
@@ -0,0 +1,88 @@
+---
+title: CSS layout
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">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.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already:</p>
+
+<ol>
+ <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
+ <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt>
+ <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> 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. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>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, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Originally for floating images inside blocks of text, the {{cssxref("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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
+ <dd>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 {{cssxref("position")}} values, and how to use them.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt>
+ <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has 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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt>
+ <dd>The <strong>CSS Media Query</strong> 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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt>
+ <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
+ <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd>
+</dl>
diff --git a/files/my/learn/css/index.html b/files/my/learn/css/index.html
new file mode 100644
index 0000000000..781ea7fb45
--- /dev/null
+++ b/files/my/learn/css/index.html
@@ -0,0 +1,67 @@
+---
+title: CSS နင့် HTML အား အသွင်ပောင်းခင်း
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Style
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("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.</p>
+
+<h2 id="သင်ယူမုဆိုင်ရာ_လမ်းေကာင်း">သင်ယူမုဆိုင်ရာ လမ်းေကာင်း</h2>
+
+<p>You should learn the basics of HTML before attempting any CSS. We recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first. In that module, you will learn about:</p>
+
+<ul>
+ <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li>
+ <li>More advanced <a href="/en-US/docs/Learn/HTML#Modules">HTML modules</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li>
+</ul>
+
+<p>Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.</p>
+
+<p>Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both of which are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
+
+<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module, albeit in a lot more detail.</p>
+
+<h2 id="သင်ရိုး">သင်ရိုး</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt>
+ <dd>This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and 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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>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.</dd>
+ <dt>Responsive design (TBD)</dt>
+ <dd>With so many different types of devices able to browse the web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.</dd>
+</dl>
+
+<h2 id="CSS_ဆိုင်ရာ_ပသနာများဖေရင်းခင်း">CSS ဆိုင်ရာ ပသနာများဖေရင်းခင်း</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.</p>
+
+<p>From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p>
+
+<h2 id="ပိုမိုလေ့လာရန်">ပိုမိုလေ့လာရန်</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt>
+ <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd>
+</dl>
diff --git a/files/my/learn/html/forms/html5_input_types/index.html b/files/my/learn/html/forms/html5_input_types/index.html
new file mode 100644
index 0000000000..74b3202f26
--- /dev/null
+++ b/files/my/learn/html/forms/html5_input_types/index.html
@@ -0,0 +1,276 @@
+---
+title: The HTML5 input types
+slug: Learn/HTML/Forms/HTML5_input_types
+translation_of: Learn/Forms/HTML5_input_types
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</div>
+
+<p class="summary">In the <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">previous article</a> we looked at the {{htmlelement("input")}} element, covering the original values of the <code>type</code> 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.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, and a basic <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">understanding of HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the newer input type values available to create native form controls, and how to implement them using HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Most of the features discussed in this article have wide support across browsers. We'll note any exceptions. If you want more detail on browser support, you should consult our <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a>, and in particular our extensive <a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt; types</a> reference.</p>
+</div>
+
+<p>Because HTML form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. We cover this in an advanced tutorial — <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>.</p>
+
+<h2 id="E-mail_address_field">E-mail address field</h2>
+
+<p>This type of field is set using the value <code>email</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="email" id="email" name="email"&gt;</pre>
+
+<p>When this {{htmlattrxref("type","input")}} is used, the user is required to type a valid email address into the field. Any other content causes the browser to display an error when the form is submitted. You can see this in action in the below screenshot.</p>
+
+<p><img alt='An invalid email input showing the message "Please enter an email address."' src="https://mdn.mozillademos.org/files/17027/email_address_invalid.png" style="display: block; height: 224px; margin: 0 auto; width: 369px;"></p>
+
+<p>You can also use the <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> attribute in combination with the <code>email</code> input type to allow several email addresses to be entered in the same input (separated by commas):</p>
+
+<pre class="brush: html">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+
+<p>On some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the <code>@</code> key. See the Firefox for Android keyboard screenshot below for an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17054/fx-android-email-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0 auto; width: 400px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find examples of the basic text input types at <a href="https://mdn.github.io/learning-area/html/forms/basic-input-examples/">basic input examples</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html">source code</a> also).</p>
+</div>
+
+<p>This is another good reason for using these newer input types — improving the user experience for users of these devices.</p>
+
+<h3 id="Client-side_validation">Client-side validation</h3>
+
+<p>As you can see above, <code>email</code>, along with other newer <code>input</code> types, provides built-in <em>client-side</em> error validation — performed by the browser before the data gets sent to the server. It <em>is</em> a helpful aid to guide users to fill out a form accurately, and it can save time — it is useful to know that your data is not correct immediately, rather than having to wait for a round trip to the server.</p>
+
+<p>But it <em>should not be considered </em>an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the <em>server-side</em> as well as the client-side, because client-side validation is too easy to turn off, so malicious users can still easily send bad data through to your server. Read <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> for an idea of what <em>could</em> happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.</p>
+
+<p>Note that <code>a@b</code> is a valid email address according to the default provided constraints. This is because the <code>email</code> input type allows intranet email addresses by default. To implement different validation behavior, you can use the <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> attribute, and you can also custom the error messages; we'll talk how to use these features in the <a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a> article later on.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If the data entered is not an email address, the {{cssxref(':invalid')}} pseudo-class will match, and the {{domxref('validityState.typeMismatch')}} property will return <code>true</code>.</p>
+</div>
+
+<h2 id="Search_field">Search field</h2>
+
+<p>Search fields are intended to be used to create search boxes on pages and apps. This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>The main difference between a <code>text</code> field and a <code>search</code> field is how the browser styles its appearance.  Often, <code>search</code> fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked). Additionally, on devices with dynamic keyboards, the keyboard's enter key may read "<strong>search</strong>", or display a magnifying glass icon.</p>
+
+<p>The below screenshots show a non-empty search field in Firefox 71, Safari 13, and Chrome 79 on macOS, and Edge 18 and Chrome 79 on Windows 10. Note the clear icon only appears if the field has a value, and, apart from Safari, it is only displayed when the field is focused.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="https://mdn.mozillademos.org/files/17028/search_focus.png" style="height: 179px; width: 549px;"></p>
+
+<p>Another feature worth noting is that the values of a <code>search</code> field can be automatically saved and re-used to offer auto-completion across multiple pages of the same website. This tends to happen automatically in most modern browsers.</p>
+
+<h2 id="Phone_number_field">Phone number field</h2>
+
+<p>A special field for filling in phone numbers can be created using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>When accessed via a touch device with a dynamic keyboard, most devices will display a numeric keypad when <code>type="tel"</code> is encountered, meaning this type is useful whenever a numeric keypad is useful, and doesn't just have to be used for telephone numbers.</p>
+
+<p>The following Firefox for Android keyboard screenshot provides an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17056/fx-android-tel-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 276px; margin: 0px auto; width: 400px;"></p>
+
+<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user. (This means it may include letters, etc.).</p>
+
+<p>As we mentioned earlier, The <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> attribute can be used to enforce constraints, which you'll learn about in <a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a>.</p>
+
+<h2 id="URL_field">URL field</h2>
+
+<p>A special type of field for entering URLs can be created using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>It adds special validation constraints to the field. The browser will report an error if no protocol (such as <code>http:</code>) is entered, or if the URL is otherwise malformed. On devices with dynamic keyboards, the default keyboard will often display some or all of the colon, period, and forward slash as default keys.</p>
+
+<p>See below for an example (taken on Fireox for Android):</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17057/fx-android-url-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 325px; margin: 0px auto; width: 400px;"></p>
+
+<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists!</div>
+
+<h2 id="Numeric_field">Numeric field</h2>
+
+<p>Controls for entering numbers can be created with an {{HTMLElement("input")}} {{htmlattrxref("type","input")}} of <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control. On devices with dynamic keyboards, the numeric keyboard is generally displayed.</p>
+
+<p>The following screenshot (from Firefox for Android) provides an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17055/fx-android-number-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 275px; margin: 0px auto; width: 400px;"></p>
+
+<p>With the <code>number</code> input type, you can constrain the minimum and maximum values allowed by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
+
+<p>You can also use the <code>step</code> attribute to set the increment increase and decrease caused by pressing the spinner buttons. By default, the number input type only validates if the number is an integer. To allow float numbers, specify <code><a href="/en-US/docs/Web/HTML/Attributes/step">step="any"</a></code>. If omitted, the <code>step</code> value defaults to <code>1</code>, meaning only whole numbers are valid.</p>
+
+<p>Let's look at some examples. The first one below creates a number control whose value is restricted to any value between <code>1</code> and <code>10</code>, and whose increase and decrease buttons change its value by <code>2</code>.</p>
+
+<pre class="brush: html">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+
+<p>The second one creates a number control whose value is restricted to any value between <code>0</code> and <code>1</code> inclusive, and whose increase and decrease buttons change its value by <code>0.01</code>.</p>
+
+<pre class="brush: html">&lt;input type="number" name="change" id="pennies" min="0" max="1" step="0.01"&gt;</pre>
+
+<p>The <code>number</code> input type makes sense when the range of valid values is limited, for example a person's age or height. If the range is too large for incremental increases to make sense (such as USA ZIP codes, which range from <code>00001</code> to <code>99999</code>), the <code>tel</code> type might be a better option; it provides the numeric keypad while forgoing the number's spinner UI feature.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+</div>
+
+<h2 id="Slider_controls">Slider controls</h2>
+
+<p>Another way to pick a number is to use a <strong>slider</strong>. You see these quite often on sites like housebuying sites where you want to set a maximum property price to filter by. Let's look at a live example to illustrate this:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}</p>
+
+<p>Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose <em>precise</em> value is not necessarily important.</p>
+
+<p>A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.</p>
+
+<p>It's important to properly configure your slider. To that end, it's highly recommended that you set the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code>, <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>, and <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attributes which set the minimum, maximum and increment values, respectively.</p>
+
+<p>Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:</p>
+
+<pre class="brush: html">&lt;label for="price"&gt;Choose a maximum house price: &lt;/label&gt;
+&lt;input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"&gt;
+&lt;output class="price-output" for="price"&gt;&lt;/output&gt;</pre>
+
+<p>This example creates a slider whose value may range between <code>50000</code> and <code>500000</code>, which increments/decrements by 100 at a time. We've given it default value of <code>250000</code>, using the <code>value</code> attribute.</p>
+
+<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <code>&lt;output&gt;</code> is special — like <code>&lt;label&gt;</code>, it can take a <code>for</code> attribute that allows you to associate it with the element or elements that the output value came from.</p>
+
+<p>To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:</p>
+
+<pre class="brush: js">const price = document.querySelector('#price')
+const output = document.querySelector('.price-output')
+
+output.textContent = price.value
+
+price.addEventListener('input', function() {
+  output.textContent = price.value
+});</pre>
+
+<p>Here we store references to the <code>range</code> input and the <code>output</code> in two variables. Then we immediately set the <code>output</code>'s <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the <code>output</code>'s <code>textContent</code> is updated to the new value.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+</div>
+
+<h2 id="Date_and_time_pickers">Date and time pickers</h2>
+
+<p>Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.</p>
+
+<p>HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.</p>
+
+<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}</p>
+
+<p>Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.</p>
+
+<h3 id="datetime-local"><code>datetime-local</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code> creates a widget to display and pick a date with time with no specific time zone information.</p>
+
+<pre class="brush: html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+
+<h3 id="month"><code>month</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code> creates a widget to display and pick a month with a year.</p>
+
+<pre class="brush: html">&lt;input type="month" name="month" id="month"&gt;</pre>
+
+<h3 id="time"><code>time</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code> creates a widget to display and pick a time value. While time may <em>display</em> in 12-hour format, the <em>value returned</em> is in 24-hour format.</p>
+
+<pre class="brush: html">&lt;input type="time" name="time" id="time"&gt;</pre>
+
+<h3 id="week"><code>week</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code> creates a widget to display and pick a week number and its year.</p>
+
+<p>Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.</p>
+
+<pre class="brush: html">&lt;input type="week" name="week" id="week"&gt;</pre>
+
+<h3 id="Constraining_datetime_values">Constraining date/time values</h3>
+
+<p>All date and time controls can be constrained using the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> and <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> attributes, with further constraining possible via the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute (whose value is given in seconds).</p>
+
+<pre class="brush: html">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
+&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="3600" id="myDate"&gt;</pre>
+
+<h3 id="Browser_support_for_datetime_inputs">Browser support for date/time inputs</h3>
+
+<p>You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports <code>time</code> and <code>date</code> only.</p>
+
+<p>The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see <a href="https://flatlogic.com/blog/best-javascript-date-picker-libraries/">Top date picker javascript plugins and libraries</a> for some suggestions).</p>
+
+<h2 id="Color_picker_control">Color picker control</h2>
+
+<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.</p>
+
+<p>A <code>color</code> control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>:</p>
+
+<pre class="brush: html">&lt;input type="color" name="color" id="color"&gt;</pre>
+
+<p>When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17058/fx-macos-color.jpg" style="border-style: solid; border-width: 1px; display: block; height: 412px; margin: 0px auto; width: 700px;"></p>
+
+<p>And here is a live example for you to try out:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}</p>
+
+<p>The value returned is always a lowercase 6-value hexidecimal color.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>color</code> inputs are not supported in Internet Explorer.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/my/learn/html/forms/index.html b/files/my/learn/html/forms/index.html
new file mode 100644
index 0000000000..215164d6a6
--- /dev/null
+++ b/files/my/learn/html/forms/index.html
@@ -0,0 +1,83 @@
+---
+title: HTML forms
+slug: Learn/HTML/Forms
+tags:
+  - Beginner
+  - Featured
+  - Forms
+  - Guide
+  - HTML
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
+
+<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Basic_guides">Basic guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
+ <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
+ <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
+</dl>
+
+<h2 id="What_form_widgets_are_available">What form widgets are available?</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt>
+ <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd>
+</dl>
+
+<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt>
+ <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
+</dl>
+
+<h2 id="Advanced_guides">Advanced guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt>
+ <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt>
+ <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+</dl>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/my/learn/html/forms/your_first_form/index.html b/files/my/learn/html/forms/your_first_form/index.html
new file mode 100644
index 0000000000..03f72249e9
--- /dev/null
+++ b/files/my/learn/html/forms/your_first_form/index.html
@@ -0,0 +1,298 @@
+---
+title: ပထမဆုံး Form
+slug: Learn/HTML/Forms/Your_first_form
+translation_of: Learn/Forms/Your_first_form
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>
+
+<p class="summary">Web form တစ်ခုဖန်တီးဖို့အတွက် ပထမဆုံးအတွေ့အကြုံကို ဆောင်းပါးစီးရီးရဲ့ ပထမဦးဆုံးသော ဒီဆောင်းပါးမှာ ရရှိမှာပါ။,  HTML form controls တွေနဲ့ အခြား HTML elements တွေကိုမှန်ကန်စွာအသုံးချပြီး ရိုးရိုး form တစ်ခုကို ဒီဇိုင်းပုံဖော်ခြင်းနဲ့ လက်တွေ့ရေးဆွဲရပါမယ်။ CSS ကိုသုံးပြီး အဲဒီ Form ကို ရိုးရိုးလေး အလှဆင်တာနည်းနည်းလုပ်ရမယ်။ ဆာဗာကို ဒေတာတွေဘယ်လိုပို့သလဲဆိုတာလည်း လေ့လာရပါမယ်။ အပေါ်မှာပြောခဲ့တာတွေ တစ်ခုချင်းစီကို နောက်ပိုင်းမှာ နည်းနည်းပိုပြီးအသေးစိတ်ရှင်းပြပေးသွားပါမယ်။</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, and a basic <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">understanding of HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic HTML elements you'll need for simple cases.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_are_web_forms">What are web forms?</h2>
+
+<p><strong>Web forms</strong> are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a> later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).</p>
+
+<p>A<strong> </strong>web form's HTML is made up of one or more <strong>form controls</strong> (sometimes called <strong>widgets</strong>), plus some additional elements to help structure the overall form — they are often referred to as <strong>HTML forms</strong>. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.</p>
+
+<p>Form controls can also be programmed to enforce specific formats or values to be entered (<strong>form validation</strong>), and paired with text labels that describe their purpose to both sighted and blind users.</p>
+
+<h2 id="Designing_your_form">Designing your form</h2>
+
+<p>Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.</p>
+
+<p>Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:</p>
+
+<ul>
+ <li>Smashing Magazine has some <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>, including an older but still relevant <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> article.</li>
+ <li>UXMatters is also a very thoughtful resource with good advice from <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> to complex concerns such as <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li>
+</ul>
+
+<p>In this article, we'll build a simple contact form. Let's make a rough sketch.</p>
+
+<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>
+
+<p>Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.</p>
+
+<h2 id="Active_learning_Implementing_our_form_HTML">Active learning: Implementing our form HTML</h2>
+
+<p>Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.</p>
+
+<p>Before you go any further, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a> — you'll enter your form HTML into here.</p>
+
+<h3 id="The_HTMLelementform_element">The {{HTMLelement("form")}} element</h3>
+
+<p>All forms start with a {{HTMLelement("form")}} element, like this:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes:</p>
+
+<ul>
+ <li>The <code>action</code> attribute defines the location (URL) where the form's collected data should be sent when it is submitted.</li>
+ <li>The <code>method</code> attribute defines which HTTP method to send the data with (usually <code>get</code> or <code>post</code>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: We'll look at how those attributes work in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> article later on.</p>
+</div>
+
+<p>For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.</p>
+
+<h3 id="The_HTMLelementlabel_HTMLelementinput_and_HTMLelementtextarea_elements">The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements</h3>
+
+<p>Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:</p>
+
+<ul>
+ <li>The input field for the name is a {{HTMLelement("input/text", "single-line text field")}}.</li>
+ <li>The input field for the e-mail is an {{HTMLelement("input/email", "input of type email")}}: a single-line text field that accepts only e-mail addresses.</li>
+ <li>The input field for the message is a {{HTMLelement("textarea")}}; a multiline text field.</li>
+</ul>
+
+<p>In terms of HTML code we need something like the following to implement these form widgets:</p>
+
+<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<p>Update your form code to look like the above.</p>
+
+<p>The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the<a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a>attribute on all {{HTMLelement("label")}} elements, which takes as its value the <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> of the form control with which it is associated — this is how you associate a form control with its label.</p>
+
+<p>There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in <a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a>.</p>
+
+<p>On the {{HTMLelement("input")}} element, the most important attribute is the <code>type</code> attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a> article later on.</p>
+
+<ul>
+ <li>In our simple example, we use the value {{HTMLelement("input/text")}} for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.</li>
+ <li>For the second input, we use the value {{HTMLelement("input/email")}}, which defines a single-line text field that only accepts a well-formed e-mail address. This turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. It also causes a more appropriate keyboard layout for entering email addresses (e.g. with an @ symbol by default) to appear on devices with dynamic keyboards, like smartphones. You'll find out more about form validation in the <a href="/en-US/docs/Learn/Forms/Form_validation">client-side form validation</a> article later on.</li>
+</ul>
+
+<p>Last but not least, note the syntax of <code>&lt;input&gt;</code> vs. <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. This is one of the oddities of HTML. The <code>&lt;input&gt;</code> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> attribute like this:</p>
+
+<pre class="brush:html; notranslate">&lt;input type="text" value="by default this element is filled with this text"&gt;</pre>
+
+<p>On the other hand,  if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:</p>
+
+<pre class="brush:html; notranslate">&lt;textarea&gt;
+by default this element is filled with this text
+&lt;/textarea&gt;</pre>
+
+<h3 id="The_HTMLelementbutton_element">The {{HTMLelement("button")}} element</h3>
+
+<p>The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing <code>&lt;/ul&gt;</code> tag:</p>
+
+<pre class="brush:html; notranslate">&lt;li class="button"&gt;
+  &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+&lt;/li&gt;</pre>
+
+<p>The {{htmlelement("button")}} element also accepts a <code>type</code> attribute — this accepts one of three values: <code>submit</code>, <code>reset</code>, or <code>button</code>.</p>
+
+<ul>
+ <li>A click on a <code>submit</code> button (the default value) sends the form's data to the web page defined by the <code>action</code> attribute of the {{HTMLelement("form")}} element.</li>
+ <li>A click on a <code>reset</code> button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include one.</li>
+ <li>A click on a <code>button</code> button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with JavaScript.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can also use the {{HTMLElement("input")}} element with the corresponding <code>type</code> to produce a button, for example <code>&lt;input type="submit"&gt;</code>. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.</p>
+</div>
+
+<h2 id="Basic_form_styling">Basic form styling</h2>
+
+<p>Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you don't think you've got the HTML code right, try comparing it with our finished example — see <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">also see it live</a>).</p>
+</div>
+
+<p>Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.</p>
+
+<p>First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+
+&lt;/style&gt;</pre>
+
+<p>Inside the <code>style</code> tags, add the following CSS:</p>
+
+<pre class="brush:css; notranslate">form {
+  /* Center the form on the page */
+  margin: 0 auto;
+  width: 400px;
+  /* Form outline */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Uniform size &amp; alignment */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* To make sure that all text fields have the same font settings
+     By default, textareas have a monospace font */
+  font: 1em sans-serif;
+
+  /* Uniform text field size */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Match form field borders */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Additional highlight for focused elements */
+  border-color: #000;
+}
+
+textarea {
+  /* Align multiline text fields with their labels */
+  vertical-align: top;
+
+  /* Provide space to type some text */
+  height: 5em;
+}
+
+.button {
+  /* Align buttons with the text fields */
+  padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+  /* This extra margin represent roughly the same space as the space
+     between the labels and their text fields */
+  margin-left: .5em;
+}</pre>
+
+<p>Save and reload, and you'll see that your form should look much less ugly.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our version on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">also see it live</a>).</p>
+</div>
+
+<h2 id="Sending_form_data_to_your_web_server">Sending form data to your web server</h2>
+
+<p>The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes.</p>
+
+<p>We provide a <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a> to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.</p>
+
+<p>To name the data in a form you need to use the <code>name</code> attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+
+  ...
+</pre>
+
+<p>In our example, the form will send 3 pieces of data named "<code>user_name</code>", "<code>user_email</code>", and "<code>user_message</code>". That data will be sent to the URL "<code>/my-handling-form-page</code>" using the <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> method.</p>
+
+<p>On the server side, the script at the URL "<code>/my-handling-form-page</code>" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending form data</span></a> article later on.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've built your first web form. It looks like this live:</p>
+
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>
+
+<p>That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.</p>
+
+<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/my/learn/html/index.html b/files/my/learn/html/index.html
new file mode 100644
index 0000000000..efe1fad267
--- /dev/null
+++ b/files/my/learn/html/index.html
@@ -0,0 +1,52 @@
+---
+title: HTML
+slug: Learn/HTML
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">To build websites, you should know about {{Glossary('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.</p>
+
+<h2 id="သင်ယူမုဆိုင်ရာ_လမ်းေကာင်း">သင်ယူမုဆိုင်ရာ လမ်းေကာင်း</h2>
+
+<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li>
+</ul>
+
+<dl>
+</dl>
+
+<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
+
+<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p>
+
+<h2 id="သင်ရိုး">သင်ရိုး</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt>
+ <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt>
+ <dd>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 other webpages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt>
+ <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt>
+ <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd>
+</dl>
+
+<h2 id="HTML_ပသနာများ_ေဖရင်းခင်း"> HTML ပသနာများ ေဖရင်းခင်း</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p>
+
+<h2 id="ပိုမိုလေ့လာရန်">ပိုမိုလေ့လာရန်</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt>
+ <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
+</dl>
+</div>
diff --git a/files/my/learn/index.html b/files/my/learn/index.html
new file mode 100644
index 0000000000..367d375f74
--- /dev/null
+++ b/files/my/learn/index.html
@@ -0,0 +1,89 @@
+---
+title: Web developement အကြောင်းလေ့လာခြင်း
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - Web
+translation_of: Learn
+---
+<div class="summary">
+<p>vbnကိုယ်တိုင် website တစ်ခု ဒါမှမဟုတ် web app တခုဖန်တီးချင်တယ်ဟုတ်။ ဒီနေရာကသင့်ကိုစောင့်နေပါတယ်။</p>
+</div>
+
+<p>web design နဲ့ development အတွက် သင်ယူစရာတွေများပပြားလှပါတယ်။ ဒါပေမဲ့ စိတ်မပူပါနဲ့ ။ ကျွန်တော်တို့ သင့်ကို professional web developer တယောက်အဖြစ်ရပ်တည်နိုင်လာအောင် ကူညီလမ်းပြပေးမှာပါ။</p>
+
+<h2 id="ဘယ်​နေ​အစ​ပြုချင်လဲ">ဘယ်​နေ​အစ​ပြုချင်လဲ</h2>
+
+<p>ခ​င်​ဗျားနဲ့ ကျွန်တော်တို့တော့ ဆုံကြပြီ၊ ဘယ်အကြောင်းအရာကိုခ​င်ဗျားလေ့လာချင်ပါသလဲ။</p>
+
+<ul class="card-grid">
+ <li><span>ကျွန်တော် သင်ယူစ တစ်ယောက်ပါ</span><span style='font-family: "Open Sans",arial,x-locale-body,sans-serif;'> </span><a href="/en-US/Learn/Getting_started_with_the_web" style='font-family: "Open Sans", arial, x-locale-body, sans-serif;'>"Getting started with the Web"</a><span style='font-family: "Open Sans",arial,x-locale-body,sans-serif;'> ကြိုစိုပါတယ်။ web developement ရဲ့ အခြခံသိစရာအဖြာဖြာ ကို ထောက်ပ့ပေးထားတဲ့ ဆောင်းပါး အတွဲဆက်က သင့်ကို ကူညီပေးမှာပါ။</span></li>
+ <li>
+  <p>Very good! In that case, we suggest you dig deeper into the technologies at the heart of the Web: <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a></p>
+ </li>
+ <li><span>web နဲ့ပတ်သက်ပြီးအထူးကျွမ်းကြင်ပြီးသားပါ</span>
+  <p>Amazing!တယ်ဟုတ်ပါလား၊ ဒါဆို ခင်​ဗျား အဆင့်မြင့် သင်ခန်းစာနဲ့ ၊လမ်းညွန်မှုတွေကို ​​လေ့လာဖို့ စိတ်ဝင်စစိတ် casားcယ်asားမe, you may be interested in exploring our advanced <a href="/en-US/docs/Web/Guide">Guides</a> and <a href="/en-US/docs/Web/Tutorials">Tutorials</a>. You should also consider <a href="/en-US/Learn/How_to_contribute">contributing to the Learning Area</a>. ;)ကျ်ျွကျ်ျ</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: In the future, we're planning to publish more learning pathways, for example for experienced coders learning specific advanced techniques, native developers who are new to the Web, or people who want to learn design techniques.</p>
+</div>
+
+<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p>
+
+<h2 id="Learning_with_other_people">Learning with other people</h2>
+
+<p>If you have a question or are still wondering where to go, Mozilla is a global community of Web enthusiasts, including mentors and teachers who are glad to help you. Get in touch with them through WebMaker:</p>
+
+<ul>
+ <li>Meet and talk with mentors and teachers at the <a href="http://discourse.webmaker.org/" rel="external">discourse forum</a>.</li>
+ <li><a href="https://events.webmaker.org/">Find events</a> and learn the web with awesome folks.</li>
+</ul>
+
+<h2 id="Sharing_knowledge">Sharing knowledge</h2>
+
+<p>This whole Learning Area is built by our contributors. We need you in our team whether you are a beginner, a teacher, or a skilled web developer. If you're interested, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and we encourage you to chat with us on our <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing lists</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>. :)</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li>Web နှင့်အစပြုကြရအောင်</li>
+ <li>Web အကြောင်းသိကောင်းစရာ
+  <ol>
+   <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li>
+   <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li>
+   <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li>
+   <li><a href="/en-US/Learn/Coding-Scripting">Coding &amp; Scripting</a></li>
+   <li><a href="/en-US/Learn/Design_and_Accessibility">Design &amp; Accessibility</a></li>
+   <li><a href="/en-US/Learn/Composing_for_the_web">Writing &amp; planning</a></li>
+  </ol>
+ </li>
+ <li>နည်းပညာများ လေ့လာမယ်
+  <ol>
+   <li><a href="/en-US/Learn/HTML">HTML</a></li>
+   <li><a href="/en-US/Learn/CSS">CSS</a></li>
+   <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li>
+   <li><a href="/en-US/Learn/Python">Python</a></li>
+  </ol>
+ </li>
+ <li>သင်ခန်းစာများနှင့် လေ့လာမယ်
+  <ol>
+   <li>Website တစ်ခုဘယ်လိုတည်ဆောက်မလဲ</li>
+   <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security </a>အခြေခံ</li>
+  </ol>
+ </li>
+ <li>သင်ယူမှုအရင်းအမြစ်များရယူရန်</li>
+ <li>အကူအညီရယူရန်
+  <ol>
+   <li><a href="/en-US/Learn/FAQ">FAQ</a></li>
+   <li><a href="/en-US/docs/Glossary">Glossary</a></li>
+   <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li>
+   <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li>
+  </ol>
+ </li>
+ <li>ကျွန်တော်တို့ကို ကူညီ ထောက်ပံပါ</li>
+</ol>
diff --git a/files/my/learn/javascript/index.html b/files/my/learn/javascript/index.html
new file mode 100644
index 0000000000..2e6649a258
--- /dev/null
+++ b/files/my/learn/javascript/index.html
@@ -0,0 +1,66 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - JavaScripting beginner
+  - Landing
+  - Module
+  - NeedsTranslation
+  - Topic
+  - TopicStub
+  - 'l10n:priority'
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("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, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, and so on — you can bet that JavaScript is probably involved.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li>
+</ul>
+
+<p>Having previous experience with other programming languages might also help.</p>
+
+<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p>
+
+<ul>
+ <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
+ <li><a href="/en-US/docs/Web/API">Web APIs</a></li>
+</ul>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt>
+ <dd>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 JavaScript features in detail, such as variables, strings, numbers and arrays.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt>
+ <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block 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.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt>
+ <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
+ <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even 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. </dd>
+</dl>
+
+<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt>
+ <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
+ <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/my/mozilla/index.html b/files/my/mozilla/index.html
new file mode 100644
index 0000000000..ddb9a6605f
--- /dev/null
+++ b/files/my/mozilla/index.html
@@ -0,0 +1,12 @@
+---
+title: Mozilla
+slug: Mozilla
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla
+---
+<p>The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications and the like.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/my/mozilla/localization/index.html b/files/my/mozilla/localization/index.html
new file mode 100644
index 0000000000..73cded6c42
--- /dev/null
+++ b/files/my/mozilla/localization/index.html
@@ -0,0 +1,17 @@
+---
+title: Localization at Mozilla
+slug: Mozilla/Localization
+translation_of: Mozilla/Localization
+---
+<p><span class="seoSummary"><strong>In progress. Localization</strong> (L10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. These resources are for anyone with an interest in the technical aspects involved in localization.</span> They are for developers and all contributors.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizing MDN</a></dt>
+ <dd>This resource covers localization of the documentation here on MDN.</dd>
+ <dt><a href="/en-US/Apps/Build/Localization">App localization</a></dt>
+ <dd>This set of documents applies more specifically to localizing apps, including Firefox OS apps.</dd>
+ <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt>
+ <dd>Reference docs for the L10n API that Mozilla uses to localise Firefox OS.</dd>
+</dl>
diff --git a/files/my/mozilla/localization/l10n_style_guide/index.html b/files/my/mozilla/localization/l10n_style_guide/index.html
new file mode 100644
index 0000000000..d8d9e74f31
--- /dev/null
+++ b/files/my/mozilla/localization/l10n_style_guide/index.html
@@ -0,0 +1,485 @@
+---
+title: Mozilla L10n ပုံစံပြလမ်းညွှန်
+slug: Mozilla/Localization/L10n_Style_Guide
+translation_of: Mozilla/Localization/L10n_Style_Guide
+---
+<h3 id="မိတ်ဆက်"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">မိတ်ဆက်</span></h3>
+
+<div id="magicdomid8"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Style guides define the standard against which we determine a translation's quality. They contain rules that are both defined by Mozilla and by Mozilla's localization communities on how to best translate text in Mozilla products, websites, and other projects. Style guides are used to both translate and evaluate a translation's quality. By following these rules, a translator has a better chance of producing a high quality translation that represents Mozilla values and culture. Some examples of international style guides created by other organizations are:</span></div>
+
+<ul>
+ <li id="magicdomid9"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://help.apple.com/asg/mac/2013/ASG_2013.pdf">https://help.apple.com/asg/mac/2013/ASG_2013.pdf</a></span></li>
+ <li id="magicdomid10"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/StyleGuides.aspx">https://www.microsoft.com/Language/en-US/StyleGuides.aspx</a></span></li>
+ <li><a href="https://www.facebook.com/translations/style_guides">https://www.facebook.com/translations/style_guides</a></li>
+</ul>
+
+<div><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">This style guide is broken up into two main parts: the first contains rules that are language-specific and must be defined by each Mozilla l10n community (covering language-specific style, terminology, and units); the second contains general rules that Mozilla has defined for translators of all languages that can help you translate well (covering principles of accuracy and fluency). Please adapt part one of this style guide to your l10n community's rules for style, terminology, and units. Wherever possible, refer to existing national standards for units, spelling, and grammar in your community's adaptation of the first part of this style guide.</span></div>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Language-specific_Mozilla_style">Language-specific Mozilla style</h2>
+
+<ol style="margin-left: 80px;">
+</ol>
+
+<h3 id="ပုံစံ">ပုံစံ</h3>
+
+<div id="magicdomid16"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Your localization community's style is largely up to you to define. It is a part of your community's instructions and standards for translating strings within each project type. Style encompasses various elements, such as formality, tone, natural expression, handling cultural references, idioms, or slang, and maintaining consistency with Mozilla and 3rd party branding and style guides. Your localization community should define these style elements for localizing Mozilla projects into your language. Let's go through these main aspects of Style.</span></div>
+
+<div id="magicdomid17"> </div>
+
+<h5 id="Formality_and_Tone">Formality and Tone</h5>
+
+<div id="magicdomid18"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">When determining the formality or tone of a Mozilla l10n project in your language, ask yourself these questions:</span></div>
+
+<ul>
+ <li>Who is the target user for this project and what is their background?</li>
+ <li>How would a target user for this project expect to interact with this project? For example, would they expect a friendly, casual interaction?</li>
+ <li>Is formal language appropriate for all of your language's Mozilla l10n projects, or only some of them? Which ones?</li>
+ <li>Is informal language appropriate for all of your language's Mozilla l10n projets, or only some of them? Which ones?</li>
+</ul>
+
+<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In fact, localization should not use a level of formality higher or lower than required by this community-defined style guideline. An example of this would be using "click here" (not formal) vs. "please click here" (more formal). Also, the tone employed throughout a l10n project(s) should stay consistent within itself. </span></div>
+
+<div> </div>
+
+<h5 id="Natural_expression">Natural expression</h5>
+
+<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Using natural expressions make your localization sound natural to a native speaker. If your translation does not follow the community defined language guidelines for translating content that contains local or natural expressions, this results in a mediocre and/or awkward translation. Teams should be careful to address those and keep them in mind while translating, which is why it is an important section to address in a Style Guide. An example of a natural expression in a translation would be translating the Spanish phrase, "En ocho días." In English, one might translate this as, "in eight days" or "in a week." The latter is the more natural translation, although both could be considered correct. </span></div>
+
+<div> </div>
+
+<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In this section, form guidelines for how to perform a natural sounding localization. This might take some time and experience to find the right examples to include or create the right guidelines for your language.</span></div>
+
+<div> </div>
+
+<h5 id="Handling_cultural_references_idioms_and_slang">Handling cultural references, idioms, and slang</h5>
+
+<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. An example of a cultural reference in English would be the phrase, "kick-off meeting." This is a reference that uses an American football term. It means a meeting to begin a project. To translate it, you can follow one of two approaches:</span></p>
+
+<ol>
+ <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Find an equivalent reference phrase in your language.</span></li>
+ <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Remove the cultural reference and translate the core meaning (e.g., "a commencement meeting") </span></li>
+</ol>
+
+<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Define a policy for handling these cultural references, idioms, and slang that you can make standard across all projects. Consider resources you can refer back to in order to find cultural equivalents and list them in this section of your style guide (e.g., a slang dictionary in your language).  </span></p>
+
+<h5 id="Style_consistency">Style consistency</h5>
+
+<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Finally, adherence to Mozilla and third-party branding and style guides should be respected throughout a localization project. More information on Mozilla-specific branding rules can be found here: </span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z url"><a href="https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/">https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/</a></span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">. For example, some brand names should never be translated, such as "Firefox".  For other brands that do not have any branding guidelines, your localization community must define whether to translate them. Be extra careful to check on branding rules before deciding to translate a name or not (whether for Mozilla or for a third-party) and to list them here in your community's l10n style guide.</span></div>
+
+<div> </div>
+
+<div>
+<h3 id="ပညာရပ်ဝေါဟာရ"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>ပညာရပ်ဝေါဟာရ</strong></span></h3>
+
+<div id="magicdomid29"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Here are a few existing term bases we approve of for software/internet terminology and definitions (though not limited to):</span></div>
+
+<ul>
+ <li id="magicdomid30"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Microsoft key terms and target languages  </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/Default.aspx">https://www.microsoft.com/Language/en-US/Default.aspx</a></span></li>
+ <li id="magicdomid31"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Pootle's own term list: </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://mozilla.locamotion.org/xx/terminology/essential.po">https://mozilla.locamotion.org/xx/terminology/essential.po</a></span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> (replace *xx* with a locale code)</span></li>
+</ul>
+
+<div id="magicdomid33"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">You should be consistent in the use of existing reliable appropriate term bases in your language.  These term bases could be developed and approved by the community, or leveraged from another party that adhere to national, international or local standards</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> for software and internet terminology</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">.  Avoid</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> the following:</span></div>
+
+<ul>
+ <li id="magicdomid34"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology within the project</span></li>
+ <li id="magicdomid35"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology with term base</span></li>
+ <li id="magicdomid36"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology across all of your projects</span></li>
+ <li id="magicdomid37"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">U</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">sing terminology from another subject matter (e.g., don't use medical terminology in Firefox)</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">.</span></li>
+</ul>
+
+<h5 id="Tips_on_translating_difficult_concepts"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Tips on translating difficult concepts</strong></span></h5>
+
+<div id="magicdomid40"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Translating terms representing difficult concepts is a tricky task. Here are some ideas to help you translate terms that do not have equivalents in your language:</span></div>
+
+<ul>
+ <li id="magicdomid41"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Understand the meaning of the term in English. Definitions of a few key terms </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="http://techterms.com/category/internet">http://techterms.com/category/internet</a></span></li>
+ <li id="magicdomid42"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Know your product and understand the function of the feature. </span></li>
+ <li id="magicdomid43"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider similar ideas for those functions in your culture.</span></li>
+ <li id="magicdomid44"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Associate a culturally specific image with the meaning and function of the term.</span></li>
+</ul>
+
+<h5 id="Developing_new_term_bases"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Developing new term base</strong></span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>s</strong></span></h5>
+
+<div id="magicdomid47"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">What is your </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">community's</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> process </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">for</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> identifying and creating a new t</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ermbase</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">? Here are a few things to keep in mind:</span></div>
+
+<ul>
+ <li id="magicdomid48"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Avoid </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">verly borrowing English expressions</span></li>
+ <li id="magicdomid49"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Referenc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ing</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> another language f</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">rom</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> the same language </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">family</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> may inspire you to come up with your own terms</span></li>
+ <li id="magicdomid50"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider the product target audience (age</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> level of literacy, education</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> social </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> economic status)</span></li>
+ <li id="magicdomid51"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Will you use l</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">oan words</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> from another language</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or coin new terms in your language to maintain</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">language purity?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> Is there government requirement or policy to encourage creating new terms for new concepts</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">, o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">r </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">will </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">loan words </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">be sufficient to</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> reach broader masses </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> expedite new technology adoption</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span></li>
+ <li id="magicdomid52"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">If there are two acceptable scripts commonly used by the general public, what is the commonly used script on the web or government sites?  What is the script used by major web technology companies?</span></li>
+</ul>
+
+<h3 id="အတိုင်းအတာနှင့်_သဒ္ဒါ"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">အတိုင်းအတာနှင့် သဒ္ဒါ</span></h3>
+
+<div id="magicdomid57"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many elements of unit or grammar do not exist or apply to all languages. If you find one of these elements that does not apply to your language, please remove it from your style guide.</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> For those definitions of units and grammar that apply document the reference used or how it will be applied to the translation.</span></div>
+
+<div id="magicdomid58"> </div>
+
+<div id="magicdomid59"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">The translation should strive to achieve proper unit conversions for currency, measurements, etc. for the target audience.</span></div>
+
+<div id="magicdomid60"> </div>
+
+<h4 id="Units_and_Unit_Conversion"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Units and Unit Conversion</span></h4>
+
+<h5 id="Date_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Date Format</span></h5>
+
+<div id="magicdomid64"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are the date formats for weeks and months expressed in the following forms: </span></div>
+
+<ul>
+ <li><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">1). Fully spelled out</span> 2).<span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> 2 or 3 letters  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">3). Single letter</span></li>
+ <li id="magicdomid65"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the order of Year, Month and Day?  </span></li>
+</ul>
+
+<div id="magicdomid66"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Reference material can be find here: </span>https://en.wikipedia.org/wiki/Date_format_by_country</div>
+
+<div> </div>
+
+<h5 id="Calendar_view"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">C</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">alendar</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> view: </span></h5>
+
+<ul>
+ <li id="magicdomid68"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   Which date is considered the first day of the week, Sunday or Monday?  </span></li>
+ <li id="magicdomid69"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   Is Lunar calendar observed?  Other regional calendar observed?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li>
+</ul>
+
+<h5 id="Time_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Time Format</span></h5>
+
+<div id="magicdomid72"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How is time expressed in your language? </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ncluding 0-24 hr expression, hour, minute and second.</span></div>
+
+<div> </div>
+
+<h5 id="Numerals"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Numerals </span></h5>
+
+<div id="magicdomid76"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are numerals an</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">d percentages</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> expressed in your language?  </span></div>
+
+<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. </span></div>
+
+<div> </div>
+
+<h5 id="Currency"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Currency  </span></h5>
+
+<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What are other widely used currency and symbols used in your country/language for paid apps. </span></div>
+
+<div id="magicdomid79"> </div>
+
+<h5 id="Units"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Units</span></h5>
+
+<div id="magicdomid81"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use the imperial, metric or nautical system for measuring weight, distance, etc.? Source strings will use the imperial system (e.g., miles, pounds, feet, gallons, etc.). Target translations should convert imperial metrics to their measurement system.</span></div>
+
+<div id="magicdomid82"> </div>
+
+<h5 id="Names"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Name</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">s</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  </span></h5>
+
+<div id="magicdomid84">
+<p><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What are the order of family name and given name in your language</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  Here is the guideline on the naming convention from w3c.org:</span></p>
+</div>
+
+<h5 id="Address_and_Postal_Code_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Address and Postal Code Format </span></h5>
+
+<div id="magicdomid87"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the format in your language?  </span></div>
+
+<div id="magicdomid88"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Example: most Asian countries start from big to small: [Country] [postal code][state/province][city][district][street number and name][building and suite numbers][addressee]</span></div>
+
+<div id="magicdomid89"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    Countries of European languages start from small to big: [addressee][street number and name][building and suite numbers][district][city][state/province][postal code][Country]</span></div>
+
+<div id="magicdomid90"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">   </span></div>
+
+<h5 id="Telephone_Number_format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Telephone Number format</span></h5>
+
+<div id="magicdomid92"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Space separators between digits can be different for area codes such as State (Province) and City, </span></div>
+
+<div id="magicdomid94"> </div>
+
+<h4 id="Spelling_And_Grammar_Checks"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Spelling And Grammar Checks</strong></span></h4>
+
+<div id="magicdomid96"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many languages have national or international standards that define spelling and grammar rules. When defining these rules for your community, make reference to those standards wherever possible. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have automated tests for spell checking and grammar</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">List those tools and dictionaries here and how regularly they should be used.</span></div>
+
+<div id="magicdomid97"> </div>
+
+<h5 id="Tense"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Tense</strong></span></h5>
+
+<div id="magicdomid99"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have standards for verb forms that indicate or express the time, such as past, present, or future, of the action or state</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">? What is your policy on tense consistency for certain use cases? For example, for phrases that ask a user to make an action (like "Download Firefox"), do you use a future tense, a command tense, or a neutral tense? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Grammatical_tense">https://en.wikipedia.org/wiki/Grammatical_tense</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div>
+
+<div id="magicdomid100"> </div>
+
+<h4 id="Word_Forms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Word Forms</strong></span></h4>
+
+<h5 id="Pluralization"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Pluralization  </span></h5>
+
+<div id="magicdomid106"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing pluralization in your language?  </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">L</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ist all forms of plural forms and examples if there is more than one.  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Additional discussions can be found Here. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals">https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and here:  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html</a></span></div>
+
+<div id="magicdomid107"> </div>
+
+<h5 id="Abbreviations"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Abbreviations  </span></h5>
+
+<p><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are abbreviations expressed in your language?</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span><br>
+ <span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">    Example, in English, abbreviations are made by removing most vowels and only using the first 3-5 consonants followed by a period (e.g., abbreviation = abbr.).</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Abbreviation%29">https://en.wikipedia.org/wiki/Abbreviation)</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">    </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span></p>
+
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If your language does not have a standard way of expressing abbreviations, do you simply leave them in English?</span></p>
+
+<h5 id="Acronyms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Acronyms </span></h5>
+
+<div id="magicdomid113">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Are there standard</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> translat</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ions of</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> widely accepted acronyms such as CD, DVD, MB</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language? If not, do they remain in English?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Acronym">https://en.wikipedia.org/wiki/Acronym</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p>
+</div>
+
+<h5 id="Punctuation"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Punctuation</strong></span></h5>
+
+<div id="magicdomid117"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use different punctuation rules in your Firefox localization than what your language standard defines? </span></div>
+
+<div><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">    Example: do you use a period at the end of every user interface element translation or only some? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">W</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">hat is the international/national standard for punctuation in your language</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">?</span></div>
+
+<div id="magicdomid118"> </div>
+
+<h5 id="Emphasis"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Emphasis</span></h5>
+
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Is there an international/national standard for capitalization</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> in your language? </span></p>
+
+<ul>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If so, do those standard rules apply in all product translations? </span></li>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">f this doe</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">sn</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">'t apply, how </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">do you</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> indicate importance or name of a movie, book title, product UIs (</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq u"><u>S</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ave, </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj u"><u>F</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ile...)</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li>
+ <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">How does your language handle the use of bold, italic, or underline types to express emphasis?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  ( See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Italic_type">https://en.wikipedia.org/wiki/Italic_type</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></li>
+</ul>
+
+<h5 id="Hyphens_and_compounds"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Hyphens and compounds </span></h5>
+
+<div id="magicdomid123"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">way</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> of </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">using</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> hyphens and compounds in your language?  ( </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Compound_%28linguistics%29">https://en.wikipedia.org/wiki/Compound_%28linguistics%29</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> ) </span></div>
+
+<div id="magicdomid124"> </div>
+
+<h5 id="Prepositions_and_articles"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Prepositions and articles</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span></h5>
+
+<div id="magicdomid126"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing prepositions and articles in your language?</span></div>
+
+<div id="magicdomid127"> </div>
+
+<h5 id="Diacritics_and_Special_characters"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Diacritics and </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Special characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  </span></h5>
+
+<div id="magicdomid129"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language use</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> any special </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or accented characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and will they be applied and preserved in sort orders, and other aspects of the translation</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Diacritic">https://en.wikipedia.org/wiki/Diacritic</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div>
+
+<div id="magicdomid130"> </div>
+
+<h5 id="Quotes"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Quotes  </span></h5>
+
+<div id="magicdomid132">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language have a standard use for quotation marks, parenthesis, or brackets?</span></p>
+</div>
+
+<h5 id="Whitespace"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Whitespace </span></h5>
+
+<div id="magicdomid135">
+<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language require the</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> use of white space around words, sentences, paragraphs, etc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">.? If so, in what ways?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">  (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides">https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p>
+</div>
+
+<h5 id="User_Interface_Elements"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>User Interface Elements</strong></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">        </span></h5>
+
+<div id="magicdomid139"> </div>
+
+<ul>
+ <li id="magicdomid140"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Titles :  Should be brief and precise. Localizers can assume that source content reaches 2/3 of the total available line space. This allows localization text to expand and not be truncated or resolved through ellipsis. Title on the final page (meaning no more click through) should allow enough room to display full text.         </span></li>
+ <li id="magicdomid142"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Buttons: Capitalize the first letter of each word. Limit to one or two words. Use verbs that precisely describe the button's action. For example, "Cancel", "Clear History", "Add Email", "Select All", etc.          </span></li>
+ <li id="magicdomid144"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Value Selector Lists: Capitalize the first letter of the first word and the first letter of any proper nouns. Limit to one or two words. </span></li>
+ <li id="magicdomid147"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Articles:  </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Avoid them where possible. Articles (such as the word "the" in English) should be avoided wherever possible. User interface elements have limited space available for text. Avoiding articles will help ensure that your translations will be accommodated within the user interface.              </span></li>
+ <li id="magicdomid149"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Ellipsis: Ellipsis are often inserted automatically in the UI where strings are truncated. Ellipsis should only be used at high level of UI pages, but not be on the final page (after a series of click-through) where detailed instruction is given. Ellipsis should not be used as a way to solve truncation issue.  Focus on making the UI short and precise.  The sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such.     </span></li>
+</ul>
+</div>
+
+<h2 id="အထွေထွေ_Mozilla_l10n_ပုံစံ">အထွေထွေ Mozilla l10n ပုံစံ</h2>
+
+<h3 id="မှန်ကန်မှု">မှန်ကန်မှု</h3>
+
+<h4 id="Meaning-based_translation"><span class="author-p-1460 b"><strong>Meaning-based translation</strong></span></h4>
+
+<div id="magicdomid3"><span class="author-p-1460">When it comes to translation, meaning is everything. A translator needs to understand the source text's meaning exactly. You then find its most closely linked equivalent in your own language, without adding or subtracting meaning in your translation. Finding meaning-based equivalents between languages can be difficult. To help concentrate your thoughts, ask yourself questions like:</span></div>
+
+<ul>
+ <li><span class="author-p-1460">What does this word/sentence/string mean in English?</span></li>
+ <li><span class="author-p-1460">What is the message the author is trying to send?</span></li>
+ <li><span class="author-p-1460">How would I express that meaning in my own language?</span></li>
+</ul>
+
+<p><span class="author-p-1460">Sometimes translation memory and machine translation tools can offer bad suggestions for a translation. If you use either as part of your translation workflow, make sure to correct the suggestions before submitting them. Avoid literal translation at all costs. Watch out for words that might sound or look the same between English and your language, but have a different meaning. </span></p>
+
+<h4 id="Should_not_be_translated">Should not be translated</h4>
+
+<h5 id="Shortcuts_and_accesskeys">Shortcuts and accesskeys</h5>
+
+<p>In Firefox and other software it's possible to use keyboard shortcuts to invoke a specific command. For example, to open a file in Firefox you can press the combination of keys <code>CTRL+O</code> (<code>Cmd+O</code> on Mac). The accelerator key depends on the operative system, but the letter itself is normally localizable. This is what is called a shortcut, or commandkey. For example, the <code>Open File…</code> menu item is stored as</p>
+
+<pre class="sourcelines stripes"><span id="l61"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.label</span> <span class="s2">"Open File…"</span><span class="k">&gt;</span></span>
+<span id="l62"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.accesskey</span> <span class="s2">"O"</span><span class="k">&gt;</span></span>
+<span id="l63"><span class="k">&lt;!ENTITY</span> <span class="ni">openFileCmd.commandkey</span> <span class="s2">"o"</span><span class="k">&gt;</span></span></pre>
+
+<p>The commandkey is stored in <code>openFileCmd.commandkey</code> (sometimes the string has <code>.key</code> in the identifier). Normally you should not localize this key, since shortcuts are often common across the entire operative system (e.g. <code>CTRL+S</code> to Save) or similar products (<code>CTRL+T</code> to open a new tab in most browsers). But it needs to be localized if the letter is not available in your keyboard layout. For example, in Italian the character <code>[</code> can be accessed through <code>ALT+è</code>, a command key <code>[</code> would not work.</p>
+
+<p>In the code fragment above you see also an accesskey defined for <code>Open File…</code>. Accesskeys are used to access a UI element from the keyboard. Example: if File menu has an accesskey F, and the Open file… menu has O, you can press ALT+F to access the menu, and then O to open a file.</p>
+
+<p>If the label is File, and the accesskey is F, it will be displayed as "<u>F</u>ile" on Windows and Linux, with an underscored F. If the accesskey was "O", so a character not available in the original label, it will be displayed underlined between parenthesis: "File (<u>O</u>)".</p>
+
+<p>One important thing to determine is if, for your locale, it makes sense to have localized accesskeys: for example, if most users will use a keyboard with a different layout (English), it might make sense to keep the English original accesskey instead of using a letter available in your localization.</p>
+
+<p>Accesskeys, like commandkeys, have their own lines within .dtd and .properties files and are usually identified by .accesskey in the string ID.</p>
+
+<h5 id="Variables"><span class="author-p-1460">Variables</span></h5>
+
+<p><span class="author-p-1460">Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., <span class="author-p-1460">$, #, %, etc.)</span> followed by a combination of words without spacing. For example, $BrandShortName and %S are variables.  </span>You can move a variable around within a string, if the translation of the string requires it.</p>
+
+<h5 id="Brands_copyright_and_trademark"><strong><span class="author-p-1460">Brands, copyright, and trademark</span></strong></h5>
+
+<p><span class="author-p-1460">Brand names, as well as copyright and trademarks should never be translated, nor transliterated into a non-Latin based script. See the <a href="https://www.mozilla.org/en-US/styleguide/communications/translation/">Mozilla branding guide</a> for more details.</span></p>
+
+<p><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em; line-height: 1;">Translating c</span><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em; line-height: 1;">ulture-specific references</span></p>
+
+<p>At times there will be English content included in Mozilla products or web projects (e.g., marketing campaigns) that makes references to American culture and concepts. When translating these, it is best to find an equivalent cultural reference within your own culture that accurately conveys the meaning of the English reference. For example, an American might say, "Good job, home run!" A home run is a baseball reference for a successful outcome. An appropriate translation would be an equivalent metaphor within your culture. Using soccer as an example, you might translate "Good job, home run!" into "Good job, nice goal!" in your language.</p>
+
+<p>[Add a note about Mozilla culture.]</p>
+
+<h4 id="Legal_content">Legal content</h4>
+
+<p>Mozilla projects will often contain legal content in the form of user agreements, privacy statements, etc. When reviewing the translation of legal content, Mozilla localizers should do so according to the criteria concerning accuracy, fluency, style, and terminology found within this style guide and according to Mozilla culture and values.</p>
+
+<h3 id="ကောင်းမွန်သော_ပြန်ဆိုမှု"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ကောင်းမွန်သော ပြန်ဆိုမှု</span></h3>
+
+<div id="magicdomid153"> </div>
+
+<div id="magicdomid154"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To produce a fluent translation, not only should the translation follow the language's standard grammar, punctuation, and spelling rules, but it should avoid being ambiguous, incoherent, or inconsistent, and unintelligible.</span></div>
+
+<div id="magicdomid155"> </div>
+
+<div id="magicdomid156"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To avoid ambiguity, the translator must thoroughly understand the meaning behind the source text, including any references that text might include. For example, if the English source text uses the word, "it", the translator must know what "it" is to avoid an ambiguous translation. Clearly understanding the source text will also allow a translator to make the source text's logical connections in their own translation. This helps to keep the translation coherent.</span></div>
+
+<div id="magicdomid157"> </div>
+
+<div id="magicdomid158"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Inconsistency can pop up in many forms. A translator must be consistent in their use of abbreviations, references, and links within each localization project. They must also be consistent with Mozilla and the localization communities' style guides and approved terminology. Abbreviations, like terminology, should come from either a standard reference (like a dictionary of abbreviations) or should follow your language's rules for creating abbreviations. Once used, the abbreviation must remain consistent every place that it is used in the translation. Cross-references (or links) must also be consistently used within a translation. If a text contains a hyperlink URL to a support article in English, the translation should also contain a hyperlink to a translation of that support article (if available) or the English version. Links should not redirect to other pages nor should they be broken and unusable.</span></div>
+
+<div id="magicdomid159"> </div>
+
+<div id="magicdomid160"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Finally, there are times that a translation simply doesn't make sense. It's hard to put your finger on what exactly is wrong with it, but you know it is unintelligible and not fluent. While this is uncommon, it's important to report these unintelligible translations and offer suggestions to correct them.</span></div>
+
+<div> </div>
+
+<h2 id="အခြားသိကောင်းစရာများ"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">အခြားသိကောင်းစရာများ</span></h2>
+
+<table dir="ltr" style="border-collapse: collapse; border: 1px solid #cccccc; font-family: arial,sans,sans-serif; font-size: 13px;">
+ <colgroup>
+  <col>
+  <col>
+  <col>
+  <col>
+  <col>
+  <col>
+  <col>
+  <col>
+ </colgroup>
+ <tbody>
+  <tr style="height: 21px;">
+   <td colspan="8" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;">အနက်ပြန်ခြင်း</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၁။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">အနက်ပြန်သောကိစ္စ၌ မြန်မာလို ပြောဆိုရိုးဖြစ်သော စကားရှိလျှင် ထိုစကားမျိုးကို သုံးသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၂။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">မျိုးခြား ဝေါဟာရတခုအတွက် မြန်မာဝေါဟာရတခုကို ပြုရာတွင် ထိုမျိုးခြားဝေါဟာရ၏ အဓိပ္ပါယ်တို့ကို အစုံပါစေလိုသော ဆန္ဒဖြင့် ပြုသောအခါ တခါတရံ မြန်မာမဆံခြင်း သော်လည်းကောင်း၊ ဆို၍ မကောင်းခြင်း သော်လည်းကောင်း ဖြစ်တန်ရာသည်။ ထိုအခါမျိုးတွင် အရေးကြီးဆုံးဖြစ်သော အဓိပ္ပါယ် တခု နှစ်ခုလောက်ကို သင့်တော်အောင် ပေါင်းစပ်၍ မြန်မာဝေါဟာရ ပြုသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">(နောင်တနေ့တွင် ဝေါဟာရအဘိဓါန် စီရင်နိုင်လာသောအခါ ထိုစကားမျိုးအတွက် အသေးစိတ် အနက်ဖွင့်ရန် လိုပါလိမ့်မည်။)</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၃။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">အနက်ပြန် ဝေါဟာရတခုသည် သုံးရိုးစွဲရိုးဖြစ်၍ ထိုဝေါဟာရကို လက်ခံခဲ့ကြပြီးဖြစ်လျှင် လက်ခံခဲ့ကြသည့်အတိုင်း ထားရှိသင့်သည်။ သို့ရာတွင် ခြွင်းချက်လည်း ရှိသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;">အသံလှယ်ခြင်း</td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၄။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">အသံလှယ်ရာ၌ သာမန်အားဖြင့် အင်္ဂလိပ်အသံထွက်ကို လှယ်သင့်ပါသည်။ (Daniel Jones ၏ English Pronouncing Dictionary ကို သုံးသင့်သည်။) သို့ရာတွင် ခြွင်းချက်လည်း ရှိသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၅။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">မြန်မာ့နှုတ် အာလျှာတို့ဖြင့် ဆို၍ ကောင်းအောင် သို့မဟုတ် မြန်မာ့နားဖြင့် ကြား၍ ကောင်းအောင် အသံလှယ်သင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၆။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">သာမန်အားဖြင့် မျိုးခြားဝေါဟာရရှိ အဆုံးသတ်အသံအတိုင်း အသံလှယ်သင့်သည်။ သို့ရာတွင် အသံထွက်တူ၍ အနက်ကွဲပြားနေလျှင် ကွဲပြားချက်ထင်ရှားအောင် ပြုပြင်သင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၇။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">အသံလှယ် ဝေါဟာရတခုသည် သုံးရိုးစွဲရိုးဖြစ်၍ ထိုဝေါဟာရကို လက်ခံခဲ့ကြပြီးဖြစ်လျှင် လက်ခံခဲ့ကြသည့်အတိုင်း ထားရှိသင့်သည်။ သို့ရာတွင် ခြွင်းချက်လည်း ရှိသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;">အထွေထွေ</td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၈။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">ဝေါဟာရသည် သိလွယ်သော ဝေါဟာရ ဖြစ်သင့်သည်။ ကြားရုံမျှဖြင့် နားလည်သင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၉။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">သင့်တော်သည် ထင်မြင်လျှင် အရပ်သုံးစကားကိုပင် လက်ခံသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၁၀။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">မျိုးခြားဝေါဟာရတခု၌ ပညာရပ်ကိုလိုက်၍ အဓိပ္ပါယ်တမျိုးစီ ရှိနေလျှင်</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">(က)</td>
+   <td colspan="6" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">ပညာရပ်အလိုက် အဓိပ္ပါယ်ထွက်သော မြန်မာဝေါဟာရ တမျိုးစီ ရှိသင့်သည်။ သို့မဟုတ်</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">(ခ)</td>
+   <td colspan="6" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">အသံလှယ်သင့်သည်။ သို့မဟုတ်</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">(ဂ)</td>
+   <td colspan="6" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">ထိုမျိုးခြားဝေါဟာရ ပေါ်ထွက်ရာဖြစ်သော အရင်းခံပညာရပ်အလိုက် အနက်ပြန်၍ ဝေါဟာရပြုသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၁၁။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">မျိုးခြားဝေါဟာရတခုအတွက် မြန်မာပြန် ဝေါဟာရနှင့် ပါဠိဝေါဟာရရှိနေလျှင် သာမန်အားဖြင့် မြန်မာဝေါဟာရကို ယူသင့်သည်။ မလွှဲမရှောင်မှသာလျှင် အသိလွယ်သော ပါဠိဝေါဟာရကို လက်ခံသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;">၁၂။</td>
+   <td colspan="7" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">မျိုးခြားဝေါဟာရတခုအတွက် အနက်ပြန်ဝေါဟာရသော်လည်းကောင်း၊ အသံလှယ် ဝေါဟာရသော်လည်းကောင်း တခုလုံးထက် ပို၍ရှိနေလျှင် အသင့်တော်ဆုံးဟု ထင်ရသော တလုံးကို သာမန်အားဖြင့် ရွေးချယ်သင့်သည်။ သို့ရာတွင် လုံလောက်သော အကြောင်းရှိလျှင် ခြွင်းချက်လည်း ရှိသင့်သည်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+   <td style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="8" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">ဝေါဟာရဟူသည် နာမပညတ်မျှသာဖြစ်ရာ နာမပညတ်ကို ကြားသိရုံမျှဖြင့် သက်ဆိုင်ရာ အဓိပ္ပါယ်အလုံးစုံကို သိနိုင်မည် မဟုတ်ပါ။<br>
+    ယခုညှိပြီး ဝေါဟာရတို့သည် ပြီးပြည့်စုံပြီဟု မယူဆသင့်ပါ။ ထပ်မံပြုပြင်စရာ၊ ဖြည့်စွက်စရာတို့ ရှိနေဦးမည်သာ ဖြစ်ပါသည်။ ထို့ကြောင့် ဤဝေါဟာရများကို သုံးသွားယင်း ပိုမိုကောင်းမွန်သော ဝေါဟာရများတွေ့ခဲ့သော် တက္ကသိုလ် ဘာသာပြန်နှင့် စာအုပ်ထုတ်ဝေရေးဌာနသို့ အကြံဉာဏ်ပေးပို့ကြရန် မေတ္တာရပ်ခံပါသည်။ ထိုသို့ ပေးပို့ကြသည့် အကြံဉာဏ်များအတိုင်း သင့်လျော်သလို ပြုပြင်ဖြည့်စွက်သွားမည် ဖြစ်ပါသည်။ စင်စစ်မှာ ဝေါဟာရပြုစုရေးလုပ်ငန်းသည် အစဉ်တစိုက် ဆက်၍ လုပ်ရဦးမည့်လုပ်ငန်းသာ ဖြစ်ပါသည်။<br>
+    ဝိုင်းဝန်းပြုစုကြသည့် ပညာရှင်အားလုံးကို ကျေးဇူး ဥပကာရ တင်ပါကြောင်း</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="8" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom;"> </td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="8" rowspan="1" style="padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;">ရင်းမြစ်။</td>
+  </tr>
+  <tr style="height: 21px;">
+   <td colspan="8" style="padding: 2px 3px 2px 3px; vertical-align: bottom;">ပညာရေးဝန်ကြီးဌာန<br>
+    အထက်တန်းပညာဦးစီးဌာန<br>
+    တက္ကသိုလ်ပို့ချစာစဉ် (၃၆)<br>
+    ပညာရေးတက္ကသိုလ်<br>
+    ပညာရပ်ဝေါဟာရ<br>
+    ၁၉၇၉</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/my/mozilla/performance/adding_a_new_telemetry_probe/index.html b/files/my/mozilla/performance/adding_a_new_telemetry_probe/index.html
new file mode 100644
index 0000000000..b706bfd185
--- /dev/null
+++ b/files/my/mozilla/performance/adding_a_new_telemetry_probe/index.html
@@ -0,0 +1,184 @@
+---
+title: Adding a new Telemetry probe
+slug: Mozilla/Performance/Adding_a_new_Telemetry_probe
+translation_of: Mozilla/Performance/Adding_a_new_Telemetry_probe
+---
+<p>If a user has opted into submitting performance data to Mozilla, the Telemetry system will collect various measures of Firefox performance, hardware, usage and customizations and submit it to Mozilla. The Telemetry data collected by a single client can be examined from the integrated <em>about:telemetry</em> browser page, while the aggregated reports across entire user populations are publicly available at <a href="https://telemetry.mozilla.org">https://telemetry.mozilla.org</a>.</p>
+
+<div class="warning">
+<p><strong>Note: </strong>Every new data collection in Firefox now needs a <a href="https://wiki.mozilla.org/Firefox/Data_Collection#Requesting_Approval">data collection review</a> from a data collection peer. Just set the feedback? flag for :bsmedberg or one of the other data peers. We try to reply within a business day.</p>
+</div>
+
+<p>The following sections explain how to add a new measurement to Telemetry.</p>
+
+<h2 id="Telemetry_Histograms">Telemetry Histograms</h2>
+
+<p>Telemetry histograms are the preferred way to track numeric measurements such as timings. Telemetry also tracks more complex data types such as slow SQL statement strings, browser hang stacks and system configurations. Most of these non-histogram measurements are maintained by the <a href="https://wiki.mozilla.org/Telemetry#People">Telemetry team</a>, so they are not covered in this document. If you need to add a non-histogram measurement, contact that team first.</p>
+
+<p>The histogram below is taken from Firefox's <em>about:telemetry</em> page. It shows a histogram used for tracking plugin shutdown times and the data collected over a single Firefox session. The timing data is grouped into buckets where the height of the blue bars represents the number of items in each bucket. The tallest bar, for example, indicates that there were 63 plugin shutdowns lasting between 129ms and 204ms.</p>
+
+<p><img alt="Sample Telemetry histogram &quot;PLUGIN_SHUTDOWN_MS&quot; taken from Firefox's about:telemetry page" src="/files/4437/sampleHistogram.png" style="height: 376px; width: 328px;"></p>
+
+<h2 id="Choosing_a_Histogram_Type">Choosing a Histogram Type</h2>
+
+<p>The first step to adding a new histogram is to choose the histogram type that best represents the data being measured. The sample histogram used above is an "exponential" histogram.</p>
+
+<div class="note">
+<p>Ony <strong>flag</strong> and <strong>count</strong> histograms have default values. All other histograms start out empty and are not submitted if no value is recorded for them.</p>
+</div>
+
+<p>The following types are available:</p>
+
+<ul>
+ <li><strong>flag:</strong> This histogram type allows you to record a single value (<code>0</code> or <code>1</code>, default <code>0</code>). This type is useful if you need to track whether a feature was ever used during a Firefox session. You only need to add a single line of code which sets the flag when the feature is used because the histogram is initialized with a default value of <code>0</code>/<code>false</code> (flag not set). Thus, recording a value of <code>0</code> is not allowed and asserts.</li>
+ <li><strong>boolean</strong>: These histograms only record boolean values. Multiple boolean entries can be recorded in the same histogram during a single browsing session, e.g. if a histogram is measuring user choices in a dialog box with options "Yes" or "No", a new boolean value is added every time the dialog is displayed.</li>
+ <li><strong>count</strong>: This histogram type is used when you want to record a count of something. It only stores a single value and defaults to <code>0</code>.
+  <div class="warning">
+  <p>Count histograms and keyed histograms are fully supported only in our V4 pipeline tools, such as the <a href="https://telemetry.mozilla.org/">unified telemetry (v4) dashboards</a>. These are not fully supported in Telemetry v2 pipeline tools such as the <a href="https://alerts.telemetry.mozilla.org/index.html">histogram change detector</a>.</p>
+  </div>
+ </li>
+ <li><strong>enumerated</strong>: This histogram type is intended for storing "enum" values. An enumerated histogram consists of a fixed number of "buckets", each of which is associated with a consecutive integer value (the bucket's "label"). Each bucket corresponds to an enum value and counts the number of times its particular enum value was recorded. You might use this type of histogram if, for example, you wanted to track the relative popularity of SSL handshake types. Whenever the browser started an SSL handshake, it would record one of a limited number of enum values which uniquely identifies the handshake type.
+  <div class="note">
+  <p>Set "n_buckets" to a slightly larger value than needed to allow for new enum values in the future. The current Telemetry server does not support changing histogram declarations after the histogram has already been released. See <a href="#Miscellaneous">Miscellaneous section</a>.</p>
+  </div>
+ </li>
+ <li><strong>linear:</strong> Linear histograms are similar to enumerated histograms, except each bucket is associated with a range of values instead of a single enum value. The range of values covered by each bucket increases linearly from the previous bucket, e.g. one bucket might count the number of occurrences of values between 0 to 9, the next bucket would cover values 10-19, the next 20-29, etc. This bucket type is useful if there aren't orders of magnitude differences between the minimum and maximum values stored in the histogram, e.g. if the values you are storing are percentages 0-100%.
+  <div class="note">
+  <p>If you need a linear histogram with buckets &lt; 0, 1, 2 ... N &gt;, then you should declare an enumerated histogram. This restriction was added to prevent developers from making a common off-by-one mistake when specifying the number of buckets in a linear histogram.</p>
+  </div>
+ </li>
+ <li><strong>categorical: </strong>Categorical histograms are similar to enumerated histograms. However, instead of specifying <code>n</code>_<code>buckets</code>, you specify an array of strings in the <code>labels</code> field. From JavaScript, the label values or their indices can be passed as strings to <code>histogram.add()</code>. From C++ you can use<code> AccumulateCategorical()</code> with passing a value from the corresponding <code>Telemetry::LABEL_*</code> enum, or, in exceptional cases the string values.
+  <div class="note">
+  <p>If you need to add new labels, you should use a new histogram name. The current Telemetry server does not support changing histogram declarations after the histogram has already been released. See <a href="#Miscellaneous">Miscellaneous section</a>.</p>
+  </div>
+ </li>
+ <li>
+  <p><strong>exponential:</strong> Exponential histograms are similar to linear histograms but the range of values covered by each bucket increases exponentially. As an example of its use, consider the timings of an I/O operation whose duration might normally fall in the range of 0ms-50ms but extreme cases might have durations in seconds or minutes. For such measurements, you would want finer-grained bucketing in the normal range but coarser-grained bucketing for the extremely large values. An exponential histogram fits this requirement since it has "narrow" buckets near the minimum value and significantly "wider" buckets near the maximum value.</p>
+ </li>
+</ul>
+
+<h3 id="Keyed_Histograms">Keyed Histograms</h3>
+
+<p>Keyed histograms are collections of one of the histogram types above, indexed by a string key. This is for example useful when you want to break down certain counts by a name, like how often searches happen with which search engine.</p>
+
+<div class="warning">
+<p>Count histograms and keyed histograms are fully supported only in our V4 pipeline tools, such as the <a href="https://telemetry.mozilla.org/">unified telemetry (v4) dashboards</a>. These are not fully supported in Telemetry v2 pipeline tools such as the <a href="https://alerts.telemetry.mozilla.org/index.html">histogram change detector</a>.</p>
+</div>
+
+<h2 id="Declaring_a_Histogram">Declaring a Histogram</h2>
+
+<p>Histograms should be declared in the <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/Histograms.json">toolkit/components/telemetry/Histograms.json</a> file. These declarations are checked for correctness at <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/gen-histogram-data.py">compile time</a> and used to generate C++ code. It is also possible to create histograms at runtime dynamically, but this is primarily done by add-ons when they create their own histograms in Telemetry.</p>
+
+<p>The following is a sample histogram declaration from <em>Histograms.json</em> for a histogram named <code>MEMORY_RESIDENT</code> which tracks the amount of resident memory used by a process:</p>
+
+<pre class="brush: js">"MEMORY_RESIDENT": {
+  "alert_emails": ["team@mozilla.xyz"],
+  "expires_in_version": "never",
+  "kind": "exponential",
+  "low": "32 * 1024",
+  "high": "1024 * 1024",
+  "n_buckets": 50,
+  "bug_numbers": [12345],
+  "description": "Resident memory size (KB)"
+},</pre>
+
+<p>Note that histogram declarations in <em>Histograms.json</em> are converted to C++ code so the right-hand sides of fields can be the names of C++ constants or simple expressions as in the "low" and "high" fields above.</p>
+
+<p>The possible fields in a histogram declaration are:</p>
+
+<ul>
+ <li><strong>alert_emails</strong>: Required for all new histograms. This field is a list of e-mail addresses that should be notified when the distribution of the histogram changes significantly from one build-id to the other. This can be useful to detect regressions. Note that all alerts will be sent automatically to mozilla.dev.telemetry-alerts.</li>
+ <li><strong>expires_in_version: </strong>Required. The version number in which the histogram expires; e.g. a value of <code>"30"</code> will mean that the histogram stops recording from Firefox 30 on. A version number of type <code>"N"</code> and <code>"N.0"</code> is automatically converted to <code>"N.0a1"</code> in order to expire the histogram also in the development channels. For histograms that never expire the value <code>"never"</code> can be used as in the example above. Accumulating data into an expired histogram is effectively a non-op and will not record anything.</li>
+ <li><strong>kind</strong>: Required. One of the histogram types described in the previous section. Different histogram types require different fields to be present in the declaration.</li>
+ <li><strong>keyed:</strong> Optional, boolean, defaults to <code>false</code>. Determines whether this is a <em>keyed histogram</em>.</li>
+ <li><strong>low</strong>: Optional, the default value is 1. This field represents the minimum value expected in the histogram. Note that all histograms automatically get a bucket with label "0" for counting values below the "low" value.</li>
+ <li><strong>high</strong>: Required for linear and exponential histograms. The maximum value to be stored in a linear or exponential histogram. Any recorded values greater than this maximum will be counted in the last bucket.</li>
+ <li><strong>n_buckets</strong>: Required for linear and exponential histograms. The number of buckets in a linear or exponential histogram.</li>
+ <li><strong>n_values</strong>: Required for enumerated histograms. Similar to n_buckets, it represent the number of elements in the enum.</li>
+ <li><strong>labels</strong>: Required for categorical histograms. This is an array of strings which are the labels for different values in this histograms. The labels are restricted to a C++-friendly subset of characters (<code>^[a-z][a-z0-9_]+[a-z0-9]$</code>).</li>
+ <li><strong>bug_numbers</strong>: Required for all new histograms. This is an array of integers and should at least contain the bug number that added the probe and additionally other bug numbers that affected its behavior.</li>
+ <li><strong>description</strong>: Required. A description of the data tracked by the histogram, e.g. <em>"Resident memory size"</em></li>
+ <li><strong>cpp_guard</strong>: Optional. This field inserts an #ifdef directive around the histogram's C++ declaration. This is typically used for platform-specific histograms, e.g. "cpp_guard": "ANDROID"</li>
+ <li><strong>releaseChannelCollection:</strong> Optional. This is one of:
+  <ul>
+   <li>"opt-in": (default value) This histogram is submitted by default on pre-release channels; on the release channel only if the user opted into additional data collection</li>
+   <li>"opt-out": This histogram is submitted by default on release and pre-release channels, unless the user opted out.
+    <div class="warning">Because they are collected by default, opt-out probes need to meet a higher "user benefit" threshold than opt-in probes.<br>
+    <br>
+    Make sure you've NEEDINFO'd a privacy peer for <strong>ALL </strong>new data collection: <a href="https://wiki.mozilla.org/Firefox/Data_Collection">https://wiki.mozilla.org/Firefox/Data_Collection</a></div>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Adding_a_JavaScript_Probe">Adding a JavaScript Probe</h2>
+
+<p>A Telemetry probe is the code that measures and stores values in a histogram. Probes in privileged JavaScript code can make use of the <a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/nsITelemetry.idl">nsITelemetry</a> interface to get references to histogram objects. A new value is recorded in the histogram by calling <code>add</code> on the histogram object:</p>
+
+<pre class="brush: js">let histogram = Services.telemetry.getHistogramById("PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS");
+histogram.add(measuredDuration);
+
+let keyed = Services.telemetry.getKeyedHistogramById("TAG_SEEN_COUNTS");
+keyed.add("blink");</pre>
+
+<p>For histogram measuring time, <a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/TelemetryStopwatch.jsm">TelemetryStopwatch</a> can also be used to avoid working with Dates manually:</p>
+
+<pre class="brush: js">TelemetryStopwatch.start("SEARCH_SERVICE_INIT_MS");
+TelemetryStopwatch.finish("SEARCH_SERVICE_INIT_MS");
+
+TelemetryStopwatch.start("FX_TAB_SWITCH_TOTAL_MS");
+TelemetryStopwatch.cancel("FX_TAB_SWITCH_TOTAL_MS");
+</pre>
+
+<h2 id="Adding_a_C_Probe">Adding a C++ Probe</h2>
+
+<p>Probes in native code can also use the <a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/nsITelemetry.idl">nsITelemetry</a> interface, but the helper functions declared in <a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/components/telemetry/Telemetry.h">Telemetry.h</a> are more convenient:</p>
+
+<pre class="brush: cpp">#include "mozilla/Telemetry.h"
+
+/**
+ * Adds sample to a histogram defined in Histograms.json
+ *
+ * @param id - histogram id
+ * @param sample - value to record.
+ */
+void Accumulate(ID id, uint32_t sample);
+
+/**
+ * Adds time delta in milliseconds to a histogram defined in Histograms.json
+ *
+ * @param id - histogram id
+ * @param start - start time
+ * @param end - end time
+ */
+void AccumulateTimeDelta(ID id, TimeStamp start, TimeStamp end = TimeStamp::Now());</pre>
+
+<p>The histogram names declared in <em>Histograms.json</em> are translated into constants in the <code>mozilla::Telemetry</code> namespace:</p>
+
+<pre class="brush: cpp">mozilla::Telemetry::Accumulate(mozilla::Telemetry::STARTUP_CRASH_DETECTED, true);</pre>
+
+<p>The <em>Telemetry.h</em> header also declares the helper classes <code>AutoTimer</code> and <code>AutoCounter</code>. Objects of these types automatically record a histogram value when they go out of scope:</p>
+
+<pre class="brush: cpp">nsresult
+nsPluginHost::StopPluginInstance(nsNPAPIPluginInstance* aInstance)
+{
+  Telemetry::AutoTimer&lt;Telemetry::PLUGIN_SHUTDOWN_MS&gt; timer;
+  ...
+  return NS_OK;
+}
+</pre>
+
+<h2 id="Miscellaneous_2"><a id="Miscellaneous" name="Miscellaneous"></a>Miscellaneous</h2>
+
+<ul>
+ <li>Changing histogram declarations after the histogram has been released is tricky. You will need to create a new histogram with the new parameters.
+  <ul>
+   <li>For enum histograms, it's prudent to set "n_buckets" to a slightly larger value than needed since new elements may be added to the enum in the future.</li>
+  </ul>
+ </li>
+ <li><code>getHistogramById</code> will throw an NS_ERROR_ILLEGAL_VALUE JavaScript exception if it is called with an invalid histogram ID</li>
+ <li>Flag histograms will ignore any changes after the flag is set, so once the flag is set, it cannot be unset</li>
+ <li>Histograms which track timings in milliseconds or microseconds should suffix their names with "_MS" and "_US" respectively. Flag-type histograms should have the suffix "_FLAG" in their name.</li>
+ <li>If a histogram does not specify a "low" value, it will always have a "0" bucket (for negative or zero values) and a "1" bucket (for values between 1 and the next bucket)</li>
+ <li>The histograms on the <em>about:telemetry</em> page only show the non-empty buckets in a histogram except for the bucket to the left of the first non-empty bucket and the bucket to the right of the last non-empty bucket</li>
+</ul>
diff --git a/files/my/mozilla/performance/index.html b/files/my/mozilla/performance/index.html
new file mode 100644
index 0000000000..82c169862a
--- /dev/null
+++ b/files/my/mozilla/performance/index.html
@@ -0,0 +1,143 @@
+---
+title: Performance
+slug: Mozilla/Performance
+tags:
+  - Add-ons
+  - Debugging
+  - Development
+  - Mozilla
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+translation_of: Mozilla/Performance
+---
+<p>The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation">Documentation</h3>
+
+    <dl>
+     <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Reporting a Performance Problem</a></dt>
+     <dd>A user friendly guide to reporting a performance problem. A development environment is not required.</dd>
+     <dt><a href="Benchmarking" title="Performance/Benchmarking advice">Benchmarking</a></dt>
+     <dd>Tips on generating valid performance metrics.</dd>
+     <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Performance best practices in extensions</a></dt>
+     <dd>A performance "best practices" guide for extension developers.</dd>
+     <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></dt>
+     <dd>A guide for add-on developers on how to set up a performance testing environment.</dd>
+     <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-on Performance</a></dt>
+     <dd>Tips for add-on developers to help them avoid impairing application performance.</dd>
+     <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">GPU performance</a></dt>
+     <dd>Tips for profiling and improving performance when using a GPU.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/ScrollLinkedEffects">Scroll-Linked Effects</a></dt>
+     <dd>Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Automated_Performance_Testing_and_Sheriffing">Automated Performance Testing and Sheriffing</a></dt>
+     <dd>Information on automated performance testing and sheriffing at Mozilla.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">View all pages tagged with "Performance"...</a></span></p>
+
+    <h3 id="Memory_profiling_and_leak_detection_tools">Memory profiling and leak detection tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="en/Performance/Profiling with the Built-in Profiler">The Developer Tools "Memory" panel</a></dt>
+     <dd>The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/about:memory">about:memory</a></dt>
+     <dd>about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC &amp; CC logs, and dump DMD reports. about:memory is built on top of Firefox's <a href="/en-US/docs/Mozilla/Performance/Memory_reporting">memory reporting</a> infrastructure.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/DMD">DMD</a></dt>
+     <dd>DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.</dd>
+     <dt><a href="https://areweslimyet.com/">areweslimyet.com</a></dt>
+     <dd>areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/BloatView">BloatView</a></dt>
+     <dd>BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Refcount_tracing_and_balancing">Refcount tracing and balancing</a></dt>
+     <dd>Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/GC_and_CC_logs">GC and CC logs</a></dt>
+     <dd>GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Testing/Valgrind">Valgrind</a></dt>
+     <dd><a class="external text" href="http://valgrind.org/" rel="nofollow">Valgrind</a> is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as <a class="external text" href="/en-US/docs/Valgrind_test_job" rel="nofollow">part</a> of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer#LeakSanitizer">LeakSanitizer</a></dt>
+     <dd><span class="external text">LeakSanitizer</span> (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.</dd>
+     <dt><a href="http://developer.apple.com/documentation/Performance/Conceptual/ManagingMemory/Articles/FindingLeaks.html">Apple tools</a></dt>
+     <dd>Apple provides <span class="external text">some tools</span> for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=390944" rel="nofollow">bug 390944</a>).</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Leak_Gauge">Leak Gauge</a></dt>
+     <dd>Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.</dd>
+     <dt><a href="http://dxr.mozilla.org/mozilla-central/source/memory/replace/logalloc/README">LogAlloc</a></dt>
+     <dd>LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Memory_Profiler">Memory Profiler</a></dt>
+     <dd>The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.</dd>
+    </dl>
+
+    <p>See also the documentation on <a href="/en-US/docs/Mozilla/Performance/Leak-hunting_strategies_and_tips">Leak-hunting strategies and tips.</a></p>
+   </td>
+   <td>
+    <h3 id="Profiling_and_performance_tools">Profiling and performance tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Developer Tools Profiler</a></dt>
+     <dd>The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Gecko Profiler Addon</a> {{ gecko_minversion_inline("16.0") }}</dt>
+     <dd>The Gecko Profiler Addon is a good tool to start with.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profiling with Instruments</a></dt>
+     <dd>How to use Apple's Instruments tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profiling with Xperf</a></dt>
+     <dd>How to use Microsoft's Xperf tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Performance/Profiling_with_Concurrency_Visualizer" title="en/Performance/Profiling with Concurrency Visualizer">Profiling with Concurrency Visualizer</a></dt>
+     <dd>How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profiling with Zoom</a></dt>
+     <dd>Zoom is a profiler for Linux done by the people who made Shark</dd>
+     <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Measuring performance using the PerfMeasurement.jsm code module</a> {{ gecko_minversion_inline("2.0") }}</dt>
+     <dd>Using <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> to measure performance data in your JavaScript code.</dd>
+     <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Adding a new Telemetry probe</a></dt>
+     <dd>Information on how to add a new measurement to the Telemetry performance-reporting system</dd>
+     <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profiling JavaScript with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profiling with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use Apple's Shark tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Investigating_CSS_Performance">Investigating CSS Performance</a></dt>
+     <dd>How to figure out why restyle is taking so long</dd>
+    </dl>
+
+    <h3 id="Power_profiling">Power profiling</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Power_profiling_overview">Power profiling overview</a></dt>
+     <dd>This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/tools_power_rapl">tools/power/rapl</a></code> (Mac, Linux)</dt>
+     <dd><code>tools/power/rapl</code> is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/powermetrics">powermetrics</a></code> (Mac-only)</dt>
+     <dd><code>powermetrics</code> is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/TimerFirings_logging">TimerFirings logging</a> (All platforms)</dt>
+     <dd>TimerFirings logging is a built-in logging mechanism that prints data on every time fired.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Activity_Monitor_and_top">Activity Monitor, Battery Status Menu and <code>top</code></a> (Mac-only)</dt>
+     <dd>The battery status menu, Activity Monitor and <code>top</code> are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Intel_Power_Gadget">Intel Power Gadget</a> (Windows, Mac, Linux)</dt>
+     <dd>Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/perf">perf</a></code> (Linux-only)</dt>
+     <dd><code>perf</code> is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/turbostat">turbostat</a></code> (Linux-only)</dt>
+     <dd><code>turbostat</code> is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.</dd>
+     <dt><code><a href="https://01.org/powertop">powertop</a></code> (Linux-only)</dt>
+     <dd><code>powertop</code> is an interactive command-line utility that gathers and displays various power-related measurements.</dd>
+    </dl>
+
+    <h3 id="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Addons</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/my/web/css/@font-face/index.html b/files/my/web/css/@font-face/index.html
new file mode 100644
index 0000000000..69a0d3d8c9
--- /dev/null
+++ b/files/my/web/css/@font-face/index.html
@@ -0,0 +1,196 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Determines how a font face is displayed based on whether and when it is downloaded and ready to use.</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Specifies a name that will be used as the font face value for font properties.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>A {{cssxref("font-stretch")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-stretch: 50% 200%;</code></dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>A {{cssxref("font-style")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-style: oblique 20deg 50deg;</code></dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>A {{cssxref("font-weight")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-weight: 100 400;</code></dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>A {{cssxref("font-variant")}} value.</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Allows control over advanced typographic features in OpenType fonts.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.</p>
+
+ <p>To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a <code>format()</code> function:</p>
+
+ <pre class="brush: css notranslate">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>.</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>The range of Unicode code points to be used from the font.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>If the <code>local()</code> function is provided, specifying a font name to look for on the user's computer, and the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the <code>url()</code> function is downloaded and used.</p>
+
+<p>By allowing authors to provide their own fonts, <code>@font-face</code> makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.</p>
+
+<p>It's common to use both <code>url()</code> and <code>local()</code> together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.</p>
+
+<p>The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p>
+
+<h3 id="Font_MIME_Types">Font MIME Types</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th>Format</th>
+   <th>MIME type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open Font Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open Font Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a> are used to relax this restriction.</li>
+ <li><code>@font-face</code> cannot be declared within a CSS selector. For example, the following will not work:
+  <pre class="brush: css; example-bad notranslate">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Specifying_a_downloadable_font">Specifying a downloadable font</h3>
+
+<p>This example simply specifies a downloadable font to use, applying it to the entire body of the document:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">View the live example</a></p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Font format specification with new compression algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Font format specification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF">About WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+ <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li>
+ <li><a href="https://nicknames.name/">Best Nicknames</a></li>
+</ul>
diff --git a/files/my/web/css/css_transitions/index.html b/files/my/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..6f134a503b
--- /dev/null
+++ b/files/my/web/css/css_transitions/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Transitions
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Transitions
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>အသွင်ကူးပြောင်းမှု CSS ကိုကိုကို</strong> နျသနျသရငျညြတိကျတဲ့ဂုဏ်သတ္တိများ၏ CSS ကိုတန်ဖိုးများမွားထဲတွင်အကိုကိုကှားတဖြည်းဖြည်းအသွင်ကူးပြောင်းမှု ဖန်တီးပေးနိုင်ပါတယ်ဒါကတော့ CSS ကိုကိုတစ် module တစ်ခုတစ်ခုဖြစ်ပါတယ်။ အဲဒီအသွင်ကူးပြောင်းမှုများ၏အပြုအမူသူတို့ရဲ့ function ကိုကိုအချိန်ကိုက်, ကြာချိန်နှင့်အခြား attribute ကိုတွေသတ်မှတ်ခြင်းကထိန်းချုပ်ထားနိုင်ပါတယ်။</p>
+
+<h2 id="အညွှန်း">အညွှန်း</h2>
+
+<h3 id="ဂုဏ်သတ္တိများကို">ဂုဏ်သတ္တိများကို</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("အကူးအပြောင်း")}}</li>
+ <li>{{Cssxref("အကူးအပြောင်း - နှောင့်နှေး")}}</li>
+ <li>{{Cssxref("အကူးအပြောင်း - ကြာချိန်")}}</li>
+ <li>{{Cssxref("အကူးအပြောင်း - အိမ်ခြံမြေ")}}</li>
+ <li>{{Cssxref("အကူးအပြောင်း - အချိန်ကိုက် -Function ကို")}}</li>
+</ul>
+</div>
+
+<h2 id="လမ်းညွှန်များ">လမ်းညွှန်များ</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS ကိုကိုအကူးအပြောင်းကိုအသုံးပြုခြင်း</a></dt>
+ <dd>Step-by-step CSS ကိုကိုသုံးပြီးအသွင်ကူးပြောင်းမှုကိုဖန်တီးရန်ဘယ်လိုသင်ခန်းစာ။ ဆောင်းပါးသည်တစြဤဦးချင်းစီကိုကို သက်ဆိုင်ရာ CSS ကိုပိုင်ဆိုင်မှုဖော်ပြထားသည်မွားကိုကိုနှငျ့သူတို့ကတစြ ဦးချင်းစီကတခြားတွေနဲ့အပြန်အလှန်ဘယ်လိုရှင်းပြ ။</dd>
+</dl>
+
+<h2 id="အသေးစိတ်ဖော်ပြချက်">အသေးစိတ်ဖော်ပြချက်</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">သတ်မှတ်ချက်</th>
+   <th scope="col">အဆင့်အတန်း</th>
+   <th scope="col">မှတ်ချက်</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>ကနဦးချက်နှင့်အဓိပ္ပါယ်။</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ကိုလည်းကြည့်ပါ">ကိုလည်းကြည့်ပါ</h2>
+
+<ul>
+ <li>CSS ကိုကိုကူးအပြောင်းကာလမှ Related, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS ကို Animation ရဲ့ကိုကို</a> ကာတွန်းဂုဏ်သတ္တိများကျော်အသေးစိတ်ထိန်းချုပ်ပေးရန်။</li>
+</ul>
diff --git a/files/my/web/css/index.html b/files/my/web/css/index.html
new file mode 100644
index 0000000000..eb5e30fc56
--- /dev/null
+++ b/files/my/web/css/index.html
@@ -0,0 +1,110 @@
+---
+title: 'CSS: Cascading Style Sheets'
+slug: Web/CSS
+tags:
+  - CSS
+  - Cascading Style Sheets
+  - Design
+  - Landing
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - Style Sheets
+  - Styles
+  - Stylesheets
+  - TopicStub
+  - 'l10n:priority'
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> language used to describe the presentation of a document written in <a href="/en-US/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> or <a href="/en-US/docs/XML_introduction">XML</a> (including XML dialects such as <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a> or {{Glossary("XHTML", "", 1)}}). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>
+
+<p>CSS is one of the core languages of the <strong>open Web</strong> and is standardized across Web browsers according to the <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and <a href="/en-US/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standardization track.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS Introduction</span>
+
+  <p>If you're new to web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> article to learn what CSS is and how to use it.</p>
+ </li>
+ <li><span>CSS Tutorials</span>
+  <p>Our <a href="/en-US/docs/Learn/CSS">CSS learning area</a> contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.</p>
+ </li>
+ <li><span>CSS Reference</span>
+  <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutorials">Tutorials</h2>
+
+<p>Our <a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> features multiple modules that teach CSS from the ground up — no previous knowledge required.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt>
+ <dd>This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>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 you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Reference">Reference</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li>
+ <li>CSS key concepts:
+  <ul>
+   <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li>
+   <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS units and values</a></li>
+   <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li>
+   <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li>
+   <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li>
+   <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
+   <li><a href="/en-US/docs/Web/CSS/animation">Animation</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="Cookbook">Cookbook</h2>
+
+<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p>
+
+<h2 class="Tools" id="Tools_for_CSS_development">Tools for CSS development</h2>
+
+<ul>
+ <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li>
+ <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li>
+ <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li>
+ <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li>
+</ul>
+
+<h2 id="Meta_bugs">Meta bugs</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li>
+ <li>Web languages to which CSS is often applied: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, and <a href="/en-US/docs/XML_introduction">XML</a>.</li>
+ <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Mozilla/Add-ons">extensions</a> and <a href="/en-US/docs/Mozilla/Add-ons/Themes">themes</a>.</li>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla mailing list</a></li>
+ <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">Stack Overflow questions about CSS</a></li>
+</ul>
diff --git a/files/my/web/guide/index.html b/files/my/web/guide/index.html
new file mode 100644
index 0000000000..56e0fa9e82
--- /dev/null
+++ b/files/my/web/guide/index.html
@@ -0,0 +1,67 @@
+---
+title: Web developer guide
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>These articles provide how-to information to help you make use of specific technologies and APIs.</strong></p>
+
+<div>
+<div>
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt>
+ <dd class="landingPageList">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></dt>
+ <dd class="landingPageList">Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt>
+ <dd class="landingPageList">Modern Web sites and applications often need to present graphics.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt>
+ <dd class="landingPageList">List all Web APIs and what they are doing</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">HTML developer guide</a></dt>
+ <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></dt>
+ <dd class="landingPageList">Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML specification recommends</a> the use of the UTF-8 encoding (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt>
+ <dd class="landingPageList">This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> page. Or you might be interested in details about <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt>
+ <dd class="landingPageList">When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt>
+ <dd class="landingPageList">The Web platform provides the following objects for parsing and serializing XML:</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt>
+ <dd class="landingPageList">The SVG-in-OpenType work is currently in the hands of the <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Once we're ready for wider adoption the information from <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> will be moved here, updated and expanded.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList"><strong>WOFF</strong> (the <strong>Web Open Font Format</strong>) is a  web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">User experience</a></dt>
+ <dd class="landingPageList">Making the user experience of your Web site or app a pleasant one for your users is important if you want users to come back and use it again and again. Here you'll find articles that may help you along.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></dt>
+ <dd class="landingPageList">The <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossary</a></dt>
+ <dd class="landingPageList">Defines numerous technical terms related to the Web and Internet.</dd>
+</dl>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/my/web/http/connection_management_in_http_1.x/index.html b/files/my/web/http/connection_management_in_http_1.x/index.html
new file mode 100644
index 0000000000..201f93a64c
--- /dev/null
+++ b/files/my/web/http/connection_management_in_http_1.x/index.html
@@ -0,0 +1,86 @@
+---
+title: Connection management in HTTP/1.x
+slug: Web/HTTP/Connection_management_in_HTTP_1.x
+translation_of: Web/HTTP/Connection_management_in_HTTP_1.x
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">การจัดการการเชื่อมต่อเป็นหัวข้อสำคัญใน HTTP: การเปิดและรักษาการเชื่อมต่อส่วนใหญ่มีผลต่อประสิทธิภาพของเว็บไซต์และแอปพลิเคชันเว็บ ใน HTTP / 1.x มีหลายโมเดล: <em>การเชื่อมต่อสั้น ๆ</em> , <em>การเชื่อมต่อแบบถาวร</em>และ<em>HTTP pipelining</em></p>
+
+<p>HTTP ส่วนใหญ่อาศัย TCP สำหรับโปรโตคอลการขนส่งโดยให้การเชื่อมต่อระหว่างไคลเอนต์และเซิร์ฟเวอร์ ในวัยเด็ก HTTP ใช้แบบจำลองเดียวเพื่อจัดการการเชื่อมต่อดังกล่าว การเชื่อมต่อเหล่านี้มีอายุการใช้งานสั้น: การเชื่อมต่อใหม่ที่สร้างขึ้นทุกครั้งที่จำเป็นต้องส่งคำขอและจะปิดเมื่อได้รับคำตอบ</p>
+
+<p>โมเดลที่เรียบง่ายนี้มีข้อ จำกัด ด้านประสิทธิภาพโดยธรรมชาติ: การเปิดการเชื่อมต่อ TCP แต่ละครั้งเป็นการดำเนินการที่ใช้ทรัพยากรมาก ต้องแลกเปลี่ยนข้อความหลายข้อความระหว่างไคลเอนต์และเซิร์ฟเวอร์ เวลาในการตอบสนองของเครือข่ายและแบนด์วิดท์มีผลต่อประสิทธิภาพเมื่อคำขอต้องการส่ง หน้าเว็บสมัยใหม่ต้องการคำขอจำนวนมาก (ตั้งแต่หนึ่งโหลขึ้นไป) เพื่อให้บริการข้อมูลตามจำนวนที่ต้องการซึ่งพิสูจน์ได้ว่ารุ่นก่อนหน้านี้ไม่มีประสิทธิภาพ</p>
+
+<p>รุ่นใหม่กว่าสองรุ่นถูกสร้างขึ้นใน HTTP / 1.1 โมเดลการเชื่อมต่อแบบต่อเนื่องช่วยให้การเชื่อมต่อเปิดระหว่างคำขอที่ต่อเนื่องลดเวลาที่ต้องใช้ในการเปิดการเชื่อมต่อใหม่ รูปแบบการไปป์ไลน์ HTTP ก้าวไปอีกขั้นด้วยการส่งคำขอต่อเนื่องหลายรายการโดยไม่ต้องรอคำตอบช่วยลดเวลาแฝงในเครือข่ายได้มาก</p>
+
+<p><img alt="Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining." src="https://mdn.mozillademos.org/files/13727/HTTP1_x_Connections.png" style="height: 538px; width: 813px;"></p>
+
+<div class="note">
+<p>HTTP / 2 เพิ่มโมเดลเพิ่มเติมสำหรับการจัดการการเชื่อมต่อ</p>
+</div>
+
+<p>It's important point to note that connection management in HTTP applies to the connection between two consecutive nodes, which is <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a> and not <a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end</a>. The model used in connections between a client and its first proxy may differ from the model between a proxy and the destination server (or any intermediate proxies). The HTTP headers involved in defining the connection model, like {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}}, are <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a> headers with their values able to be changed by intermediary nodes.</p>
+
+<p>A related topic is the concept of HTTP connection upgrades, wherein an HTTP/1.1 connection is upgraded to a different protocol, such as TLS/1.0, WebSocket, or even HTTP/2 in cleartext. This <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">protocol upgrade mechanism</a> is documented in more detail elsewhere.</p>
+
+<h2 id="Short-lived_connections">Short-lived connections</h2>
+
+<p>The original model of HTTP, and the default one in HTTP/1.0, is <em>short-lived connections</em>. Each HTTP request is completed on its own connection; this means a TCP handshake happens before each HTTP request, and these are serialized.</p>
+
+<p>The TCP handshake itself is time-consuming, but a TCP connection adapts to its load, becoming more efficient with more sustained (or warm) connections. Short-lived connections do not make use of this efficiency feature of TCP, and performance degrades from optimum by persisting to transmit over a new, cold connection.</p>
+
+<p>This model is the default model used in HTTP/1.0 (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to <code>close</code>). In HTTP/1.1, this model is only used when the {{HTTPHeader("Connection")}} header is sent with a value of <code>close</code>.</p>
+
+<div class="note">
+<p>Unless dealing with a very old system, which doesn't support a persistent connection, there is no compelling reason to use this model.</p>
+</div>
+
+<h2 id="Persistent_connections">Persistent connections</h2>
+
+<p>Short-lived connections have two major hitches: the time taken to establish a new connection is significant, and performance of the underlying TCP connection gets better only when this connection has been in use for some time (warm connection). To ease these problems, the concept of a <em>persistent connection</em> has been designed, even prior to HTTP/1.1. Alternatively this may be called a <em>keep-alive connection</em>.</p>
+
+<p>A persistent connection is one which remains open for a period of time, and can be reused for several requests, saving the need for a new TCP handshake, and utilizing TCP's performance enhancing capabilities. This connection will not stay open forever: idle connections are closed after some time (a server may use the {{HTTPHeader("Keep-Alive")}} header to specify a minimum time the connection should be kept open).</p>
+
+<p>Persistent connections also have drawbacks; even when idling they consume server resources, and under heavy load, {{glossary("DoS attack", "DoS attacks")}} can be conducted. In such cases, using non-persistent connections, which are closed as soon as they are idle, can provide better performance.</p>
+
+<p>HTTP/1.0 connections are not persistent by default. Setting {{HTTPHeader("Connection")}} to anything other than <code>close</code>, usually <code>retry-after</code>, will make them persistent.</p>
+
+<p>In HTTP/1.1, persistence is the default, and the header is no longer needed (but it is often added as a defensive measure against cases requiring a fallback to HTTP/1.0).</p>
+
+<h2 id="HTTP_pipelining">HTTP pipelining</h2>
+
+<div class="note">
+<p>HTTP pipelining is not activated by default in modern browsers:</p>
+
+<ul>
+ <li>Buggy <a href="https://en.wikipedia.org/wiki/Proxy_server">proxies</a> are still common and these lead to strange and erratic behaviors that Web developers cannot foresee and diagnose easily.</li>
+ <li>Pipelining is complex to implement correctly: the size of the resource being transferred, the effective <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> that will be used, as well as the effective bandwidth, have a direct incidence on the improvement provided by the pipeline. Without knowing these, important messages may be delayed behind unimportant ones. The notion of important even evolves during page layout! HTTP pipelining therefore brings a marginal improvement in most cases only.</li>
+ <li>Pipelining is subject to the <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a> problem.</li>
+</ul>
+
+<p>For these reasons, pipelining has been superseded by a better algorithm, <em>multiplexing</em>, that is used by HTTP/2.</p>
+</div>
+
+<p>By default, <a href="/en-US/docs/Web/HTTP" title="en/HTTP">HTTP</a> requests are issued sequentially. The next request is only issued once the response to the current request has been received. As they are affected by network latencies and bandwidth limitations, this can result in significant delay before the next request is <em>seen</em> by the server.</p>
+
+<p>Pipelining is the process to send successive requests, over the same persistent connection, without waiting for the answer. This avoids latency of the connection. Theoretically, performance could also be improved if two HTTP requests were to be packed into the same TCP message. The typical <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a> (Maximum Segment Size), is big enough to contain several simple requests, although the demand in size of HTTP requests continues to grow.</p>
+
+<p>Not all types of HTTP requests can be pipelined: only {{glossary("idempotent")}} methods, that is {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} and {{HTTPMethod("DELETE")}}, can be replayed safely: should a failure happen, the pipeline content can simply be repeated.</p>
+
+<p>Today, every HTTP/1.1-compliant proxy and server should support pipelining, though many have limitations in practice: a significant reason no modern browser activates this feature by default.</p>
+
+<h2 id="Domain_sharding">Domain sharding</h2>
+
+<div class="note">
+<p>Unless you have a very specific immediate need, don't use this deprecated technique; switch to HTTP/2 instead. In HTTP/2, domain sharding is no longer useful: the HTTP/2 connection is able to handle parallel unprioritized requests very well. Domain sharding is even detrimental to performance. Most HTTP/2 implementations use a technique called <a href="https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/">connection coalescing</a> to revert eventual domain sharding.</p>
+</div>
+
+<p>As an HTTP/1.x connection is serializing requests, even without any ordering, it can't be optimal without large enough available bandwidth. As a solution, browsers open several connections to each domain, sending parallel requests. Default was once 2 to 3 connections, but this has now increased to a more common use of 6 parallel connections. There is a risk of triggering <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> protection on the server side if attempting more than this number.</p>
+
+<p>หากเซิร์ฟเวอร์ต้องการให้เว็บไซต์หรือแอปพลิเคชันตอบสนองเร็วขึ้นเซิร์ฟเวอร์อาจบังคับให้เปิดการเชื่อมต่อเพิ่มเติม ตัวอย่างเช่นแทนที่จะมีทรัพยากรทั้งหมดในโดเมนเดียวกันพูดก็อาจแบ่งมากกว่าหลายโดเมน,<code>www.example.com</code> , , แต่ละโดเมนเหล่านี้แก้ไขไปยังเซิร์ฟเวอร์<em>เดียวกัน</em>และเว็บเบราว์เซอร์จะเปิดการเชื่อมต่อ 6 รายการให้กับแต่ละโดเมน(ในตัวอย่างของเราเพิ่มการเชื่อมต่อเป็น 18) เทคนิคนี้เรียกว่าsharding<em> โดเมน</em><code>www1.example.com</code><code>www2.example.com</code><code>www3.example.com</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p>
+
+<h2 id="สรุป">สรุป</h2>
+
+<p>การจัดการการเชื่อมต่อที่ได้รับการปรับปรุงช่วยเพิ่มประสิทธิภาพใน HTTP ได้มาก ด้วย HTTP / 1.1 หรือ HTTP / 1.0 การใช้การเชื่อมต่อแบบต่อเนื่องอย่างน้อยก็จนกว่าจะไม่มีการใช้งานจะนำไปสู่ประสิทธิภาพที่ดีที่สุด อย่างไรก็ตามความล้มเหลวของการวางท่อนำไปสู่การออกแบบรูปแบบการจัดการการเชื่อมต่อที่เหนือกว่าซึ่งรวมอยู่ใน HTTP / 2</p>
diff --git a/files/my/web/http/index.html b/files/my/web/http/index.html
new file mode 100644
index 0000000000..6e893c3ced
--- /dev/null
+++ b/files/my/web/http/index.html
@@ -0,0 +1,90 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - Hypertext
+  - NeedsTranslation
+  - Reference
+  - TCP/IP
+  - TopicStub
+  - Web
+  - Web Development
+  - 'l10n:priority'
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a href="https://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>, that is, a protocol that doesn't lose messages silently like UDP does. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> — the reliable update of UDP — is a suitable alternative.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutorials">Tutorials</h2>
+
+<p>Learn how to use HTTP with guides and tutorials.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt>
+ <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt>
+ <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt>
+ <dd>How cookies work is defined by <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt>
+ <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt>
+ <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt>
+ <dd>A collection of tips to help operational teams with creating secure web applications.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt>
+ <dd>Shows and explains the flow of a usual HTTP session.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Reference">Reference</h2>
+
+<p>Browse through detailed HTTP reference documentation.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt>
+ <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA registry</a>, whose original content was defined in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">registry of proposed new HTTP message headers</a>.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt>
+ <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt>
+ <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt>
+ <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd>
+</dl>
+
+<h2 id="Tools_resources">Tools &amp; resources</h2>
+
+<p>Helpful tools and resources for understanding and debugging HTTP.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>
+ <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p>
+ </dd>
+ <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
+ <dd>Tools to check your cache-related headers</dd>
+ <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+ <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/my/web/index.html b/files/my/web/index.html
new file mode 100644
index 0000000000..3b55338e60
--- /dev/null
+++ b/files/my/web/index.html
@@ -0,0 +1,90 @@
+---
+title: Web developers နင့္ နည္းပညာ မျာ
+slug: Web
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web
+---
+<p>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find the links to MDN's documentation on Web technologies.</p>
+
+<p> </p>
+
+<p>လွတ်လပ်စ</p>
+
+<p> </p>
+
+<p> </p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Web_နည်းပညာများ">Web နည်းပညာများ</h2>
+
+<h3 id="အခြေခံ">အခြေခံ</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt>
+ <dd>၀ဘ်စာမျက်နာတစ်ခုတွင် ပါ၀င်သောအကြောင်းအရာများအား စနစ်ကျတဲ့ ဖွဲ့စည်းပုံ ကို သက်မတ်ရန် အသုံးပြုသောနည်းပညာ တစ်ခုဖြစ်ပါသည။</dd>
+ <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt>
+ <dd> ၀ဘ်စာမျက်နာပါအကြောင်းအရာများရဲ့  အသွင်အပြင်ကို ဖော်ပြဖို့အတွက်သုံးသည်။</dd>
+</dl>
+
+<h3 id="Scripting">Scripting</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript is the programming language that runs in the browser, which is used to build advanced user interactive Web sites and applications.</dd>
+ <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the <a href="/en-US/docs/DOM">DOM</a> and all of the related APIs and interfaces you can use to build Web content and apps.
+ <ul>
+  <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a> - all interfaces, arranged alphabetically.</li>
+  <li><a href="/en-US/docs/WebAPI">WebAPI</a> page lists device access APIs and other APIs useful for applications.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Graphics">Graphics</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd>
+ <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0, and which can be used in HTML {{HTMLElement("canvas")}} elements.</dd>
+</dl>
+
+<h3 id="Other">Other</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt>
+ <dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Documentation_by_type">Documentation by type</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt>
+ <dd>The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd>
+ <dt><a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt>
+ <dd>A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd>
+ <dt><a href="/en-US/docs/Web/Reference">References</a></dt>
+ <dd><em>This page will offer links to all reference information on MDN, but for now use one of the technology links in the left section.</em></dd>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt>
+ <dd>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility">Accessibility</a></dt>
+ <dd>Accessibility in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. Here we provide information on developing Web content to be accessible.</dd>
+ <dt><a href="/en-US/docs/Web/Security">Security</a></dt>
+ <dd>Ensuring that your Web site or open Web app is secure is critical.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p>
diff --git a/files/my/web/javascript/index.html b/files/my/web/javascript/index.html
new file mode 100644
index 0000000000..d26ea34fb6
--- /dev/null
+++ b/files/my/web/javascript/index.html
@@ -0,0 +1,104 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><strong>JavaScript</strong><sup>®</sup> (အတိုကောက် <strong>JS</strong>) ဆိုတာ   <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions  </a> နှင့်တည်ဆောက်ထား တဲ့a  lightweight, interpreted, object-oriented language တစ်ခုဖြစ်ပါတယ်။အများက သိတာကတော့ web pages တွေအတွက် browser ကိုအခြေ ခံထားတဲ့ scripting language တစ်ခုအနေနဲ့သိကြတယ် ဒါပေမဲ့ browser ကိုအခြေခံ မထားတဲ့ <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">နေရာ</a> တွေဖြစ်တဲ့  <a class="external" href="https://nodejs.org/">node.js</a> ဒါမှမဟုတ်  <a href="https://couchdb.apache.org/">Apache CouchDB</a> တွေမှာလဲအသုံးပြု ပါတယ်. Javascript ဟာ  <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototype-based</a>, multi-paradigm scripting language ဖြစ်ပါတယ်၊ ဆိုလိုတာက dynamic ဖြစ်သလို object-oriented, imperative, and functional programming ရေးသားနည်းပုံစံနဲ့လည်း ထောက်ပံပေးပါတယ်။ အသေးစိတ်ကိုတော့ <a href="/en-US/docs/Web/JavaScript/About_JavaScript">JavaScript</a> အကြောင်း ပိုမို ဖတ်ရှုကြည့်ပါ။</p>
+
+<p>JavaScript စံသတ်မှတ်ချက်ကို <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a> လို့ခေါ်ပါတယ်။ ၂၀၁၂ မှာ modern browsers တွေအကုန်လုံးက ECMAScript 5.1 ကို အပြည့်အဝ support ပေးနေပါပြီ။ Browsers အဟောင်းတွေက အနည်းဆုံး ECMAScript 3 ကို support ပေးပါတယ်။ ဇွန်လ ၁၇ ရက် ၂၀၁၅ မှာ ခြောက်ကြိမ်မြောက် ECMAScript ကို ကြေငြာပြဌာန်းလိုက်ပါတယ်။ အဲ့ဒီ့ version ကို ECMAScript 2015 လို့တရားဝင်ခေါ်ပါတယ်၊ ဒါပေမယ့်လည်း ECMAScript 6 ဒါမှမဟုတ် ES6 ဆိုပြီးလည်းခေါ်ပါတယ်။</p>
+
+<p> ဒီဝက်စာမျက်နှာမှာတော့ JavaScript အကြောင်းကိုပဲ ပြောပြသွားမှာဖြစ်ပါတယ်။Web Pages နဲ့ ဆက်စပ်ပြီးသုံးတဲ့ ဒါမှမဟုတ် တစ်ခြားသော Host Environment နဲ့ စပ်ဆက်ပြီးသုံးတဲ့ အကြောင်းကို ပြောမှ မဟုတ်ပါဘူး။. Web pages နဲ့  စပ်ဆက်ပြီး အသုံးပြုတဲ့ {{Glossary("API","APIs")}}  ကို လေ့လာချင်တဲ့ဆိုရင်တော့ <a href="/en-US/docs/Web/API">Web APIs</a> နဲ့  <a href="/en-US/docs/Glossary/DOM">DOM</a> မှာ သွားရောက် လေ့လာလို့ရပါတယ်။</p>
+
+<p>JavaScript ကို <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java programming language</a> နဲ့ မတူဘူးဆိုတာ သိထားဖို့လိုပါမယ်။ Java ဆိုတာ U.S. နဲ့ အခြားသောနိုင်ငံတွေမှာ Oracle က မူပိုင်တင်ထားပါတယ်။</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="နည်းပြသင်ခန်းစာများ">နည်းပြသင်ခန်းစာများ</h2>
+
+<p>ကျွန်တော်တို့ရဲ့ နည်းပြသင်ခန်းစာများနဲ့ လေ့ကျင့်ခန်းများမှတစ်ဆင့် JavaScript နဲ့ဘယ်လို program လုပ်မလဲဆိုတာလေ့လာပါ။</p>
+
+<h3 id="နိဒါန်း">နိဒါန်း</h3>
+
+<dl>
+ <dt><a href="/my/docs/Web/JavaScript/Guide">JavaScript လမ်းညွှန်</a></dt>
+ <dd>သင်က JavaScript ကိုအခုမှစတင်လေ့လာမယ့်သူဆိုရင် ဒီလမ်းညွှန်ကသင့်ကိုအထောက်အကူပြုပါလိမ့်မယ်။ </dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript နည်းပညာချုံငုံသုံးသပ်ချက်</a></dt>
+ <dd>Web browser နဲ့ JavaScript landscape မိတ်ဆက်။</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Object Oriented JavaScript မိတ်ဆက်</a></dt>
+ <dd>Introduction to the concepts of object oriented programming in JavaScript.</dd>
+</dl>
+
+<h3 id="Intermediate">Intermediate</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt>
+ <dd>An overview for those who <em>think</em> they know about JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">JavaScript data structures</a></dt>
+ <dd>Overview of available data structures in JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></dt>
+ <dd>JavaScript provides three different value-comparison operations: strict equality using <code>===</code>, loose equality using <code>==</code>, and the {{jsxref("Global_Objects/Object/is", "Object.is()")}} method.</dd>
+</dl>
+
+<h3 id="Advanced">Advanced</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a></dt>
+ <dd>Explanation of the widely misunderstood and under-estimated prototype-based inheritance.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></dt>
+ <dd>A restricted variant of JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt>
+ <dd>JavaScript typed arrays provide a mechanism for accessing raw binary data.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Memory Management</a></dt>
+ <dd>Memory life cycle and garbage collection in JavaScript.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="အညွှန်း">အညွှန်း</h2>
+
+<p>Browse the complete <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> documentation. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt>
+ <dd>Get to know standard built-in objects <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a>, and others.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt>
+ <dd>Learn more about the behavior of JavaScript's operators <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, and more.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt>
+ <dd>Learn how <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>, and more JavaScript statements and keywords work.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt>
+ <dd>Learn how to work with JavaS functions to develop your applications.</dd>
+</dl>
+
+<h2 id="Tools_resources">Tools &amp; resources</h2>
+
+<p>Helpful tools while writing and debugging your JavaScript code.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd>
+ <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt>
+ <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt>
+ <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>
+ <p class="hero-header-text large">Collaboration made easy.</p>
+ </dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Stack Overflow questions tagged with "JavaScript".</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt>
+ <dd>Browse JavaScript's feature history and implementation status.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/my/web/javascript/reference/index.html b/files/my/web/javascript/reference/index.html
new file mode 100644
index 0000000000..1345585f85
--- /dev/null
+++ b/files/my/web/javascript/reference/index.html
@@ -0,0 +1,312 @@
+---
+title: JavaScript reference
+slug: Web/JavaScript/Reference
+tags:
+  - Code
+  - ECMAScript
+  - ECMAScript6
+  - ES6
+  - JS
+  - JavaScript
+  - Landing page
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - es
+  - 'l10n:priority'
+  - programming
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p>
+
+<h2 id="Built-ins">Built-ins</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p>
+
+<ul class="card-grid">
+ <li><span>Value properties</span>
+
+  <p>{{JSxRef("Infinity")}}<br>
+   {{JSxRef("NaN")}}<br>
+   {{JSxRef("undefined")}}<br>
+   {{JSxRef("globalThis")}}</p>
+ </li>
+ <li><span>Function properties</span>
+  <p>{{JSxRef("Global_Objects/eval", "eval()")}}<br>
+   {{JSxRef("Global_Objects/isFinite", "isFinite()")}}<br>
+   {{JSxRef("Global_Objects/isNaN", "isNaN()")}}<br>
+   {{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}<br>
+   {{JSxRef("Global_Objects/parseInt", "parseInt()")}}<br>
+   {{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}<br>
+   {{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}<br>
+   {{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}<br>
+   {{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</p>
+ </li>
+ <li><span>Fundamental objects</span>
+  <p>{{JSxRef("Object")}}<br>
+   {{JSxRef("Function")}}<br>
+   {{JSxRef("Boolean")}}<br>
+   {{JSxRef("Symbol")}}</p>
+ </li>
+ <li><span>Error objects</span>
+  <p>{{JSxRef("Error")}}<br>
+   {{JSxRef("AggregateError")}}<br>
+   {{JSxRef("EvalError")}}<br>
+   {{JSxRef("InternalError")}}<br>
+   {{JSxRef("RangeError")}}<br>
+   {{JSxRef("ReferenceError")}}<br>
+   {{JSxRef("SyntaxError")}}<br>
+   {{JSxRef("TypeError")}}<br>
+   {{JSxRef("URIError")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Numbers &amp; dates</span>
+
+  <p>{{JSxRef("Number")}}<br>
+   {{JSxRef("BigInt")}}<br>
+   {{JSxRef("Math")}}<br>
+   {{JSxRef("Date")}}</p>
+ </li>
+ <li><span>Text processing</span>
+  <p>{{JSxRef("String")}}<br>
+   {{JSxRef("RegExp")}}</p>
+ </li>
+ <li><span>Indexed Collections</span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> </a>{{JSxRef("Array")}}<br>
+  {{JSxRef("Int8Array")}}<br>
+  {{JSxRef("Uint8Array")}}<br>
+  {{JSxRef("Uint8ClampedArray")}}<br>
+  {{JSxRef("Int16Array")}}<br>
+  {{JSxRef("Uint16Array")}}<br>
+  {{JSxRef("Int32Array")}}<br>
+  {{JSxRef("Uint32Array")}}<br>
+  {{JSxRef("Float32Array")}}<br>
+  {{JSxRef("Float64Array")}}<br>
+  {{JSxRef("BigInt64Array")}}<br>
+  {{JSxRef("BigUint64Array")}}</li>
+ <li><span>Keyed collections</span>
+  <p>{{JSxRef("Map")}}<br>
+   {{JSxRef("Set")}}<br>
+   {{JSxRef("WeakMap")}}<br>
+   {{JSxRef("WeakSet")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Structured data</span>
+
+  <p>{{JSxRef("ArrayBuffer")}}<br>
+   {{JSxRef("SharedArrayBuffer")}}<br>
+   {{JSxRef("Atomics")}}<br>
+   {{JSxRef("DataView")}}<br>
+   {{JSxRef("JSON")}}</p>
+ </li>
+ <li><span>Control abstraction</span>
+  <p>{{JSxRef("Promise")}}<br>
+   {{JSxRef("Generator")}}<br>
+   {{JSxRef("GeneratorFunction")}}<br>
+   {{JSxRef("AsyncFunction")}}</p>
+ </li>
+ <li><span>Reflection</span>
+  <p>{{JSxRef("Reflect")}}<br>
+   {{JSxRef("Proxy")}}</p>
+ </li>
+ <li><span>Internationalization</span>
+  <p>{{JSxRef("Intl")}}<br>
+   {{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}}<br>
+   {{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}}<br>
+   {{JSxRef("Global_Objects/Intl/DisplayNames", "Intl.DisplayNames")}}<br>
+   {{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}}<br>
+   {{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}}<br>
+   {{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}}<br>
+   {{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}}<br>
+   {{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>WebAssembly</span>
+
+  <p>{{JSxRef("WebAssembly")}}<br>
+   {{JSxRef("WebAssembly.Module")}}<br>
+   {{JSxRef("WebAssembly.Instance")}}<br>
+   {{JSxRef("WebAssembly.Memory")}}<br>
+   {{JSxRef("WebAssembly.Table")}}<br>
+   {{JSxRef("WebAssembly.CompileError")}}<br>
+   {{JSxRef("WebAssembly.LinkError")}}<br>
+   {{JSxRef("WebAssembly.RuntimeError")}}</p>
+ </li>
+</ul>
+
+<h2 id="Statements">Statements</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a></p>
+
+<ul class="card-grid">
+ <li><span>Control flow</span>{{jsxref("Statements/block", "Block")}}<br>
+  {{jsxref("Statements/break", "break")}}<br>
+  {{jsxref("Statements/continue", "continue")}}<br>
+  {{jsxref("Statements/Empty", "Empty")}}<br>
+  {{jsxref("Statements/if...else", "if...else")}}<br>
+  {{jsxref("Statements/switch", "switch")}}<br>
+  {{jsxref("Statements/throw", "throw")}}<br>
+  {{jsxref("Statements/try...catch", "try...catch")}}</li>
+ <li><span>Declarations</span>
+  <p>{{jsxref("Statements/var", "var")}}<br>
+   {{jsxref("Statements/let", "let")}}<br>
+   {{jsxref("Statements/const", "const")}}</p>
+ </li>
+ <li><span>Functions and classes</span>
+  <p>{{jsxref("Statements/function", "function")}}<br>
+   {{jsxref("Statements/function*", "function*")}}<br>
+   {{jsxref("Statements/async_function", "async function")}}<br>
+   {{jsxref("Statements/return", "return")}}<br>
+   {{jsxref("Statements/class", "class")}}</p>
+ </li>
+ <li><span>Iterations</span>
+  <p>{{jsxref("Statements/do...while", "do...while")}}<br>
+   {{jsxref("Statements/for", "for")}}<br>
+   {{jsxref("Statements/for_each...in", "for each...in")}}<br>
+   {{jsxref("Statements/for...in", "for...in")}}<br>
+   {{jsxref("Statements/for...of", "for...of")}}<br>
+   {{jsxref("Statements/for-await...of", "for await...of")}}<br>
+   {{jsxref("Statements/while", "while")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Other</span>
+
+  <p>{{jsxref("Statements/debugger", "debugger")}}<br>
+   {{jsxref("Statements/import", "import")}}<br>
+   {{jsxref("Statements/label", "label")}}<br>
+   {{jsxref("Statements/with", "with")}}</p>
+ </li>
+</ul>
+
+<h2 id="Expressions_and_operators">Expressions and operators</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>. </p>
+
+<div>
+<ul class="card-grid">
+ <li><span>Primary expressions</span>{{JSxRef("Operators/this", "this")}}<br>
+  {{JSxRef("Operators/function", "function")}}<br>
+  {{JSxRef("Operators/class", "class")}}<br>
+  {{JSxRef("Operators/function*", "function*")}}<br>
+  {{JSxRef("Operators/yield", "yield")}}<br>
+  {{JSxRef("Operators/yield*", "yield*")}}<br>
+  {{JSxRef("Operators/async_function", "async function")}}<br>
+  {{JSxRef("Operators/await", "await")}}<br>
+  {{JSxRef("Global_Objects/Array", "[]")}}<br>
+  {{JSxRef("Operators/Object_initializer", "{}")}}<br>
+  {{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}<br>
+  {{JSxRef("Operators/Grouping", "( )")}}<br>
+  {{JSxRef("null")}}</li>
+ <li><span>Left-hand-side expressions</span>
+  <p>{{JSxRef("Operators/Property_accessors", "Property accessors", "", 1)}}<br>
+   {{JSxRef("Operators/new", "new")}}<br>
+   {{JSxRef("Operators/new%2Etarget", "new.target")}}<br>
+   {{JSxRef("Operators/super", "super")}}<br>
+   {{JSxRef("Operators/Spread_syntax", "...obj")}}</p>
+ </li>
+ <li><span>Increment &amp; decrement</span>
+  <p>{{JSxRef("Operators/Arithmetic_Operators", "A++", "#Increment")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "A--", "#Decrement")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "++A", "#Increment")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</p>
+ </li>
+ <li><span>Unary operators</span>
+  <p>{{JSxRef("Operators/delete", "delete")}}<br>
+   {{JSxRef("Operators/void", "void")}}<br>
+   {{JSxRef("Operators/typeof", "typeof")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}<br>
+   {{JSxRef("Operators/Logical_Operators", "!", "#Logical_NOT")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Arithmetic operators</span>
+
+  <p>{{JSxRef("Operators/Arithmetic_Operators", "+", "#Addition")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "-", "#Subtraction")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "/", "#Division")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "*", "#Multiplication")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "%", "#Remainder")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</p>
+ </li>
+ <li><span>Relational operators</span>
+  <p>{{JSxRef("Operators/in", "in")}}<br>
+   {{JSxRef("Operators/instanceof", "instanceof")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</p>
+ </li>
+ <li><span>Equality operators</span>
+  <p>{{JSxRef("Operators/Comparison_Operators", "==", "#Equality")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "!=", "#Inequality")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "===", "#Identity")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</p>
+ </li>
+ <li><span>Bitwise shift operators</span>
+  <p>{{JSxRef("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Binary bitwise operators</span>{{JSxRef("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}<br>
+  {{JSxRef("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}<br>
+  {{JSxRef("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</li>
+ <li><span>Binary logical operators</span>
+  <p>{{JSxRef("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}<br>
+   {{JSxRef("Operators/Logical_Operators", "||", "#Logical_OR")}}</p>
+ </li>
+ <li><span>Conditional (ternary) operator</span>
+  <p>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</p>
+ </li>
+ <li><span>Assignment operators</span>
+  <p>{{JSxRef("Operators/Assignment_Operators", "=", "#Assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "/=", "#Division_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}<br>
+   {{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+   {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Functions">Functions</h2>
+
+<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li>
+</ul>
+
+<h2 id="Additional_reference_pages">Additional reference pages</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li>
+</ul>
diff --git a/files/my/web/javascript/reference/statements/function_star_/index.html b/files/my/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..414d5f4d63
--- /dev/null
+++ b/files/my/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,252 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div dir="rtl">{{jsSidebar("Statements")}}</div>
+
+<p>The <code><strong>function*</strong></code> declaration (<code>function</code> keyword followed by an asterisk) defines a <em>generator function</em>, which returns a {{jsxref("Global_Objects/Generator","Generator")}} object.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<p>You can also define generator functions using the {{jsxref("GeneratorFunction")}} constructor, or the function expression syntax.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">function* <var>name</var>([<var>param</var>[, <var>param</var>[, ... <var>param</var>]]]) {
+   <var>statements</var>
+}
+</pre>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>The function name.</dd>
+ <dt><code><var>param</var></code> {{optional_inline}}</dt>
+ <dd>The name of a formal parameter for the function.</dd>
+ <dt><code><var>statements</var></code></dt>
+ <dd>The statements comprising the body of the function.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.</p>
+
+<p>Generators in JavaScript -- especially when combined with Promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not entirely eliminate -- the problems with callbacks, such as <a href="http://callbackhell.com/">Callback Hell</a> and <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Inversion of Control</a>. However, an even simpler solution to these problems can be achieved with {{jsxref("Statements/async_function", "async functions")}}.</p>
+
+<p>Calling a generator function does not execute its body immediately; an <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator</a> object for the function is returned instead. When the iterator's <code>next()</code> method is called, the generator function's body is executed until the first {{jsxref("Operators/yield", "yield")}} expression, which specifies the value to be returned from the iterator or, with {{jsxref("Operators/yield*", "yield*")}}, delegates to another generator function. The <code>next()</code> method returns an object with a <code>value</code> property containing the yielded value and a <code>done</code> property which indicates whether the generator has yielded its last value, as a boolean. Calling the <code>next()</code> method with an argument will resume the generator function execution, replacing the <code>yield</code> expression where an execution was paused with the argument from <code>next()</code>.</p>
+
+<p>A <code>return</code> statement in a generator, when executed, will make the generator finish (i.e. the <code>done</code> property of the object returned by it will be set to <code>true</code>). If a value is returned, it will be set as the <code>value</code> property of the object returned by the generator.<br>
+ Much like a <code>return</code> statement, an error is thrown inside the generator will make the generator finished -- unless caught within the generator's body.<br>
+ When a generator is finished, subsequent <code>next()</code> calls will not execute any of that generator's code, they will just return an object of this form: <code>{value: undefined, done: true}</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre class="brush: js notranslate">function* idMaker() {
+  var index = 0;
+  while (true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...</pre>
+
+<h3 id="Example_with_yield*">Example with yield*</h3>
+
+<pre class="brush: js notranslate">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Passing_arguments_into_Generators">Passing arguments into Generators</h3>
+
+<pre class="brush: js notranslate">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+</pre>
+
+<h3 id="Return_statement_in_a_generator">Return statement in a generator</h3>
+
+<pre class="brush: js notranslate">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_an_object_property">Generator as an object property</h3>
+
+<pre class="brush: js notranslate">const someObj = {
+  *generator () {
+    yield 'a';
+    yield 'b';
+  }
+}
+
+const gen = someObj.generator()
+
+console.log(gen.next()); // { value: 'a', done: false }
+console.log(gen.next()); // { value: 'b', done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_an_object_method">Generator as an object method</h3>
+
+<pre class="brush: js notranslate">class Foo {
+  *generator () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const f = new Foo ();
+const gen = f.generator();
+
+console.log(gen.next()); // { value: 1, done: false }
+console.log(gen.next()); // { value: 2, done: false }
+console.log(gen.next()); // { value: 3, done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_a_computed_property">Generator as a computed property</h3>
+
+<pre class="brush: js notranslate">class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const SomeObj = {
+  *[Symbol.iterator] () {
+    yield 'a';
+    yield 'b';
+  }
+}
+
+console.log(Array.from(new Foo)); // [ 1, 2 ]
+console.log(Array.from(SomeObj)); // [ 'a', 'b' ]
+</pre>
+
+<h3 id="Generators_are_not_constructable">Generators are not constructable</h3>
+
+<pre class="brush: js notranslate">function* f() {}
+var obj = new f; // throws "TypeError: f is not a constructor
+</pre>
+
+<h3 id="Generator_defined_in_an_expression">Generator defined in an expression</h3>
+
+<pre class="brush: js notranslate">const foo = function* () {
+  yield 10;
+  yield 20;
+};
+
+const bar = foo();
+console.log(bar.next()); // {value: 10, done: false}</pre>
+
+<h3 id="Generator_example">Generator example</h3>
+
+<pre class="syntaxbox notranslate">function* powers(n){
+     //endless loop to generate
+     for(let current =n;; current *= n){
+         yield current;
+     }
+}
+
+for(let power of powers(2)){
+     //controlling generator
+     if(power &gt; 32) break;
+     console.log(power)
+           //2
+          //4
+         //8
+        //16
+       //32
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Other web resources:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/my/web/javascript/reference/statements/index.html b/files/my/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..b5f4f3d5e0
--- /dev/null
+++ b/files/my/web/javascript/reference/statements/index.html
@@ -0,0 +1,130 @@
+---
+title: Statements and declarations
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Landing page
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p>
+
+<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2>
+
+<p>For an alphabetical listing see the sidebar on the left.</p>
+
+<h3 id="Control_flow">Control flow</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Throws a user-defined exception.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd>
+</dl>
+
+<h3 id="Declarations">Declarations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Declares a variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Declares a block scope local variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Declares a read-only named constant.</dd>
+</dl>
+
+<h3 id="Functions_and_classes">Functions and classes</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>Declares a function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Generator Functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Declares an async function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Specifies the value to be returned by a function.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declares a class.</dd>
+</dl>
+
+<h3 id="Iterations">Iterations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd>
+ <dt>{{jsxref("Statements/for_each...in", "for each...in")}}  </dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/for-await...of", "for await...of")}}</dt>
+ <dd>Iterates over async iterable objects, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>, invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd>
+</dl>
+
+<h3 id="Others">Others</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>Used to export functions to make them available for imports in external modules, and other scripts.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>Used to import functions exported from an external module, another script.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt>
+ <dd>An object exposing context-specific metadata to a JavaScript module.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Statements/with", "with")}} </dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li>
+</ul>