initial commit

23 files changed, 3806 insertions, 0 deletions

diff --git a/files/fa/learn/css/index.html b/files/fa/learn/css/index.html
new file mode 100644
index 0000000000..8dcf1c6dde
--- /dev/null
+++ b/files/fa/learn/css/index.html
@@ -0,0 +1,67 @@
+---
+title: آموزش استایل‌دهی به HTML با استفاده از CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Style
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div style="direction: rtl;">{{LearnSidebar}}</div>
+
+<div style="direction: rtl;">شیوه‌نامه‌های آبشاری — یا {{glossary("CSS")}} — اولین فناوری است که شما پس از {{glossary("HTML")}} باید بیاموزید. HTML برای تعریف ساختار و معناشناسی محتوای شما به کار می‌رود و CSS برای تعیین سبک نمایش و چینش محتوای شما استفاده می‌شود. برای مثال، شما می‌توانید به کمک CSS، فونت، رنگ، اندازهو فاصله‌گذاری متن خود را تغییر دهید، آن را به چند ستون تقسیم کنید، یا به آن پویانمایی و امکانات نمایشی دیگر اضافه کنید.</div>
+
+<h2 id="مسیر_یادگیری" style="direction: rtl;">مسیر یادگیری</h2>
+
+<p style="direction: rtl;">شما پیش از هر گونه تلاش در CSS، ابتدا باید مقدمات HTML را بیاموزید. توصیه می‌کنیم ابتدا ماژول  <a href="fa/docs/Learn/HTML/Introduction_to_HTML">معرفی HTML</a> را ببینید. در آن ماژول شما در مورد موارد زیر خواهید آموخت:</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="Modules">Modules</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="Solving_common_CSS_problems">Solving common CSS problems</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="See_also">See also</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/fa/learn/getting_started_with_the_web/css_basics/index.html b/files/fa/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..476aa382b9
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,285 @@
+---
+title: CSS basics
+slug: Learn/Getting_started_with_the_web/CSS_basics
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Cascading Style Sheets) is the code you use to style your webpage. <em>CSS basics</em> takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?</p>
+</div>
+
+<h2 id="So_what_is_CSS_really">So what is CSS, really?</h2>
+
+<p>Like HTML, CSS is not really a programming language. It is not a <em>markup language</em> either — it is a <em>style sheet language</em>. This means that it lets you apply styles selectively to elements in HTML documents. For example, to select <strong>all</strong> the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Let's try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as <code>style.css</code> in your <code>styles</code> directory.</p>
+
+<p>But we still need to apply the CSS to your HTML document. Otherwise, the CSS styling won't affect how your browser displays the HTML document. (If you haven't been following on with our project, read <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> and <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> to find out what you need to do first.)</p>
+
+<ol>
+ <li>Open your <code>index.html</code> file and paste the following line somewhere in the head (that is, between the {{HTMLElement("head")}} and <code>&lt;/head&gt;</code> tags):
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet"&gt;</pre>
+ </li>
+ <li>Save <code>index.html</code> and load it in your browser. You should see something like this:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">If your paragraph text is now red, congratulations! You've just written your first successful CSS.</p>
+
+<h3 id="Anatomy_of_a_CSS_ruleset">Anatomy of a CSS ruleset</h3>
+
+<p>Let's look at the above CSS in a bit more detail:</p>
+
+<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>The whole structure is called a <strong>rule set </strong>(but often "rule" for short). Note the names of the individual parts:</p>
+
+<dl>
+ <dt>Selector</dt>
+ <dd>The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, {{HTMLElement("p")}} elements). To style a different element, just change the selector.</dd>
+ <dt>Declaration</dt>
+ <dd>A single rule like <code>color: red;</code> specifying which of the element's <strong>properties</strong><strong> </strong>you want to style.</dd>
+ <dt>Properties</dt>
+ <dd>Ways in which you can style a given HTML element. (In this case, <code>color</code> is a property of the {{htmlelement("p")}} elements.) In CSS, you choose which properties you want to affect in your rule.</dd>
+ <dt>Property value</dt>
+ <dd>To the right of the property, after the colon, we have the <strong>property value</strong>, which chooses one out of many possible appearances for a given property (there are many <code>color</code> values besides <code>red</code>).</dd>
+</dl>
+
+<p>Note the other important parts of the syntax:</p>
+
+<ul>
+ <li>Each rule set (apart from the selector) must be wrapped in curly braces (<code>{}</code>).</li>
+ <li>Within each declaration, you must use a colon (<code>:</code>) to separate the property from its values.</li>
+ <li>Within each rule set, you must use a semicolon (<code>;</code>) to separate each declaration from the next one.</li>
+</ul>
+
+<p>So to modify multiple property values at once, you just need to write them separated by semicolons, like this:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selecting_multiple_elements">Selecting multiple elements</h3>
+
+<p>You can also select multiple types of elements and apply a single rule set to all of them. Multiple selectors are separated by commas. For example:</p>
+
+<pre class="brush: css">p, li, h1 {
+  color: red;
+}</pre>
+
+<h3 id="Different_types_of_selectors">Different types of selectors</h3>
+
+<p>There are many different types of selectors. Above, we only looked at <strong>element selectors</strong>, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selectors:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector name</th>
+   <th scope="col">What does it select</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Element selector (sometimes called a tag or type selector)</td>
+   <td>All HTML element(s) of the specified type.</td>
+   <td><code>p</code><br>
+    Selects <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>ID selector</td>
+   <td>The element on the page with the specified ID. On a given HTML page, it's best practice to use one element per ID (and of course one ID per element) even though you are allowed to use same ID for multiple elements.</td>
+   <td><code>#my-id</code><br>
+    Selects <code>&lt;p id="my-id"&gt;</code> and <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Class selector</td>
+   <td>The element(s) on the page with the specified class (multiple class instances can appear on a page).</td>
+   <td><code>.my-class</code><br>
+    Selects <code>&lt;p class="my-class"&gt;</code> and <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Attribute selector</td>
+   <td>The element(s) on the page with the specified attribute.</td>
+   <td><code>img[src]</code><br>
+    Selects <code>&lt;img src="myimage.png"&gt;</code> but not <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Pseudo-class selector</td>
+   <td>The specified element(s), but only when in the specified state (e.g. being hovered over).</td>
+   <td><code>a:hover</code><br>
+    Selects <code>&lt;a&gt;</code>, but only when the mouse pointer is hovering over the link.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There are many more selectors to explore, and you can find a more detailed list in our <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p>
+
+<h2 id="Fonts_and_text">Fonts and text</h2>
+
+<p>Now that we've explored some CSS basics, let's start adding some more rules and information to our <code>style.css</code> file to make our example look nice. Let's start by getting our fonts and text to look a little better.</p>
+
+<ol>
+ <li>First of all, go back and find the <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a> that you stored somewhere safe. Add the {{htmlelement("link")}} element somewhere inside your <code>index.html</code>'s head (again, anywhere between the {{HTMLElement("head")}} and <code>&lt;/head&gt;</code> tags). It'll look something like this:
+
+  <pre class="brush: html">&lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
+  This code links your page to a stylesheet that downloads the Open Sans font family along with your web page and enables you to set it on your HTML elements using your own style sheet.</li>
+ <li>Next, delete the existing rule you have in your <code>style.css</code> file. It was a good test, but red text doesn't actually look very good.</li>
+ <li>Add the following lines in its place, replacing the placeholder line with the actual <code>font-family</code> line you got from Google Fonts. (<code>font-family</code> just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since {{HTMLElement("html")}} is the parent element of the whole page, and all elements inside it inherit the same <code>font-size</code> and <code>font-family</code>):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
+  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: Anything in a CSS document between <code>/*</code> and <code>*/</code> is a <strong>CSS comment</strong>, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.</p>
+  </div>
+ </li>
+ <li>Now we'll set font sizes for text-containing elements inside the HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>You can adjust these <code>px</code> values to whatever you like to get your design looking how you want, but in general your design should look like this:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Boxes_boxes_its_all_about_boxes">Boxes, boxes, it's all about boxes</h2>
+
+<p>One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Not surprisingly, CSS layout is based principally on the <em>box model. </em>Each of the blocks taking up space on your page has properties like this:</p>
+
+<ul>
+ <li><code>padding</code>, the space just around the content (e.g., around paragraph text).</li>
+ <li><code>border</code>, the solid line that sits just outside the padding.</li>
+ <li><code>margin</code>, the space around the outside of the element.</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>In this section we also use:</p>
+
+<ul>
+ <li><code>width</code> (of an element).</li>
+ <li><code>background-color</code>, the color behind an element's content and padding.</li>
+ <li><code>color</code>, the color of an element's content (usually text).</li>
+ <li><code>text-shadow</code>: sets a drop shadow on the text inside an element.</li>
+ <li><code>display</code>: sets the display mode of an element (don't worry about this yet).</li>
+</ul>
+
+<p>So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.</p>
+
+<h3 id="Changing_the_page_color">Changing the page color</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>This rule sets a background color for the whole page. Change the color code above to whatever color <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">you chose when planning your site</a>.</p>
+
+<h3 id="Sorting_the_body_out">Sorting the body out</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — this forces the body to always be 600 pixels wide.</li>
+ <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Syntax">here</a>.</li>
+ <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the {{htmlelement("html")}} element, but feel free to go ahead and experiment.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order. As with <code>margin</code>, you can also use one, two or three values, as documented on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">padding syntax</a>.</li>
+ <li><code>border: 5px solid black;</code> — this takes values for the width, style and color of the border, in our case simply setting a 5-pixel–wide, solid black border on all sides of the body.</li>
+</ul>
+
+<h3 id="Positioning_and_styling_our_main_page_title">Positioning and styling our main page title</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p>
+
+<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the HTML background color.</p>
+
+<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p>
+
+<ul>
+ <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li>
+ <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li>
+ <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li>
+ <li>The fourth value sets the base color of the shadow.</li>
+</ul>
+
+<p>Again, try experimenting with different values to see what you can come up with!</p>
+
+<h3 id="Centering_the_image">Centering the image</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The instructions above assume that you're using an image smaller than the width set on the body (600 pixels). If your image is larger, then it will overflow the body and spill out to the rest of the page. To rectify this, you can either 1) reduce the image's width using a <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">graphics editor</a>, or 2)  size the image using CSS by setting the {{cssxref("width")}} property on the <code>&lt;img&gt;</code> element with a smaller value (e.g., <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also <a href="http://mdn.github.io/beginner-html-site-styled/">view our version here</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on GitHub</a>.</p>
+
+<p>Here, we have only really scratched the surface of CSS. To find out more, go to our <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..909367a03f
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,100 @@
+---
+title: سر و کله زدن با فایل ها
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary" dir="rtl">
+<p>    یک وب سایت شامل فایل های زیادی است : مانند محتوای متنی,کد ها,صفحه بندی ها ,محتوای رسانه ای و موارد دیگر .<br>
+     وقتی شما در حال ساختن یک وب سایت هستید,شما باید تمام این فایل ها و محتوا را در یک ساختار درست و منطقی در رایانه خودتان بکار ببرید و مطمئن شوید که با یک دیگر ارتباط برقرار می کنند و تمام محتوا درست به نظر می رسند , قبل از اینکه به آن ها را به سرور اصلی آپلود کنید. <br>
+    سر و کله زدن با فایل ها ممکن است مشکلاتی به وجود بیاورد بنابرین شما باید آگاهانه یک ساختار محتاطانه برای خود درست کنید که مشکلات کمتری ظاهر شوند.</p>
+</div>
+
+<h2 dir="rtl" id="وب_سایت_شما_باید_در_کجای_رایانه_قرار_بگیرد؟">وب سایت شما باید در کجای رایانه قرار بگیرد؟</h2>
+
+<p dir="rtl">   وقتی شما به صورت محلی(در رایانه خودتان) مشغول کار بر روی سایتی هستید,شما باید تمام فایل های مرتبط با سایت شما باید در یک پوشه جمع آوری و نگهداری شوند که ساختار فایل سایت شما را در سرور شامل میشود.<br>
+    این پوشه می تواند در هر جایی قرار بگیرد ولی توصیه می شود که در مکانی که به راحتی قابل دسترس باشد قرار بگیرد مثل دسکتاپ و ....</p>
+
+<ol dir="rtl">
+ <li>یک مکان برای ذخیره سازی پروژه سایت خود انتخاب کنید.در آنجا یک پوشه جدید به نام  پروژه-وب یا چیزی شبیه آن انتخاب کنید. این جایی است که پروژه وب سایت شما ساخته می شود.</li>
+ <li>در  پوشه اول (پروژه-وب) یک پوشه دیگر برای ذخیره سازی اولین سایت خود ایجاد کنید به نام سایت-آزمایشی یا چیزی شبیه آن.</li>
+</ol>
+
+<h2 dir="rtl" id="قرار_دادن_جای_خالی_را_کنار_بگذارید">قرار دادن جای خالی را کنار بگذارید</h2>
+
+<p dir="rtl">شما در حین مطالعه این مقاله متوجه می شوید که در انتخاب نام پوشه و فایل هایتان باید از حروف کوچک و بدون فاصله (space) و جای خالی استفاده کنید.</p>
+
+<ol dir="rtl">
+ <li>بسیاری از رایانه ها بخصوص رایانه های سرور به حروف حساس اند . برای مثال اگر شما عکسی را در سایتتان قرار دهید test-site/MyImage.jpg و بعدا در در فایل دیگری بخواهید از ان استفاده کنید مثل test-site/myimage.jpg ممکن است که کار نکند.</li>
+ <li>مرورگرها,وب سرور ها, زبان های برنامه نویسی نمی توانند جای خالی (space) را پردازش کنند. برای مثال اگر شما از جای خالی در نامگذاری فایل هایتان استفاده کرده باشد بعضی از سیستم ها ان را به عنوان دو فایل جدا گانه در نظر می گیرند. بعضی از سرور ها ان را با %20 (کد کاراکتر space در url) جایگزین می کنند که باعث خرابی می شود .بهتر است از - به جای space استفاده کنید مثل                       <code>my-file.html </code>یا  <code>my_file.html (خط تیره از اندر لاین بهتر است)</code></li>
+</ol>
+
+
+
+<p dir="rtl">کوتاه ترین جواب این است که از خط تیره برای اسم فایل های خود استفاده کنید . موتور جست و جوی گوگل خط تیره را به عنوان جدا کننده کلمه به حساب می آورد ولی با آندرلاین اینگونه برخورد نمی کند . برای همین دلایل بهتر است عادت کنیم که نام فایل ها و فولدر ها را با حروف کوچک و بدون فاصله و با جداکننده خط تیره بنویسیم . حداقل حالا که می دونید چه کار می کنید . این راه شما را در آینده در این مسیر با مشکلات کمتری مواجه خواهد کرد .</p>
+
+<h2 dir="rtl" id="ساختار_وب_سایت_شما_چگونه_باید_باشد؟">ساختار وب سایت شما چگونه باید باشد؟</h2>
+
+<p dir="rtl"></p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called <code>index.html</code> and save it just inside your <code>test-site</code> folder.</li>
+ <li><strong><code>images</code> folder</strong>: This folder will contain all the images that you use on your site. Create a folder called <code>images</code>, inside your <code>test-site</code> folder.</li>
+ <li><strong><code>styles</code> folder</strong>: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called <code>styles</code>, inside your <code>test-site</code> folder.</li>
+ <li><strong><code>scripts</code> folder</strong>: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called <code>scripts</code>, inside your <code>test-site</code> folder.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called <strong>Hide extensions for known file types</strong> turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the <strong>Folder options...</strong> option, unchecking the <strong>Hide extensions for known file types</strong> checkbox, then clicking <strong>OK</strong>. For more specific information covering your version of Windows, do a Yahoo search!</p>
+</div>
+
+<h2 id="File_paths">File paths</h2>
+
+<p>To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our <code>index.html</code> file, and make it display the image you chose in the article <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?"</a></p>
+
+<ol>
+ <li>Copy the image you chose earlier into your <code>images</code> folder.</li>
+ <li>Open up your <code>index.html</code> file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>The line <code>&lt;img src="" alt="My test image"&gt;</code> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the <em>images</em> directory, which is in the same directory as <code>index.html</code>. To walk down the file structure from <code>index.html</code> to our image, the file path we'd need is <code>images/your-image-filename</code>. For example, our image is called <code>firefox-icon.png</code>, so the file path is <code>images/firefox-icon.png</code>.</li>
+ <li>Insert the file path into your HTML code between the double quote marks of the <code>src=""</code> code.</li>
+ <li>Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Some general rules for file paths:</p>
+
+<ul>
+ <li>To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. <code>my-image.jpg</code>.</li>
+ <li>To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. <code>subdirectory/my-image.jpg</code>.</li>
+ <li>To link to a target file in the directory <strong>above</strong> the invoking HTML file, write two dots. So for example, if <code>index.html</code> was inside a subfolder of <code>test-site</code> and <code>my-image.jpg</code> was inside <code>test-site</code>, you could reference <code>my-image.jpg</code> from <code>index.html</code> using <code>../my-image.jpg</code>.</li>
+ <li>You can combine these as much as you like, for example <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li>
+</ul>
+
+<p>For now, this is about all you need to know.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Windows file system tends to use backslashes, not forward slashes, e.g. <code>C:\windows</code>. This doesn't matter in HTML — even if you are developing your web site on Windows, you should still use forward slashes in your code.</p>
+</div>
+
+<h2 id="What_else_should_be_done">What else should be done?</h2>
+
+<p>That is about it for now. Your folder structure should look something like this:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/fa/learn/getting_started_with_the_web/html_basics/index.html b/files/fa/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..7369897a74
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,228 @@
+---
+title: HTML basics
+slug: Learn/Getting_started_with_the_web/HTML_basics
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p dir="rtl">اچ تی ام ال (زبان نشانه گذاری ابرمتن) کدی است که از آن برای ساختن یک صفحه وب و محتوای آن استفاده می‌شود. به طور مثال، محتوا را می‌توان در مجموعه ای از پاراگراف‌ها، لیست ها یا با استفاده از تصاویر و جداول داده ساختاربندی کرد. همانطور که عنوان نشان می‌دهد، این مقاله به شما یک درک اولیه از HTML و عملکرد آن خواهد داد.</p>
+</div>
+
+<h2 id="So_what_is_HTML_really">So what is HTML, really?</h2>
+
+<p>HTML is not a programming language; it is a <em>markup language</em> that defines the structure of your content. HTML consists of a series of <strong>{{Glossary("element", "elements")}}</strong>, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing {{Glossary("tag", "tags")}} can make a word or image hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on.  For example, take the following line of content:</p>
+
+<pre>My cat is very grumpy</pre>
+
+<p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomy_of_an_HTML_element">Anatomy of an HTML element</h3>
+
+<p>Let's explore this paragraph element a bit further.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>The main parts of our element are:</p>
+
+<ol>
+ <li><strong>The opening tag:</strong> This consists of the name of the element (in this case, p), wrapped in opening and closing <strong>angle brackets</strong>. This states where the element begins, or starts to take effect — in this case where the paragraph begins.</li>
+ <li><strong>The closing tag:</strong> This is the same as the opening tag, except that it includes a <em>forward slash</em> before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is one of the common beginner errors and can lead to strange results.</li>
+ <li><strong>The content:</strong> This is the content of the element, which in this case is just text.</li>
+ <li><strong>The element:</strong> The opening tag, the closing tag, and the content together comprise the element.</li>
+</ol>
+
+<p>Elements can also have attributes, which look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Attributes contain extra information about the element that you don't want to appear in the actual content. Here, <code>class</code> is the attribute <em>name</em>, and <code>editor-note</code> is the attribute <em>value</em>. The <code>class</code> attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.</p>
+
+<p>An attribute should always have:</p>
+
+<ol>
+ <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes).</li>
+ <li>The attribute name, followed by an equals sign.</li>
+ <li>Opening and closing quote marks wrapped around the attribute value.        </li>
+</ol>
+
+<h3 id="Nesting_elements">Nesting elements</h3>
+
+<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>You do however need to make sure that your elements are properly nested: in the example above we opened the {{htmlelement("p")}} element first, then the {{htmlelement("strong")}} element, therefore we have to close the {{htmlelement("strong")}} element first, then the {{htmlelement("p")}}. The following is incorrect:</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, which can lead to unexpected results. So don't do it!</p>
+
+<h3 id="Empty_elements">Empty elements</h3>
+
+<p>Some elements have no content, and are called <strong>empty elements</strong>. Take the {{htmlelement("img")}} element we already have in our HTML:</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>This contains two attributes, but there is no closing <code>&lt;/img&gt;</code> tag, and no inner content. This is because an image element doesn't wrap content to have an effect on it. Its purpose is to embed an image in the HTML page in the place it appears.</p>
+
+<h3 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h3>
+
+<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our <code>index.html</code> example (which we first met in the <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> article):</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Here we have:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artefact that needs to be included for everything to work right. For now, that's all you need to know.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — the {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — the {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like {{Glossary("keyword", "keywords")}} and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — the {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — the {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.</li>
+</ul>
+
+<h2 id="Images">Images</h2>
+
+<p>Let's turn our attention to the {{htmlelement("img")}} element again:</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>As we said before, it embeds an image into our page in the position it appears. It does this via the <code>src</code> (source) attribute, which contains the path to our image file.</p>
+
+<p>We have also included an <code>alt</code> (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because:</p>
+
+<ol>
+ <li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li>
+ <li>Something has gone wrong causing the image to not display. For example, try deliberately changing the path inside your <code>src</code> attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>The key words about alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p>
+
+<p>Try coming up with some better alt text for your image now.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Find out more about accessibility at <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p>
+</div>
+
+<h2 id="Marking_up_text">Marking up text</h2>
+
+<p>This section will cover some of the basic HTML elements you'll use for marking up text.</p>
+
+<h3 id="Headings">Headings</h3>
+
+<p>Heading elements allow you to specify that certain parts of your content are headings — or subheadings — of your content. In the same way that a book has a main title, chapter titles and subtitles, an HTML document can too. HTML contains six heading levels, {{htmlelement("h1")}}–{{htmlelement("h6")}} although you'll commonly only use 3–4 at most:</p>
+
+<pre class="brush: html">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>Now try adding a suitable title to your HTML page just above your {{htmlelement("img")}} element.</p>
+
+<h3 id="Paragraphs">Paragraphs</h3>
+
+<p>As explained above, {{htmlelement("p")}} elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:</p>
+
+<pre class="brush: html">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Add your sample text (you should have it from <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) into one or a few paragraphs, placed directly below your {{htmlelement("img")}} element.</p>
+
+<h3 id="Lists">Lists</h3>
+
+<p>A lot of the web's content is lists, and HTML has special elements for these. Marking up lists always consist of at least two elements. The most common list types are ordered and unordered lists:</p>
+
+<ol>
+ <li><strong>Unordered lists</strong> are for lists where the order of the items doesn't matter, like a shopping list. These are wrapped in a {{htmlelement("ul")}} element.</li>
+ <li><strong>Ordered lists</strong> are for lists where the order of the items does matter, like a recipe. These are wrapped in an {{htmlelement("ol")}} element.</li>
+</ol>
+
+<p>Each item inside the lists is put inside an {{htmlelement("li")}} (list item) element.</p>
+
+<p>For example, if we wanted to turn the part of the following paragraph fragment into a list:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>We could modify the markup to this:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>Try adding an ordered or unordered list to your example page.</p>
+
+<h2 id="Links">Links</h2>
+
+<p>Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — {{htmlelement("a")}} — the "a" being short for "anchor". To make text within your paragraph into a link, follow these steps:</p>
+
+<ol>
+ <li>Choose some text. We chose the text "Mozilla Manifesto".</li>
+ <li>Wrap the text in an {{htmlelement("a")}} element, like so:
+  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Give the {{htmlelement("a")}} element an <code>href</code> attribute, like so:
+  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Fill in the value of this attribute with the web address that you want the link to link to:
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>You might get unexpected results if you omit the <code>https://</code> or <code>http://</code> part, called the <em>protocol</em>, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.</p>
+
+<div class="note">
+<p><code>href</code> might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
+</div>
+
+<p>Add a link to your page now, if you haven't already done so.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> on GitHub.</p>
+
+<p>Here, we have only really scratched the surface of HTML. To find out more, go to our <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fa/learn/getting_started_with_the_web/index.html b/files/fa/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..963acd5a17
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,64 @@
+---
+title: شروع برنامه نویسی وب
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - NeedsTranslation
+  - TopicStub
+  - publishing
+  - theory
+  - انتشار
+  - ترجمه
+  - راهنما
+  - طراحی
+  - مقدماتی
+translation_of: Learn/Getting_started_with_the_web
+---
+<p dir="rtl">{{LearnSidebar}}</p>
+
+<p class="summary" dir="rtl">در این سری از مقالات، به طور مختصر و کوتاه به معرفی برنامه نویسی وب می پردازیم. سپس شیوه ی نصب ابزارهای مورد نیاز برای ساخت یک وب سایت ساده را می آموزیم و کدهای ساده و اولیه ی نوشته شده را اجرا می کنیم. </p>
+
+<h2 dir="rtl" id="مقدمه_ای_در_مورد_ساخت_اولین_سایت_توسط_شما">مقدمه ای در مورد ساخت اولین سایت توسط شما</h2>
+
+<p dir="rtl">برای ساختن یک وب سایت حرفه ای، کارهای بسیاری باید انجام دهید؛ بنابراین اگر شما در حرفه ی طراحی سایت تازه کار هستید، توصیه می کنیم که ذره ذره آن را بیاموزید و ناامید نشوید. <br>
+ ساختن سایتی مثل فیسبوک کار دشواری است و تجربه میخواهد، اما ساختن وبسایت ساده خودتان سخت نیست ، بنابراین خودتان را برای انجام این کار آماده کنید. </p>
+
+<p dir="rtl">با تمرین و مطالعه مقالاتی که در لیست زیر به ترتیب آمده، شما بدون هیچ پیش زمینه ای قادر به ساخت اولین صفحه وبتان خواهید بود.بزن بریم!</p>
+
+<h3 dir="rtl" id="آموزش_نصب_نرم_افزارهای_مورد_نیاز"><a href="/fa/docs/Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه">آموزش نصب نرم افزارهای مورد نیاز</a></h3>
+
+<p dir="rtl">نرم افزارهای بسیار زیادی برای طراحی وب وجود دارد. از این رو اگر شما تازه شروع به برنامه نویسی وب کرده باشید، ممکن است این ویرایشگرها، فریمورکها و ابزارهای تست موجب سردرگمی شما شده باشند. <br>
+ در بخش <a href="/fa/docs/Learn/Getting_started_with_the_web">آموزش نصب نرم افزارهای مورد نیاز</a>، به صورت گام به گام به نصب نرم افزارهای مورد نیاز جهت طراحی وب برای مبتدیان می پردازیم. </p>
+
+<h3 dir="rtl" id="می_خواهید_ظاهر_سایت_شما_چگونه_باشد؟"><a href="/fa/docs/Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟">می خواهید ظاهر سایت شما چگونه باشد؟</a></h3>
+
+<p dir="rtl">قبل از اینکه شروع به کدنویسی برای سایت خود کنید، خوب است که طرح آن را در ذهن خود مجسم کنید.چه اطلاعاتی را قراراست نمایش دهید؟ چه فونتها و رنگهایی را استفاده می کنید؟ و اینکه <a href="/fa/docs/Learn/Getting_started_with_the_web">می خواهید ظاهر سایت شما چگونه باشد</a>. در ادامه ی این مقاله، روش ساده ای را به شما توضیح میدهیم تا بتوانید نقشه محتوا و طرح سایت خود را دنبال کنید.</p>
+
+<h3 dir="rtl" id="کار_با_فایل_ها"><a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a></h3>
+
+<p dir="rtl">یک وبسایت از فایلهای زیادی تشکیل شده است: محتوای متنی‌، کد، شیوه نامه ها(stylesheets)، محتوای رسانه و ... . شما نیاز دارید این فایلها‌ را با ساختاری معقول گرد هم بیاورید وازاینکه با هم ارتباط برقرار میکنند اطمینان حاصل کنید.بخش <a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a> روش ساخت یک ساختار فایل منطقی برای وبسایتتان و مشکلاتی که از آنها بهتراست مطلع باشید را  توضیح می دهد.<a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> </a></p>
+
+<h3 dir="rtl" id="مقدمات_HTML"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a></h3>
+
+<p dir="rtl">Hypertext Markup Language یا به اختصار HTML، کدی است که برای ساخت محتوای وب سایت خود از آن استفاده می کنید  و به آن معنا و روح می بخشد. مثلاً تعیین می کند که محتوای اینجا مجموعه ای از پاراگراف ها است یا لیستی از بولت پوینت(bullet point)؟ آیا در صفحه ام تصویری الحاق شده است؟ آیا جدول داده دارم؟ بطور خلاصه <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a> شما را به صورت کلی با HTML آشنا می کند.</p>
+
+<h3 dir="rtl" id="مقدمات_CSS"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a></h3>
+
+<p dir="rtl">Cascading Stylesheets یا بصورت خلاصه CSS کدی است که برای ساخت ظاهر وب سایتتان از آن استفاده می کنید. مثلاً می خواهید متن سیاه باشد یا قرمز؟ محتوا در کجای صفحه نمایش قرار بگیرد؟ چه تصاویر پس زمینه یا رنگ هایی برای <span dir="ltr" lang="fa">تزئین</span> وب سایتتان استفاده شود؟ <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a> دقیقا می گوید که برای شروع چه کار باید انجام دهید.</p>
+
+<h3 dir="rtl" id="مقدمات_JavaScript"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a></h3>
+
+<p dir="rtl">JavaScript زبان برنامه نویسی است که از آن برای افزودن قابلیت های تعاملی به وب سایتتان استفاده می کنید. مثلاً در بازی ها، بعد از زدن یک کلید یا وارد کردن اطلاعات در فرم ها، چیزی اتفاق می افتد، قسمتی تغییر ظاهر می دهد، انیمیشنی صورت می گیرد، و خیلی چیز های دیگر. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a> ایده اولیه که با این زبان مهیج چه کارهایی را می توانید انجام دهید و چطور کار با آن را شروع کنید را در اختیارتان قرار می دهد.</p>
+
+<h3 dir="rtl" id="انتشار_وب_سایت"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار وب سایت</a></h3>
+
+<p dir="rtl">بعد از پایان نوشتن کدها و سازماندهی فایل های سازنده وب سایت، لازم است که  وب سایت خود را بصورت آنلاین قرار دهید تا بقیه هم بتوانند آن را ببینند. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار کد نمونه خودتان</a> نحوه آنلاین کردن کدهای ساده خود با کمترین زحمت را یاد می گیرید.</p>
+
+<h3 dir="rtl" id="وب_چطور_کار_می_کند"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a></h3>
+
+<p dir="rtl">وقتی که به وب سایت مورد علاقه خود سر می زنید، چیزهای پیچیده زیادی درزمینه رخ‌  می دهد  که ممکن است از آن بی خبر باشید. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a> توضیح می دهیم زمانی که صفحه وبی را در کامپیوتر خود مشاهده می کنید چه اتفاقاتی می افتد.</p>
diff --git a/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/index.html b/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/index.html
new file mode 100644
index 0000000000..85c20598af
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/index.html
@@ -0,0 +1,420 @@
+---
+title: مقدمات جاوااسکریپت
+slug: Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت
+tags:
+  - آموزش
+  - جاوا‌ اسکریپت
+  - مقدماتی
+  - وب
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
+
+<div class="summary" dir="rtl">
+<p>جاوااسکریپت یک زبان برنامه نویسی است که تعاملات را به وبسایت شما می آورد (مانند بازی ها، پاسخ به کلیک شدن یک دکمه یا پر شدن فرم ها، طرح های پویا و پویانمایی). این مقاله به شما کمک میکند، کار با این زبان هیجان انگیز را شروع کنید و درکی از کارهای ممکن توسط آن را به شما میدهد.</p>
+</div>
+
+<h2 dir="rtl" id="جاوااسکریپت_واقعا_چیست؟">جاوااسکریپت واقعا چیست؟ </h2>
+
+<p dir="rtl">{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.</p>
+
+<p dir="rtl">با جاوااسکریپت انجام هر چیزی امکان پذیر است. ابتدا شما با خصوصیات ساده و کاربردی این زبان مانند کار با حلقه ها، گالری تصاویر، تغییر قالب بندی و واکنش به کلیک دکمه ها شروع خواهید نمود. به مرور زمان و با کسب مهارت در جاوااسکریپت شما قادر به ساخت بازی ها، انیمشن های دو بعدی و سه بعدی، برنامه ها و... خواهید شد.</p>
+
+<p dir="rtl">جاوااسکریپت ذاتا خیلی فشرده اما در عین حال انعطاف پذیر است و توسعه دهندگان با استفاده از همین خصوصیت انعطاف پذیری جاوااسکریپت ابزارهای بسیاری را نوشته اند که برروی هسته زبان جاوااسکریپت قرار می گیرند و به کمک آنها می توان با تلاش کم به قابلیت های بیشتر دست یافت. این قابلیت ها شامل موارد زیر می گردد:</p>
+
+<p dir="rtl">واسط‌ های برنامه نویسی کاربردی  ({{Glossary("API","APIs")}}) — APIs ،  در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML  و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.</p>
+
+<ul>
+ <li dir="rtl">API های مختلف به توسعه دهندگان اجازه میدهند که کارایی های مختلف را به نرم افزار هایشان با اضافه کردن قابلیت سایت های دیگر مانند توییتر یا فیسبوک بیفزاییند.</li>
+ <li dir="rtl">فریمورک های مختلف و کتابخانه ها را می توانید به html تان اضافه کنید تا به شما اجازه ساخت سریع سایت و اپلیکیشنتان را بدهد.</li>
+</ul>
+
+<h2 dir="rtl" id="یک_مثال_ساده">یک مثال ساده</h2>
+
+<p dir="rtl">قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.</p>
+
+<p dir="rtl">اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML  و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">the standard in basic programming examples</a>.)</p>
+
+<div class="warning" dir="rtl">
+<p><strong>نکته مهم : اگر تازه به مجموعه آموزش ما پیوسته اید برای شروع<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip"> کدهای مثال را از اینجا دانلود</a> کنید</strong></p>
+</div>
+
+<ol>
+ <li dir="rtl">ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.</li>
+ <li dir="rtl">سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از  <code>&lt;/body&gt;</code> بنویسید.</li>
+</ol>
+
+<pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+
+<p dir="rtl">3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.</p>
+
+<p dir="rtl">4. اکنون کد زیر را به فایل main.js اضافه کنید: </p>
+
+<pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.innerHTML = 'Hello world!';</pre>
+
+<p dir="rtl">5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></p>
+
+<div class="note" dir="rtl">
+<p><strong>توجه </strong>: دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوا‌‌‌‌‌‌‍‌اسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم  در اینصورت  محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه  HTML می گذاریم .</p>
+</div>
+
+<h3 dir="rtl" id="قدم_بعدی_چیست_؟">قدم بعدی چیست ؟</h3>
+
+<p dir="rtl">خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World"   تغییر دادید.  این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر <code>myHeading</code>  انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.</p>
+
+<p dir="rtl">بعد از آن متن یا محتوا مورد نظر را  به متغییر <code>myHeading</code>   که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن  تگ H1  محتوای "Hello World" مقدار دهی می شود.</p>
+
+<h2 dir="rtl" id="توضیح_پایه_ای_زبان">توضیح پایه ای زبان</h2>
+
+<p dir="rtl">برویم سراغ اصول و ویژگی پایه ای و اصلی زبان برنامه نویسی جاوااسکریپت,  بررسی ویژگی های عمومی در تمام زبان های برنامه نویسی بويژه این ویژگی ها در زبان جاوا اسکریپت باعث درک بهتر از روش کار کرد آن خواهد شد. اگر شما اصول پایه  را بدانید می توانید برنامه نویسی را  شروع کنید</p>
+
+<div class="warning" dir="rtl">
+<p><strong>نکته مهم</strong>: سعی کنید در زمان مطالعه‌ی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجه‌ی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا <a href="https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools">&lt;&lt; بررسی ابزارهای توسعه مرورگر&gt;&gt; کلیک کنید</a> .</p>
+</div>
+
+<h3 dir="rtl" id="متغییرها">متغییرها</h3>
+
+<p dir="rtl">{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی <code>var</code> شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note" dir="rtl">
+<p><strong>توجه</strong>:  نقطه ویرگول  ( ; )  در پایان هر خط نشان‌دهنده‌ی پایان عبارت است و تنها در صورتی لزوما باید استفاده شود که بخواهید عبارت‌های مختلف در یک سطر را از هم جدا کنید. هرچند برخی اعتقاد دارند که گذاشتن آن در پایان هر سطر، شیوه‌ی مناسبی است. قوانین دیگری برای لزوم استفاده و لزوم عدم استفاده‌ی آن وجود دارد (برای جزییات بیشتر <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">راهنمای نقطه‌ویرگول در جاوااسکریپت</a> را مشاهده کنید).</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (<a href="http://www.codelifter.com/main/tips/tip_020.shtml">برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید </a>)</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>نکته</strong>: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییر<code>myVariable</code>  با نام <code>myvariable</code>  از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !</p>
+</div>
+
+<p dir="rtl">پس از تعریف یک متغیر شما می توانید به آن یک مقدار بدهید:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p dir="rtl">شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p dir="rtl">شما میتوانید اگر بخواهید هر دوی این عملیات ها را روی یک خط انجام دهید:</p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p dir="rtl">پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p dir="rtl">دقت کنید که متغیرها<a href="/en-US/docs/Web/JavaScript/Data_structures"> انواع مختلفی از داده ها را </a> میتوانند داشته باشند:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">متغییر</th>
+   <th scope="col">توضیح</th>
+   <th scope="col">مثال</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>
+    <p dir="rtl">متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید  متن یا محتوا در کوتیشن قرار دهید.</p>
+   </td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>
+    <p dir="rtl">متغییر عددی . برای مقدار دهی به  متغییر عددی احتیاج به استفاده از کوتیشن نیست.</p>
+   </td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>
+    <p dir="rtl">متغییر درست یا غلط . کلمات <code>true</code>/<code>false</code> بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند</p>
+   </td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>
+    <p dir="rtl">این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.</p>
+   </td>
+   <td>
+    <p><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+     هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:</p>
+
+    <p><code>myVariable[0]</code>, <code>myVariable[1]</code>, ... .</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p dir="rtl">اساسا در جاوا اسکریپت همه چیز یک آبجکت است و شما می توانید آن را دریک متغییر ذخیره کنید. این نکته را در ذهن داشته باشید تا در آینده با آن بیشتر آشنا خواهید شد.</p>
+
+    <p>n.</p>
+   </td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    مثال های بالای در این مقاله.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p dir="rtl">اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم.  اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا  پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.</p>
+
+<h3 dir="rtl" id="نظر_ها_یادداشت_ها">نظر ها  (یادداشت ها)</h3>
+
+<p dir="rtl">در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :</p>
+
+<pre class="brush: js">/*
+Everything in between is a comment.
+*/</pre>
+
+<p dir="rtl">اگر نظر یا یادداشت شما فقط یک خط است می توانید از ساختار دو اسلش مانند مثال زیر استفاده کنید:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// This is a comment
+</pre>
+
+<h3 dir="rtl" id="عملیات_ها">عملیات ها</h3>
+
+<p dir="rtl">{{Glossary("operator")}} نماد یک عمل  ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">عمل</th>
+   <th scope="col">توضیح</th>
+   <th scope="col">نماد(ها)</th>
+   <th scope="col">مثال</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">بعلاوه / جمع</th>
+   <td>
+    <p dir="rtl">زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.</p>
+   </td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">تفریق, ضرب, تقسیم</th>
+   <td>
+    <p dir="rtl">عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.</p>
+   </td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // multiply in JS is an asterisk<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">مقدار دهی</th>
+   <td dir="rtl">در مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">عمل تطابق</th>
+   <td>
+    <p dir="rtl">در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (<code>true</code>/<code>false</code>) خواهد بود. </p>
+   </td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">عدم تساوی / نه منطقی</th>
+   <td>
+    <p dir="rtl"> (<code>true</code> )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (<code>false) </code> بر می گرداند</p>
+   </td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !myVariable === 3;</code></p>
+
+    <p>Here we are testing "is <code>myVariable</code> NOT equal to 3". This returns <code>false</code>, because it IS equal to 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p dir="rtl">عمل های زیادی وجود دارد اما برای شروع تا همین جا کافی است اما اگر می خواهید <a href="/fa/docs/Web/JavaScript/Reference/Operators">لیست تمامی عمل و عبارت ها را مشاهده کنید اینجا را کلیک</a> کنید.</p>
+
+<div class="note">
+<p dir="rtl"><strong>نکته مهم</strong>: ترکیب چند نوع  متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت  <code>"35" + "25"</code> وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما <code>35 + 25</code> در کنسول وارد کنید نتیجه صحیح را خواهید دید.</p>
+</div>
+
+<h3 id="شرط_ها">شرط ها</h3>
+
+<p dir="rtl">شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای  ٫ بستگی به خروجی شرط دارد .  رایج ترین  ساختار شرطی :  <code>if ... else</code>  است بصورت نمونه :</p>
+
+<pre class="brush: js">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p dir="rtl">عبارت درون  <code>if ( ... )</code> یک شرط است  - این شرط  می گوید  اگر مقدار متغیر <code>iceCream</code>  برابر با مقدار رشته یی <code>chocolate</code>  بود پس نتیجه شرط <code>true</code> (صحیح) است در نتیجه تکه کد درون  {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از <code>else</code>  اجرا خواهد شد. </p>
+
+<h3 dir="rtl" id="توابع">توابع </h3>
+
+<p dir="rtl">{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید.  شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p dir="rtl">توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.</p>
+
+<p dir="rtl">اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته <code>()</code> وجود دارد آن چیز حتمی تابع است.  توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.</p>
+
+<p dir="rtl">برای نمونه تابع <code>alert()</code> باعث می شود که  باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی  برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.</p>
+
+<p dir="rtl">خبر خوب این است شما هم می توانید توابع خود را بسازید. در مثال بعدی ما یک تابع ساده با دو پارامتر ورودی نوشته ایم که در درون تابع عمل ضرب را بر روی دو متغییر ورودی انجام و نتیجه را به عنوان خروجی بر می گرداند :</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p dir="rtl">بهتر است برای یاد گیری تابع بالا را در کنسول مرورگر اجرا کنید و بعد از آن کدهای زیر را برای دیدن نتیجه خروجی تابع در کنسول در ادامه وارد کنید :</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: عبارت <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> به مرورگر می گوید مقدار درون متغییر <code>result</code> به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا</a> مراجعه کنید.</p>
+</div>
+
+<h3 dir="rtl" id="رویداد_ها">رویداد ها</h3>
+
+<p dir="rtl">بدون رویدادها نمی توان یک وبسایت تعاملی ساخت . این ساختار از کد گوش بزنگ می مانند تا عکس العمل یا اتفاقی در مرورگر پیش آید و بعد کدی تحت پاسخ به آن عکس العمل تعریف شده اجرا می شود. مشهود ترین مثال <a href="/en-US/docs/Web/Events/click">رویداد کلیک</a>  در زمانی که  روی چیزی در مرورگر انجام می شود. برای امتحان کد زیر را در کنسول وارد کنید و در صفحه وبی که در همان  پنجره کنسول وجود دارد کلیک کنید تا نتیجه را ببنید:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p dir="rtl">روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> بدون تعریف یک نام  به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.</p>
+
+<p dir="rtl">به این کد توجه کنید:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p dir="rtl">نتیجه اجرای کد بالا با پایین یکی است:</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p dir="rtl">این بهینه تر است!</p>
+
+<h2 dir="rtl" id="یک_مثال_فوق_العاده_از_وبسایت">یک مثال فوق العاده از وبسایت</h2>
+
+<p dir="rtl">تا الان با مقدمات جاوااسکریپت آشنا شدیم٫ زمان آن رسیده به سراغ  مثال های جالب برویم تا دید مناسبی به شما بدهد که چه چیزهای را می توانید  بعد از یادگیری زبان جاوااسکریپت پیاده سازی کنید.</p>
+
+<p dir="rtl"></p>
+
+<h3 dir="rtl" id="تعویض_کننده_تصویر">تعویض کننده تصویر</h3>
+
+<p dir="rtl">در این بخش شما خواهید دید که در وبسایت مثالی ما چگونه می تواند با یک تکه کد ساده جاوااسکریپت یک تعویض کننده تصویر با قابلیت تعویض عکس بعد از هر کلیک روی عکس ساخت.</p>
+
+<ol dir="rtl">
+ <li> اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .</li>
+ <li>تصویر را در فولدر <code>images</code>  ذخیره کنید.</li>
+ <li>فایل <code>main.js</code>  باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):</li>
+</ol>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+
+<p dir="rtl">تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل <code>index.html</code> را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.</p>
+
+<p dir="rtl">کاری که در کد بالا کردیم ٫ المان <span style="">image </span> را در متغییر <code style="">myImage</code> بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد <code style="">onclick</code><span style=""> به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:</span></p>
+
+<ol dir="rtl">
+ <li>مقدار ویژگی <code>src</code> را در درون متغییر ریختیم.</li>
+ <li>مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با <code>src</code> بود کد درون شرط اجرا می شود .</li>
+ <li> اگر شرط صحیح بود مقدار ویژگی  <code>src</code>  به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}}  نمایش در می آید.</li>
+ <li>اگر شرط صحیح نبود  یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی <code>src</code>  به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .</li>
+</ol>
+
+<h3 id="اضافه_کردن_یک_پیام_خوش_آمد_گویی">اضافه  کردن یک پیام خوش آمد گویی</h3>
+
+<p dir="rtl">در ادامه تعدادی کد اضافه خواهیم کرد که باعث می شود عنوان سایت بعد از دیدن(مرور) سایت توسط کاربر به یک پیام خوش آمدید تغییر کند. این پیام زمانی که کاربر برای بار دوم به سایت مراجعه می کند به او نمایش داده خواهد شد همچنین این اختیار را به کاربر می دهیم تا هر زمان مجددا به صحفه مراجعه کرد پیام خوش آمدگوئی خود را ببنید</p>
+
+<ol>
+ <li dir="rtl"> در فایل <code>index.html</code> را بعد از المان (تگ)   {{htmlelement("script")}} وارد کنید </li>
+ <li>
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li dir="rtl">در فایل <code>main.js</code> در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button  (دکمه) و heading (عنوان)  در متغییر ها ریخته شده .</li>
+ <li>
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li dir="rtl">تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید</li>
+ <li dir="rtl">
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}</pre>
+  تابع <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> یک جعبه دریافت متن نمایش می دهد مانند  <code>alert()</code> با این تفاوت  در <code>prompt()</code> از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API  و صدا زدن تابع <code>localStorage</code> اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما  از حافظه محلی (حافظه محلی مرورگر)  بوسیله تابع <code>setItem()</code>  و اختصاص دادن اسم <code>'name'</code>  به اطلاعاتی که در درون متغیر <code>myName</code>  می باشدرا  ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.</li>
+ <li dir="rtl">کد <code>if ... else</code> را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید</li>
+ <li dir="rtl">
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}</pre>
+  کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای  <code>name</code> در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع <code>setUserName()</code> فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع <code>getItem()</code>  و مقدار دریافت مقدار  بازگشتی از تابع  و دادن این مقدار برای تنظیم (ست کردن) بوسیله <code>innerHTML</code> صورت می گیرد.</li>
+ <li dir="rtl">در پایان رویداد <code>onclick</code>  که برای دکمه تعیین شده است تابع <code>setUserName()</code> فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند</li>
+ <li>
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p dir="rtl">حالا اگر برای اولین بار از صحفه وبسایت دیدار(ویزیت) کنید ٫ از شما می خواهد نام خود را برای دریافت پیام شخصی وارد کنید و شما می توانید هر زمان که تمایل داشته باشید با کلیک کردن روی دکمه درون صحفه این نام را تغییر دهید . این ویژگی به کمک ذخیره سازی محلی در درون مرورگر انجام می شود و بعد از بستن صفحه و مجددا باز کردن آن پیام به شما نمایش داده خواهد شد.</p>
+
+<h2 dir="rtl" id="نتیجه_گیری">نتیجه گیری</h2>
+
+<p dir="rtl">اگر تمام دستورالعمل های مقاله را دنبال کرده باشید باید چیزی مشابه صفحه زیر مشاهده کنید  ( شما می توانید <a href="http://mdn.github.io/beginner-html-site-scripted/">خروجی کار ما را از اینجا مشاهده </a>ببینید )</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p dir="rtl">اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که<a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js"> کد آن روی گیت‌هاب موجود است</a> مقایسه کنید.</p>
+
+<p dir="rtl">در این مقاله فقط مثال ساده ای از عملکرد جاوا اسکریپت آورده شد اگر از این آموزش لذت بردید و می خواهید بصورت دقیق تر و حرفه ای تر به یاد گیری ادامه دهید به راهنمای <a href="/fa/docs/Web/JavaScript/راهنما">جاوا‌اسکریپت</a> ما مراجعه کنید.</p>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
diff --git a/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/index.html b/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/index.html
new file mode 100644
index 0000000000..1292676834
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/index.html
@@ -0,0 +1,126 @@
+---
+title: منتشر کردن وبسایت شما
+slug: Learn/Getting_started_with_the_web/منتشر_کردن_وبسایت_شما
+tags:
+  - آموزش
+  - اف تی پی
+  - انتشار
+  - مقدماتی
+  - وب
+  - وب‌سرور
+  - گوگل اپ انجین
+  - گیت‌هاب
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p dir="rtl">بعد از اتمام کد نویسی و سازماندهی و ساخت وبسایت ٫ زمان انتشار آن بصورت آنلاین فرا می رسید تا مردم بتوانند به وبسایت شما مراجعه کنند.  در این مقاله روش انتشار کدهای که شما نوشته اید بصورت آنلاین را توضیح می دهد.</p>
+</div>
+
+<h2 id="گزینه_ها_چیست_؟">گزینه ها چیست ؟</h2>
+
+<p>انتشار وبسایت یک موضوع (مبحث) ساده ای نیست . زیرا روش های متفاوتی برای این عمل وجود دارد . در این مقاله تمام روش های موجود پوشش داده نشده است بلکه رایج ترین روش های که  یک فرد مبتدی به راحتی از آن استفاده کند توضیح داده شده ست .</p>
+
+<h3 id="گرفتن_فضا_و_دامنه">گرفتن فضا و دامنه</h3>
+
+<p>اگر می خواهید روی تمام فرایند انتشار وبسایتان کنترل داشته باشید باید پول خرج کنید تا موارد زیر را برای انتشار وبسایت بدست آورید:</p>
+
+<ul>
+ <li dir="rtl">فضا (هاست) : اجاره فضا از یک شرکت خدمات دهنده فضا که خدمات <a href="/en-US/Learn/What_is_a_web_server">وب‌‌سرور </a>را می دهند. شما بعد از خرید فایل های وبسایت خود را در فضای خریداری شده بارگذاری می کنید و وب‌سرور وبسایت شما را در اختیار هرکسی که در خواست بازدید داشته باشد می گذارد.</li>
+ <li dir="rtl">نام دامنه :یک آدرس یکتا برای رسیدن به وبسایت شما  است مانند <code>http://www.mozilla.org</code> یا <code>http://www.bbc.co.uk</code> . شما نام دامنه را برای حداقل یک سال یا بیشتر از یک مرکز ثبت دامنه اجاره می کنید.</li>
+</ul>
+
+<p dir="rtl">بسیار از از حرفه ها از این طریق وبسایت خود را بارگذاری می کنند.</p>
+
+<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server's files in two windows, so you can transfer them back and forth:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4>
+
+<ul>
+ <li>We don't promote specific commercial hosting companies or domain name registrars here. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available, or if someone else has already registered it.</li>
+ <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments — contact them and ask!</li>
+ <li>There are a few free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>. Again, you get what you pay for, but they are ideal for your initial experiments. Free services mostly don't require FTP software for uploads either — you can just drag and drop right inside their web interface.</li>
+ <li>Sometimes companies provide both hosting and domains in one package.</li>
+</ul>
+
+<h3 id="استفاده_از_ابزارهای_آنلاین_مثل_گیت‌هاب_و_گوگل_اپ_انجین">استفاده از ابزارهای آنلاین مثل گیت‌هاب و گوگل اپ انجین</h3>
+
+<p>Some tools let you publish your website online:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li>
+</ul>
+
+<p>Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.</p>
+
+<h3 dir="rtl" id="استفاده_از_IDE_مثل_Thimble">استفاده از IDE  مثل Thimble</h3>
+
+<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript and then display the result of that code when rendered as a website — all in one browser tab. Generally speaking these tools are quite easy, great for learning, and free (for basic features), and they host your rendered page at a unique web address. However, the basic features are pretty limited, and the apps usually don't provide hosting space for assets (like images).</p>
+
+<p>Try playing with some of these examples, and see which one you like the best:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="انتشار_در_مقابل_گیت‌هاب">انتشار در مقابل گیت‌هاب</h2>
+
+<p>Now let's take you through how to easily publish your site via GitHub Pages.</p>
+
+<ol>
+ <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li>
+ <li>Next, you need to <a href="https://github.com/new">create a repository</a> for your files to go in.</li>
+ <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. So for example, our friend bobsmith would enter <em>bobsmith.github.io</em>.<br>
+  Also check <em>Initialize this repository with a README</em> and then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>After that, drag and drop the content of your website folder into your repository and then click <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p>
+  </div>
+ </li>
+ <li>
+  <p>Now navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: It may take a few minutes for your website to go live. If it doesn't work immediately, you may have to wait a few minutes and then try again.</p>
+  </div>
+ </li>
+</ol>
+
+<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="مطالعه_بیشتر">مطالعه بیشتر</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="مرتبط_به_مقاله">مرتبط به مقاله</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/index.html b/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/index.html
new file mode 100644
index 0000000000..a4e8158d1c
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/index.html
@@ -0,0 +1,54 @@
+---
+title: نصب نرم افزارهای پایه
+slug: Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary" dir="rtl">
+<p><em>در نصب نرم افزار پایه</em>، نشان می دهیم که برای توسعه وب به چه ابزارهایی نیاز دارید و چگونه آنها را نصب نمایید.</p>
+</div>
+
+<h2 dir="rtl" id="حرفه_ای_ها_از_چه_ابزارهایی_استفاده_می_کنند؟">حرفه ای ها از چه ابزارهایی استفاده می کنند؟</h2>
+
+<ul>
+ <li dir="rtl"><strong>یک کامپیوتر</strong>. شاید خیلی واضح به نظر برسد ولی هستن کسانی که این مقاله را از تلفن همراه خود و یا کامپیوتر کتابخانه می خوانند. برای شروع توسعه وب بصورت جدی، بهتر است که یک کامپیوتر شخصی یا لپ تاپ (ویندوز، مکیناش یا لینوکس) داشته باشید.</li>
+ <li dir="rtl"><strong>یک text editor یا ویرایشگر متن</strong> برای نوشتن کد در آن.این مورد می تواند یک text editor (مثل <a href="http://brackets.io/">Brackets</a>، <a href="https://atom.io/">Atom</a> یا<a href="https://code.visualstudio.com/">Visual Studio Code</a>)باشد  یا یک hybrid editor (مثل <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). ویرایشگرهای Office برای این کار نیستند، چرا که به عناصر مخفی وابسته اند که در موتور رندر مرورگرها اختلال ایجاد می کند.</li>
+ <li dir="rtl"><strong>مرورگرهای وب</strong>, برای تست کدها. در حال حاضر مرورگرهای <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox </a>، <a href="https://www.google.com/chrome/browser/">Chrome</a>، <a href="http://www.opera.com/">Opera</a>، <a href="https://www.apple.com/safari/">Safari</a>، <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> و <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> بیشترین کاربرد را دارند. همچنین باید نحوه نمایش وب سایت خود در موبایل و همه مرورگرهای قدیمی که مخاطبین شما ممکن است از آنها استفاده نمایند (مثل IE 6–8) نیز تست کنید.</li>
+ <li dir="rtl"><strong>یک graphics editor یا ویرایشگر گرافیکی</strong>, مثل <a href="http://www.gimp.org/">GIMP</a>، <a href="http://www.getpaint.net/">Paint.NET</a>، یا <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>، برای ساخت تصاویر صفحات وب سایتتان..</li>
+ <li dir="rtl"><strong>یک version control system یا سیستم مدیریت نسخه</strong>, برای مدیریت فایل های روی سرور، همکاری تیمی بر روی یک پروژه، اشتراک گذاری کد و منابع،  و جلوگیری از مشکل در ویرایش ها. هم اکنون <a href="http://git-scm.com/">Git</a> محبوب ترین ابزار کنترل نسخه است و سرویس نگه داری کد <a href="https://github.com/">GitHub</a>، که بر اساس Git است، نیز بسیار محبوب می باشد .</li>
+ <li dir="rtl"><strong>یک برنامه FTP </strong>،که حساب های کاربری میزبانی های وب قدیمی تر برای مدیریت فایل ها استفاده می شد (برای این منظور <a href="http://git-scm.com/">Git</a> بطور فزاینده ای در حال جایگزین شدن بجای FTP است). برنامه های FTP زیادی وجود دارد مثل  <a href="https://cyberduck.io/">Cyberduck</a>، <a href="http://fetchsoftworks.com/">Fetch</a>، و <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li dir="rtl"><strong>یک سیستم اتوماتیک سازی یا automation system</strong>، مثل <a href="http://gruntjs.com/">Grunt</a> یا<a href="http://gulpjs.com/">Gulp</a>، برای انجام خودکار کارهای تکراری، مثلا minify کردن کد و  اجرای تست ها.</li>
+ <li dir="rtl">قالبها، کتابخانه ها، فریم ورک ها و غیره، برای سریعتر انجام دادن کارها .</li>
+ <li dir="rtl">بعلاوه ابزارهای دیگر!</li>
+</ul>
+
+<h2 dir="rtl" id="در_حال_حاظر_به_چه_ابزارهایی_نیاز_دارید؟">در حال حاظر به چه ابزارهایی نیاز دارید؟</h2>
+
+<p dir="rtl">لیست بالا شاید به نظر ترسناک برسد، ولی خوشبختانه توسعه وب را تقریبا بدون دونستن هیچ چیز در مورد موارد بالا می توان شروع کرد. در این مقاله با حداقل ها شروع خواهیم کرد — یک  text editor و چندتا مرورگر جدید.</p>
+
+<h3 dir="rtl" id="نصب_یک_ویرایشگر_متن">نصب یک ویرایشگر متن</h3>
+
+<p dir="rtl">احتمالا بر روی کامپیوتر خود یک  text editor خیلی ساده دارید. بطور پیش فرض <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> در ویندوز و <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> در مکیناش هستند. در توزیع های مختلف لینوکس، اوضاع متفاوت است; مثلا در ابونتو(Ubuntu) ، <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> به صورت پیش فرض وجود دارد.</p>
+
+<p dir="rtl">برای توسعه وب می توان چیزی بهتر از Notepad یاTextEdit داشت. توصیه ما این است که با <a href="http://brackets.io">Brackets</a> شروع کنید، که ویژگی هایlive previews و code hints را ارائه می کند.</p>
+
+<h3 dir="rtl" id="نصب_مرورگرهای_جدید_وب">نصب مرورگرهای جدید وب</h3>
+
+<p dir="rtl">در حال حاضر، ما فقط دوتا از مرورگرهای وب را برای تست کدهایمان نصب خواهیم کرد. در لیست زیر با توجه به سیستم عامل خود، روی لینک های مرورگر مورد نظر خود کلیلک کنید تا آن را نصب کنید:</p>
+
+<ul>
+ <li dir="rtl">لینوکس: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> , <a href="https://www.google.com/chrome/browser/">Chrome</a> , <a href="http://www.opera.com/">Opera</a> .</li>
+ <li dir="rtl">ویندوز: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> ( Edge بصورت پیش فرض در ویندوز 10 وجود دارد،اگر که ویندوز 8 و بعد از آن ،این مرورگر را دارید، می توانید  IE 10 یا بیشتر را هم نصب کنید; در غیر اینصورت باید از مرورگرهای جایگزین استفاده کنید)</li>
+ <li dir="rtl">مکینتاش: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> ( Safari مرورگر پیش فرض در iOS  و OS X  می باشد)</li>
+</ul>
+
+<p dir="rtl">قبل از دادمه، باید حداقل دوتا از این مرورگرها را نصب کرده و برای تست آماده شده باشند.</p>
+
+<h3 dir="rtl" id="نصب_یک_وب_سرور_محلی">نصب یک وب سرور محلی</h3>
+
+<p>بعضی از مثال ها برای اینکه بتوانند به خوبی کار کنند باید از طریق وب سرور اجرا شوند. در قسمت <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">چگونه یک وب سرور محلی برای تست نصب کنیم؟</a> نحوه انجام این کار را فرا خواهید گرفت.</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/index.html b/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/index.html
new file mode 100644
index 0000000000..3f68570e18
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/index.html
@@ -0,0 +1,101 @@
+---
+title: وب سایت شما چه شکلی است؟
+slug: Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟
+tags:
+  - آموزش
+  - طراحی
+  - طرح
+  - فونت
+  - محتوا
+  - مقدماتی
+  - منابع
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary" dir="rtl">
+<p>وب سایت شما چه شکلی است؟ در مورد کار برنامه ریزی و طراحی وب سایتتان <em>قبل از</em> نوشتن کدهای آن بحث می کنند. که شامل این موارد می شود، "چه اطلاعاتی وب سایت من نیاز دارد؟"  "چه فونت ها و رنگ هایی را می خواهم؟" "سایت من چه کار قرار هست انجام دهد؟"</p>
+</div>
+
+<h2 dir="rtl" id="قبل_از_شروع_کار_برنامه_ریزی">قبل از شروع کار: برنامه ریزی</h2>
+
+<p dir="rtl">قبل از انجام هر کاری ایده نیاز دارید. وب سایتتان چه کاری باید انجام دهد؟ یک وب سایت عموماً هر کاری می تواند انجام دهد، ولی برای شروع باید یک چیز ساده را انتخاب کنید. در اینجا شروع می کنیم یک صفحه ساده وب با یک سربرگ، یک تصویر، و چندتا پاراگراف بسازیم.</p>
+
+<p dir="rtl">برای شروع لازم هست که به سوالات زیر پاسخ دهید:</p>
+
+<ol>
+ <li dir="rtl"><strong>وب سایتتان در مورد چیست؟ </strong>حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟</li>
+ <li dir="rtl"><strong>در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ </strong>یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.</li>
+ <li dir="rtl">به صورت خیلی کلی، <strong>وب سایت شما چه شکلی است</strong>. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.</li>
+</ol>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)</a>  ببینید.</p>
+</div>
+
+<h2 dir="rtl" id="طراحی_خود_را_بکشید">طراحی خود را بکشید</h2>
+
+<p dir="rtl">قدم بعدی، برداشتن قلم و کاغذ و کشیدن یک چیز تقریبی است که قرار هست وب سایت شما آن شکلی باشد. برای نخستین صفحه وب ساده یتان، چیز زیادی برای کشیدن وجود ندارد، ولی برای عادت کردن به این کار باید از همین الان آن را انجام دهید. واقعاً کمک کننده است --توجه کنید که قرار نیست کمال المک باشید!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: حتی در وب سایت های پیچیده که داراری تیم های طراحی جداگانه هستند، کار با کشیدن طرح های دستی روی کاغذ شروع می شود و بعداً  برای طرح نهایی از یک ویرایشگر گرافیکی یا تکنولوژی های وب استفاده می کنند.</p>
+
+<p dir="rtl">تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح {{Glossary("UX", "user-experience")}} (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. <span id="result_box" lang="fa"><span>طراحان UX</span> <span>نقش</span> <span>تا حدودی</span> <span>انتزاعی تر</span></span>ی دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.</p>
+</div>
+
+<h2 dir="rtl" id="منابع_خود_را_تعیین_کنید">منابع خود را تعیین کنید</h2>
+
+<p dir="rtl">در این لحظه خوب است محتوایی که قرار است بر روی صفحه وب شما ظاهر شود را کنار یکدیگر قرار دهیم.</p>
+
+<h3 dir="rtl" id="متن">متن</h3>
+
+<p dir="rtl"><span id="result_box" lang="fa"><span>باز هم  باید</span> <span>پاراگراف ها</span> <span>و عنوان خود را</span> <span>از</span> <span>قبل داشته باشید</span></span>. پس آن را در نظر بگیرید.</p>
+
+<h3 dir="rtl" id="قالب_رنگ">قالب رنگ</h3>
+
+<p dir="rtl">برای انتخاب رنگ، به قسمت  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">انتخاب کننده رنگ(the Color Picker) </a>رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه <code>#660066</code> را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 dir="rtl" id="تصاویر">تصاویر</h3>
+
+<p dir="rtl">برای انتخاب یک تصویر، به <a href="https://www.google.com/imghp?gws_rd=ssl">تصاویر گوگل (Google Images)</a> رفته و چیز مناسبی را جستجو کنید.</p>
+
+<ol>
+ <li dir="rtl">وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.</li>
+ <li dir="rtl">کلید <em>View image</em> را بزنید.</li>
+ <li dir="rtl">در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و <em>Save Image As...</em> را انتخاب کنید،  و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<p dir="rtl">توجه داشته باشید که اکثر عکس های موجود در سرچ گوگل دارای حق کپی رایت هستند  . برای اینکه تصادفا این قانون نقض نشود شما می توانید از فلتر لایسنس گوگل استفاده کنید .</p>
+
+<p dir="rtl">۱ روی دکمه tools کلیک کنید و  ۲ در منوی انتخاب شده گزینه label for reuse را انتخاب کنید تا تصاویر برای استفاده مجدد در جست و جو ظاهر شوند.</p>
+
+<div class="note">
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 dir="rtl" id="فونت">فونت</h3>
+
+<p dir="rtl">برای انتخاب فونت:</p>
+
+<ol>
+ <li dir="rtl">به <a href="http://www.google.com/fonts">گوگل فونت(Google Fonts)</a> بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.</li>
+ <li dir="rtl">بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.</li>
+ <li dir="rtl">در پنل پایین صفحه بر روی کلید  "* Family Selected"<em> کلیک کنید</em> ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).</li>
+ <li dir="rtl">در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google  را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/fa/learn/html/index.html b/files/fa/learn/html/index.html
new file mode 100644
index 0000000000..701db66e46
--- /dev/null
+++ b/files/fa/learn/html/index.html
@@ -0,0 +1,69 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Intro
+  - Learn
+  - NeedsTranslation
+  - Topic
+  - TopicStub
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary" dir="rtl">برای ساخت وب سایت ها ، شما باید در مورد {{Glossary('HTML')}}-- فن آوری بنیادی مورد استفاده در تعریف ساختار صفحه وب، بدانید.HTML برای تشخیص اینکه آیا محتوای وب شما باید بوسیله یک پاراگراف، فهرست، عنوان، پیوند، عکس، اجرا کننده برنامه های چند رسانه ای، فرم، یا یکی از عناصر بسیار دیگر در دسترس و یا حتی عنصر جدیدی که تعریف می کنید، شناخته شود، به کار می رود.  </p>
+
+<h2 dir="rtl" id="آموزش_مسیر">آموزش مسیر</h2>
+
+<p dir="rtl">در حالت ایده آل شما باید سفر آموزشی تان را با یادگیری HTML آغاز نمایید. با خواندن مقدمه HTML شروع کنید. سپس شما امکان حرکت به سوی آموزش در مورد مباحث پیشرفته ای را دارید چون:</p>
+
+<p dir="rtl"><a href="/en-US/docs/Web/API">HTML5 APIs</a></p>
+
+<p dir="rtl"><a href="/en-US/docs/Learn/CSS">CSS</a> و چگونگی بکار گیری آن برای سبک HTML (برای مثال، سایز متن و فونت استفاده شده را عوض کنید، مرزها یا سایه ها را اضافه کنید، صفحه تان را با چند ستون عرضه کنید، کارتون و سایر جلوه ای بصری را بیفزایید.) </p>
+
+<p dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript  </a>و چگونگی بکارگیری آن برای افزودن عملکردی پویا به صفحات وب( مثلا، موقعیت خود را یافته و آنرا روی نقشه ترسیم نمایید، موجب ظاهرشدن/مخفی شدن عناصر UI وقتی که دکمه ای را می زنید، شوید، اطلاعات کاربر را بصورت محلی روی کامپیوترهایشان ذخیره کنید، و خیلی خیلی بیشتر.)</p>
+
+<p dir="rtl">قبل از آغاز این بحث، شما باید دارای یک آشنایی حداقلی با استفاده رایانه ها و استفاده با بردباری از وب باشید.(بدین معنی که: فقط با نگاه کردن به آن، مطلب را بگیرید). شما باید یک محیط کار منظم دقیق در <strong><em>نصب نرم افزار اولیه، </em></strong>داشته و چگونگی ایجاد و مدیریت فایل ها مشابه آنچه دقیقا در <strong><em>سروکار با فایل ها</em></strong> بود،- هر دو بخش <strong><em>آغاز کار با وب</em></strong> کامل مبتدیان، داشته باشید.</p>
+
+<p dir="rtl">     فعایت از طریق آ<strong><em>غاز کار با وب </em></strong>پیش از تلاش برای این مبحث، توصیه می شود، با این حال، ایت کنر مطلقا ضروری نمی باشد؛ بیشتر از آنچه در لوای <strong><em>مبانی HTML </em></strong>و همچنین در <strong><em>مقدمه HTML </em></strong>داشتیم، ولیکن با جزئیات بیشتری پوشش داده می شود.</p>
+
+<p dir="rtl"> </p>
+
+<h2 dir="rtl" id="واحد_ها">واحد ها</h2>
+
+<p dir="rtl">این مبحث، واحدهای زیر، در نظمی پیشنهادی برای کار کردن از طریق آنها، در بر می گیرد. طبق تعریف شما یاید با مورد اول آغاز نمایید:</p>
+
+<h4 dir="rtl" id="مقدمه_ای_بر_HTML"><a href="/fa/docs/">مقدمه ای بر HTML </a></h4>
+
+<p dir="rtl"> </p>
+
+<p dir="rtl"> </p>
+
+<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="Solving_common_HTML_problems">Solving common HTML problems</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="See_also">See also</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/fa/learn/html/introduction_to_html/getting_started/index.html b/files/fa/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..33592c6f35
--- /dev/null
+++ b/files/fa/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,668 @@
+---
+title: شروع کار با html
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<div dir="rtl">{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary" dir="rtl">در این مقاله به بررسی اصول زبان علامت گذاری HTML می پردازیم. برای انجام این کار، ابتدا عناصر(المان ها) و خصوصیت ها و دیگر اصطلاحات را تعریف می کنیم و سپس ارتباط آنها با زبان HTML را مورد بررسی قرار می دهیم. <br>
+ همچنین به شما نشان خواهیم داد که یک عنصر اچ تی ام ال چه ساختاری دارد و چگونه تعریف می شود. <br>
+ در ادامه، به تمرین کدهای HTML می پردازیم تا شما با جذابیت های آن آشنا شوید. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">پیش نیازها:</th>
+   <td>داشتن دانش ابتدایی رایانه,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">دانش نصب نرم افزارها</a>,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">دانش ابتدایی در مورد کار کردن با فایل ها</a></td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">اهداف:</th>
+   <td dir="rtl">آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="HTML_چیست؟">HTML چیست؟</h2>
+
+<p dir="rtl">{{glossary("HTML")}} (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;<br>
+ بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.<br>
+ اچ تی ام ال حاوی یک سری {{glossary("Element", "عنصر")}} است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. <br>
+ بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن {{glossary("Tag", "تگ")}} گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.<br>
+ به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:</p>
+
+<pre>My cat is very grumpy
+</pre>
+
+<p dir="rtl">اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد({{htmlelement("p")}}):</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<div class="note" dir="rtl">
+<p><strong>نکته</strong>: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به  عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. <br>
+ به عنوان مثال,یک عنصر {{htmlelement("title")}} می تواند به صورت های<br>
+  <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code><br>
+ نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.<br>
+ اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.</p>
+</div>
+
+<h2 dir="rtl" id="تشریح_یک_عنصر_HTML">تشریح یک عنصر HTML</h2>
+
+<p dir="rtl">اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p dir="rtl">بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:</p>
+
+<ol dir="rtl">
+ <li><strong>تگ باز شده: </strong>این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های &lt; و &gt;) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. </li>
+ <li><strong>تگ بسته شده:</strong> این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.</li>
+ <li><strong>محتوا:</strong>این همان محتوای عنصر است,که در این مورد تنها یک متن است.</li>
+ <li><strong>عنصر:</strong> به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.</li>
+</ol>
+
+<h3 dir="rtl" id="آموزش_عملی_ایجاد_اولین_عنصر">آموزش عملی: ایجاد اولین عنصر </h3>
+
+<p dir="rtl">خط زیر را در بخش <em>Input</em> ویرایش کنید. برای انجام این کار می توانید آن را بین تگ های &lt;em&gt; و &lt;em/&gt; قرار دهید ( برای باز کردن عنصر, کافیست تگ &lt;em&gt; را قبل از آن قرار دهید. و برای برای بستن آن کافیست تگ &lt;em/&gt; را پس از آن قرار دهید). این کار باعث می شود که متن مورد نظر ایتالیک شود! سپس شما قادر خواهید بود تا به صورت زنده تغییرات را در بخش <em>Output</em> مشاهده کنید. </p>
+
+<p dir="rtl">در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی <em>Reset</em> آن را به حالت اولیه برگردانید. </p>
+
+<div class="hidden">
+<h6 dir="rtl" id="کد_قابل_اجرا">کد قابل اجرا</h6>
+
+<pre class="brush: html" dir="rtl">&lt;h2&gt;خروجی زنده&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;کد قابل ویرایش&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;p class="a11y-label"&gt;دکمه ی Esc را فشار دهید تا از ناحیه ی کد خارج شویم.&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  This is my text.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<p> </p>
+
+<pre class="brush: css">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Nesting_elements">Nesting elements</h3>
+
+<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>You do however need to make sure that your elements are properly nested: in the example above, we opened the <code>p</code> element first, then the <code>strong</code> element, therefore we have to close the <code>strong</code> element first, then the <code>p</code>. The following is incorrect:</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>The elements have to open and close correctly, so they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, and you may well get unexpected results. So don't do it!</p>
+
+<h3 id="Block_versus_inline_elements">Block versus inline elements</h3>
+
+<p>There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.</p>
+
+<ul>
+ <li>Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li>
+ <li>Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Take the following example:</p>
+
+<pre class="brush: html">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
+
+&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML5 redefined the element categories in HTML5: see <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than the ones that went before, they are a lot more complicated to understand than "block" and "inline", so we will stick with these throughout this topic.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The terms "block" and "inline", as used in this topic, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> with the same names. While they correlate by default, changing the CSS display type doesn't change the category of the element and doesn't affect which elements it can contain and which elements it can be contained in. One of the reasons why HTML5 dropped these terms was to prevent this rather common confusion.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can find useful reference pages that include lists of block and inline elements — see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
+</div>
+
+<h3 id="Empty_elements">Empty elements</h3>
+
+<p>Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the {{htmlelement("img")}} element embeds an image file onto a page in the position it is included in:</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>This would output the following on your page:</p>
+
+<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Empty elements are also sometimes called <em>void elements</em>.</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Elements can also have attributes, which look like this:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <code>class</code> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p>
+
+<p>An attribute should have:</p>
+
+<ol>
+ <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li>
+ <li>The attribute name, followed by an equals sign.</li>
+ <li>An attribute value, with opening and closing quote marks wrapped around it.</li>
+</ol>
+
+<h3 id="Active_learning_Adding_attributes_to_an_element">Active learning: Adding attributes to an element</h3>
+
+<p>Another example of an element is {{htmlelement("a")}} — this stands for "anchor" and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:</p>
+
+<ul>
+ <li><code>href</code>: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li>
+ <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li>
+</ul>
+
+<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website. First, add the <code>&lt;a&gt;</code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  This is my text.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">h2 </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'&lt;em&gt;This is my text.&lt;/em&gt;'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// stop tab key tabbing out of textarea and</span>
+<span class="comment token">// make it write a tab at the caret position instead</span>
+
+textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
+  <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
+  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>
+
+textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
+  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p> </p>
+</div>
+
+<h6 id="Playable_code3">Playable code3</h6>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3>
+
+<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p>
+
+<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p>
+
+<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2>
+
+<p>In HTML, the characters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> and <code>&amp;</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p>
+
+<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&amp;), and ended by a semicolon (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Literal character</th>
+   <th scope="col">Character reference equivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p>
+
+<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code>&lt;p&gt;</code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p>
+
+<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
+</div>
+
+<h2 id="HTML_comments">HTML comments</h2>
+
+<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p>
+
+<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code>&lt;!--</code> and <code>--&gt;</code>, for example:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p>
+
+<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p>
+
+<div class="note">
+<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<div> </div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/fa/learn/html/introduction_to_html/index.html b/files/fa/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..0eb65805a3
--- /dev/null
+++ b/files/fa/learn/html/introduction_to_html/index.html
@@ -0,0 +1,21 @@
+---
+title: Introduction to HTML
+slug: Learn/HTML/Introduction_to_HTML
+tags:
+  - آشنایی با HTML
+  - ساختار صفحات وب
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">در قلب خود، HTML یک زبان نسبتا ساده است که از عناصر تشکیل شده است، که می تواند به قطعات متن اعمال شود تا معنای متفاوت آنها را در یک متن بسط دهد. (به عنوان مثال: آیا یک پاراگراف؟ آیا یک لیست گلوله است؟ آیا آن بخشی از یک جدول است؟)، یک متن را به بخش های منطقی ترسیم می کند و محتویات مانند تصاویر و ویدیوها را در یک صفحه قرار می دهد. این واحد دو دسته اول را معرفی خواهد کرد؛ و مفاهیم اساسی و ترکیب آن را، برای درک HTML نشان می دهد.</p>
+
+<h2 class="summary" id="پیش_نیازها">پیش نیازها</h2>
+
+<p>داشتن حداقل آگاهی عمومی در مورد استفاده از رایانه ها و استفاده از وب و درک نحوه ایجاد و مدیریت فایل ها. هر دو به عنوان بخشی از این واحد آموزش داده میشوند.</p>
+
+<h2 id="راهنماها">راهنماها</h2>
+
+<p>این واحد شامل مقالات زیر است که همه نظریه اساسی HTML را به شما آموزش می دهد و فرصتی برای آزمایش برخی مهارت ها را فراهم می کند.</p>
+
+<p>آموزش HTML از ابتدا</p>
diff --git a/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..10aebc5351
--- /dev/null
+++ b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,284 @@
+---
+title: What’s in the head? Metadata in HTML
+slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">The {{glossary("Head", "head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.) In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_the_HTML_head">What is the HTML head?</h2>
+
+<p>Let's revisit the simple <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The HTML head is the contents of the {{htmlelement("head")}} element — unlike the contents of the {{htmlelement("body")}} element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain {{glossary("Metadata", "metadata")}} about the document. In the above example, the head is quite small:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;My test page&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>In larger pages however, the head can get quite full. Try going to some of your favorite websites and use the <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.</p>
+
+<h2 id="Adding_a_title">Adding a title</h2>
+
+<p>We've already seen the {{htmlelement("title")}} element in action — this can be used to add a title to the document. This however can get confused with the {{htmlelement("h1")}} element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!</p>
+
+<ul>
+ <li>The {{htmlelement("h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)</li>
+ <li>The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)</li>
+</ul>
+
+<h3 id="Active_learning_Inspecting_a_simple_example">Active learning: Inspecting a simple example</h3>
+
+<ol>
+ <li>To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>. To do this, either
+
+  <ol>
+   <li>Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.</li>
+   <li>Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's <em>File &gt; Save Page As...</em> menu and choose a sensible place to save the file.</li>
+  </ol>
+ </li>
+ <li>Now open the file in your browser. You should see something like this:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">It should now be completely obvious where the <code>&lt;h1&gt;</code> content appears, and where the <code>&lt;title&gt;</code> content appears!</p>
+ </li>
+ <li>You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.</li>
+</ol>
+
+<p>The <code>&lt;title&gt;</code> element contents are also used in other ways. For example, if you try bookmarking the page (<em>Bookmarks &gt; Bookmark This Page</em> or the star icon in the URL bar in Firefox), you will see the <code>&lt;title&gt;</code> contents filled in as the suggested bookmark name.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The <code>&lt;title&gt;</code> contents are also used in search results, as you'll see below.</p>
+
+<h2 id="Metadata_the_&lt;meta>_element">Metadata: the &lt;meta&gt; element</h2>
+
+<p>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <code>&lt;meta&gt;</code> elements that can be included in your page's &lt;head&gt;, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.</p>
+
+<h3 id="Specifying_your_document's_character_encoding">Specifying your document's character encoding</h3>
+
+<p>In the example we saw above, this line was included:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>This element simply specifies the document's character encoding — the character set that the document is permitted to use. <code>utf-8</code> is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">If you set your character encoding to <code>ISO-8859-1</code>, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Some browsers (e.g. Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. You should still set an encoding of <code>utf-8</code> on your page anyway, to avoid any potential problems in other browsers.</p>
+</div>
+
+<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3>
+
+<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code>&lt;title&gt;</code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Adding_an_author_and_description">Adding an author and description</h3>
+
+<p>Many <code>&lt;meta&gt;</code> elements include <code>name</code> and <code>content</code> attributes:</p>
+
+<ul>
+ <li><code>name</code> specifies the type of meta element it is; what type of information it contains.</li>
+ <li><code>content</code> specifies the actual meta content.</li>
+</ul>
+
+<p>Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:</p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="The MDN Web Docs Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications."&gt;</pre>
+
+<p>Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.</p>
+
+<p>Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p>
+
+<h3 id="Active_learning_The_description's_use_in_search_engines">Active learning: The description's use in search engines</h3>
+
+<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p>
+
+<ol>
+ <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li>
+ <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li>
+ <li>Find the description meta tag. It will look something like this (although it may change over time):
+  <pre class="brush: html">&lt;meta name="description" content="The MDN Web Docs site
+  provides information about Open Web technologies
+  including HTML, CSS, and APIs for both Web sites and
+  progressive web apps."&gt;</pre>
+ </li>
+ <li>Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <code>&lt;meta&gt;</code> and <code>&lt;title&gt;</code> element content used in the search result — definitely worth having!
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Many <code>&lt;meta&gt;</code> features just aren't used any more. For example, the keyword <code>&lt;meta&gt;</code> element (<code>&lt;meta name="keywords" content="fill, in, your, keywords, here"&gt;</code>) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.</p>
+</div>
+
+<h3 id="Other_types_of_metadata">Other types of metadata</h3>
+
+<p>As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.</p>
+
+<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:</p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>One effect of this is that when you link to MDN Web Docs on facebook, the link appears along with an image and description: a richer experience for users.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:</p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Adding_custom_icons_to_your_site">Adding custom icons to your site</h2>
+
+<p>To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts. The most commonly used of these is the <strong>favicon</strong> (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).</p>
+
+<p>The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.</p>
+
+<p>A favicon can be added to your page by:</p>
+
+<ol>
+ <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li>
+ <li>Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it:
+  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Here is an example of a favicon in a bookmarks panel:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.</p>
+
+<p>Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</p>
+</div>
+
+<h2 id="Applying_CSS_and_JavaScript_to_HTML">Applying CSS and JavaScript to HTML</h2>
+
+<p>Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.</p>
+
+<ul>
+ <li>
+  <p>The {{htmlelement("link")}} element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:</p>
+
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>The {{htmlelement("script")}} element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing <code>&lt;/body&gt;</code> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)</p>
+
+  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Note</strong>: The <code>&lt;script&gt;</code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code>&lt;script&gt;</code> element.</p>
+ </li>
+</ul>
+
+<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3>
+
+<ol>
+ <li>To start this active learning, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li>
+ <li>Open the HTML file in both your browser, and your text editor.</li>
+ <li>By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.</li>
+</ol>
+
+<p>If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li>
+ <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> example page.</p>
+</div>
+
+<h2 id="درج_کردن_زبان_اصلی_سند">درج کردن زبان اصلی سند</h2>
+
+<p>در نهایت، لازم به ذکر است که شما میتوانید (و واقعا میبایست) زبان صفحۀ خود را تنظیم کنید. این کار را میتوان با اضافه کردن <a href="/en-US/docs/Web/HTML/Global_attributes/lang">صفت lang</a> به تگ باز HTML (همانطور که در <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> دیده میشود و در زیر نشان داده شده) انجام داد.</p>
+
+<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p>
+
+<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
+
+<p>This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)</p>
+
+<p>You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="ja"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/fa/learn/index.html b/files/fa/learn/index.html
new file mode 100644
index 0000000000..8f8780fa13
--- /dev/null
+++ b/files/fa/learn/index.html
@@ -0,0 +1,155 @@
+---
+title: آموزش وب
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - آموزش
+  - ترجمه
+  - رایگان
+  - طبقه بندی
+  - مقدماتی
+  - وب
+translation_of: Learn
+---
+<dl>
+ <dt>{{LearnSidebar}}</dt>
+</dl>
+
+<div class="summary" dir="rtl">
+<p>به منطقۀ آموزشی MDN خوش آمدید. با کمک این مجموعه مقالات می‌توانید توسعۀ وب را از سطوح بسیار مقدماتی و به همراه هر آنچه که برای کدنویسی یک وب سایت ساده نیاز دارید یاد بگیرید.</p>
+</div>
+
+<p dir="rtl">هدف MDN تبدیل شما از یک "مبتدی" به یک "متخصص" نیست ولی قطعاً شما را از یک "مبتدی" به یک سطح "قابل قبول" می‌رساند. بعد از آن باید بتوانید راه خود را تعیین کنید، آموزش‌های <a href="https://developer.mozilla.org/en-US/">the rest of MDN</a> و دیگر منابعی که سطح متوسط به پیشرفته در نظر گرفته شده است را دنبال کنید که دانش قبلی زیادی را طلب می‌کند.</p>
+
+<p dir="rtl">اگر کاملاً مبتدی هستید، توسعۀ وب می‌تواند چالش خوبی باشد — ما دستتان را خواهیم گرفت و آن‌قدر اطلاعات در اختیارتان قرار می‌دهیم تا به احساس راحتی برسید و تمامی مباحث را به خوبی یاد بگیرید. باید حس کنید که در خانه هستید، خواه یک دانشجو باشید که می‌خواهد توسعۀ وب یاد بگیرد (به صورت شخصی یا قسمتی از یک کلاس)، معلمی که برای کلاس‌های خود مطالب تهیه می‌کند، یا به عنوان سرگرمی، یا کسی که فقط می‌خواهد بیشتر در مورد نحوۀ کار تکنولوژی‌های تحت وب یاد بگیرد.</p>
+
+<div class="warning">
+<p dir="rtl"><strong>مهم</strong>: مطالب آموزشی تهیه شده در اینجا به صورت منظم در حال اضافه شدن است. اگر در مورد موضوعاتی که دوست دارید پوشش داده شوند یا دیده نشده‌اند سؤالی دارید، برای اطلاعات در مورد نحوۀ تماس به قسمت {{anch("Contact us")}} در زیر مراجعه نمایید.</p>
+</div>
+
+<h2 dir="rtl" id="از_کجا_شروع_کنیم">از کجا شروع کنیم</h2>
+
+<p dir="rtl"></p>
+
+<ul class="card-grid" dir="rtl">
+ <li><span>کاملاً مبتدی:</span>
+
+  <p>اگر شخصی کاملاً مبتدی در زمینۀ توسعۀ وب هستید، توصیۀ ما این است که کار را از قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">شروع کار با وب</a> آغاز کنید که مقدمه‌‌ای عملی برای توسعۀ وب است.</p>
+ </li>
+ <li><span>سؤالات خاص:</span>
+  <p>اگر در مورد توسعۀ وب سؤالات خاصی دارید، قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions">سؤالات متداول</a> ما می‌تواند کمکتان کند.</p>
+ </li>
+ <li><span>فراتر از مقدماتی:</span>
+  <p>اگر کمی دانش قبلی دارید، قدم بعدی یادگیری جزئیات {{glossary("HTML")}} و {{glossary("CSS")}} است: می‌توانید با قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">مقدمه‌ای بر HTML</a> شروع کنید و بعد از آن به سراغ قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمه‌ای بر CSS</a> بروید.</p>
+ </li>
+ <li><span>رفتن به‌سوی اسکریپت نویسی</span>
+  <p>اگر با HTML و CSS احساس راحتی می‌کنید، و یا به کدنویسی بسیار علاقه دارید، شاید بخواهید به سراغ {{glossary("JavaScript")}} یا توسعۀ سمت سرور بروید. کار را با قسمت‌های <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> قدم‌های اول در جاوا اسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">قدم‌های اول در سمت سرور</a> شروع کنید.</p>
+ </li>
+</ul>
+
+<div class="note" dir="rtl">
+<p><strong>توجه:</strong> در <a href="https://developer.mozilla.org/en-US/docs/Glossary">واژه‌نامه</a> می‌توانید تعاریف تمامی اصطلاحات را پیدا نمایید.</p>
+</div>
+
+<p dir="rtl">{{LearnBox({"title":"مدخل تصادفی واژه نامه"})}}</p>
+
+<h2 dir="rtl" id="مطالب_ارائه_شده">مطالب ارائه شده</h2>
+
+<p dir="rtl">در زیر می‌توانید فهرست موضوعاتی که در MDN وجود دارد را ببینید.</p>
+
+<dl>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">شروع کار با وب</a></dt>
+ <dd dir="rtl">برای کسانی که در توسعه وب کاملاً مبتدی هستند، مقدمه‌ای را رائه می‌دهد.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — ساختار وب</a></dt>
+ <dd dir="rtl">HTML زبانی است که برای ساخت قسمت‌های مختلف محتوا و تعریف آنچه که معنی و هدف آنهاست، از آن استفاده می‌کنیم. در این قسمت HTML را با جزئیات کامل آموزش می‌دهیم.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — ظاهر وب</a></dt>
+ <dd dir="rtl">CSS زبانی است که از آن برای استایل و چیدمانِ محتوای وب و همچنین اضافه کردن حرکات، مثل پویانمایی‌ها استفاده می‌کنیم. این قسمت CSS را با جزئیات تحت پوشش قرار می‌دهد.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — اسکریپت نویسی پویا سمت کاربر</a></dt>
+ <dd dir="rtl">جاوا اسکریپت یک زبان اسکریپتی است که برای اضافه کردن کنش‌های تعاملی به صفحات وب مورد استفاده قرار می‌گیرد. این قسمت به تمام نکاتی که برای نوشتن و خواندنِ راحت جاوا اسکریپت لازم است می‌پردازد.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">دسترسی‌پذیری — وب را برای همه قابل استفاده کنید</a></dt>
+ <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disabilities, device, locale, or other differentiating factors relevant to them. This topic gives you all you need to know.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">ابزارها و تست ها</a></dt>
+ <dd dir="rtl">این قسمت ابزارهایی را تحت پوشش قرار می‌دهد که توسعه‌دهندگان را در کارشان کمک می‌کند، مانند ابزارهای تست در مرورگرهای مختلف.</dd>
+ <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">برنامه نویسی سمت سرور وب سایت</a></dt>
+ <dd>Even if you are concentrating on client-side web development, it is still useful to know about how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials detailing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd>
+</dl>
+
+<h2 dir="rtl" id="دریافت_کد_مثال‌ها">دریافت کد مثال‌ها</h2>
+
+<p dir="rtl">کد مثال‌هایی که در آموزش‌ها با آن مواجه هستید، همگی<a href="https://github.com/mdn/learning-area/"> در گیت‌هاب موجود هستند</a>. اگر می‌خواهید همۀ آنها را بر روی کامپیوتر خود داشته باشید، راحت‌ترین روش بدین صورت است:</p>
+
+<ol>
+ <li dir="rtl"><a href="http://git-scm.com/downloads">گیت </a>را بر روی دستگاه خود نصب کنید. این نرم افزار، یک سیستم کنترل نسخه است که گیت‌هاب بر اساس آن کار می‌کند.</li>
+ <li dir="rtl"><a href="https://github.com/join">یک حساب گیت‌هاب برای خود بسازید</a>. این کار بسیار ساده و آسان است.</li>
+ <li dir="rtl">بعد از ساخت حساب، با کمک نام کاربری و رمز عبور خود به <a href="https://github.com">github.com</a> وارد شوید.</li>
+ <li dir="rtl">در کامپیوتر خود <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> (ویندوز) یا terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">لینوکس</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">مکینتاش</a>) را باز کنید.</li>
+ <li dir="rtl">برای کپی کردن مخزن آموزش‌ها به پوشه‌ای با نام learning-area به مکانی که command prompt/terminal برای استفاده دستورات خود باز کرده‌اند، دستور زیر را بنویسید:
+  <pre class="brush: bash line-numbers  language-bash"><code class="language-bash">git clone https://github.com/mdn/learning-area</code></pre>
+ </li>
+ <li dir="rtl">حالا می‌توانید به پوشۀ مورد نظر رفته و فایل‌های جدید را در آن ببینید. (هم می‌توانید از finder/file explorer  استفاده کنید و هم از دستور <a href="https://en.wikipedia.org/wiki/Cd_%28command%29">cd command</a>).</li>
+</ol>
+
+<p dir="rtl">هر زمان که لازم باشد، می‌توانید با انجام مراحل زیر تغییرات صورت گرفته در مخزن گیت‌هاب را در پوشۀ <code>learning-area</code> اعمال نمایید:</p>
+
+<ol>
+ <li dir="rtl">در command prompt/terminal خود، با کمک <code>cd</code> به پوشه <code>learning-area</code> بروید. مثلاً اگر در پوشۀ بالایی آن هستید:
+
+  <pre class="brush: bash line-numbers  language-bash"><code class="language-bash">cd learning-area</code></pre>
+ </li>
+ <li dir="rtl">مخزن را با کمک دستور زیر بروزرسانی کنید:
+  <pre class="brush: bash line-numbers  language-bash"><code class="language-bash">git pull</code></pre>
+ </li>
+</ol>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<h2 dir="rtl" id="ارتباط_با_ما">ارتباط با ما</h2>
+
+<p dir="rtl">اگر در مورد هر موضوعی خواستید با ما در ارتباط باشید، بهترین روش ارسال یک پیام از طریق <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">لیستهای ایمیل</a> یا<a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC"> کانال های IRC </a>برای ماست. بسیار مشتاق شنیدن در مورد چیزهای اشتباه و یا کمبودهای موجود در سایت، درخواست موضوعات جدید آموزشی، درخواست کمک در مورد موضوعاتی که درک نمی کنید، یا هر چیز دیگری هستیم.</p>
+
+<p dir="rtl">اگر هم که علاقه مند به کمک در توسعه/بهبود محتوا هستید، نگاهی به قسمت <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">چطور می توانید کمک کنید</a> بیاندازید، و در ارتباط با شید! بیش از هرچیز از مصاحبت با شما خوشحالیم، خواه  یک شخص یادگیرنده باشید، یا معلم، یا توسعه دهنده با تجربه وب، یا کسی که می خواهد به بهبود تجربه آموزشی کمک کند.</p>
+
+<h2 dir="rtl" id="همچنین_ببینید">همچنین ببینید</h2>
+
+<dl>
+ <dt dir="rtl"><a href="https://www.mozilla.org/en-US/newsletter/developer/">خبرنامه توسعه موزیلا</a></dt>
+ <dd dir="rtl">خبرنامه مخصوص توسعه دهندگان وب، که منبع عالی برای تمامی سطوح توسعه است.</dd>
+</dl>
+
+<dl>
+ <dt dir="rtl"><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd dir="rtl">سایتی تعاملی فوق العاده برای آموزش زبان های برنامه نویسی از ابتدا.</dd>
+ <dt dir="rtl"><a href="https://code.org/">Code.org</a></dt>
+ <dd dir="rtl">کدنویسی مقدماتی به صورت تئوری و عملی که بیشتر برای کودکان و افراد کاملا مبتدی مناسب است.</dd>
+ <dt dir="rtl"><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
+ <dd dir="rtl">سایتی تعاملی حاوی آموزش ها و پروژه های یادگیری توسعه وب.</dd>
+</dl>
+
+<dl>
+ <dt dir="rtl"><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
+ <dd dir="rtl">فریم ورکی برای سطح اولیه یادگیری وب و مهارت های قرن 21، که امکان دسترسی به فعالیت های آموزشی طبقه بندی شده را فراهم می کند.</dd>
+ <dt dir="rtl"><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd dir="rtl">سری فعالیت های یاددهی برای یادگیری (و آموزش) که توسط بنیاد موزیلا ایجاد شده است، و همه چیز را آموزش می دهد، از دانش اولیه وب گرفته تا امنیت جاوااسکریپت و هک Minecraft.</dd>
+</dl>
+</div>
+</article>
+
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"></div>
+
+<div style="height: 107px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div>
+</div>
+</div>
+</div>
+</div>
+</article>
diff --git a/files/fa/learn/javascript/index.html b/files/fa/learn/javascript/index.html
new file mode 100644
index 0000000000..2e6649a258
--- /dev/null
+++ b/files/fa/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/fa/learn/javascript/objects/index.html b/files/fa/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..0e611c58c2
--- /dev/null
+++ b/files/fa/learn/javascript/objects/index.html
@@ -0,0 +1,49 @@
+---
+title: مقدمه ای بر اشیاء در جاوااسکریپت
+slug: Learn/JavaScript/Objects
+tags:
+  - آموزش
+  - جاوااسکریپت
+  - راهنما
+  - شی
+  - مقاله
+  - مقدماتی
+translation_of: Learn/JavaScript/Objects
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<p class="summary">در جاوااسکریپ، تقریبا همه چیز، از ویژگی‌های اصلی آن مثل رشته و آرایه تا API های مرورگر ساخته شده بر پایه جاوااسکریپت، یک شی است. حتی این امکان وجود دارد تا اشیا مورد نظر خود برای تجمیع توابع و متغییرهای مرتبط با هم در یک بسته کارا را تعریف کنید. اگر بخواهید در دانش خود نسبت به این زبان جلوتر بروید، شناخت ذات شی-پایه جاوااسکریپت ضروری می‌نماید. به همین دلیل ما برای کمک شما این بخش را آماده کرده‌ایم. در این بخش ابتدا تئوری اشیاء و رسم الخط آن را به جزء بررسی کرده و سپس به چگونگی ساخت اشیاء اختصاصی نگاهی خواهیم انداخت.</p>
+
+<h2 id="پیش‌نیازها">پیش‌نیازها</h2>
+
+<p dir="rtl">پیش از شروع این بخش، شما باید با HTML و CSS تا حدی آشنایی داشته باشید. توصیه می‌شود که بخش‌های <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">مقدمه‌ای بر HTML</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمه‌ای بر CSS</a> را قبل از شروع با جاوااسکریپت را کار کنید.</p>
+
+<p dir="rtl">همچنین لازم است قبل از شروع کار با اشیا در جاوااسکریپت، تا حدودی با اصول آن آشنا باشید. پیش از مطالعه این بخش، <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">قدم‌های اول در جاوااسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">بلوک‌های سازنده جاوااسکریپت</a> را مطالعه بنمایید.</p>
+
+<div class="note" dir="rtl">
+<p><strong>نکته</strong>: اگر شما روی کامپیوتر/تبلت/ یا سایر دستگاه‌ها کار می‌کنید و شما توانایی تولید فایل‌های خود را ندارید، می‌توانید (بسیاری از) نمونه کدها را در برنامه‌های کدنویسی آنلاین مثل <a href="http://jsbin.com/">JSBin</a> و <a href="https://thimble.mozilla.org/">Thimble</a> اجرا نمایید.</p>
+</div>
+
+<h2 id="راهنما">راهنما</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">مقدمه‌ای بر اشیاء</a></dt>
+ <dd dir="rtl">در اولین مقاله به اشیاء در جاوااسکریپت نگاهی خواهیم انداخت، به اصول رسم الخط اشیاء در جاوااسکریپت نگاهی خواهیم انداخت و برخی از ویژگی‌های جاوااسکریپت را که تا کنون با آن کار کرده‌ایم را بازنگری می‌کنیم و این حقیقت را که بسیاری از ویژگی‌هایی که تا کنون با آن‌ها سروکار داشته‌ایم در واقع شی بوده‌اند را بازگو می‌کنیم.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">جاوااسکریپت شی‌گرا برای مبتدی‌ها</a></dt>
+ <dd dir="rtl">با دانستن اصول اولیه، در این بخش روی جاوااسکریپت شی-گرا تمرکز (OOJS) تمرکز می‌کنیم — این مقاله دیدی کلی از تئوری برنامه نویسی شی گرا ارائه می‌کند و سپس چگونگی شبیه سازی کلاس‌هایی از اشیاء توسز توابع سازنده و چگونگی ساخت نمونه اشیاء را شرح می‌دهد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">نمونه‌های اولیه شی</a></dt>
+ <dd dir="rtl">نمونه‌های اولیه، مکانیزمی است که اشیا در جاوااسکریپت از یکدیگر ارث‌بری می‌نمایند، این مفهوم با مفهوم ارث‌بری در زبان‌های شی گرای سنتی متفاوت است. در این مقاله، این تفاوت را بررسی می‌کنیم، چگونگی کارکرد زنجیره‌های نمونه اولیه را شرح می‌دهیم و به اینکه چگونه خاصیت‌های نمونه اولیه را می‌توان برای اضافه کردن توابع به سازنده‌های موجود استفاده کرد، نگاهی خواهیم انداخت.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">ارث‌بری در جاوااسکریپت</a></dt>
+ <dd dir="rtl">با این توضیحات فراوان از OOJS، این مقاله چگونگی ساخت اشیا "فرزند" (سازنده‌ها) و چگونگی ارث بردن ویژگی‌ها از کلاس والد خود شرح می‌دهیم.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">کار با داده‌های جی‌سان</a></dt>
+ <dd dir="rtl">نشانه‌گذاری شیء جاوااسکریپت (JSON) که معمولا برای نمایش و انتقال داده در وبسایت‌ها (یعنی ارسال داده از سرور به کلاینت به گونه‌ای که بتوان آن را در صفحه وب نمایش داد) استفاده می‌شود، فرمت متن-پایه استاندارد برای نمایش ساختارمند داده بر اساس نشان‌گذاری اشیاء در جاوااسکریپت است. شما غالبا با جی‌سان مواجه می‌شوید، بنابراین در این مقاله ما به شما هرآنچه را که برای کار با جی‌سان با استفاده از جاوااسکریپت نیاز دارید، شامل تجزیه جی‌سان به نحوی که بتوانید به داده‌های آن دسترسی داشته باشید و یا جی‌سان خود را بنویسید، یاد خواهیم داد.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">تمرین ساخت شی</a></dt>
+ <dd dir="rtl">در مقالات قبلی، به همه ضروریات تئوری اشیاء جاوااسکریپت و نشانه‌گذاری آن نگاه کردیم و به شما پایه محکمی برای شروع دادیم. در این مقاله به داخل تمرین عملی شیرجه میزنیم و به شما تمرین بیشتری از اشیاء اختصاصی جاوااسکریپت می‌دهیم که با آن‌ها یک چیز جالب و رنگی بسازید — یک توپ شیطانک رنگی!</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></dt>
+ <dd>In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.</dd>
+</dl>
diff --git a/files/fa/learn/javascript/objects/inheritance/index.html b/files/fa/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..c80d22ab3a
--- /dev/null
+++ b/files/fa/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,436 @@
+---
+title: Inheritance in JavaScript
+slug: Learn/JavaScript/Objects/Inheritance
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">With most of the gory details of OOJS now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. In addition, we present some advice on when and where you might use OOJS, and look at how classes are dealt with in modern ECMAScript syntax.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how it is possible to implement inheritance in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="وراثت_Prototypal">وراثت Prototypal</h2>
+
+<p>So far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. But mostly this has involved built-in browser functions. How do we create an object in JavaScript that inherits from another object?</p>
+
+<p>Let's explore how to do this with a concrete example.</p>
+
+<h2 id="Getting_started">Getting started</h2>
+
+<p>First of all, make yourself a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> file (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> also). Inside here you'll find the same <code>Person()</code> constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p>The methods are <em>all</em> defined on the constructor's prototype. For example:</p>
+
+<pre class="brush: js">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In the source code, you'll also see <code>bio()</code> and <code>farewell()</code> methods defined. Later you'll see how these can be inherited by other constructors.</p>
+</div>
+
+<p>Say we wanted to create a <code>Teacher</code> class, like the one we described in our initial object-oriented definition, which inherits all the members from <code>Person</code>, but also includes:</p>
+
+<ol>
+ <li>A new property, <code>subject</code> — this will contain the subject the teacher teaches.</li>
+ <li>An updated <code>greeting()</code> method, which sounds a bit more formal than the standard <code>greeting()</code> method — more suitable for a teacher addressing some students at school.</li>
+</ol>
+
+<h2 id="تعریف_سازنده_Teacher">تعریف سازنده ()Teacher</h2>
+
+<p>The first thing we need to do is create a <code>Teacher()</code> constructor — add the following below the existing code:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p>This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> function. This function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of <code>this</code> that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.</p>
+
+<p>We want the <code>Teacher()</code> constructor to take the same parameters as the <code>Person()</code> constructor it is inheriting from, so we specify them all as parameters in the <code>call()</code> invocation.</p>
+
+<p>The last line inside the constructor simply defines the new <code>subject</code> property that teachers are going to have, which generic people don't have.</p>
+
+<p>As a note, we could have simply done this:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}</pre>
+
+<p>But this is just redefining the properties anew, not inheriting them from <code>Person()</code>, so it defeats the point of what we are trying to do. It also takes more lines of code.</p>
+
+<h3 id="ارث_بری_از_یک_سازنده_بدون_هیچ_گونه_پارامتری">ارث بری از یک سازنده بدون هیچ گونه پارامتری</h3>
+
+<p>Note that if the constructor you are inheriting from doesn't take its property values from parameters, you don't need to specify them as additional arguments in <code>call()</code>. So, for example, if you had something really simple like this:</p>
+
+<pre class="brush: js">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>You could inherit the <code>width</code> and <code>height</code> properties by doing this (as well as the other steps described below, of course):</p>
+
+<pre class="brush: js">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>Note that we've only specified <code>this</code> inside <code>call()</code> — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.</p>
+
+<h2 id="Setting_Teachers_prototype_and_constructor_reference">Setting Teacher()'s prototype and constructor reference</h2>
+
+<p>All is good so far, but we have a problem. We have defined a new constructor, and it has a <code>prototype</code> property, which by default just contains an object with a reference to the constructor function itself. It does not contain the methods of the Person constructor's <code>prototype</code> property. To see this, enter <code>Object.getOwnPropertyNames(Teacher.prototype)</code> into either the text input field or your JavaScript console. Then enter it again, replacing <code>Teacher</code> with <code>Person</code>. Nor does the new constructor <em>inherit</em> those methods. To see this, compare the outputs of <code>Person.prototype.greeting</code> and <code>Teacher.prototype.greeting</code>. We need to get <code>Teacher()</code> to inherit the methods defined on <code>Person()</code>'s prototype. So how do we do that?</p>
+
+<ol>
+ <li>Add the following line below your previous addition:
+  <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre>
+  Here our friend <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> comes to the rescue again. In this case we are using it to create a new object and make it the value of <code>Teacher.prototype</code>. The new object has <code>Person.prototype</code> as its prototype and will therefore inherit, if and when needed, all the methods available on <code>Person.prototype</code>.</li>
+ <li>We need to do one more thing before we move on. After adding the last line, <code>Teacher.</code><code>prototype</code>'s <code>constructor</code> property is now equal to <code>Person()</code>, because we just set <code>Teacher.prototype</code> to reference an object that inherits its properties from <code>Person.prototype</code>! Try saving your code, loading the page in a browser, and entering <code>Teacher.prototype.constructor</code> into the console to verify.</li>
+ <li>This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom:
+  <pre class="brush: js">Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });</pre>
+ </li>
+ <li>Now if you save and refresh, entering <code>Teacher.prototype.constructor</code> should return <code>Teacher()</code>, as desired, plus we are now inheriting from <code>Person()</code>!</li>
+</ol>
+
+<h2 id="Giving_Teacher_a_new_greeting_function">Giving Teacher() a new greeting() function</h2>
+
+<p>To finish off our code, we need to define a new <code>greeting()</code> function on the <code>Teacher()</code> constructor.</p>
+
+<p>The easiest way to do this is to define it on <code>Teacher()</code>'s prototype — add the following at the bottom of your code:</p>
+
+<pre class="brush: js">Teacher.prototype.greeting = function() {
+  let prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Ms.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};</pre>
+
+<p>This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.</p>
+
+<h2 id="Trying_the_example_out">Trying the example out</h2>
+
+<p>Now that you've entered all the code, try creating an object instance from <code>Teacher()</code> by putting the following at the bottom of your JavaScript (or something similar of your choosing):</p>
+
+<pre class="brush: js">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>Now save and refresh, and try accessing the properties and methods of your new <code>teacher1</code> object, for example:</p>
+
+<pre class="brush: js">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic <code>Person()</code> constructor (class). The query on line 4 accesses a member that is available only on the more specialized <code>Teacher()</code> constructor (class). The query on line 5 would have accessed a member inherited from <code>Person()</code>, except for the fact that <code>Teacher()</code> has its own member with the same name, so the query accesses that member.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p>
+</div>
+
+<p>The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.</p>
+
+<p>You might also be interested in checking out some of the new {{glossary("ECMAScript")}} features that allow us to do inheritance more cleanly in JavaScript (see <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). We didn't cover those here, as they are not yet supported very widely across browsers. All the other code constructs we discussed in this set of articles are supported as far back as IE9 or earlier, and there are ways to achieve earlier support than that.</p>
+
+<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p>
+
+<h2 id="A_further_exercise">A further exercise</h2>
+
+<p>In our <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, we also included a <code>Student</code> class as a concept, which inherits all the features of <code>Person</code>, and also has a different <code>greeting()</code> method from <code>Person</code> that is much more informal than the <code>Teacher</code>'s greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own <code>Student()</code> constructor that inherits all the features of <code>Person()</code>, and implements the different <code>greeting()</code> function.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p>
+</div>
+
+<h2 id="Object_member_summary">Object member summary</h2>
+
+<p>To summarize, you've got four types of property/method to worry about:</p>
+
+<ol>
+ <li>Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>let myInstance = new myConstructor()</code>).</li>
+ <li>Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>. These are also known as <strong>static properties/methods</strong>.</li>
+ <li>Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's <code>prototype</code> property, e.g. <code>myConstructor.prototype.x()</code>.</li>
+ <li>Those available on an object instance, which can either be an object created when a constructor is instantiated like we saw above (so for example <code>var teacher1 = new Teacher( name = 'Chris' );</code> and then <code>teacher1.name</code>), or an object literal (<code>let teacher1 = { name = 'Chris' }</code> and then <code>teacher1.name</code>).</li>
+</ol>
+
+<p>If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.</p>
+
+<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2>
+
+<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).</p>
+</div>
+
+<p>Let's look at a rewritten version of the Person example, class-style:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p>
+
+<ul>
+ <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li>
+ <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the constructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li>
+</ul>
+
+<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p>
+
+<pre class="brush: js">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Under the hood, your classes are being converted into Prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.</p>
+</div>
+
+<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3>
+
+<p>Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p>
+
+<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on,</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(subject, grade) {
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>but there's a little catch.</p>
+
+<p>Unlike old-school constructor functions where the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> does the initialization of <code>this</code> to a newly-allocated object, this isn't automatically initialized for a class defined by the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> keyword, i.e the sub-classes.</p>
+
+<p>Therefore running the above code will give an error:</p>
+
+<pre class="brush: js">Uncaught ReferenceError: Must call super constructor in derived class before
+accessing 'this' or returning from derived constructor</pre>
+
+<p>For sub-classes, the <code>this</code> intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're extending.</p>
+
+<p>Here we are extending the <code>Person</code> class — the <code>Teacher</code> sub-class is an extension of the <code>Person</code> class. So for <code>Teacher</code>, the <code>this</code> initialization is done by the <code>Person</code> constructor.</p>
+
+<p>To call the parent constructor we have to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a>, like so:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(subject, grade) {
+    super(); // Now 'this' is initialized by calling the parent constructor.
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>There is no point having a sub-class if it doesn't inherit properties from the parent class.<br>
+ It is good then, that the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> also accepts arguments for the parent constructor.</p>
+
+<p>Looking back to our <code>Person</code> constructor, we can see it has the following block of code in its constructor method:</p>
+
+<pre class="brush: js"> constructor(first, last, age, gender, interests) {
+   this.name = {
+     first,
+     last
+   };
+   this.age = age;
+   this.gender = gender;
+   this.interests = interests;
+} </pre>
+
+<p>Since the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> operator is actually the parent class constructor, passing it the necessary arguments of the <code>Parent</code> class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+</pre>
+
+<p>Now when we instantiate <code>Teacher</code> object instances, we can call methods and properties defined on both <code>Teacher</code>and <code>Person</code> as we'd expect:</p>
+
+<pre class="brush: js">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+</pre>
+
+<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Getters_and_Setters">Getters and Setters</h2>
+
+<p>There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p>
+
+<p>We can handle such situations with getters and setters.</p>
+
+<p>Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.</p>
+
+<p>Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.</p>
+
+<p>The modified <code>Teacher</code> class looks like this:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+</pre>
+
+<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:</p>
+
+<ul>
+ <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li>
+ <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li>
+</ul>
+
+<p>The example below shows the two features in action:</p>
+
+<pre class="brush: js">// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject = "Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Getters and setters can be very useful at times, for example when you want to run some code every time a property is requested or set. For simple cases, however, plain property access without a getter or setter will do just fine.</p>
+</div>
+
+<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2>
+
+<p>Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.</p>
+
+<p>In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.</p>
+
+<p>In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p>
+</div>
+
+<p>When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.</p>
+
+<p>Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.</p>
+
+<h2 id="Alternatives_for_extending_the_prototype_chain">Alternatives for extending the prototype chain</h2>
+
+<p>In JavaScript, there are several different ways to extend the prototype of an object aside from what we've shown above. To find out more about the other ways, visit our <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a> article.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes.</p>
+
+<p>In the next article we'll have a look at how to work with JavaScript Object Notation (JSON), a common data exchange format written using JavaScript objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li>
+ <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, Chapter 7 — A good book on advanced JavaScript concepts and techniques, by John Resig, Bear Bibeault, and Josip Maras. Chapter 7 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/README.md">You Don't Know JS: this &amp; Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/fa/learn/javascript/objects/مقدمات/index.html b/files/fa/learn/javascript/objects/مقدمات/index.html
new file mode 100644
index 0000000000..47ee37c7a2
--- /dev/null
+++ b/files/fa/learn/javascript/objects/مقدمات/index.html
@@ -0,0 +1,254 @@
+---
+title: مقدمات اشیا در جاوااسکریپت
+slug: Learn/JavaScript/Objects/مقدمات
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary" dir="rtl"><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">در اولین مقاله به اشیاء در جاوااسکریپت نگاهی خواهیم انداخت، به اصول رسم الخط اشیاء در جاوااسکریپت نگاهی خواهیم انداخت و برخی از ویژگی‌های جاوااسکریپت را که تا کنون با آن کار کرده‌ایم را بازنگری می‌کنیم و این حقیقت را که بسیاری از ویژگی‌هایی که تا کنون با آن‌ها سروکار داشته‌ایم در واقع شی بوده‌اند را بازگو می‌کنیم.</span></p>
+
+<table class="learn-box standard-table" style="height: 239px; width: 575px;">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">پیش‌نیازها:</th>
+   <td dir="rtl">ادبیات اولیه کامپیوتر، فهم مقدماتی HTML و CSS، آشنایی با مقدمات جاوااسکریپت ( <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">قدم‌های اول در جاوااسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">بلوک‌های سازنده جاوااسکریپت</a> را ببینید).</td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">اهداف:</th>
+   <td dir="rtl">یادگیری اصول اولیه برنامه نویسی شی-گرا، ارتباط آن با جاوااسکریپت ("تقریبا همه چیز یک شی است") و چگونگی کار با اشیاء در جاوااسکریپت.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="مقدمات_اشیاء">مقدمات اشیاء</h2>
+
+<p dir="rtl">یک شی مجموعه از داده‌ها و یا عملکردهای مرتبط است (که معمولا شامل تعدادی متغییر و تابع است — در داخل اشیاء به متغییرها خاصیت و به توابع، متد گویند). بیایید با یک نمونه بفهمیم آن‌ها چگونه هستند.</p>
+
+<p dir="rtl">برای شروع، یک کپی از فالی <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ما را دانلود کنید.این فایل یک  {{HTMLElement("script")}}  برای نوشتن کد ما را فراهم می‌آورد.</p>
+
+<p dir="rtl">مشابه بسیاری چیزهای دیگر در جاوااسکریپت، ساخت یک شی با تعریف و مقداردهی یک متغییر آغاز می‌شود. متن زیر را در کد جاوااسکریپتی که اکنون دارید وارد نموده، ذخیره و رفرش کنید:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p dir="rtl">اگر در کنسول جاوااسکریپت <code>person</code> را وارد نمایید و دکه اینتر را بزنید، خروجی زیر را خواهید داشت:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p dir="rtl">تبریک! شما اولین شی خود را ساختید. کار انجام شد! اما این شی هنوز خالی است، نمیتواند کار خاصی را انجام دهد، پس بیایید شی‌مان را آپدیت کنیم تا به شکل زیر در بیاید:</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p dir="rtl">بعد از ذخیره و رفرش، مقادیر زیر را در کنسول جاوااسکریپت مرورگر خود در بخش ابزار توسعه وارد کنید:</p>
+
+<pre class="brush: js">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p dir="rtl">شما حالا مقداری داده و عملکرد داخل شی خود دارید و میتوناید با نشان‌گذاری ساده‌ای به آن دسترسی داشته باشید.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.</p>
+</div>
+
+<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p>
+
+<p>An object like this is referred to as an <strong>object literal</strong> — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.</p>
+
+<p>It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.</p>
+
+<h2 id="Dot_notation">Dot notation</h2>
+
+<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-namespaces">Sub-namespaces</h3>
+
+<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>Here we are effectively creating a <strong>sub-namespace</strong>. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Otherwise your methods will no longer work.</p>
+
+<h2 id="Bracket_notation">Bracket notation</h2>
+
+<p>There is another way to access object properties — using bracket notation. Instead of using these:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>You can use</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p>
+
+<h2 id="Setting_object_members">Setting object members</h2>
+
+<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>You can now test out your new members:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs? We could get those values like this:</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>we could then add this new member name and value to the <code>person</code> object like this:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Now try saving and refreshing, and entering the following into your text input:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.</p>
+
+<h2 id="What_is_this">What is "this"?</h2>
+
+<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article when we start creating constructors, etc., <code>this</code> is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different <code>person</code> object instances may have different names, but will want to use their own name when saying their greeting).</p>
+
+<p>Let's illustrate what we mean with a simplified pair of person objects:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In this case, <code>person1.greeting()</code> will output "Hi! I'm Chris."; <code>person2.greeting()</code> on the other hand will output "Hi! I'm Brian.", even though the method's code is exactly the same in each case. As we said earlier, <code>this</code> is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.</p>
+
+<h2 id="You've_been_using_objects_all_along">You've been using objects all along</h2>
+
+<p>As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than our own basic custom examples.</p>
+
+<p>So when you used string methods like:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods/properties available on it.</p>
+
+<p>When you accessed the document object model using lines like this:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.</p>
+
+<p>The same is true of pretty much any other built-in object/API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p>
+
+<p>Note that built in Objects/APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Again, we'll look at constructors in a later article.</p>
+
+<div class="note">
+<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our <code>person</code> object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.</p>
+
+<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/fa/learn/server-side/django/index.html b/files/fa/learn/server-side/django/index.html
new file mode 100644
index 0000000000..48088ab2d0
--- /dev/null
+++ b/files/fa/learn/server-side/django/index.html
@@ -0,0 +1,70 @@
+---
+title: Django Web Framework (Python)
+slug: Learn/Server-side/Django
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Learn
+  - NeedsTranslation
+  - Python
+  - Server-side programming
+  - TopicStub
+  - django
+translation_of: Learn/Server-side/Django
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p>
+
+<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt>
+ <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt>
+ <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt>
+ <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt>
+ <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt>
+ <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type, and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt>
+ <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt>
+ <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt>
+ <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt>
+ <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt>
+ <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd>
+</dl>
diff --git a/files/fa/learn/server-side/index.html b/files/fa/learn/server-side/index.html
new file mode 100644
index 0000000000..b497257371
--- /dev/null
+++ b/files/fa/learn/server-side/index.html
@@ -0,0 +1,59 @@
+---
+title: Server-side website programming
+slug: Learn/Server-side
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Server
+  - Server-side programming
+  - Topic
+  - TopicStub
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p>
+
+<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <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>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p>
+
+<p>In the modern world of web development, learning about server-side development is highly recommended.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p>
+
+<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p>
+
+<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
+</ul>
+
+<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt>
+ <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd>
+</dl>
diff --git a/files/fa/learn/server-side/قدم_اول/index.html b/files/fa/learn/server-side/قدم_اول/index.html
new file mode 100644
index 0000000000..2ce55b9041
--- /dev/null
+++ b/files/fa/learn/server-side/قدم_اول/index.html
@@ -0,0 +1,45 @@
+---
+title: قدم اول برنامه نویسی وب سمت سرور
+slug: Learn/Server-side/قدم_اول
+tags:
+  - آموزش
+  - برنامه نویسی سمت سرور
+  - راهنمایی
+  - مقدماتی
+  - کد
+translation_of: Learn/Server-side/First_steps
+---
+<div dir="rtl"> </div>
+
+<p dir="rtl">در این دوره ماژول برنامه نویسی سمت سرویس  ما چند سوال اساسی در باره برنامه نویسی سمت سرور پاسخ می دهیم<span class="seoSummary"> "برنامه نویسی سمت سرور چیست؟", "تفاوت برنامه نویسی سمت سرور و سمت کلاینت چیست؟", و"برنامه نویسی سمت سرور  چطور میتواند مفید باشد".</span> در ادامه ما محبوب ترین فریمورک های وب سمت سرور را بررسی می کنیم و در طول این راهنمایی   چگونگی روش انتخاب  مناسب ترین فریمورک برای ساخت اولین وبسایت شما را خواهیم داشت.</p>
+
+<h2 dir="rtl" id="پیش_نیازها">پیش نیازها</h2>
+
+<p dir="rtl">پیش از شروع نیازی نیست شما درباره برنامه نویسی وب سمت سرور هیچ دانشی داشت باشید در عوض شما باید با نوع برنامه نویسی آشنای داشته باشید.</p>
+
+<p dir="rtl">به هر حال, شما خواهید فهمید "وب چگونه کار می کنید" ما پیشنهاد می کنیم اول موضوعات زیر را دنبال کنید:</p>
+
+<ul>
+ <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">یک سرور وب چیست ؟</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">چه نرم افزاری نیاز است تا یک وبسایت ساخت؟</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">چگونه فایل ها را روی یک سرور وب آپلود (بارگذاری) کرد ؟</a></li>
+</ul>
+
+<p dir="rtl">بعد از آشنای با مفاهیم پایه شما آماده خواهید بود ادامه این ماژول را دنبال کنید.</p>
+
+<h2 dir="rtl" id="راهنما">راهنما</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">آشنای با سمت سرور</a></dt>
+ <dd dir="rtl">به دوره آموزش ابتدایی سمت سرور MDN خوش آمدید ! در این آموزش ٬ ما از بالاترین سطح برنامه نویس به سمت سرور نگاه می کنیم و به سوال های مثل "چه چیزی هست ؟" , "چه تفاوتی با برنامه نویسی سمت کلاینت دارد؟" و "برنامه نویسی سمت سرور مفید است ؟" . بعد از خواندن این مقاله شما خواهید فهمید قدرت کد نویسی سمت سرور در چیست.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">بررسی اجمالی سمت سرور</a></dt>
+ <dd dir="rtl">الان شما با خواندن مقاله موجود در لینک بالا می فهمید هدف و فواید برنامه نویسی سمت سرور در چیست. ما با بررسی های که خواهیم انجام داد روی درخواست های داینامک از طرف مرورگر (بروزر) به جزییات آن آشنا خواهیم شد. اکثر کد های سمت سرور یک وبسایت وظیفه هندل در خواست ها و پاسخ ها را از طریق یکسان دارند . درک این موضوع به شما کمک می کند که بدانید در نوشتن کدهای خود چه مواردی را باید در نظر بگیرید .</dd>
+ <dt dir="rtl"><a href="/fa/docs/">فریم ورک وب سمت سرور</a></dt>
+ <dd dir="rtl">در مقاله قبلی دیدید یک وب اپ سمت سرو چطوری به درخواست های دریافت شده از مرورگر وب پاسخ می دهد . الان در این مقاله که در لینک بالا وجود دارد خواهید دید یک فریمورک وب چگونه مدریت فرآیند ها (تسک ها) را آسانتر می کند. این موضوع به شما کمک می کند فریمورک بهتری برای وب اپ خود انتخاب کنید .</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">امنیت وبسایت </a></dt>
+ <dd dir="rtl">امنیت وبسایت مستلزم در نظر گرفتن همه جنبه ها در طراحی و استفاده  وبسایت است . با خواندن مقاله موجود در لینک یک الگو یا معلم تمام و کمال برای راهنمای شما جهت تامین امنیت وبسایت شما نباید اما این آموزش به شما کمک خواهد کرد با در نظر گرفتن قدم های مهم که باعث می شود وب اپ شما مقاومت لازم در مقابل بیشتر تهدید های عمومی بدست آورد</dd>
+</dl>
+
+<h2 dir="rtl" id="ارزیابی">ارزیابی </h2>
+
+<p dir="rtl">این بازنگری شامل هیچ ارزبای نیست زیرا شما هنوز هیچ کدی مشاهده نکردید. ما امیدواریم شما درک درستی از انواع عملکرد و بتوانید برنامه نویسی سمت سرور را شروع کنید و بتوانید انتخاب کنید کدام فریمورک وب برای خلق اولین وبسایت شما بهتر است.</p>
diff --git a/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html
new file mode 100644
index 0000000000..c9b01985e9
--- /dev/null
+++ b/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -0,0 +1,133 @@
+---
+title: Understanding client-side JavaScript frameworks
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+tags:
+  - JavaScript
+  - Translation
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p>
+
+<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p>
+
+<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p>
+
+<ul>
+ <li class="summary">Why should I use a framework? What problems do they solve for me?</li>
+ <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li>
+ <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li>
+ <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li>
+</ul>
+
+<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
+
+<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
+
+<h2 id="Introductory_guides">Introductory guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt>
+ <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt>
+ <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd>
+</dl>
+
+<h2 id="React_tutorials">React tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt>
+ <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt>
+ <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt>
+ <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt>
+ <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt>
+ <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt>
+ <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt>
+ <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
+ <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
+ <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
+ <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
+ <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
+ <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
+ <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
+ <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
+ <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
+ <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
+ <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
+ <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
+ <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
+
+<ul>
+ <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li>
+ <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
+ <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
+ <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
+</ul>
+
+<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
+
+<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
diff --git a/files/fa/learn/tools_and_testing/index.html b/files/fa/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..6c0e91c3c6
--- /dev/null
+++ b/files/fa/learn/tools_and_testing/index.html
@@ -0,0 +1,52 @@
+---
+title: Tools and testing
+slug: Learn/Tools_and_testing
+tags:
+  - Accessibility
+  - Automation
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Testing
+  - Tools
+  - Topic
+  - TopicStub
+  - cross browser
+  - user testing
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.</p>
+
+<p>On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p>
+
+<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.</p>
+</div>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>You should really learn the basics of the core <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> languages first before attempting to use many the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.</p>
+
+<p>In addition, you should start with the first module in this topic, which gives a useful overview of the general area.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a></dt>
+ <dd>Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a></dt>
+ <dd>JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. This module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a></dt>
+ <dd>All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt>
+ <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
+</dl>