initial commit

54 files changed, 10449 insertions, 0 deletions

diff --git a/files/vi/learn/accessibility/index.html b/files/vi/learn/accessibility/index.html
new file mode 100644
index 0000000000..e2bdfec04d
--- /dev/null
+++ b/files/vi/learn/accessibility/index.html
@@ -0,0 +1,50 @@
+---
+title: Khả năng truy cập
+slug: Learn/Accessibility
+tags:
+  - Khả năng truy cập
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Học một ít HTML, CSS và JavaScript rất hữu ích nếu bạn muốn trở thành nhà phát triển web, nhưng kiến ​​thức của bạn cần phải đi xa hơn là chỉ sử dụng công nghệ - bạn cần sử dụng chúng một cách có trách nhiệm để bạn tối đa hóa đối tượng cho trang web của mình và không làm khó bất kỳ ai khi sử dụng chúng. Để đạt được điều này, bạn cần phải tuân thủ các phương pháp chung hay nhất (được thể hiện qua các chủ đề <a href="https://developer.mozilla.org/vi/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/vi/docs/Learn/CSS">CSS</a> và <a href="https://developer.mozilla.org/vi/docs/Learn/JavaScript">JavaScript</a>), thực hiện <a href="https://developer.mozilla.org/vi/docs/Learn/Tools_and_testing/Cross_browser_testing">kiểm tra trình duyệt chéo</a> và cân nhắc khả năng truy cập ngay từ đầu. Trong mô-đun này, chúng tôi sẽ trình bày chi tiết hơn về phần sau.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <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> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts the module off with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessiblity.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these plartforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt>
+ <dd>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+</ul>
diff --git a/files/vi/learn/common_questions/index.html b/files/vi/learn/common_questions/index.html
new file mode 100644
index 0000000000..4aafae4a32
--- /dev/null
+++ b/files/vi/learn/common_questions/index.html
@@ -0,0 +1,135 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<h2 id="How_the_Web_works">How the Web works</h2>
+
+<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3>
+ </dt>
+ <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
+ <dt>
+ <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3>
+ </dt>
+ <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
+
+<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
+</ul>
diff --git a/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html b/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html
new file mode 100644
index 0000000000..fb9abacd43
--- /dev/null
+++ b/files/vi/learn/common_questions/internet_lam_viec_nh_the_nao/index.html
@@ -0,0 +1,97 @@
+---
+title: Internet làm việc như thế nào?
+slug: Learn/Common_questions/Internet_lam_viec_nh_the_nao
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p>Bài viết này giải thích Internet là gì và cách nó làm việc.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Không yêu cầu, nhưng chúng tôi khuyên bạn trước tiên nên đọc <a href="/en-US/docs/Learn/Thinking_before_coding">Bài viết nói về thiết lập các mục tiêu cho dự án</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Bạn sẽ học những khái niệm cơ bản về cơ sở hạ tầng của Web và sự khác giữa Internet với Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tóm_tắt">Tóm tắt</h2>
+
+<p><strong>Internet </strong>là xương sống của Web, là cơ sở hạ tầng kỹ thuật làm cho Web tồn tại. Nói theo nghĩa cơ bản nhất, Internet là một mạng rất lớn bao gồm các máy tính có thể giao tiếp với nhau.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Lịch sử của Internet là một cái gì đó đen tối.</a> Nó được bắt đầu từ những năm 1960 như một dự án nghiên cứu được tài trợ bởi quân đội Mỹ, sau đó đến những năm 1980, nó phát triển thành một hệ thống cơ sở hạ tầng công cộng với sự hỗ trợ của nhiều trường đại học công lập và các công ty tư nhân. Những kỹ thuật khác nhau đã giúp Internet tiến hóa vượt thời gian, nhưng cách nó làm việc thì vẫn không thay đổi nhiều: Internet là con đường để tất cả máy tính kết nối lại với nhau, và dù cho có chuyện gì xảy ra, các máy tính vẫn tìm thấy con đường khác để tiếp tục nối kết.</p>
+
+<h2 id="Học_tập_tích_cực">Học tập tích cực</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Cách Mà Internet Làm Việc trong 5 phút</a>: Một video dài 5 phút giải thích những điều rất cơ bản về Internet của Aaron Titus.</li>
+</ul>
+
+<h2 id="Lặn_sâu_hơn">Lặn sâu hơn</h2>
+
+<h3 id="Một_mạng_đơn_giản">Một mạng đơn giản</h3>
+
+<p>Khi hai máy tính cần giao tiếp (liên lạc) với nhau, bạn sẽ phải liên kết chúng lại, hoặc bằng hình thức vật lý (thường dùng với một dây <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Cáp Ethernet - Ethernet cable</a>) hoặc không dây (ví dụ như hệ thống <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> hoặc <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Những máy tính hiện đại ngày nay có thể chấp nhận tất cả kết nối trên.</p>
+
+<div class="note">
+<p><strong>Chú ý:</strong> Phần còn lại của bài viết này, chúng ta sẽ chỉ nói về hình thức kết nối dùng cáp vật lý, còn đối với các mạng không dây thì cách làm việc cũng tương tự.</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Bởi vì một mạng sẽ không bị giới hạn bởi hai máy tính. Nên bạn có thể kết nối bao nhiêu máy tính tùy ý. Nhưng khi đó sẽ nhanh chóng phát sinh rắc rối. Nếu bạn thử kết nối 10 máy tính, giả sử vậy, thì bạn sẽ cần 45 sợi cáp, và 9 phích cắm trên mỗi máy tính!</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>Để giải quyết vấn đề này, mỗi máy tính trong mạng sẽ được kết nối vào một máy tính tí hon được gọi là <em>bộ định tuyến - router. Bộ định tuyến </em>sẽ làm công việc giống như người ra hiệu ở trạm xe lửa, nó đảm bảo rằng một thông điệp được gửi từ máy tính này sẽ đến đúng máy tính cần nhận. Giả sử để gửi một thông điệp đến máy B, máy A phải gửi thông điệp đó đến <em>bộ định tuyến,</em> rồi <em>bộ định tuyến</em> sẽ tiếp tục chuyển nó đến máy B và đồng thời đảm bảo chắc chắn thông điệp đó không bị gửi vào máy C.</p>
+
+<p>Khi chúng ta thêm một bộ định tuyến vào hệ thống, mạng 10 máy tính sẽ chỉ cần 10 sợi dây cáp: vì mỗi máy tính chỉ cần một phích cắm và bộ định tuyến sẽ có 10 phích cắm.</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Mạng_của_các_mạng">Mạng của các mạng</h3>
+
+<p>Vậy là mọi thứ đều ổn. Nhưng còn việc kết nối hàng trăm, hàng ngàn, hàng tỉ máy tính lại với nhau thì sao? Dĩ nhiên là một bộ định tuyến đơn lẻ sẽ không thể gánh vác được số lượng đó, nhưng mà, nếu bạn đọc phần trên một cách cẩn thận, sẽ thấy chúng tôi có nói bộ định tuyến cũng chính là một máy tính giống như các máy tính khác. Thế thì có điều gì cản trở việc kết nối trực tiếp hai bộ định tuyến với nhau không? Không, vậy thì chúng ta cứ kết nối chúng thôi.</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>Bằng việc kết nối các máy tính vào bộ định tuyến, rồi lại kết nối các bộ định tuyến với nhau, chúng ta có thể tạo ra một mạng vô tận.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p> </p>
+
+<p>Một mạng như thế tiến rất gần đến thứ mà ta gọi là Internet, nhưng chúng ta đã bỏ sót vài thứ. Chúng ta xây dựng mạng máy tính đó cho mục đích riêng của mình. Còn có rất nhiều mạng máy tính khác ở ngoài kia: của những người bạn, của hàng xóm, và bất kỳ ai khác. Nhưng mà không thể nào thiết lập hàng đống đường dây cáp để kết nối nhà bạn với phần còn lại của thế giới, thế thì bạn sẽ xử lý vấn đề này như thế nào? May thay là đã có sẵn những đường dây cáp liên kết đến nhà bạn, ví dụ như, cáp điện và điện thoại. Cơ sở hạ tầng điện thoại đã kết nối nhà bạn đến với mọi người trên thế giới, thế nên nó là đường dây hoàn hảo mà chúng ta cần. Để kết nối mạng máy tính của bạn đến cơ sở hạ tầng điện thoại, cần một thiết bị nhỏ gọi là <em>modem. Modem </em>sẽ biến đổi thông tin từ mạng của chúng ta thành dạng thông tin có thể điều khiển được bằng cơ sở hạ tầng điện thoại và ngược lại.</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Vậy là chúng ta đã được kết nối vào cơ sở hạ tầng điện thoại. Bước tiếp theo là gửi thông điệp từ mạng của chúng ta sang mạng cần nhận. Để làm điều đó, mạng của chúng ta cần kết nối với Nhà cung cấp dịch vụ Internet (Internet Service Provider - ISP). ISP là một công ty chuyên quản lý các <em>bộ định tuyến</em> đặc biệt, các bộ định tuyến đó được kết nối lẫn nhau và có thể truy cập đến các bộ định tuyến của những ISP khác. Như vậy một thông điệp gửi đi từ mạng của bạn sẽ phải đi qua mạng của các mạng ở ISP, rồi mới tới mạng cần nhận. Internet bao gồm toàn bộ cơ sở hạ tầng của các mạng.</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Tìm_các_máy_tính">Tìm các máy tính</h3>
+
+<p>Nếu bạn muốn gửi một thông điệp đến một máy tính khác, thì phải chỉ định đích danh đó là máy tính nào. Do đó mà mỗi máy tính khi kết nối vào hệ thống mạng thì đều được gán một địa chỉ duy nhất để nhận dạng, gọi là địa chỉ IP (IP là viết tắt của Internet Protocol). IP là một dãy gồm bốn số được ngăn cách nhau bằng dấu chấm, ví dụ <code>192.168.2.10</code>.</p>
+
+<p>Điều đó đối với các máy tính là quá tốt, nhưng con người chúng ta sẽ gặp nhiều khó khăn để nhớ dãy số địa chỉ đó. Để làm mọi thứ dễ dàng hơn, chúng ta đặt bí danh cho địa chỉ IP, tức là một cái tên nào đó dễ nhớ đối với con người, mà theo chuyên ngành người ta gọi là tên miền - domain name. Ví dụ <code style="letter-spacing: -0.00278rem;">google.com</code><span style="letter-spacing: -0.00278rem;"> là tên miền đại diện cho địa chỉ IP </span><code style="letter-spacing: -0.00278rem;">173.194.121.32</code><span style="letter-spacing: -0.00278rem;">. Như vậy, sử dụng tên miền là phương pháp dễ nhất để chúng ta chạm đến một máy tính khác trên Internet.</span></p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="Internet_và_web">Internet và web</h3>
+
+<p>Như bạn có thể nhận thấy, khi chúng ta duyệt Web với một trình duyệt web, chúng ta thường sử dụng tên miền để chạm đến trang web đó. Nghĩa là Internet và Web giống nhau? Không đơn giản thế. Như chúng ta đã xem qua, Internet là một cơ sở hạ tầng kỹ thuật cho phép hàng tỉ máy tính kết nối với nhau. Trong số những máy tính đó, có một số máy (được gọi là máy chủ Web - Web server) có thể gửi các thông điệp dễ hiểu đến trình duyệt web. <em>Internet </em>là một hệ thống cơ sở hạ tầng, ngược lại<em>Web</em> là một dịch vụ được xây dựng ở mặt trên (phần ngọn) của cơ sở hạ tầng. Phải nên nhớ rằng có những dịch vụ khác cũng được xây dựng ở mặt trên của Internet, như là email và {{Glossary("IRC")}}.</p>
+
+<h2 id="Bước_tiếp_theo">Bước tiếp theo</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Cách thức mà Web làm việc</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Hiểu sự khác nhau giữa một trang web, một website, một web server và một bộ máy tìm kiếm</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Tên miền (domain name) là gì ?</a></li>
+</ul>
diff --git a/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html b/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html
new file mode 100644
index 0000000000..187215c53c
--- /dev/null
+++ b/files/vi/learn/common_questions/thiet_lap_web_mang_noi_bo/index.html
@@ -0,0 +1,99 @@
+---
+title: Làm sao để thiết lập web mạng nội bộ?
+slug: Learn/Common_questions/thiet_lap_web_mang_noi_bo
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p> </p>
+
+<p>Bài viết này sẽ giải thích làm thế nào để thiết lập web mạng nội bộ cơ bản trên máy tính của bạn và những điều cơ bản về cách sử dụng nó.</p>
+
+<p> </p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu Cầu:</th>
+   <td>Bạn cần phải biết <a href="/en-US/docs/Learn/How_the_Internet_works">Internet hoạt động thế nào</a>, và <a href="/en-US/docs/Learn/What_is_a_Web_server">Web Server là gì</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Mục Tiêu:</th>
+   <td>Bạn sẽ biết cách thiết lập máy chủ nội bộ. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tập_tin_cục_bộ_(local)_và_Tập_tin_từ_xa_(remote)">Tập tin cục bộ (local) và Tập tin từ xa (remote)</h2>
+
+<p>Khắp những nơi học, chúng tôi bảo bạn mở những ví dụ trực tiếp trong một trình duyệt - điều này có thể được thực hiện bằng cách click đúp vào file HTML, kéo và thả nó vào trong cửa sổ trình duyệt, hoặc chọn <em>File</em> &gt; <em>Open...</em> và chuyển hướng tới file HTML. Có rất nhiều cách để làm được điều này.</p>
+
+<p>Nếu đường dẫn web bắt đầu với <code>file://</code>, tiếp theo bởi đường dẫn tới file của bạn trên ổ đĩa cục bộ thì một tập tin cục bộ đang được sử dụng. Ngược lại, nếu bạn xem một trong những ví dụ của chúng tôi trên Github (hoặc một ví dụ trên một máy chủ từ xa khác), địa chỉ web sẽ bắt đầu với <code>http://</code> hoặc<code>https://</code>, để cho thấy rằng file đó đã được nhận thông qua HTTP.</p>
+
+<h2 id="Những_vấn_đề_trong_việc_thử_nghiệm_những_tập_tin_cục_bộ">Những vấn đề trong việc thử nghiệm những tập tin cục bộ</h2>
+
+<p>Một số ví dụ sẽ không chạy nếu bạn mở chúng như những tệp tin cục bộ. Vấn  đề này có thể do nhiều lí do, những lí do có khả năng nhất như:</p>
+
+<ul>
+ <li><strong>Chúng đặc trưng cho những yêu cầu không đồng bộ.</strong> Một vài trình duyệt (bao gồm cả Chrome) sẽ không chạy những yêu cầu không đồng bộ (xem <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Tìm và nạp dữ liệu từ máy chủ</a>) nếu bạn chỉ chạy ví dụ từ một tập tin cục bộ. Đây là do sự hạn chế để bảo mật (để biết thêm về bảo mật web, đọc <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Bảo mật website</a>).</li>
+ <li><strong>They feature a server-side language</strong>. Server-side languages (such as PHP or Python) require a special server to interpret the code and deliver the results.</li>
+</ul>
+
+<h2 id="Running_a_simple_local_HTTP_server">Running a simple local HTTP server</h2>
+
+<p>To get around the problem of async requests, we need to test such examples by running them through a local web server. One of the easiest ways to do this for our purposes is to use Python's <code>SimpleHTTPServer</code> module.</p>
+
+<p>To do this:</p>
+
+<ol>
+ <li>
+  <p>Install Python. If you are using Linux or Mac OS X, it should be available on your system already. If you are a Windows user, you can get an installer from the Python homepage and follow the instructions to install it:</p>
+
+  <ul>
+   <li>Go to <a href="https://www.python.org/">python.org</a></li>
+   <li>Under the Download section, click the link for Python "3.xxx".</li>
+   <li>At the bottom of the page, choose the <em>Windows x86 executable installer</em> and download it.</li>
+   <li>When it has downloaded, run it.</li>
+   <li>On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.</li>
+   <li>Click <em>Install</em>, then click <em>Close</em> when the installation has finished.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Open your command prompt (Windows)/terminal (OS X/Linux). To check Python is installed, enter the following command:</p>
+
+  <pre class="brush: bash">python -V</pre>
+ </li>
+ <li>
+  <p>This should return a version number. If this is OK, navigate to the directory that your example is inside, using the <code>cd</code> command.</p>
+
+  <pre class="brush: bash"># include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..</pre>
+ </li>
+ <li>
+  <p>Enter the command to start up the server in that directory:</p>
+
+  <pre class="brush: bash"># If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL <code>localhost:8000</code> in your web browser. Here you'll see the contents of the directory listed — click the HTML file you want to run.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you already have something running on port 8000, you can choose another port by running the server command followed by an alternative port number, e.g. <code>python -m http.server 7800</code> (Python 3.x) or <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). You can then access your content at <code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Running_server-side_languages_locally">Running server-side languages locally</h2>
+
+<p>Python's <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> module is useful, but it doesn't know how to run code written in languages such as PHP or Python. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:</p>
+
+<ul>
+ <li>To run Python server-side code, you'll need to use a Python web framework. You can find out how to use the Django framework by reading <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> is also a good (slightly less heavyweight) alternative to Django. To run this you'll need to <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, then install Flask using <code>pip3 install flask</code>. At this point you should be able to run the Python Flask examples using for example <code>python3 python-example.py</code>, then navigating to <code>localhost:5000</code> in your browser.</li>
+ <li>To run Node.js (JavaScript) server-side code, you'll need to use raw node or a framework built on top of it. Express is a good choice — see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>To run PHP server-side code, you'll need a server setup that can interpret PHP. Good options for local PHP testing are <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, and PHP/Python/Perl). These are complete packages that create local setups to allow you to run the Apache server, PHP, and MySQL databases.</li>
+</ul>
diff --git a/files/vi/learn/common_questions/what_is_a_web_server/index.html b/files/vi/learn/common_questions/what_is_a_web_server/index.html
new file mode 100644
index 0000000000..dd59e29e8c
--- /dev/null
+++ b/files/vi/learn/common_questions/what_is_a_web_server/index.html
@@ -0,0 +1,118 @@
+---
+title: Web server là gì?
+slug: Learn/Common_questions/What_is_a_web_server
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>Trong bài viết này chúng ta sẽ tìm hiểu web server là gì? chúng làm việc như thế nào? và tại sao chúng lại quan trọng?</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><strong>Yêu cầu</strong>:</th>
+   <td>Bạn nên biết cách <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">mạng Internet làm việc như thế nào</a>, và hiểu <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">sự khác nhau giữa trang web, web site, we bserver và search engine.</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Mục tiêu</strong>:</th>
+   <td>Bạn sẽ học web server là gì và đạt được một hiểu biết chung về cách nó làm việc.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tóm_lược">Tóm lược</h2>
+
+<p>"Web server" có thể là phần cứng hoặc phần mềm, hoặc cả hai.</p>
+
+<ol>
+ <li><strong>Ở khía cạnh phần cứng</strong>, một web server là một máy tính lưu trữ các file thành phần của một website (ví dụ: các tài liệu HTML, các file ảnh, CSS và các file JavaScript) và có thể phân phát chúng tới thiết bị của người dùng cuối (end-user). Nó kết nối tới mạng Internet và có thể truy cập tới thông qua một tên miền giống như mozilla.org.</li>
+ <li><strong>Ở khía cạnh phần mềm</strong>, một web server bao gồm một số phần để điều khiển cách người sử dụng web truy cập tới các file được lưu trữ trên một HTTP server(máy chủ HTTP). Một <em>HTTP server</em> là một phần mềm hiểu được các URL (các địa chỉ web) và HTTP (giao thức trình duyệt của bạn sử dụng để xem các trang web).</li>
+</ol>
+
+<p>Ở mức cơ bản nhất, bất cứ khi nào một trình duyệt cần một file được lưu trữ trên một web server, trình duyệt request (yêu cầu) file đó thông qua HTTP. Khi một request tới đúng web server (phần cứng), HTTP server (phần mềm) gửi tài liệu được yêu cầu trở lại, cũng thông qua HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>Để xuất bản một website, bạn cần một static(tĩnh) hoặc dynamic(động) web server.</p>
+
+<p>Một <strong>static web server</strong>, hoặc stack, bao gồm một máy tính (hardware) với một HTTP server (phần mềm). Chúng ta gọi nó là "static" bởi vì server (máy chủ) gửi các file nó lưu trữ "nguyên vẹn" (as-is) tới trình duyệt của bạn.</p>
+
+<p>Một <strong>dynamic web server</strong> bao gồm một static web server cộng với các phần mềm mở rộng, phổ biến nhất là một application server (máy chủ ứng dụng) và một database. Chúng ta gọi nó là "dynamic" bởi vì application server cập nhật các file được lưu trữ trước khi gửi chúng tới tình duyệt của bạn thông qua HTTP server.</p>
+
+<p>Ví dụ, để tạo ra các trang web mà bạn nhìn thấy trong trình duyệt, application server có thể điền một HTML template với những nội dung lấy từ một database. Các site giống như MDN hay Wikipedia có hàng nghìn trang web, nhưng chúng không phải là các tài liệu HTML thực sự, mà chỉ là vài HTML template và một database khổng lồ. Thiết lập này làm cho nó dễ dàng và nhanh hơn để bảo dưỡng và phân phối nội dụng.</p>
+
+<h2 id="Active_learning">Active learning</h2>
+
+<p><em>There is no active learning available yet. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<p><em>Active chưa có sẵn. Xin hãy, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">đóng góp</a>.</em></p>
+
+<h2 id="Tìm_hiểu_sâu_hơn">Tìm hiểu sâu hơn</h2>
+
+<p>Để lấy một trang web, như đã nói, trình duyệt của bạn gửi một request tới web server, nó sẽ tìm kiếm file được yêu cầu được lưu trữ trên ổ đĩa của nó. Khi tìm thấy file, server đọc nó, xử lý nếu cần, và gửi nó tới trình duyệt. Hãy xem xét các bước này chi tiết hơn.</p>
+
+<h3 id="Lưu_trữ_các_file_Hosting_files">Lưu trữ các file (Hosting files)</h3>
+
+<p>Đầu tiên, một web server phải lưu trữ các file của website, đó là các tài liệu HTML và các tài nguyên liên quan đến nó, bao gồm các ảnh, file CSS, file JavaScript, fonts và videos.</p>
+
+<p>Về mặt kỹ thuật, bạn có thể lưu trữ tất cả các file trên máy tính của mình, nhưng có nhiều lợi ích hơn khi lưu trữ chúng trên một máy chủ riêng biệt như:</p>
+
+<ul>
+ <li>luôn luôn sẵn sàng (up and running)</li>
+ <li>luôn luôn kết nối tới mạng Internet</li>
+ <li>có một địa chỉ IP cố định</li>
+ <li>được bảo dưỡng bởi nhà cung cấp (third-party provider)</li>
+</ul>
+
+<p>Vì tất cả những lý do này, tìm một nhà cung cấp máy chủ (hosting provider) tốt là một phần quan trọng trong việc xây dựng website của bạn. Tìm hiễu kỹ dịch vụ mà các công ty cung cấp và chọn một cái phù hợp với nhu cầu và ngân sách của bạn (có khá nhiều lựa chọn từ miễn phí cho tới hàng ngàn dollar một tháng). Bạn có thể tìm hiểu chi tiết hơn trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_much_does_it_cost#Hosting">bài viết này</a>.</p>
+
+<p>Khi bạn đã chọn được một nhà cung cấp web hosting, bạn cần <a href="https://developer.mozilla.org/en-US/docs/Learn/Upload_files_to_a_web_server">upload các file của bạn tới web server của mình</a>.</p>
+
+<h3 id="Giao_tiếp_thông_qua_HTTP">Giao tiếp thông qua HTTP</h3>
+
+<p>Thứ hai, một web server hỗ trợ HTTP (Giao thức truyền phát siêu văn bản - Hypertext Transfer Protocol). Như tên gọi, HTTP là cách truyền các siêu văn bản - hypertext (ví dụ: các tài liệu web) giữa hai máy tính.</p>
+
+<p><em>Một giao thức</em> là một tập hợp các quy tắc để kết nối giữa hai máy tính. HTTP là một giao thức textual, stateless.</p>
+
+<dl>
+ <dt>Textual</dt>
+ <dd>Tất cả các lệnh là văn bản thuần túy (plain-text) và con người có thể đọc được.</dd>
+ <dt>Stateless</dt>
+ <dd>Cả server và client không nhớ kết nối trước đó. Ví dụ, nếu chỉ có HTTP, một server không thể nhớ mật khẩu bạn đã nhập hoặc bước nào bạn đã làm trong một giao dịch. Bạn cần một application server cho những nhiệm vụ như vậy. (Chúng tôi sẽ đề cập đến công nghệ này trong một bài viết khác).</dd>
+</dl>
+
+<p>HTTP cung cấp các quy tắc rõ ràng, về cách một client và server giao tiếp với nhau. Chúng ta sẽ nói về bản thân HTTP trong <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">một bài viết khác</a>. Bây giờ, bạn chỉ cần biết những thứ này:</p>
+
+<ul>
+ <li>Chỉ client có thể tạo các HTTP request tới các server. Các server chỉ có thể đáp trả HTTP request của client.</li>
+ <li>Khi yêu cầu một file thông qua HTTP, client phải cung cấp URL của file.</li>
+ <li>Web server phải trả lời mọi HTTP request, ít nhất với một thông điệp lỗi (error message).</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>Trên một web server, HTTP server chịu trách nhiệm xử lý và trả lời các request đến.</p>
+
+<ol>
+ <li>Khi nhận một request, một HTTP server sẽ kiểm tra xem URL được yêu cầu có khớp với một file hiện có không.</li>
+ <li>Nếu có, web server gửi nội dung file trả lại trình duyệt. Nếu không, một application server sẽ tạo ra file cần thiết.</li>
+ <li>Nếu không thể xử lý, web server trả lại một thông điệp lỗi cho trình duyệt, phổ biến nhất là "404 Not Found". (Đó là lỗi phổ biến, cái mà nhiều nhà thiết kế web dành khá nhiều thời gian để thiết kế <a href="http://www.404notfound.fr/">404 error page</a>).</li>
+</ol>
+
+<h3 id="Nội_dung_static_vs_dynamic">Nội dung static vs dynamic</h3>
+
+<p>Nói chung, một server có thể phục vụ cả nội dung static hoặc dynamic. "Static" có nghĩa là "được phục vụ nguyên vẹn" (served as-is). Các static website là dễ dàng nhất để thiết lập, vì thế chúng tôi gợi ý bạn tạo một static site trước tiên.</p>
+
+<p>"Dynamic" có nghĩa là server xử lý nội dung hoặc thậm chí tạo ra chúng với dữ liệu từ database. Giải pháp này linh hoạt hơn, nhưng stack kỹ thuật trở lên khó khăn hơn để xử lý, làm cho việc xây dựng website trở lên phức tạp hơn.</p>
+
+<p>Lấy ví dụ trang web bạn đang đọc hiện nay. Một web server lưu trữ (hosting) nó, có một application server lấy nội dung bài viết từ một database, định dạng nó, đẩy nó vào trong HTTP template, và gửi kết quả cho bạn. Trong trường hợp này, application server được gọi là <a href="/en-US/docs/MDN/Kuma">Kuma</a> và được xây dựng với <a href="https://www.python.org/">Python</a> (sử dụng framework <a href="https://www.djangoproject.com/">Django</a>). Mozilla team xây dựng Kuma cho nhu cầu riêng của MDN, nhưng nhiều ứng dụng tương tự được xây dựng trên nhiều công nghệ khác.</p>
+
+<p>Có rất nhiều application server và thật khó để gợi ý cụ thể. Một vài application server phục vụ các loại website cụ thể như: blogs, wikis, hay e-shop, ... được gọi là CMSs (các hệ quản trị nội dung - content management systems). Nếu bạn đang xây dựng một dynamic website, dành thời gian chọn một công cụ phù hợp với nhu cầu của bạn. Trừ khi bạn muốn học cách lập trình web server (một điều rất thú vị), bạn không cần tạo ra một application server của riêng mình. Điều đó chỉ là phát minh lại bánh xe.</p>
+
+<h2 id="Bước_tiếp_theo">Bước tiếp theo</h2>
+
+<p>Bây giờ khi đã quen thuộc với web server, bạn có thể</p>
+
+<ul>
+ <li>đọc <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_much_does_it_cost">bao nhiêu chi phí để làm điều gì đó trên web</a></li>
+ <li>học nhiều hơn về <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_software_do_I_need">các phần mềm bạn cần để tạo một website</a></li>
+ <li>làm một vài thứ thực tế như <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">làm thế nào để upload các file tới một web server</a>.</li>
+</ul>
diff --git a/files/vi/learn/css/building_blocks/index.html b/files/vi/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..46a3177fd8
--- /dev/null
+++ b/files/vi/learn/css/building_blocks/index.html
@@ -0,0 +1,99 @@
+---
+title: CSS building blocks
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p>
+
+<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
+
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should have:</p>
+
+<ol>
+ <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li>
+ <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt>
+ <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt>
+ <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt>
+ <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt>
+ <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt>
+ <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt>
+ <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide, you will learn what it is and how to manage it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt>
+ <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt>
+ <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt>
+ <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt>
+ <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt>
+ <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt>
+ <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article, we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt>
+ <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt>
+ <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt>
+ <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt>
+ <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd>
+</dl>
diff --git a/files/vi/learn/css/building_blocks/the_box_model/index.html b/files/vi/learn/css/building_blocks/the_box_model/index.html
new file mode 100644
index 0000000000..d0ce29ae05
--- /dev/null
+++ b/files/vi/learn/css/building_blocks/the_box_model/index.html
@@ -0,0 +1,358 @@
+---
+title: Box model trong CSS
+slug: Learn/CSS/Building_blocks/The_box_model
+tags:
+  - CSS
+  - Cơ Bản
+  - Người mới
+  - border
+  - box model
+  - display
+  - margin
+  - padding
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Tất cả element trong CSS đều có một cái hộp (box) bọc lấy nó, và việc hiểu cách vận hành của những chiếc hộp này là chìa khóa giúp bạn xây dựng layout với CSS, hoặc sắp xếp các nội dung trên trang web theo đúng vị trí mong muốn. Trong bài học lần này, hãy cùng tìm hiểu rõ hơn về CSS <em>Box Model</em>, qua đó giúp bạn thật sự hiểu nó hoạt động thế nào và có thể tự tin dựng nên những layout phức tạp một cách đúng đắn. Ngoài ra bạn cũng sẽ hiểu được các thuật ngữ có liên quan.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu cầu kiến thức:</th>
+   <td>
+    <p>Hiểu biết cơ bản về máy tính, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">cơ bản về cài đặt phần mềm</a>, kiến thức cơ bản về <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với file</a>, kiến thức cơ bản về HTML (tham khảo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a>) và ý tưởng về cách CSS hoạt động (tham khảo <a href="/en-US/docs/Learn/CSS/First_steps">các bước đầu tiên để học CSS</a>.)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>
+    <p>Học về Box Model (mô hình hộp) trong CSS, điều gì tạo nên nó và làm cách nào để chuyển đổi sang các mô hình thay thế khác.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Khối_block_và_khối_cùng_hàng_inline">Khối (block) và khối cùng hàng (inline)</h2>
+
+<p>Trong CSS, thông thường chúng ta có 2 loại box — box dạng khối (<strong>block</strong>) và box dạng khối cùng hàng (<strong>inline boxes</strong>). (TN: chúng ta nên hiểu và ghi nhớ thuật ngữ tiếng Anh, thay vì cố gắng dịch sang tiếng Việt). 2 loại (tính chất của box) này liên quan đến cách các box được sắp xếp trên trang (page flow) và mối liên hệ giữa các box với nhau:</p>
+
+<p>Nếu một box được định nghĩa là một <strong>block</strong>,<strong> </strong>thì nó sẽ có các tính chất sau:</p>
+
+<ul>
+ <li>Box này sẽ rớt xuống một dòng mới trên trang.</li>
+ <li>Box này sẽ giãn rộng trên dòng mà nó đang đứng (inline direction) để lấp đầy khoảng trống nhiều nhất có thể của box cha đang chứa nó. Trong hầu hết trường hợp, điều này có nghĩa là nó sẽ giãn rộng bằng với box chứa nó, chiếm trọn 100% khoảng trống sẵn có.</li>
+ <li>Các thuộc tính {{cssxref("width")}} và {{cssxref("height")}} vẫn được tôn trọng để thay đổi chiều rộng và cao của box.</li>
+ <li>Padding, margin và border (nếu có) sẽ đẩy các elements khác ra xa.</li>
+</ul>
+
+<p>Các element như thẻ heading (ví dụ <code>&lt;h1&gt;</code>) và thẻ <code>&lt;p&gt;</code> đều mặc định có thuộc tính hiển thị bên ngoài (outer display type) là <code>block</code>, trừ phi chúng ta quyết định thay đổi nó sang <strong>inline</strong>.</p>
+
+<p>Nếu một box có thuộc tính hiển thị bên ngoài là <code>inline</code>, khi đó:</p>
+
+<ul>
+ <li>Box này sẽ không rớt xuống dòng mới trên trang.</li>
+ <li>Các thuộc tính {{cssxref("width")}} và {{cssxref("height")}} sẽ không có tác dụng.</li>
+ <li>Padding, margin, border ở hướng dọc (top và bottom) vẫn có tác dụng nhưng sẽ không làm đẩy các inline box khác ra xa khỏi nó.</li>
+ <li>Padding, margin, border ở hướng ngang (left và right) vẫn có tác dụng và vẫn sẽ đẩy các inline box khác ra xa khỏi nó.</li>
+</ul>
+
+<p>Thẻ <code>&lt;a&gt;</code> (dùng để tạo hyperlink), thẻ <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> và <code>&lt;strong&gt;</code> là những ví dụ về các element có thuộc tính hiển thị mặc định là <code>inline</code>.</p>
+
+<p>Để khai báo loại hiển thị cho một element, chúng ta sử dụng thuộc tính {{cssxref("display")}} với các giá trị như <code>block</code> và <code>inline</code>, và các giá trị này là giá trị hiển thị bên ngoài (<strong>outer</strong>) của thuộc tính <code>display</code>.</p>
+
+<h2 id="Các_loại_hiển_thị_bên_trong_và_bên_ngoài_inner_và_outer">Các loại hiển thị bên trong và bên ngoài (inner và outer)</h2>
+
+<p>Đến đây thì chúng ta nên tìm hiểu thêm về loại hiển thị <strong>inner</strong> và <strong>outer</strong> là gì. Như đã đề cập ở trên, box trong CSS có tồn tại loại hiển thị phía ngoài (<em>outer</em>) là block hay inline.</p>
+
+<p>Box còn có cả loại hiển thị phía trong (<em>inner</em>), tuy nhiên nó không tác động lên chính box đó mà là những element con của nó. Mặc đinh, các element con của một box sẽ được layout theo cách mặc định (<strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">normal flow</a></strong>), có nghĩa là các element đó cũng sẽ được layout theo các quy tắc giống như các block và inline elements khác (đã trình bày ở trên).</p>
+
+<p>Tuy nhiên, chúng ta có thể thay đổi loại hiển thị inner bằng cách sử dụng các giá trị như <code>flex</code> cho thuộc tính <code>display</code>. Nếu chúng ta gán <code>display: flex;</code> lên một element, loại hiển thị bên ngoài của nó vẫn là <code>block</code>, nhưng loại hiển thị bên trong sẽ là <code>flex</code>. Khi đó, tất cả các element con trực tiếp của nó sẽ trở thành những <em>flex items</em> và sẽ được layout dựa trên các quy tắc của <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> sẽ được đề cập bên dưới.</p>
+
+<div class="blockIndicator note">
+<p><strong>Ghi chú</strong>: Để tìm hiểu thêm về các giá trị của thuộc tính display, và cách các block và inline box được layout, bạn có thể tham khảo bài hướng dẫn từ MDN <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p>
+</div>
+
+<p>Nếu bạn tiếp tục tìm hiểu sâu hơn về CSS Layout, bạn sẽ bắt gặp <code>flex</code>, và một số giá trị hiển thị bên trong (inner) khác, ví dụ như <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Tuy vậy, Block và inline layout là cách hiển thị mặc định trên web — như đã trình bày ở trên, thỉnh thoảng nó được gọi với thuật ngữ là <em>normal flow</em>, bởi vì nếu chúng ta không cố tình thay đổi cách hiển thị của các element, thì nó sẽ tự động được layout như là các block hoặc inline.</p>
+
+<h2 id="Ví_dụ_về_các_loại_display">Ví dụ về các loại display</h2>
+
+<p>Hãy cùng nhau xem qua các ví dụ sau. Trong ví dụ bên dưới, chúng ta có 3 element khác nhau, và cả 3 đều có loại hiển thị bên ngoài (outer) là <code>block</code>. Element đầu tiên là một paragraph (<code>&lt;p&gt;</code>) có đường kẻ border. Trình duyệt sẽ render nó như là một block, vì thế nó sẽ bắt đầu từ đầu dòng và giãn ra toàn bộ khoảng trống đang có.</p>
+
+<p>Element thứ 2 là một list (<code>&lt;ul&gt;</code>), được thay đổi thuộc tính hiển thị với <code>display: flex</code>. Điều này giúp tạo ra một flex layout cho các element bên trong nó, và bản thân nó (<code>&lt;ul&gt;</code>) vẫn là một block giống như paragraph ở trên, giãn ra toàn bộ khoảng trống của element cha, và tự rớt xuống một dòng mới.</p>
+
+<p>Cuối cùng, chúng ta có một paragraph với thuộc tính hiển thị là block, bên trong nó là 2 thẻ <code>&lt;span&gt;</code>. Thông thường thẻ span sẽ có thuộc tính hiển thị là inline, tuy nhiên do chúng ta đã thay đổi thuộc tính của thẻ span đầu tiên sang block bằng cách thêm class tên block và gán giá trị cho class là <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>Trong ví dụ tiếp theo, chúng ta có thể thấy các elements với thuộc tính hiển thị là <code>inline</code> sẽ được layout như thế nào. Các thẻ <code>&lt;span&gt;</code> ở paragraph đầu tiên đều mặc định là <code>inline</code> và không tự động rớt xuống dòng như block. </p>
+
+<p>Ngoài ra chúng ta còn có thẻ <code>&lt;ul&gt;</code> được gán thuộc tính hiển thị là <code>display: inline-flex</code>, tạo ra một box với thuộc tính hiển thị là inline và các element bên trong nó sẽ trở thành các <em>flex items</em>.</p>
+
+<p>Cuối cùng, chúng ta có 2 paragraphs đều được gán thuộc tính <code>display: inline</code>. Vì tất cả đều là inline, ta thấy thẻ <code>&lt;ul&gt;</code> phía trên (là một flex container) và các paragraphs đều được dàn đều trên một dòng, thay vì mỗi element sẽ tự rớt xuống dòng riêng như block.</p>
+
+<p><strong>Trong ví dụ bên dưới, bạn có thể tương tác trực tiếp vào source code và thay đổi các thuộc tính <code>display: inline</code> sang <code>display: block</code> hay <code>display: inline-flex</code> sang <code>display: flex</code> để chuyển qua lại các thuộc tính hiển thị khác nhau và xem so sánh sự khác biệt.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>Bạn sẽ được tìm hiểu thêm về flex layout trong các bài tiếp theo; có một điều quan trọng mà bạn cần ghi nhớ là thay đổi giá trị của thuộc tính <code>display</code> sẽ làm thay đổi thuộc tính hiển thị bên ngoài (outer display type) của box sang block hoặc inline, điều đó sẽ ảnh hưởng trực tiếp đến việc các elements sẽ được hiển thị và sắp xếp như thế nào trên trang.</p>
+
+<p>Trong các phần còn lại của bài học lần này, chúng ta sẽ tập trung trao đổi về thuộc tính hiển thị bên ngoài (outer display type).</p>
+
+<h2 id="CSS_box_model_là_gì">CSS box model là gì?</h2>
+
+<p>TN: "CSS Box model" thường được dịch là "mô hình khối trong CSS", nhưng cá nhân mình nghĩ chúng ta nên dùng thuật ngữ tiếng Anh cho chuẩn, nó sẽ giúp ích khi chúng ta đọc các tài liệu khác bằng tiếng Anh.</p>
+
+<p>Để thấy được một CSS box model hoàn chỉnh, thì chúng ta cần nhìn vào các box có thuộc tính hiển thị là block, vì các inline box chỉ sử dụng một vài tính chất được định nghĩa trong box model mà thôi. Box model định nghĩa cách các thuộc tính khác nhau của một box — margin, border, padding và content — tương tác với nhau như thế nào để tạo ra một box mà bạn thấy trên giao diện. Tuy vậy, box model cũng được chia ra thành box model chuẩn (standard) và box model thay thế (alternate).</p>
+
+<h3 id="Các_thành_phần_của_một_box">Các thành phần của một box</h3>
+
+<p>Để tạo nên một block box trong CSS, chúng ta có các thành phần như sau:</p>
+
+<ul>
+ <li><strong>Content box</strong>: Là vùng chứa content của bạn, kích thước vùng này có thể xác định qua các thuộc tính {{cssxref("width")}} và {{cssxref("height")}}.</li>
+ <li><strong>Padding box</strong>: Là vùng trống (white space) bọc lấy vùng content; kích thước của nó có thể được xác định bởi thuộc tính {{cssxref("padding")}} và các thuộc tính liên quan khác.</li>
+ <li><strong>Border box</strong>: Là vùng bọc bên ngoài vùng padding và content. Kích thước và style của nó có thể được xác định bởi thuộc tính {{cssxref("border")}} và các thuộc tính liên quan khác.</li>
+ <li><strong>Margin box</strong>: Là vùng trống (white space) ngoài cùng tất cả, bọc lấy vùng padding, border và content, nằm ngăn cách giữa các elements. Kích thước của nó có thể được xác định bởi thuộc tính {{cssxref("margin")}} và các thuộc tính liên quan khác.</li>
+</ul>
+
+<p>Hình bên dưới minh họa cho các vùng (tầng) như mô tả bên trên:</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="CSS_box_model_chuẩn_standard">CSS box model chuẩn (standard)</h3>
+
+<p>Trong box model chuẩn, nếu một box được gán các thuộc tính <code>width</code> và <code>height</code>, thì các thuộc tính này định nghĩa kích thước của <em>vùng content</em>. Nếu box được thêm padding và border, thì nó sẽ được cộng dồn vào kích thước của box đó và làm tăng tổng kích thước của box lên. Điều này được minh họa bởi hình bên dưới.</p>
+
+<p>Ví dụ chúng ta có một box được gán các thuộc tính CSS sau <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, và <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>Kích thước mà box này, tính theo box model chuẩn, là 410px (350 + 25 + 25 + 5 + 5), bởi vì padding và border được cộng dồn và chiều rộng của box.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Ghi chú</strong>: Vùng margin không được cộng vào kích thước thật của box — đương nhiên là nó có tác động đến tổng kích thước mà box sẽ chiếm trên trang, nhưng nó chỉ là vùng trống bên ngoài box mà thôi. Phạm vi của box dừng lại ở vị trí border và không tràn ra vùng margin.</p>
+</div>
+
+<h3 id="CSS_box_model_thay_thế">CSS box model thay thế</h3>
+
+<p>Có thể bạn sẽ nghĩ rằng thật là bất tiện khi phải cộng dồn cả padding và border để có được kích thước thực của box, và có lẽ bạn đã đúng! Cũng vì lý do đó, CSS đã giới thiệu một loại box model khác một thời gian sau khi box model chuẩn ra đời. Khi sử dụng model này, khi ta gán kích thước thông qua thuộc tính <code>width</code>, thì nó sẽ là kích thước thật của box hiển thị trên trang. Điều đó có nghĩa để biết kích thước của vùng content, ta sẽ phải lấy <code>width</code> trừ đi padding và border. Với mã CSS ở ví dụ trên khi áp dụng box model mới này, kết quả sẽ là (width = 350px, height = 150px)</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>Mặc định, trình duyện sẽ sử dụng box model chuẩn. Nếu bạn muốn chuyển sang box model thay thế như trên cho một element, bạn cần gắn dòng code sau <code>box-sizing: border-box</code>. Bằng cách này, bạn báo với trình duyệt rằng hãy lấy vùng border làm kích thước cho box mà bạn định nghĩa.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>Nếu bạn muốn sử dụng box model thay thế cho tất cả các element, thì có một cách thông dụng mà các developers sử dụng, là gán thuộc tính <code>box-sizing</code> lên thẻ <code>&lt;html&gt;</code>, bằng cách này tất cả các elements sẽ kế thừa giá trị này, như đoạn code bên dưới. Nếu bạn muốn tìm hiểu thêm về ý tưởng về nó, bạn có thể tham khảo <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">bài viết từ CSS Tricks về box-sizing</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Ghi chú</strong>: Lịch sử có một thông tin thú vị rằng — Internet Explorer từng mặc định sử dụng box model thay thế , tuy nhiên chúng ta lại không có cách nào để chuyển về box model chuẩn để sử dụng.</p>
+</div>
+
+<h2 id="Thực_hành_với_box_model">Thực hành với box model</h2>
+
+<p>Trong ví dụ bên dưới, bạn sẽ thấy 2 box. Cả hai đều có class là <code>.box</code> để được gán cùng <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> và <code>padding</code>.  Sự khác biệt duy nhất là chúng ta sẽ sử dụng box model thay thế cho box thứ 2.</p>
+
+<p><strong>Bài tập: Bạn có thể tìm cách thay đổi kích thước của box thứ 2 (bằng cách thay đổi CSS trong class <code>.alternate</code>) để kích thước của nó đúng bằng với box đầu tiên được không?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Ghi chú</strong>: Bạn có thể tham khảo lời giải cho bài tập trên tại <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">đây</a>.</p>
+</div>
+
+<h3 id="Sử_dụng_bộ_DevTools_của_trình_duyệt_để_xem_trực_quan_box_model">Sử dụng bộ DevTools của trình duyệt để xem trực quan box model</h3>
+
+<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Bộ devtools của trình duyệt</a> có thể giúp bạn hiểu nhanh hơn và hình dung dễ hơn về box model. Nếu bạn "inspect" một element với bộ devtools của Firefox, bạn sẽ thấy kích thước của element cùng với margin, padding và border. Đây là một cách tuyệt vời để kiểm tra chắc chắn rằng element của bạn có kích thước đúng như bạn mong muốn hay không.</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Margins_padding_và_borders">Margins, padding, và borders</h2>
+
+<p>Bạn đã thấy các thuộc tính {{cssxref("margin")}}, {{cssxref("padding")}}, và {{cssxref("border")}} hoạt động như thế nào trong các ví dụ trên. Các thuộc tính trên là các thuộc tính viết tắt (shorthand) giúp chúng ta định nghĩa nhanh cả 4 hướng của box chỉ với một dòng CSS. Các thuộc tính viết tắt này cũng có các thuộc tính cụ thể (viết dài hơn) tương ứng cho từng hướng nếu bạn muốn định nghĩa từng hướng riêng biệt.</p>
+
+<p>Hãy cùng tìm hiểu chi tiết các thuộc tính này:</p>
+
+<h3 id="Margin">Margin</h3>
+
+<p>Margin là một vùng trống vô hình (invisible) bao quanh box. Nó có nhiệm vụ đẩy các các elements khác ra xa box. Margin có thể nhận cả giá trị dương và âm. Nếu margin nhận giá trị âm ở một hướng nào đó, nó có thể tạo ra việc chồng (overlap) các thứ lên nhau trên trang. Dù cho bạn đang sử dụng box model chuẩn hay thay thế, thì margin luôn luôn được thêm vào sau khi kích thước hiển thị (visible) của box đã được tính toán xong.</p>
+
+<p>Chúng ta có thể tùy chỉnh tất cả các hướng (top, right, bottom, left) margin chỉ với một thuộc tính {{cssxref("margin")}}, hoặc từng hướng riêng biệt với các thuộc tính sau:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>Trong ví dụ bên dưới, bạn hãy thử thay đổi giá trị margin (cả âm lẫn dương) để xem cách các box được đẩy đi và thu lại như thế nào.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Sự_chồng_margin_margin_collapsing">Sự chồng margin (margin collapsing)</h4>
+
+<p>Để hiểu rõ hơn về margin, có một khái niệm quan trọng (key) mà bạn cần hiểu là sự chồng margin (margin collapsing). Nếu bạn có 2 element mà margin của nó đụng nhau, và giá trị của nó đều dương, thì margin của chúng sẽ được gộp làm một và lấy giá trị lớn nhất (trong 2). Nếu 1 trong 2 margin có giá trị âm, thì margin gộp sẽ trừ đi phần âm đó.</p>
+
+<p>Trong ví dụ bên dưới, chúng ta có 2 paragraphs. Paragraph ở trên có <code>margin-bottom</code> là 50px. Paragraph thứ 2 có <code>margin-top</code> là 30px. Chúng bị chồng lên nhau và khoảng trống (margin) thực sự giữa 2 box là 50px chứ không phải tổng của cả hai.</p>
+
+<p><strong>Bạn có thể thử kiểm chứng bằng cách giảm <code>margin-top</code> của paragraph thứ 2 về 0 (từ 30px về 0). Vùng margin giữa 2 paragraphs vẫn không thay đổi và vẫn là 50px (là <code>margin-bottom</code> của paragraph đầu tiên). Nếu bạn giảm tiếp thành giá trị âm (ví dụ -10px), bạn sẽ thấy margin cuối cùng sẽ là 40px (= 50px - 10px).</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>Có nhiều quy tắc (rule) định nghĩa việc margin có được chồng (collapse) hay không. Tham khảo bài viết chi tiết về <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">sự chồng margin</a>. Điều quan trọng cần ghi nhớ là việc chồng margin vẫn đang diễn ra như một điều bình thường, vì vậy nếu khi layout với margin nhưng bạn không nhận được kết quả (khoảng cách giữa các element) như mong muốn, thì có thể bạn đã gặp phải việc chồng margin.</p>
+
+<h3 id="Borders">Borders</h3>
+
+<p>Border được vẽ ở giữa vùng margin và padding của box. Nếu bạn sử dụng box model chuẩn, kích thước của border sẽ được cộng dồn vào chiều rộng (<code>width</code>) và chiều cao (<code>height</code>) của box. Nếu bạn sử dụng box model thay thế, thì border sẽ không làm thay đổi kích thước của box mà sẽ làm giảm vùng content (content box) lại.</p>
+
+<p>Để tùy chỉnh thiết kế (style) cho border, có rất nhiều thuộc tính giúp bạn làm điều đó — border có 4 hướng, và mỗi hướng có một kiểu (style), độ dày (width), và màu sắc (color) khác nhau.</p>
+
+<p>Bạn có thể sử dụng thuộc tính viết tắt (shorthand) {{cssxref("border")}} để xác định width, style và color cho cả 4 hướng.</p>
+
+<p>Để tùy chỉnh thông tin border một cách độc lập cho từng hướng, bạn có thể sử dụng:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>Để tùy chỉnh width, style, và color của 4 hướng, bạn có thể sử dụng:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>Để tùy chỉnh width, style, và color cho từng hướng riêng biệt, bạn có thể sử dụng các thuộc tính sau:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>Ở ví dụ bên dưới, chúng ta sử dụng nhiều loại thuộc tính khác nhau để tạo border. Bạn hãy thử chỉnh sửa theo ý của bạn để hiểu hơn về border và cách hoạt động của chúng.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Padding">Padding</h3>
+
+<p>Padding là vùng nằm giữa border và content. Không giống như margin, padding không nhận giá trị âm, giá trị hợp lệ là từ 0 trở lên. Nếu element có background, thì nó nó sẽ tràn ra cả vùng padding (nằm dưới padding). Thông thường mục đích sử dụng của padding là để tạo khoảng cách giữa content và border.</p>
+
+<p>Chúng ta có thể tùy chỉnh padding lên các hướng của element thông qua thuộc tính viết tắt {{cssxref("padding")}}, hoặc từng hướng riêng biệt thông qua các thuộc tính cụ thể:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>Nếu bạn thử thay đổi giá trị padding của class <code>.box</code> ở ví dụ bên dưới, bạn sẽ thấy cách mà đoạn text thay đổi vị trí tương ứng với box.</strong></p>
+
+<p><strong>Bạn cũng có thể thay đổi giá trị padding trên class <code>.container</code>, điều này sẽ giúp tạo ra vùng trống giữa container và box. Padding có thể được tùy chỉnh ở bất kì element nào, và nó sẽ giúp tạo khoảng giống giữa border của nó và bất kì content gì bên trong nó.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="Box_model_và_các_khối_cùng_hàng_inline_boxes">Box model và các khối cùng hàng (inline boxes)</h2>
+
+<p>Tất cả các lý thuyết (thuộc tính) trên đều được áp dụng được cho các box dạng khối (block). Tuy nhiên chỉ một số thuộc tính ấy áp dụng được cho các khối cùng hàng (inline box), ví dụ như các element được tạo với thẻ <code>&lt;span&gt;</code>.</p>
+
+<p>Trong ví dụ bên dưới, chúng ta có một thẻ <code>&lt;span&gt;</code> bên trong một paragraph và có các thuộc tính <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, và <code>padding</code>. Bạn có thể thấy thuộc tính width và height không có tác dụng. Ngoài ra, margin, padding và border dọc (top và bottom) vẫn được tính nhưng chúng không làm thay đổi mối liên hệ với các element xung quanh, vì thế padding và border sẽ đè (overlap) lên các kí tự khác trong đoạn paragraph. Padding, margin và border ngang (left và right) cũng được tính và sẽ đẩy các content xung quanh ra xa nó.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="Sử_dụng_display_inline-block">Sử dụng display: inline-block</h2>
+
+<p>Có một giá trị đặc biệt của thuộc tính <code>display</code>, giúp tạo ra một loại box vừa có tính chất của <code>inline</code>, vừa có tính chất của <code>block</code>. Điều này đặc biệt hữu ích khi bạn không muốn item bị rớt xuống dòng mới (tính chất của block), nhưng vẫn muốn giữ các thuộc tính như <code>width</code> và <code>height</code>, và tránh trường hợp bị đè padding và border dọc như ví dụ trên.</p>
+
+<p>Element với thuộc tính <code>display: inline-block</code> sẽ có một vài thuộc tính của block như sau:</p>
+
+<ul>
+ <li>Thuộc tính <code>width</code> và <code>height</code> sẽ được tôn trọng và áp dụng.</li>
+ <li><code>padding</code>, <code>margin</code>, và <code>border</code> sẽ đẩy các element xung quanh ra xa box.</li>
+</ul>
+
+<p>Tuy nhiên nó sẽ không làm box rớt xuống dòng mới, mà chỉ trở nên lớn hơn so với content thực của nó nếu bạn gán cho nó các thuộc tính <code>width</code> và <code>height</code>.</p>
+
+<p><strong>Trong ví dụ tiếp theo, chúng ta gán giá trị <code>display: inline-block</code> cho thẻ <code>&lt;span&gt;</code>. Bạn hãy thử đổi thành <code>display: block</code> hoặc đơn giản là xóa dòng code trên để so sánh sự khác biệt giữa các chế display.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Một ứng dụng khác là khi bạn muốn một đường link có vùng click (hit area) rộng hơn để user dễ dàng click vào nó, thì bạn có thể thêm <code>padding</code>. Tuy nhiên vì thẻ <code>&lt;a&gt;</code> có loại hiển thị là inline giống như thẻ <code>&lt;span&gt;</code>, bạn có thể gán cho nó giá trị <code>display: inline-block</code> để cho phép padding được mở rộng hoàn toàn.</p>
+
+<p>Bạn sẽ thấy điều này được ứng dụng khá thường xuyên ở các thanh điều hướng (navigation bars). Trong ví dụ bên dưới, các thẻ <code>&lt;a&gt;</code> được dàn hàng ngang (sử dụng flexbox) và được thêm padding. Chúng ta muốn thẻ <code>&lt;a&gt;</code> thay đổi màu nền <code>background-color</code> khi hover lên chúng. Tuy nhiên padding có vẻ như nằm đè lên border của thẻ <code>&lt;ul&gt;</code>. Điều là xảy ra bởi vì thẻ <code>&lt;a&gt;</code> là có loại hiển thị là inline.</p>
+
+<p><strong>Bằng cách thêm giá trị <code>display: inline-block</code> vào <code>.links-list a</code>, bạn sẽ thấy cách lỗi được sửa bằng cách tôn trọng các padding của các thẻ <code>&lt;a&gt;</code>.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Kiểm_tra_khả_năng_của_bạn!">Kiểm tra khả năng của bạn!</h2>
+
+<p>Chúng ta đã đi qua rất nhiều khái niệm trong bài viết này, liệu bạn có thể nhớ tất cả các phần kiến thức quan trọng chưa? Bạn có thể thử một số bài kiểm tra sau để đảm bảo bạn sẽ ghi nhớ tốt các kiến thức quan trọng trước khi đi tiếp — <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Kiểm tra khả năng của bạn: The Box Model</a>.</p>
+
+<h2 id="Kết_luận">Kết luận</h2>
+
+<p>Đó là hầu hết những kiến thức mà bạn cần hiểu về box model. Bạn có thể quay lại bài viết này để tham khảo nếu bạn có cảm giác bối rối về kích thước của các box của mình khi layout.</p>
+
+<p>Trong bài học tiếp theo, chúng ta sẽ cùng tìm hiểu về <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">background và border</a> để giúp trang trí box của bạn được lung linh và thú vị hơn.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Các_bài_viết_cùng_module">Các bài viết cùng module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/vi/learn/css/first_steps/index.html b/files/vi/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..47c45f1921
--- /dev/null
+++ b/files/vi/learn/css/first_steps/index.html
@@ -0,0 +1,54 @@
+---
+title: CSS first steps
+slug: Learn/CSS/First_steps
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets) được dùng để tạo hiểu, bố cục và định dạng hiển thị các trang web — ví dụ như, thay đổi phông chữ, màu sắc, kích thước, và khoảng trống trong nội dung, chia nọi dung thành nhiều cột, hoặc là thêm các hiệu ứng trang trí khác. Modulr này cung cấp cho bạn một khởi đầu nhẹ nhàng trên con đường làm chủ CSS với những điều cơ bản về cách hoạt động , cú pháp trông như thế nào và làm cách nào để bắt đầu sử dụng nó thêm kiểu vào HTML.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Hướng_tới_trở_thành_một_front-end_web_developer">Hướng tới trở thành một front-end web developer?</h3>
+
+<p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết mà bạn cần để hướng tới mục tiêu đặt ra.</p>
+
+<p>Bắt đầu thôi</p>
+</div>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu module này, bạn cần phải biết:</p>
+
+<ol>
+ <li>Quen cơ bản với việc sử dụng máy tính và sử dụng các trang web một cách thụ động (ví dụ như nhìn và thu thập nội dung)</li>
+ <li> Cài đặt môi trường làm việc cơ bản như đã giơi thiệu tại <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, và hiểu cách tọa và quản lý các file, như đã đề cập tại <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Hiểu biết cơ bản về HTML, như đã thảo luận tại <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+</ol>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Nếu bạn làm việc trên PC/máy tính bảng/các thiết bị khác mà bạn không có khả năng để khởi tạo các file của riêng mình, bạn có thể thử hầu hết các ví dụ trên một số các chương trình học lập trình online như <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<p>Mô-dun này bào gốm các bài viết sau đây, sẽ đưa bạn đi qua tất cả nhứng lý thuyết cơ bản của CSS, và cũng cấp cho bạn nhiều cơ hội để kiểm tra khả năng của mình.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS là gì?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) cho phép bạn tọa ra được các trang web đẹp, nhưng cách nó hoặt động như thế nào? Bài viết này giải thích CSS là gì với một ví dụ cú pháp đơn giản, và cũng bao gồm một số thuật ngữ chính về ngôn ngữ này.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Bắt đầu với CSS</a></dt>
+ <dd>Trong bài viết này chúng ta sẽ sử dụng một tài liệu HTML đơn giản và áp dụng CSS vào nó, đồng thời tìm hiểu một số điều thực tế về ngôn ngữ này.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS có cấu trúc như thế nào</a></dt>
+ <dd>Lúc này bạn đã những hiểu biết cơ bản về CSS và cách sử dụng nó, đã đến lúc để  xem xét sâu hơn một chút về cấu trúc của ngôn ngữ này. Chúng tôi thảo luận nhiều khái niệm ở đây, bạn có thể quay lại phần này để tóm tắt nếu nếu bạn gặp phải bất kỳ khái niệm nào khó hiểu sau này.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS làm việc như thế nào</a></dt>
+ <dd>Chúng ta đã học được những điều cơ bản về CSS, nó là gì và làm cách nào để tạo một bảng định dạng cơ bản. Trong bài học này chúng ta sẽ xem xét cách một trình duyệt sử dụng CSS và HTML và biến nớ thành một trang web.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Sử dụng kiến thức mới của bạn</a></dt>
+ <dd>Với những thứ bạn đã học trong những bài học vừa qua bạn có thể thấy rằng mình có thể định dạng các văn bản đơn giản bằng cách sử dụng CSS, để thêm phong cách riêng của bạn vào chúng. Bài viết này cũng cấp cho bạn một cơ hội để làm điều đó.</dd>
+</dl>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Kiến thức Web trung cấp 1: Giới thiệu CSS</a></dt>
+ <dd>Một khóa học nền tảng tuyệt vời của Mozilla giúp khám phá và kiểm tra rất nhiều kỹ năng được nói đến trong mô đun giới thiệu về CSS. Tìm hiểu về tạo kiểu cho các phần tử HTML trên một trang web, bộ chọn CSS, các thuộc tính và giá trị.</dd>
+</dl>
diff --git a/files/vi/learn/css/index.html b/files/vi/learn/css/index.html
new file mode 100644
index 0000000000..3b3424781a
--- /dev/null
+++ b/files/vi/learn/css/index.html
@@ -0,0 +1,67 @@
+---
+title: Learn to style HTML using CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Style
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets - hoặc {{glossary ("CSS")}} - là công nghệ đầu tiên bạn nên bắt đầu học sau {{glossary ("HTML")}}. Trong khi HTML được sử dụng để xác định cấu trúc và ngữ nghĩa của nội dung của bạn, CSS được sử dụng để tạo kiểu. Ví dụ: bạn có thể sử dụng CSS để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, chia thành nhiều cột hoặc thêm hoạt ảnh và các tính năng trang trí khác.</p>
+
+<h2 id="Con_đường_học_tập">Con đường học tập</h2>
+
+<p>Bạn thực sự nên tìm hiểu những điều cơ bản về HTML trước khi thử bất kỳ CSS nào. Chúng tôi khuyên bạn nên tìm hiểu thông qua phần <a href="https://developer.mozilla.org/vi/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a> của chúng tôi trước tiên - sau đó bạn có thể tìm hiểu về:</p>
+
+<ul>
+ <li>CSS, bắt đầu với module <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li>
+ <li>Module nâng cao hơn <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> và cách sử dụng nó để thêm chức năng động cho trang web</li>
+</ul>
+
+<p>Một khi bạn đã hiểu những nguyên tắc cơ bản của HTML,chúng tôi đề xuất bạn có thể học HTML và CSS cùng lúc, chuyển qua lại giữa 2 đề tài . Đó là vì việc học HTML sẽ trở nên thú vị hơn nếu bạn áp dụng các CSS vào HTML, và bạn cũng không thể học CSS mà không biết HTML.</p>
+
+<p>Trước khi bắt đầu bài học này, bạn cũng nên làm quen với việc sử dụng máy tính và sử dụng web. Bạn nên thiết đặt môi trường làm việc cơn bản được mô tả chi tiết trong<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> Cài đặt những phần mềm cơ bản</a>, và hiểu cách tạo, quản lý tập tin <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Thao tác với các tập tin</a> — cả hai đều là những phần của module <a href="/en-US/docs/Learn/Getting_started_with_the_web">Bắt đầu với web</a> cho người mới bắt đầu.</p>
+
+<p>Chúng tôi đề xuất bạn nên tìm hiểu thông qua <a href="/en-US/docs/Learn/Getting_started_with_the_web">Bắt đầu với web</a> trước khi tiếp tục với chủ đề này, tuy nhiên, nó cũng không hoàn toàn cần thiết vì phần lớn những gì có trong <a href="/vi/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS cơ bản</a> cũng được nhắc tới trong module <a href="/vi/docs/Learn/CSS/First_steps">CSS first steps</a>, ở mức chi tiết hơn.</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 selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>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 other features, and fancy features such as drop shadows and filters on boxes.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new, fangled layout tools like flexbox.</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 webpage.</p>
+
+<p>From the beginning, the things you'll do most are to 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/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html b/files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html
new file mode 100644
index 0000000000..ca0f73fbc1
--- /dev/null
+++ b/files/vi/learn/dong_gop_cho_khu_vuc_hoc_tap_tren_mdn/index.html
@@ -0,0 +1,83 @@
+---
+title: Cách đóng góp cho Khu vực học tập trên MDN
+slug: Learn/Dong_gop_cho_khu_vuc_hoc_tap_tren_MDN
+translation_of: Learn/How_to_contribute
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Nếu bạn đang ở đây lần đầu tiên hoặc sau khi tìm kiếm sâu, có thể là vì bạn quan tâm đến việc đóng góp cho Khu vực học tập MDN. Tin tốt đấy!</p>
+
+<p><span class="seoSummary">Trên trang này, bạn sẽ tìm thấy mọi thứ bạn cần để bắt đầu giúp cải thiện nội dung học tập của MDN. Có rất nhiều thứ bạn có thể làm, tùy thuộc vào bạn có bao nhiêu thời gian và bạn là <a href="https://developer.mozilla.org/vi/Learn/How_to_contribute#I'm_a_beginner">người mới bắt đầu</a>, <a href="https://developer.mozilla.org/vi/Learn/How_to_contribute#I'm_a_web_developer">nhà phát triển web</a> hoặc <a href="https://developer.mozilla.org/vi/Learn/How_to_contribute#I'm_a_teacher">giáo viên</a>.</span></p>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Bạn có thể tìm thấy hướng dẫn để viết bài viết về khu vực học tập mới tại <a href="https://developer.mozilla.org/vi/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Cách viết bài viết để giúp mọi người tìm hiểu về Web</a>.</p>
+</div>
+
+<h2 id="Tìm_các_tác_vụ_cụ_thể">Tìm các tác vụ cụ thể</h2>
+
+<p><strong>A common way that people contribute to the Learning Area is to read the articles, fix typos, and suggest improvements. We also welcome you to add examples to our <a href="https://github.com/mdn/learning-area/">GitHub repo</a>, and get in touch with us if you want to ask what else needs to be done.</strong></p>
+
+<p>Contributing is a great way to have some fun while learning new stuff. If you ever feel lost or have questions, don't hesitate to reach us on the <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (see at the bottom of this page for details). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> is the topic driver for the Learning Area — you could also try pinging him directly.</p>
+
+<p>The following sections provide some general ideas of the types of tasks you can do.</p>
+
+<h2 id="I'm_a_beginner">I'm a beginner</h2>
+
+<p>That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.</p>
+
+<p>Here are some suggested ways you can contribute:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Add tags to our articles</a> (<em>5 min</em>)</dt>
+ <dd>Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">glossary entries</a> and <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">learning articles</a> without any tags to get started.</dd>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt>
+ <dd>As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, at least tell us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt>
+ <dd>This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.</dd>
+</dl>
+
+<h2 id="I'm_a_web_developer">I'm a web developer</h2>
+
+<p>Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's more important to be understandable than to be overly precise.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt>
+ <dd>As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt>
+ <dd>Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and you're good to go.</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours or more</em>)</dt>
+ <dd>MDN is lacking simple straightforward articles about using web technologies (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, code samples or interactive learning tools</a> (<em>? hours</em>)</dt>
+ <dd>All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with <a href="http://jsfiddle.net" rel="external">JSFiddle</a> or similar, to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd>
+</dl>
+
+<h2 id="I'm_a_teacher">I'm a teacher</h2>
+
+<p>MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>15 min</em>)</dt>
+ <dd>Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>1 hour</em>)</dt>
+ <dd>Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and go for it.</dd>
+ <dt><a href="/en-US/docs/tag/needsSchema">Add illustrations and/or schematics to articles</a> (<em>1 hour</em>)</dt>
+ <dd>As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the <a href="/en-US/docs/tag/needsSchema">articles that lack illustrative content</a> and pick one you'd like to create graphics for.</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours</em>)</dt>
+ <dd>We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, <abbr title="Multiple Choice Tests">quizzes</abbr> or interactive learning tools</a> (<em>? hours</em>)</dt>
+ <dd>All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article.  There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Create learning pathways</a> (<em>? hours</em>)</dt>
+ <dd>In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing to create a learning article to write.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li>
+</ul>
diff --git a/files/vi/learn/front-end_web_developer/index.html b/files/vi/learn/front-end_web_developer/index.html
new file mode 100644
index 0000000000..fa93509b00
--- /dev/null
+++ b/files/vi/learn/front-end_web_developer/index.html
@@ -0,0 +1,189 @@
+---
+title: Front-end web developer
+slug: Learn/Front-end_web_developer
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>Chào mừng bạn đến với lộ trình học tập dành cho nhà phát triển web front-end của chúng tôi!</p>
+
+<p>Tại đây, chúng tôi cung cấp cho bạn một khóa học có cấu trúc sẽ dạy cho bạn tất cả những gì bạn cần biết để trở thành một nhà phát triển web front-end. Chỉ cần làm việc qua từng phần, học các kỹ năng mới (hoặc cải thiện những kỹ năng hiện có) khi bạn tiếp tục. Mỗi phần bao gồm các bài tập và bài đánh giá để kiểm tra sự hiểu biết của bạn trước khi bạn tiếp tục.</p>
+
+<h2 id="Các_chủ_đề_sẽ_học">Các chủ đề sẽ học</h2>
+
+<p>Chúng ta sẽ học qua các chủ đề:</p>
+
+<ul>
+ <li>Cài đặt đơn giản và làm thế nào để học tốt hơn</li>
+ <li>Các tiêu chuẩn web và các phương pháp thực hiện tốt nhất (chảng hạn như khả năng truy cập và khả năng tương thích trên nhiều trình duyệt)</li>
+ <li>HTML, ngôn ngữ cung cấp cấu trúc và ý nghĩa cho nội dung trang web</li>
+ <li>CSS, ngôn ngữ được sử dụng để trang trí cho trang web</li>
+ <li>JavaScript, ngôn ngữ kịch bản được sử dụng để tạo chức năng động trên trang web</li>
+ <li>Các công cụ để phát triển web phía máy khách (client-side) hiện đại.</li>
+</ul>
+
+<p>Bạn có thể học theo thứ tự các Phần theo thứ tự hoặc bạn có thể bỏ qua các phần đã biết để học phần khác. Ví dụ nếu bạn đã biết HTML thì có thể bỏ qua và chuyển đến phần CSS.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Bạn không cần bất kỳ kiến thức nào trước đó để bắt đầu khóa học này. Tất cả những gì bạn cần là một máy tính có thể chạy các trình duyệt web hiện đại, kết nối internet và sẵn sàng học hỏi.</p>
+
+<p>Nếu bạn không chắc liệu phát triển web front-end có dành cho bạn hay không hoặc bạn muốn được giới thiệu cơ bản trước khi bắt đầu một khóa học dài và đầy đủ hơn, hãy xem qua <a href="/vi/docs/Learn/Getting_started_with_the_web">Bắt đầu với trang web</a> của chúng tôi trước.</p>
+
+<h2 id="Tìm_kiếm_sự_giúp_đỡ">Tìm kiếm sự giúp đỡ</h2>
+
+<p>Chúng tôi đã cố gắng làm cho việc học phát triển web front-end trở nên dễ dàng nhất có thể, nhưng bạn có thể vẫn gặp khó khăn vì bạn không hiểu điều gì đó hoặc một số mã (code) không hoạt động.</p>
+
+<p>Đừng hoảng sợ. Tất cả chúng ta đều gặp khó khăn, cho dù chúng ta là nhà phát triển web mới bắt đầu hay chuyên nghiệp. Bài viết <a href="/vi/docs/Learn/Learning_and_getting_help">Tìm hiểu và nhận trợ giúp</a> cung cấp cho bạn một loạt mẹo để tra cứu thông tin và tự giúp mình. Nếu bạn vẫn còn vướng mắc, hãy đăng câu hỏi trên <a href="https://discourse.mozilla.org/c/mdn/learn/">diễn đàn Discourse</a> của chúng tôi.</p>
+
+<p>Giờ thì bắt đầu và chúc may mắn!</p>
+
+<h2 id="Lộ_trình_học">Lộ trình học</h2>
+
+<h3 id="Cùng_bắt_đầu">Cùng bắt đầu</h3>
+
+<p>Thời gian hoàn thành: 1.5 - 2 giờ</p>
+
+<h4 id="Yêu_cầu">Yêu cầu</h4>
+
+<p>Trình độ tin học cơ bản.</p>
+
+<h4 id="Làm_sao_để_biết_Tôi_đã_sẵn_sàng_để_tiếp_tục">Làm sao để biết Tôi đã sẵn sàng để tiếp tục?</h4>
+
+<p>Không có đánh giá nào trong phần này của khóa học. Nhưng hãy chắc chắn rằng bạn không bỏ qua. Điều quan trọng là bạn phải thiết lập và sẵn sàng thực hiện các bài tập sau này trong khóa học.</p>
+
+<h4 id="Hướng_dẫn">Hướng dẫn</h4>
+
+<ul>
+ <li><a href="/vi/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Cài đặt phần mềm đơn giản</a> — cài đặt công cụ đơn giản (đọc 15 phút)</li>
+ <li><a href="/vi/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Nền tảng và các tiêu chuẩn web</a> (đọc 45 phút)</li>
+ <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Học hỏi và nhận trợ giúp</a> (đọc 45phút)</li>
+</ul>
+
+<h3 id="Ngữ_nghĩa_và_cấu_trúc_với_HTML">Ngữ nghĩa và cấu trúc với HTML</h3>
+
+<p>Thời gian hoàn thành: 35 - 50 giờ</p>
+
+<h4 id="Yêu_cầu_2">Yêu cầu</h4>
+
+<p>Không có gì ngoại trừ trình độ tin học cơ bản và môi trường phát triển web cơ bản.</p>
+
+<h4 id="Làm_sao_để_biết_Tôi_đã_sẵn_sàng_để_tiếp_tục_2">Làm sao để biết Tôi đã sẵn sàng để tiếp tục?</h4>
+
+<p>Các bài đánh giá trong mỗi học phần được thiết kế để kiểm tra kiến thức của bạn về chủ đề đó. Hoàn thành các bài đánh giá xác nhận rằng bạn đã sẵn sàng chuyển sang học phần tiếp theo.</p>
+
+<h4 id="Các_phần_học">Các phần học</h4>
+
+<ul>
+ <li><a href="/vi/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a> (15–20 giờ đọc / bài tập)</li>
+ <li><a href="/vi/docs/Learn/HTML/Multimedia_and_embedding">Đa phương tiện và nhúng</a>· (15–20 giờ đọc / bài tập)</li>
+ <li><a href="/vi/docs/Learn/HTML/Tables">Bảng HTML</a> (5-10 giờ đọc / bài tập)</li>
+</ul>
+
+<h3 id="Styling_and_layout_with_CSS">Styling and layout with CSS</h3>
+
+<p>Thời gian hoàn thành: 90 - 120 giờ</p>
+
+<h4 id="Prerequisites">Prerequisites</h4>
+
+<p>It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p>
+
+<h4 id="How_will_I_know_Im_ready_to_move_on">How will I know I'm ready to move on?</h4>
+
+<p>The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.</p>
+
+<h4 id="Modules">Modules</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> (10–15 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> (35–45 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> (15–20 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a> (30–40 hour read/exercises)</li>
+</ul>
+
+<h4 id="Additional_resources">Additional resources</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li>
+</ul>
+
+<h3 id="Interactivity_with_JavaScript">Interactivity with JavaScript</h3>
+
+<p>Time to complete: 135–185 hours</p>
+
+<h4 id="Prerequisites_2">Prerequisites</h4>
+
+<p>It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p>
+
+<h4 id="How_will_I_know_Im_ready_to_move_on_2">How will I know I'm ready to move on?</h4>
+
+<p>The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.</p>
+
+<h4 id="Modules_2">Modules</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> (30–40 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> (25–35 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a> (25–35 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 hour read/exercises)</li>
+</ul>
+
+<h3 id="Web_forms_—_Working_with_user_data">Web forms — Working with user data</h3>
+
+<p>Time to complete: 40–50 hours</p>
+
+<h4 id="Prerequisites_3">Prerequisites</h4>
+
+<p>Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.</p>
+
+<h4 id="How_will_I_know_Im_ready_to_move_on_3">How will I know I'm ready to move on?</h4>
+
+<p>The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.</p>
+
+<h4 id="Modules_3">Modules</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms">Web forms</a> (40–50 hours)</li>
+</ul>
+
+<h3 id="Making_the_web_work_for_everyone">Making the web work for everyone</h3>
+
+<p>Time to complete: 60–75 hours</p>
+
+<h4 id="Prerequisites_4">Prerequisites</h4>
+
+<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section. Many of the techniques and best practices touch on multiple technologies.</p>
+
+<h4 id="How_will_I_know_Im_ready_to_move_on_4">How will I know I'm ready to move on?</h4>
+
+<p>The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.</p>
+
+<h4 id="Modules_4">Modules</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 hour read/exercises)</li>
+ <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 hour read/exercises)</li>
+</ul>
+
+<h3 id="Modern_tooling">Modern tooling</h3>
+
+<p>Time to complete: 55–90 hours</p>
+
+<h4 id="Prerequisites_5">Prerequisites</h4>
+
+<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section, as the tools discussed work alongside many of these technologies.</p>
+
+<h4 id="How_will_I_know_Im_ready_to_move_on_5">How will I know I'm ready to move on?</h4>
+
+<p>There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling.</p>
+
+<h4 id="Modules_5">Modules</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 hour read)</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 hour read)</li>
+ <li>
+  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 hour read/exercises)</p>
+ </li>
+</ul>
diff --git a/files/vi/learn/getting_started_with_the_web/css_basics/index.html b/files/vi/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..7d839ecf40
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,289 @@
+---
+title: CSS Cơ bản
+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) là mã bạn sử dụng để tạo kiểu cho trang web của mình. CSS Cơ bản sẽ đưa bạn qua những gì bạn cần để bắt đầu. Chúng tôi sẽ trả lời các câu hỏi như: Làm cách nào để tạo văn bản màu đen hoặc đỏ? Làm cách nào để hiển thị nội dung của tôi ở một nơi như vậy trên màn hình? Làm cách nào để trang trí trang web của tôi với hình nền và màu sắc?</p>
+</div>
+
+<h2 id="CSS_thật_sự_là_gì">CSS thật sự là gì?</h2>
+
+<p>Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình. Nó không phải là một ngôn ngữ đánh dấu - đó là một ngôn ngữ định kiểu. Điều này có nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu HTML. Ví dụ: để chọn tất cả các phần tử đoạn trên trang HTML và chuyển văn bản trong đó màu đỏ, bạn sẽ viết CSS này:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Chúng ta hãy kiểm tra nó:  dán ba dòng CSS này vào một tập tin trong chương trình hiệu chỉnh văn bản của bạn, sau đó lưu tập tin với tên là <code>style.css</code> trong thư mục <code>styles</code> của bạn.</p>
+
+<p>Nhưng chúng ta vẫn cần nhúng CSS vào tài liệu HTML của bạn. Nếu không, các định dạng CSS sẽ không ảnh hưởng đến các trình duyệt của bạn hiển thị tài liệu HTML. (Nếu bạn không tiếp tục theo dõi dự án của chúng tôi, hãy đọc <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> và <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a>  để tìm thấy những điều bạn cần làm trước tiên.)</p>
+
+<ol>
+ <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Mở tập tin </span></font>index.html</code> và dán dòng bên dưới vào đâu đó trên đầu tập tin (nghĩa là, giữa thẻ <code>&lt;head&gt;</code> và <code>&lt;/head&gt;</code>):
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Lưu tập tin <code>index.html</code> và tải nó vào trong trình duyệt của bạn. Bạn sẽ thấy như thế này:</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;">Nếu đoạn văn bản là màu đỏ, xin chúc mừng. Bạn vừa viết thành công đoạn CSS đầu tiên của mình</p>
+
+<h3 id="Cơ_cấu_bộ_quy_tắc_CSS">Cơ cấu bộ quy tắc CSS</h3>
+
+<p>Hãy xem CSS ở trên chi tiết hơn một chút:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Toàn bộ cấu trúc được gọi là một <strong>bộ quy tắc </strong>(nhưng thường gọi là "quy tắc" cho ngắn gọn). Cũng lưu ý tên của từng phần riêng:</p>
+
+<dl>
+ <dt>Bộ chọn (Selector)</dt>
+ <dd>Tên phần tử HTML bắt đầu của bộ quy tắc. Nó chọn (các) phần tử được tạo kiểu (trong trường hợp này là phần tử <code>p</code>). Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.</dd>
+ <dt>Tuyên bố (Declaration)</dt>
+ <dd>Một quy tắc duy nhất như: <code>color: red;</code> xác định <strong>thuộc tính</strong> của phần tử nào bạn muốn tạo kiểu.</dd>
+ <dt>Thuộc tính (Properties)</dt>
+ <dd>Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. (Trong trường hợp này, <code>color</code> là một thuộc tính của phần tử {{htmlelement("p")}}.) Trong CSS, bạn chọn thuộc tính nào bạn muốn tác động trong quy tắc của mình.</dd>
+ <dt>Giá trị thuộc tính</dt>
+ <dd>Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta có <strong>giá trị thuộc tính</strong>, mà chọn một trong số nhiều lần xuất hiện có thể cho một thuộc tính cụ thể (<code>color</code> có rất nhiều giá trị ngoài <code>red</code>).</dd>
+</dl>
+
+<p>Lưu ý các phần quan trọng khác của cú pháp:</p>
+
+<ul>
+ <li>Mỗi bộ quy tắc (ngoài bộ chọn) phải được bao bọc bởi các dấu ngoặc nhọn (<code>{}</code>).</li>
+ <li>Trong mỗi khai báo, bạn phải sử dụng dấu hai chấm (<code>:</code>) để tách thuộc tính khỏi các giá trị của nó.</li>
+ <li>Trong mỗi bộ quy tắc, bạn phải sử dụng dấu chấm phẩy (<code>;</code>) để phân biệt cho mỗi bộ quy tắc khai báo kế tiếp.</li>
+</ul>
+
+<p>Vì vậy, để thay đổi nhiều giá trị thuộc tính cùng lúc, bạn chỉ cần viết chúng bằng dấu chấm phẩy, như sau:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Chọn_nhiều_phần_tử">Chọn nhiều phần tử</h3>
+
+<p>Bạn cũng có thể chọn nhiều kiểu phần tử và áp dụng một quy tắc duy nhất được đặt cho tất cả các yếu tố đó. Bao gồm nhiều bộ chọn được phân biệt bởi dấu phẩy (,). Ví dụ:</p>
+
+<pre class="brush: css">p, li, h1 {
+  color: red;
+}</pre>
+
+<h3 id="Các_loại_bộ_chọn_khác_nhau">Các loại bộ chọn khác nhau</h3>
+
+<p>Có nhiều loại bộ chọn khác nhau. Ở trên chúng tôi chỉ xem xét <strong>các bộ chọn phần tử</strong>, chọn tất cả các phần tử của một kiểu đã cho trong các tài liệu HTML. Nhưng chúng tôi có thể thực hiện nhiều lựa chọn cụ thể hơn. Dưới đây là một số loại bộ chọn phổ biến:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tên bộ chọn</th>
+   <th scope="col">Nó chọn gì</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Bộ chọn phần tử (đôi khi được gọi là thẻ hoặc loại bộ chọn)</td>
+   <td>Tất cả (các) thành phần HTML của loại được chỉ định.</td>
+   <td><code>p</code><br>
+    Chọn <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Bộ chọn ID</td>
+   <td>Phần tử trên trang có ID được chỉ định. (Trên một trang HTML nhất định, bạn chỉ được phép một phần tử cho mỗi ID, và tất nhiên là mỗi ID cho mỗi phần tử).</td>
+   <td><code>#my-id</code><br>
+    Chọn <code>&lt;p id="my-id"&gt;</code> or <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Bộ chọn Class</td>
+   <td>(Các) Thành phần trên trang có lớp (class) được chỉ định (lớp có thể xuất hiện nhiều lần trên một trang).</td>
+   <td><code>.my-class</code><br>
+    Chọn <code>&lt;p class="my-class"&gt;</code> và <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Bộ chọn thuộc tính</td>
+   <td>(Các) thành phần trên trang có thuộc tính được chọn.</td>
+   <td><code>img[src]</code><br>
+    Chọn <code>&lt;img src="myimage.png"&gt;</code> nhưng không phải <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Bộ chọn Pseudo-class</td>
+   <td>(Các) thành phần được chỉ định, nhưng chỉ khi ở trạng thái được chỉ định, ví dụ: rê chuột</td>
+   <td><code>a:hover</code><br>
+    Chọn <code>&lt;a&gt;</code>, nhưng chỉ khi con trỏ chuột đang di chuột qua liên kết.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Có nhiều bộ chọn khác để khám phá và bạn có thể tìm thấy danh sách chi tiết hơn trong hướng dẫn <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Hướng dẫn bộ chọn</a> của chúng tôi.</p>
+
+<h2 id="Phông_chữ_và_văn_bản">Phông chữ và văn bản</h2>
+
+<p>Bây giờ chúng ta khám phá một số khái niệm cơ bản về CSS, hãy bắt đầu thêm một quy tắc và thông tin khác vào tệp <code>style.css</code> của chúng ta để làm cho ví dụ trông đẹp hơn. Hãy bắt đầu bằng cách nhập phông chữ và văn bản của chúng ta để trông đẹp hơn một chút.</p>
+
+<ol>
+ <li>Trước hết, quay lại và tìm nguồn từ<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font"> Phông chữ Google</a> mà bạn đã được lưu trữ ở đâu đó an toàn. Thềm phần tử {{htmlelement("link")}} vào đâu đó bên trong trên đầu <code>index.html</code> (một lần nữa, ở bất kỳ đâu giữa các thẻ <code>&lt;head&gt;</code> và <code>&lt;/head&gt;</code>). nó sẽ giống như thế này:
+
+  <pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Kế tiếp, xóa quy tắc hiện tại bạn có trong tệp <code>style.css</code>. Nó là một thử nghiệm tốt, nhưng văn bản màu đỏ trông không thực sự tốt.</li>
+ <li>Thêm các dòng sau vào vị trí của nó, thay thế dòng trình giữ chổ hiện tại bằng dòng <code>font-family</code> mà bạn nhận được từ Phông chữ Google. (<code>font-family</code> có nghĩa là (các) phông chữ bạn muốn sử dụng cho văn bản của mình.) Quy tắc này trước tiên đặt phông chữ cơ sở chung và kích thước phông chữ cho toàn bộ trang (vì <code>&lt;html&gt;</code> là phần tử gốc của toàn bộ trang và tất cả phần tử bên trong nó thừa hưởng cùng một <code>font-size</code> và <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>Lưu ý</strong>: Mọi thứ trong tài liệu CSS ở giửa <code>/*</code> và <code>*/</code> là một <strong>nhận</strong> <strong>xét</strong> <strong>CSS (Css comment)</strong>, trình duyệt bỏ qua khi nó hiển thị mã. Đây là nơi để bạn viết những ghi chú hữu ích về những gì bạn đang làm.</p>
+  </div>
+ </li>
+ <li>Bây giờ, chúng tôi sẽ đặt kích thước phông chữ cho các phần tử chứa văn bản bên trong nội dung HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, và {{htmlelement("p")}}). Chúng tôi sẽ tập trung vào văn bản của tiêu đề và một số thiết lập về chiều cao dòng và khoản cách chữ của nội dung phần thân để làm cho nó dễ đọc hơn một chút:
+  <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>Bạn có thể điều chỉnh các giá trị <code>px</code> thành bất kỳ thứ gì bạn thích để thiết kế của bạn như mong muốn, nhưng nói chung thiết kế của bạn sẽ trông như sau:</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="Hộp_hộp_đó_là_tất_cả_về_hộp">Hộp, hộp, đó là tất cả về hộp</h2>
+
+<p>Một điều bạn sẽ nhận thấy về việc viết CSS là rất nhiều trong số đó là về các hộp(khối) - thiết lập kích thước, màu sắc, vị trí, v.v. Hầu hết các phần tử HTML trên trang của bạn có thể coi là các hộp nằm trên đỉnh của nhau.</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>Không ngạc nhiên, bố cục CSS chủ yếu dựa vào mô hình hộp. Mỗi khối chiếm khoảng trống trên trang của bạn có các thuộc tính như:</p>
+
+<ul>
+ <li><code>padding (vùng đệm)</code>, không gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản)</li>
+ <li><code>border (đường viền)</code>, đường liền nằm ngay bên ngoài phần đệm</li>
+ <li><code>margin (lề)</code>, khoản cách xung quanh bên ngoài của phần tử</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>Trong phần này, chúng tôi cũng sử dụng:</p>
+
+<ul>
+ <li><code>width</code> (của một phần tử)</li>
+ <li><code>background-color</code>, màu sắc đằng sau nội dung và vùng đệm của phần tử</li>
+ <li><code>color</code>, màu sắc của nội phần tử (thường là văn bản)</li>
+ <li><code>text-shadow</code>: đặt một bóng đổ trên văn bản bên trong một phần tử.</li>
+ <li><code>display</code>: đặt chế độ hiển thị của một phần tử (đừng lo lắng về điều này)</li>
+</ul>
+
+<p>Vì vậy, chúng ta hãy bắt đầu và thêm một số CSS nữa vào trang của chúng ta! Tiếp tục thêm các quy tắc mới này vào cuối trang và đừng ngại thử nghiệm với việc thay đổi các giá trị để xem các quy tắc này diễn ra như thế nào.</p>
+
+<h3 id="Thay_đổi_màu_của_trang">Thay đổi màu của trang</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Quy tắc này đặt màu nền cho toàn bộ trang. Thay đổi mã màu ở trên thành bất kỳ màu nào <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">bạn đã chọn khi lập kế hoạch trang web của mình</a>.</p>
+
+<h3 id="Phân_loại_phần_thân">Phân loại phần thân</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>Bây giờ cho phần tử {{htmlelement("body")}}. Có một vài tuyên bố ở đây, vì vậy chúng ta hãy xem xét từng cái một:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — phần thân luôn có chiều rộng 600 pixel.</li>
+ <li><code>margin: 0 auto;</code> — Khi bạn đặt hai giá trị trên một thuộc tính như <code>margin</code> or <code>padding</code>, giá trị đầu tiên ảnh hưởng đến phần trên <strong>và</strong> phần dưới của phần tử (trong trường hợp này là <code>0</code>), giá trị thứ hai là bên trái <strong>và</strong> bên phải (ở đây, <code>auto</code> là một giá trị đặc biệt phân không gian ngang đều nhau giữa trái và phải). Bạn cũng có thể sử dụng một, ba hoặc bốn giá trị, như tài liệu ghi <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">ở đây</a>.</li>
+ <li><code>background-color: #FF9500;</code> — như trước, điều này đặt màu nền của phần tử. Chúng tôi đã sử dụng một loại màu cam đậm cho phần thân như trái ngược với màu xanh đậm của phần tử {{htmlelement("html")}}, nhưng hãy tiếp tục và thử nghiệm.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — chúng tôi có bốn giá trị trên phần đệm, để tạo một chút không gian xung quanh nội dung của chúng tôi. Lần này, chúng tôi đang thiết lập không (0px) cho vùng đệm phía trên của thân, và 20px bên trái, phía dưới, và bên phải. Các giá trị được đặt theo thứ tự trên (top), phải (right), dưới (bottom), trái (left).</li>
+ <li><code>border: 5px solid black;</code> — điều này chỉ đơn giản thiết lập một đường viền màu đen, rộng 5 điểm ảnh (px) trên tất cả các cạnh của body.</li>
+</ul>
+
+<h3 id="Định_vị_và_tạo_kiểu_cho_tiêu_đề_trang_chính_của_chúng_tôi">Định vị và tạo kiểu cho tiêu đề trang chính của chúng tôi</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Bạn có thể thấy một khoản trống khủng khiếp ở phần trên cùng của phần thân. Điều đó xảy ra vì các trình duyệt áp dụng một số <strong>kiểu mặc định</strong> cho phần tử {{htmlelement("h1")}} (trong số những phần tử khác), ngay cả khi bạn chưa áp dụng bất kỳ CSS nào! Điều đó nghe có vẻ giống như một ý tưởng tồi, nhưng chúng tôi thậm chí muốn một trang web không có sẵn kiểu để có khả năng đọc cơ bản. Để loại bỏ khoảng trống, chúng tôi sẽ loại bỏ kiểu mặc định bằng cách đặt <code>margin: 0;</code>.</p>
+
+<p>Tiếp theo, chúng tôi đã đặt phần đệm trên cùng và dưới cùng tiêu đề là 20 điểm ảnh (px) và làm cho văn bản tiêu đề có cùng màu với màu nền HTML.</p>
+
+<p>Một thuộc tính khá thú vị mà chúng tôi đã sử dụng ở đây là đổ bóng văn bản (text-shadow), áp dụng đổ bóng cho nội dung văn văn bản của phần tử. Bốn giá trị của nó như sau:</p>
+
+<ul>
+ <li>Giá trị điểm ảnh đầu tiên thiết lập <strong>độ lệch ngang</strong> của bóng từ văn bản — khoảng cách bao xa: một giá trị âm nên di chuyển nó sang bên trái.</li>
+ <li>Giá trị điểm ảnh thứ hai thiết lập <strong>độ lệch dọc</strong> của bóng từ văn bản — khoảng cách nó di chuyển xuống dưới, trong ví dụ này; một giá trị âm nên di chuyển nó lên.</li>
+ <li>Giá trị điểm ảnh thứ ba đặt <strong>bán kính mờ</strong> của bóng — một giá trị lớn hơn sẽ có nghĩa là một bóng mờ hơn.</li>
+ <li>Giá trị thứ tư thiết lập màu cơ bản cho bóng đổ.</li>
+</ul>
+
+<p>Một lần nữa, hãy thử nghiệm với các giá trị khác nhau để xem những gì bạn có thể nghĩ ra!</p>
+
+<h3 id="Căn_giữa_hình_ảnh">Căn giữa hình ảnh</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Cuối dùng, chúng tôi sẽ căn giữa hình ảnh để làm cho hình ảnh trông đẹp hơn. Chúng tôi có thể sử dụng <code>margin: 0 auto</code> khéo léo một lần nữa như chúng tôi đã làm trước đó cho body, nhưng chúng tôi cũng cần phải làm điều gì khác. Phần tử {{htmlelement("body")}} là <strong>cấp khối</strong>, nghĩa là nó chiếm không gian trên trang và có thể có các giá trị căn lề và khoản cách khác được áp dụng cho nó. Hình ảnh, mặt khác, là các yếu tố <strong>nội tuyến</strong>, có nghĩa là chúng không thể. Vì vậy, để áp dụng căn lề cho hình ảnh, chúng tôi phải cung cấp cho hành vi cấp khối hình ảnh bằng cách sử dụng <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Lưu ý: </strong>Các hướng dẫn trên giả định rằng bạn đang sử dụng hình ảnh nhỏ hơn chiều rộng được đặt trên body (600 điểm ảnh - px). Nếu hình ảnh của bạn lớn hơn, nó sẽ tràn body và tràn ra phần còn lại của trang. Để khắc phục điều này, bạn có thể: 1) giảm chiều rộng của hình bằng cách sử dụng trình chỉnh sửa đồ họa hoặc 2) kích thước hình ảnh bằng cách sử dụng CSS đặt thuộc tính {{cssxref ("width")}} trên phần tử &lt;img&gt; có giá trị nhỏ hơn, ví dụ: 400px;.</p>
+</div>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: đừng lo lắng nếu bạn chưa hiểu <code>display: block;</code> và sự khác biệt cấp khối / nội tuyến. Bạn sẽ nghiên cứu CSS sâu hơn. Bạn có thể tìm hiểu thêm về các giá trị hiển thị có sẳn khác nhau tại trang<a href="/en-US/docs/Web/CSS/display"> tham khảo hiển thị</a> của chúng tôi.</p>
+</div>
+
+<h2 id="Kết_luận">Kết luận</h2>
+
+<p>Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ kết thúc với một trang trông giống như thế này (bạn cũng có thể <a href="http://mdn.github.io/beginner-html-site-styled/">xem phiên bản của chúng tôi tại đây</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>Nếu bạn gặp khó khăn, bạn luôn có thể so sánh công việc của mình <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">với mã ví dụ đã hoàn thành của chúng tôi trên GitHub</a>.</p>
+
+<p>Ở đây, chúng tôi chỉ thực sự bàn sơ qua bề mặt của CSS. Để tìm hiểu thêm, hãy truy cập <a href="https://developer.mozilla.org/en-US/Learn/CSS">chủ đề Học tập CSS</a> của chúng tôi.</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>
+
+<p> </p>
+
+<h2 id="Trong_mô-đun_này">Trong mô-đun này</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Cài phần mềm cơ bản</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">Trang web của bạn sẽ trông như thế nào?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Xử lý tệp</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Khái niệm cơ bản về HTML</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">Khái niệm cơ bản về CSS </a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Khái niệm cơ bản về JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Xuất bản trang web của bạn</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Cách hoạt động của web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/getting_started_with_the_web/cài_đặt_các_phần_mềm_cơ_bản/index.html b/files/vi/learn/getting_started_with_the_web/cài_đặt_các_phần_mềm_cơ_bản/index.html
new file mode 100644
index 0000000000..0350529f25
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/cài_đặt_các_phần_mềm_cơ_bản/index.html
@@ -0,0 +1,62 @@
+---
+title: Cài đặt các phần mềm cơ bản
+slug: Learn/Getting_started_with_the_web/Cài_đặt_các_phần_mềm_cơ_bản
+tags:
+  - Công Cụ
+  - Học Làm Web
+  - Người Mới Bắt Đầu
+  - Thiết Lập
+  - Trình Duyệt Web
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+</div>
+
+<div class="summary">
+<p>Trong bài <em>Cài đặt các phần mềm cơ bản</em>, chúng tôi sẽ chỉ cho bạn các công cụ cần thiết để phát triển web đơn giản, và cách cài đặt chúng.</p>
+</div>
+
+<h2 id="Các_chuyên_gia_web_sử_dụng_gì">Các chuyên gia web sử dụng gì?</h2>
+
+<ul>
+ <li><strong>Máy tính</strong>. Có thể nghe như một điều hiển nhiên đối với một số người, nhưng một số bạn đang đọc bài viết này đang sử dụng điện thoại hoặc máy tính của thư viện. Để phát triển web một cách nghiêm túc, bạn nên đầu tư vào máy tính để bàn hoặc máy tính xách tay (Windows, Mac hoặc Linux).</li>
+ <li><strong>Chương trình soạn thảo</strong>, dùng để viết code. Bạn có thể sử dụng các chương trình soạn thảo thông dụng như <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, hoặc các chương trình có tích hợp soạn thảo code như <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>. Các chương trình soạn thảo văn bản như Microsoft Office không thích hợp cho phát triển web vì chúng dựa trên các yếu tố ẩn gây cản trở quá trình hiển thị trên các trình duyệt web. </li>
+ <li><strong>Trình duyệt Web</strong> dùng để kiểm duyệt code của bạn. Các trình duyệt web thông dụng nhất hiện này là <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> và <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Bạn nên kiểm tra trang web của bạn trên các thiết bị điện thoại và các trình duyệt web cũ nếu đối tượng người dùng của bạn vẫn xài các phiên bản cũ như IE 6-8.</li>
+ <li><strong>Chương trình đồ họa</strong>, như <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, hoặc <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, để tạo ra hình ảnh cho trang web của bạn.</li>
+ <li><strong>Hệ thống kiểm soát phiên bản</strong>, quản lý các tập tin trên máy chủ, hỗ trợ dự án nhóm, chia sẻ code và tập tin, tránh xung đột trong chỉnh sửa code. Hiện tại, <a href="http://git-scm.com/">Git</a> là công cụ kiểm soát phiên bản phổ biến nhất, và dịch vụ lưu trữ code GitHub, phát triển dựa trên Git, cũng rất phổ biến.</li>
+ <li><strong>Chương trình FTP</strong>, được sử dụng trên các web hosting cũ để quản lý các tập tin trên máy chủ (Git đang dần thay thế FTP cho mục đích này). Có rất nhiều chương trình FTP có sẵn bao gồm <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, và <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Hệ thống tự động,</strong> như <a href="http://gruntjs.com/">Grunt</a> hoặc <a href="http://gulpjs.com/">Gulp</a>,  giúp bạn tự động hóa các công việc lặp đi lặp lại như nén mã code hoặc chạy test. </li>
+ <li>Templates, libraries, và frameworks giúp bạn viết code nhanh hơn. </li>
+ <li>Các công cụ hỗ trợ khác</li>
+</ul>
+
+<h2 id="Những_công_cụ_nào_bạn_thực_sự_cần_hiện_tại">Những công cụ nào bạn thực sự cần hiện tại?</h2>
+
+<p>Đừng để danh sách trên làm bạn sợ, thật ra bạn không cần phải biết tất cả công cụ trên để làm quen với phát triển web. Trong bài viết này, chúng tôi chỉ yêu cầu bạn công cụ căn bản nhất: một trình soạn thảo và một vài trình duyệt web. </p>
+
+<h3 id="Cài_đặt_trình_soạn_thảo">Cài đặt trình soạn thảo</h3>
+
+<p>Bạn có thể đã có sẵn chương trình soạn thảo trên máy tính của bạn. Trên hệ điều hành Windows là <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> và trên OSX là <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux thì khá đa dạng, còn Ubuntu thì tích hợp <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>. </p>
+
+<p>Để phát triển web, bạn có thể cần một phần mềm tốt hơn Notepad hoặc TextEdit. Chúng tôi khuyến khích bạn nên bắt đầu với <a href="http://brackets.io">Brackets</a>, một chương trình soạn thảo code có thể cho bạn xem trước và có gợi ý code. </p>
+
+<h3 id="Cài_đặt_trình_duyệt_web">Cài đặt trình duyệt web</h3>
+
+<p>Tiếp theo chúng ta sẽ cài đặt một vài trình duyệt để hiển thị trang web của chúng ta. Bản có thể click vào các link dưới đây để tải chương trình phù hợp với hệ điều hành của bạn: </p>
+
+<ul>
+ <li>Linux: <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>Windows: <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 được cài đặt sẵn trong Windows 10, nếu bạn đang sử dụng windows 8 trở lên, bạn có thể cài đặt Edge. Nếu không, bạn nên cài đặt trình duyệt khác).</li>
+ <li>Mac: <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 là trình duyệt web mặc định có sẵn trên iOS và OS X).</li>
+</ul>
+
+<p>Trước khi tiến hành bước tiếp theo, bạn nên cài đặt ít nhất 2 trình duyệt web và kiểm tra sử dụng thử. </p>
+
+<h3 id="Cài_đặt_web_server_trên_máy_tính">Cài đặt web server trên máy tính</h3>
+
+<p>Một vài ví dụ cần bạn phải chạy web server. bạn có thể thiết lập một máy chủ trên máy tính của bạn dựa trên hướng dẫn sau: <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Làm thế nào để thiết lập một máy chủ cục bộ?</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/vi/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/vi/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..fb1947b8a0
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,112 @@
+---
+title: Làm việc với các tập tin
+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">
+<p>Một dự án web bao gồm nhiều tập tin: nội dung dạng chữ, mã nguồn, stylesheet, nội dung đa phương tiện, và nhiều hơn thế nữa. Khi xây dựng một trang web, bạn cần tập hợp những tập tin này lại với nhau trong máy tính của mình theo cấu trúc hợp lý, đảm bảo rằng chúng có thể tương tác được với nhau, và lấy ra tất cả những nội dung mà bạn cho là đúng, trước khi bạn có thể <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">đẩy chúng lên server</a>. <em>Làm việc với các tập tin</em> bàn luận về một số vấn đề cần quan tâm để bạn có thể thiết lập cấu trúc tập tin hợp lý cho trang web của mình.</p>
+</div>
+
+<h2 id="Nên_lưu_trang_web_của_mình_vào_đâu_trên_máy_tính_cá_nhân">Nên lưu trang web của mình vào đâu trên máy tính cá nhân?</h2>
+
+<p>Khi làm việc với một trang web trên chính máy tính của mình, bạn nên gom hết đống tập tin cần thiết vào một thư mục duy nhất có cấu trúc tổ chức tập tin giống với server bạn sắp sửa đẩy lên. Bạn muốn đặt thư mục đó vào đâu cũng được, có điều nên đặt ở chỗ nào mà bạn có thể dễ dàng tìm thấy ấy, trên màn hình Desktop chẳng hạn, hoặc trong thư mục Home, hay là ở trong thư mục gốc.</p>
+
+<ol>
+ <li>Kiếm chỗ lưu trữ đống dự án web của mình. Hãy tạo một thư mục có tên là <code>web-projects</code> (cho nó đơn giản).</li>
+ <li>Trong thư mục này, hãy tạo ra một thư mục khác để lưu trữ dự án web đầu tiên của bạn. Đặt tên cho nó là <code>test-site</code> (hoặc gì đấy dễ nhớ dễ liên tưởng).</li>
+</ol>
+
+<h2 id="Tránh_dùng_chữ_hoa_và_khoảng_trắng">Tránh dùng chữ hoa và khoảng trắng</h2>
+
+<p>Xuyên suốt bài viết này, chúng tôi sẽ yêu cầu bạn đặt tên cho thư mục và tập tin dưới dạng chữ thường và không có khoảng trắng. Bởi vì:</p>
+
+<ol>
+ <li>Trong nhiều máy tính, thường là các web server, phân biệt hoa-thường. Chẳng hạn, nếu bạn lưu hình ảnh của mình vào <code>test-site/MyImage.jpg</code>, rồi gọi nó ra trong một tập tin khác theo đường dẫn <code>test-site/myimage.jpg</code>, có thể sẽ chẳng ra cái gì cả.</li>
+ <li>Trình duyệt, web server, và ngôn ngữ lập trình không xử lý kí tự khoảng trắng theo cách nhất quán. Chẳng hạn, nếu trong tên tập tin có khoảng trắng, một số hệ thống sẽ coi đó là hai tập tin riêng biệt. Một số server sẽ thay thế khoảng trắng với "%20" (mã kí tự khoảng trắng trong URI), khiến cho tất cả đống đường dẫn của bạn bị hỏng. Nếu bắt buộc phải phân chia, thì hãy dùng dấu gạch nối thay cho dấu gạch dưới: <code>my-file.html</code> vs. <code>my_file.html</code>.</li>
+</ol>
+
+<p>Nói ngắn gọn thì bạn nên dùng dấu gạch nối cho tên tập tin. Công cụ tìm kiếm của Google coi dấu gạch nối là dấu ngăn cách các từ, còn dấu gạch dưới thì không được như vậy. Vì những lí do đó, sẽ tốt hơn cả nếu bạn có thói quen đặt tên ?cho thư mục và tập tin của mình bằng kí tự thường, không có khoảng trắng và sử dụng dấu gạch nối để ngăn cách các từ, chí ít là tới khi bạn hiểu mình đang làm gì. Làm như vậy sẽ giảm thiểu những vấn đề không đáng có trong giai đoạn sau này.</p>
+
+<h2 id="Nên_xây_dựng_cấu_trúc_trang_web_như_thế_nào">Nên xây dựng cấu trúc trang web như thế nào?</h2>
+
+<p>Tiếp đến, hãy nhìn vào cấu trúc trang test của chúng tôi phía trong ví dụ bên dưới đây. Tập tin thường xuất hiện trong hầu như mọi dự án web của chúng tôi là index HTML ?và các thư mục chứa hình ảnh, kiểu và kịch bản. Bắt đầu khởi tạo thôi nào:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Tập tin này chứa trang chủ của bạn, nói cách khác, là nơi hiển thị ngôn từ và hình ảnh khi người ta lần đầu ghé thăm trang của bạn. Dùng trình soạn thảo của mình, hãy tạo một tập tin mới và đặt tên là <code>index.html</code> và lưu nó bên trong thư mục <code>test-site</code>.</li>
+ <li><strong>Thư mục <code>images</code></strong>: Thư mục này chứa tất cả những hình ảnh dùng cho trang web của bạn. Tạo thư mục tên là <code>images</code>, ở trong thư mục <code>test-site</code>.</li>
+ <li><strong>Thư mục <code>styles</code></strong>: Thư mục này chứa mã nguồn CSS dùng để định kiểu cho nội dung trang web của bạn (ví dụ như với kiểu chữ và màu nền). Tạo thư mục tên là <code>styles</code>, ở trong thư mục <code>test-site</code>.</li>
+ <li><strong>Thư mục <code>scripts</code></strong>: Thư mục này chứa tất cả mã nguồn JavaScript dùng để tạo ra các tương tác bên trong trang web của bạn (ví dụ như nút like của Facebook). Tạo thư mục tên là <code>scripts</code>, ở trong thư mục <code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Chú ý</strong>: Trên máy tính sử dụng Windows, bạn có thể sẽ gặp phải vấn đề khi xem tên tập tin, bởi lẽ Windows có một option tên là <strong>Hide extensions for known file types</strong> được bật sẵn. Bạn có thể tắt nó đi bằng cách vào Windows Explorer, chọn <strong>Folder options...</strong>, bỏ chọn <strong>Hide extensions for known file types</strong>, và nhấn <strong>OK</strong>. Tuỳ theo phiên bản Windows sẽ có cách xử lý riêng biệt, bạn có thể tìm trên mạng. </p>
+</div>
+
+<h2 id="Đường_dẫn_tập_tin">Đường dẫn tập tin</h2>
+
+<p>Để các tập tin có thể tương tác được với nhau, bạn phải tạo ra đường dẫn giữa chúng — đơn giản chỉ là một <em>route</em> để tập tin này biết tập tin kia ở chỗ khỉ nào. Vào việc nào, ta sẽ thêm một chút HTML vào tập tin <code>index.html</code>, và bảo nó hiển thị hình ảnh bạn đã chọn ở bài <a href="vi/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Trang web của bạn sẽ trông như thế nào?"</a></p>
+
+<ol>
+ <li>Sao chép hình ảnh bạn từng chọn và lưu vào thư mục <code>images</code>.</li>
+ <li>Mở tập tin <code>index.html</code> của bạn lên, và thêm đoạn mã bên dưới. Đừng bận tâm về ý nghĩa của nó vào lúc này — ta sẽ tìm hiểu sâu hơn ở các bài viết sau.
+  <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>Dòng <code>&lt;img src="" alt="My test image"&gt;</code> là một mã HTML để thêm ảnh vào trang. Ta cần phải bảo thằng HTML nơi chứa hình ảnh. Ta vừa lưu hình ảnh vào thư mục <em>images</em> ở bước 1, cùng thư mục với tập tin <code>index.html</code>. Để <code>index.html</code> tìm ra hình ảnh đó, đường dẫn mà ta cần sẽ là <code>images/tên-tập-tin-hình-ảnh-của-bạn</code>. Chẳng hạn, hình ảnh của ta có tên là <code>firefox-icon.png</code>, đường dẫn sẽ là <code>images/firefox-icon.png</code>.</li>
+ <li>Thêm đường dẫn đó vào trong mã nguồn HTML của bạn, nằm giữa dấu ngoặc kép <code>src=""</code>.</li>
+ <li>Lưu lại tập tin HTML, và tải lại trang (nhấn đúp vào tập tin <code>.html</code>). Bạn sẽ thấy trang web của mình đã hiển thị hình ảnh mà bạn vừa thêm vào! </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>Một số <em>rule</em> cơ bản cho đường dẫn tập tin:</p>
+
+<ul>
+ <li>Để dẫn cho tập tin có nằm cùng thư mục với tập tin HTML, chỉ cần dùng tên tập tin thôi, ví dụ <code>my-image.jpg</code>.</li>
+ <li>Để trỏ tới thư mục con bên trong thư mục gốc, viết tên thư mục ấy trước tên tập tin, kèm theo dấu gạch chéo, ví dụ <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Để dẫn tập tin nằm <strong>trên</strong> thư mục chứa tập tin HTML, viết thêm hai dấu chấm. Chẳng hạn, nếu <code>index.html</code> nằm trong thư mục con <code>test-site</code> và <code>my-image.jpg</code> nằm cùng thư mục với <code>test-site</code>, bạn có thể trỏ tới <code>my-image.jpg</code> từ <code>index.html</code> bằng <code>../my-image.jpg</code>.</li>
+ <li>Bạn muốn lồng bao nhiêu cũng được tuỳ sở thích <code>../thư-mục-con/?thư-mục-cháu/my-image.jpg</code>.</li>
+</ul>
+
+<p>Tạm thời thế đã.</p>
+
+<div class="note">
+<p><strong>Chú ý</strong>: Hệ thống tập tin của Windows thường sử dụng dấu gạch chéo ngược, ví dụ <code>C:\windows</code>. Việc này không gây ảnh hưởng gì trong HTML — nếu bạn phát triển trang web trên nền Windows, bạn vẫn nên sử dụng dấu sược tiến.</p>
+</div>
+
+<h2 id="Còn_phải_làm_gì_nữa_không">Còn phải làm gì nữa không?</h2>
+
+<p>Tạm thời thế là ổn. Cấu trúc thư mục của bạn sẽ trông kiểu như vầy:</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>
+
+<p> </p>
+
+<h2 id="Trong_mô-đun_này">Trong mô-đun này</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/vi/Learn/Getting_started_with_the_web/Installing_basic_software">Cài đặt các phần mềm cơ bản</a></li>
+ <li id="What_will_your_website_look_like"><a href="/vi/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Trang web của bạn sẽ trông như thế nào?</a></li>
+ <li id="Dealing_with_files"><a href="/vi/Learn/Getting_started_with_the_web/Dealing_with_files">Làm việc với các tập tin</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/vi/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/vi/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..c8b8cbccd6
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,103 @@
+---
+title: How the Web works
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+tags:
+  - DNS
+  - HTTP
+  - Học
+  - IP
+  - Khởi đầu
+  - Máy chủ
+  - Máy khách
+  - TCP
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<p> </p>
+
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<div class="summary">
+<div class="entry-content">
+<p><em>Web làm việc thế nào </em>cung cấp cho bạn một cái nhìn đơn giản về những gì xảy ra khi bạn mở một trang web trên điện thoại hay trên máy tính.</p>
+</div>
+</div>
+
+<p>Những lý thuyết này không thật sự thiết yếu cho việc lập trình web trong tầm ngắn hạn, nhưng việc hiểu được những gì thật sự diễn ra đằng sau sẽ mang lại rất nhiều những lợi ích dài hạn cho bạn trong tương lai không xa.</p>
+
+<h2 id="Máy_khách_và_Máy_chủ">Máy khách và Máy chủ</h2>
+
+<p>Máy tính kết nối với mạng toàn cầu được gọi là <strong>Máy khách</strong> và <strong>Máy chủ</strong>. Đây là một giản đồ đơn giản về cách chúng có thể tương tác với nhau:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Máy khách là những thiết bị kết nối mạng của những người dùng Internet (Ví dụ: máy tính hay điện thoại của bạn) và những phần mềm kết nối mạng trên những thiết bị đó(thường là một trình duyệt như firefox hay chrome).</li>
+ <li>Máy chủ là những máy tính lưu trữ trang web hay những ứng dụng. Khi một thiết bị khách muốn truy cập một trang web, một bản sao của trang web được tải từ máy chủ về máy khách để hiển thị trên trình duyệt của người dùng.</li>
+</ul>
+
+<h2 id="Những_phần_khác_của_câu_chuyện">Những phần khác của câu chuyện</h2>
+
+<p>Máy chủ và máy khách không phải là toàn bộ câu chuyện đằng sau một trang web. Còn có rất nhiều bộ phận liên quan nữa sẽ được mô tả ngay sau đây <span class="wp-emoji wp-emoji-smile wp-smiley" title=":)">:)</span>.</p>
+
+<p>Tạm thời, hãy cứ tưởng tượng <strong>Mạng toàn cầu</strong> giống như một<strong> con đường</strong> vậy. Ở một đầu của con đường là <strong>Máy khách</strong>,  nó giống như là ngôi nhà của bạn vậy. Còn ở phía cuối con đường là <strong>Máy chủ</strong>  – một cửa hàng mà bạn đến để mua một món đồ chẳng hạn.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Ngoại trừ Máy chủ và Máy khách, còn có những thứ cần thiết sau:</p>
+
+<ul>
+ <li><strong>Mạng Internet</strong>: Cho phép bạn nhận và gửi dữ liệu qua nó. Nó về cơ bản giống như con đường giữa nhà bạn và cửa hàng.</li>
+ <li><strong>TCP/IP</strong>: <em>Bộ giao thức liên kết mạng</em> là một bộ giao thức xác định cách thức dữ liệu được truyền tải qua mạng Internet. Nó giống như là một phương tiện di chuyển giúp bạn đi đến cửa hàng và mua hàng hóa của mình. Trong ví dụ của chúng tôi nó giống như là một chiếc xe hơi hay xe đạp vậy (hoặc đôi chân của bạn).</li>
+ <li><strong>DNS</strong>: <em>Hệ thống tên miền</em> giống như một cuốn sổ địa chỉ dành riêng cho Mạng Internet vậy. Khi bạn nhập một địa chỉ web vào trình duyệt, trình duyệt sẽ nhìn vào cuốn sổ địa chỉ đó để tìm địa chỉ của trang web. Trình duyệt cần tìm ra được máy chủ của trang web, để có thể gửi những tin <em>HTTP</em> tới đúng chổ (xem bên dưới). Chuyện này giống như việc bạn tìm địa chỉ của cửa hàng để tìm đến nó vậy.</li>
+ <li><strong>HTTP</strong>: <em>Giao thức truyền tải siêu văn bản</em>  là một giao thức ứng dụng xác định ngôn ngữ giao tiếp giữa các máy chủ và máy khách.</li>
+ <li><strong>Những file thành phần</strong>: Một trang web được lập nên từ rất nhiều file thành phần. Những file này được chia làm hai loại:
+  <ul>
+   <li><strong>Code file</strong>: Một trang web thường được xây dựng chủ yếu bằng những file HTML, CSS và JavaScript. Bạn sẽ được tiếp xúc với các công nghệ khác sau này.</li>
+   <li><strong>Assets</strong>: Assets chỉ tất cả những thứ khác hợp thành trang web, như ảnh, nhạc, video, v.v</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Vậy_chính_xác_chuyện_gì_đã_xảy_ra">Vậy chính xác chuyện gì đã xảy ra?</h2>
+
+<p>Khi bạn nhập một địa chỉ web vào trình duyệt:</p>
+
+<ol>
+ <li>Trình duyệt tìm đến máy chủ DNS và tìm địa chỉ thật sự của máy chủ chứa trang web.</li>
+ <li>Trình duyệt gửi một tin yêu cầu HTTP (HTTP request) tới máy chủ đó yêu cầu nó gửi về một bản copy của trang web tới máy của người dùng. Yêu cầu HTTP đó, và tất cả dữ liệu khác gửi qua lại giữa máy chủ và máy khách, được truyền tải qua mạng Internet sử dụng giao thức TCP/IP.</li>
+ <li>Nếu máy chủ chấp nhận yêu cầu của máy khách, máy chủ sẽ gửi một tin nhắn “200 OK”, có nghĩa là “Tất nhiên là bạn có thể xem trang web này rồi! Nhận lấy này!”, và sau đó bắt đầu gửi những file của trang web tới trình duyệt dưới dạng những mảnh nhỏ dữ liệu được gọi là gói dữ liệu (data packets).</li>
+ <li>Trình duyệt sẽ  ráp những mảnh nhỏ đó thành một trang web hoàn chỉnh và hiển thị nó lên màn hình.</li>
+</ol>
+
+<h2 id="Giải_thích_DNS">Giải thích DNS</h2>
+
+<p>Địa chỉ thật của một trang web không phải những chuổi ký tự dễ nhớ mà bạn vẫn hay gõ vào hàng ngày đâu. Chúng thật ra là một chuỗi những con số, Ví dụ: 63.245.217.105.</p>
+
+<p>Nó được gọi là địa chỉ IP, và nó đại diện cho một vị trí độc nhất trên mạng toàn cầu. Tuy nhiên, làm sao bạn có thể nhớ nổi các con số vô nghĩa đó? Đó chính là lý do người ta phát minh ra DNS. Chúng là những máy chủ biến những địa chỉ phù hợp (như “mozilla.org”) thành những địa chỉ thật sự ( địa chỉ IP).</p>
+
+<p>Bạn hoàn toàn có thể truy cập một trang web qua địa chỉ IP của nó. Hãy thử truy cập trang chủ của Mozilla qua địa chỉ IP sau <code>63.245.217.105</code>.</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Giải_thích_về_Packets">Giải thích về Packets</h2>
+
+<p>Trước đó chúng tôi đã dùng thuật ngữ “packets” để diễn tả hình thức mà dữ liệu được gửi từ máy chủ tới máy khách. Vậy nó mang ý nghĩa như thế nào? Về cơ bản, khi dữ liệu được gửi qua mạng Internet, nó được gửi dưới dạng hàng nghìn mảnh nhỏ, để giúp cho nhiều người dùng có thể tải trang web cùng một lúc. Nếu trang web được gửi dưới dạng một miếng lớn, thì chỉ duy nhất một người dùng có thể tải trang web một lúc, điều tất nhiên sẽ làm cho trang web kém hiệu quả và khó chịu cho người dùng.</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Credit">Credit</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
diff --git a/files/vi/learn/getting_started_with_the_web/html_basics/index.html b/files/vi/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..147cb33f9b
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,226 @@
+---
+title: HTML basics
+slug: Learn/Getting_started_with_the_web/HTML_basics
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>
+<p>{{LearnSidebar}}</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>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) là mã được dùng để xây dựng nên cấu trúc và nội dung của trang web. Ví dụ, nội dung có thể được cấu thành bởi một loạt các đoạn văn, một danh sách liệt kê, hoặc sử dụng những hình ảnh và bảng biểu. Như tiêu đề, bài viết này sẽ cho bạn những hiểu biết căn bản về HTML và chức năng của nó.</p>
+
+<h2 id="Vậy_HTML_là_cái_gì">Vậy HTML là cái gì?</h2>
+
+<p>HTML không phải là một ngôn ngữ lập trình; nó là <em>một ngôn ngữ đánh dấu (markup language)</em> định hình cấu trúc nội dung của bạn. HTML bao gồm một loạt <strong>{{Glossary("element", "elements")}}</strong>, thứ bạn dùng để đính kèm, hoặc gói các phần khác nhau của nội dung để làm cho chúng xuất hiện hay hoạt động với một cách nhất định. Các {{Glossary("tag", "tags")}} kèm theo có thể làm một từ hay hình ảnh siêu liên kết từ nơi khác, có thể in nghiêng, làm cho phông chữ lớn hơn hoặc nhỏ hơn...  Ví dụ, theo dõi dòng chữ bên dưới:</p>
+
+<pre>My cat is very grumpy</pre>
+
+<p>Nếu muốn một dòng văn bản, ta có thể chỉ định một đoạn văn bằng cách đặt nó trong các thẻ <em>paragraph (thẻ p)</em>:</p>
+
+<pre>&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Cấu_trúc_của_một_thành_phần_HTML">Cấu trúc của một thành phần HTML</h3>
+
+<p>Cùng tìm hiểu đoạn văn bản ở trên kỹ hơn.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png"></p>
+
+<p>Gồm những thành phần chính:</p>
+
+<ol>
+ <li><strong>The opening tag:</strong> Bao gồm tên của thành phần (trường hợp này là p), bao bởi cặp <strong>ngoặc góc</strong> mở và đóng. Bắt đầu thành phần, hay là bắt đầu có hiệu lực — trường hợp này là đầu đoạn văn.</li>
+ <li><strong>The closing tag:</strong> Cũng giống với <strong>The opening tag</strong>, ngoài ra nó còn có thêm <em>dấu gạch chéo</em> phía trước tên thành phẩn. Kết thúc thành phần — trường hợp này là cuối đoạn văn. Lỗi thiếu <em>thẻ đóng </em>khá là phổ biến đối với những người mới bắt đầu.</li>
+ <li><strong>The content:</strong> Nơi chứa nội dung, ở đây chỉ là văn bản.</li>
+ <li><strong>The element:</strong> Element bao gồm thẻ mở, thẻ đóng, và tất cả nội dung.</li>
+</ol>
+
+<p>Các <strong>element</strong> có thể chứa các thuộc tính, như sau:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png"></p>
+
+<p>Attibute là thông tin bổ sung về thành phần mà bạn không muốn chúng hiển thị trong phần nội dung. Ở đây, <code>class</code> là <em>tên </em>của một thuộc tính, và <code>editor-note</code> là <em>giá trị </em>của nó.  Thuộc tính <code>class</code> cho phép bạn tạo một định danh cho thành phần nào đó để có thể dùng cho thành phần với phong cách và nhiều thứ khác .</p>
+
+<p>Một thuộc tính thường bao gồm:</p>
+
+<ol>
+ <li>Khoảng trống giữa nó và tên thành phần (hoặc các thuộc tính phía trước nếu thành phần đã có một hay nhiều thuộc tính rồi).</li>
+ <li>Tên thuộc tính, theo sau là dấu bằng.</li>
+ <li>Ký hiệu đóng mở xung quanh giá trị của nó.        </li>
+</ol>
+
+<h3 id="Các_thành_phần_lồng_nhau">Các thành phần lồng nhau</h3>
+
+<p>Bạn có thể đặt nhiều thành phần vào trong một thành phần khác—Đây gọi là <strong>nesting</strong>. Nếu chúng ta muôn tuyên bố rằng con mèo <strong>rất</strong> gắt, ta có thể cho từ "rất" trong thành phần {{htmlelement("strong")}}, Có nghĩa là từ này sẽ được in đậm:</p>
+
+<pre>&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Tuy vậy bạn cần phải đảm bảo các thành phần của bạn được lồng chặt chẽ: chẳng hạn như ví dụ phía trên, ta mở thành phần {{htmlelement("p")}} ?trước, rồi đến thành phần {{htmlelement("strong")}}, nên ta cần phải đóng thành phần {{htmlelement("strong")}} trước, rồi mới tới  {{htmlelement("p")}}. Ví dụ bên dưới là sai:</p>
+
+<pre>&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Các thành phần phải được đóng mở đúng thì mới chạy ổn định được. Nếu để chúng nạp chồng lên nhau như hình trên, trình duyệt sẽ cố đoán xem ý bạn là gì, như thế có thể trả ra những kết quả không mong muốn. Nên đừng bao giờ làm vậy!</p>
+
+<h3 id="Phần_tử_rỗng">Phần tử rỗng</h3>
+
+<p>Một số thành phần không có nội dung, và thường được gọi là <strong>phần tử rỗng</strong>. Như thành phần {{htmlelement("img")}} mà chúng tôi thường dùng trong HTML của trang:</p>
+
+<pre>&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Thành phần này chứa hai thuộc tính, nhưng không có thẻ đóng (<code>&lt;/img&gt;</code>), và không chứa gì bên trong nó cả. Đấy là bởi vì thành phần image không chứa bất kì nội dung nào. Nó sinh ra chỉ để nhúng hình ảnh vào trong trang HTML.</p>
+
+<h3 id="Kết_cấu_của_một_trang_HTML">Kết cấu của một trang HTML</h3>
+
+<p>Điều đó kết thúc các khái niệm cơ bản về các phần tử HTML riêng lẻ, nhưng chúng không hữu ích lắm. Bây giờ, chúng ta sẽ xem các yếu tố riêng lẻ được kết hợp như thế nào để tạo thành một trang HMTL hoàn chỉnh. Hãy xem lại mã ví dụ của chúng tôi đưa vào <code>index.html</code> (mà chúng ta gặp lần đầu trong bài viết <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p>
+
+<pre>&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>Chúng ta có:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — loại tài liệu. Trong thời gian đó, khi mà HTML còn non nớt (khoảng 1991/2), các DOCTYPE nghĩa là hoạt động như một liên kết đến một bộ quy tắc mà trang HTML phải tuân thủ để được coi là HTML tốt, có nghĩa là kiểm tra lỗi tự động và những thứ hữu ích. Tuy nhiên, tại thời điểm này không ai thực sự quan tâm, và họ thực sự chỉ là một hiện vật lịch sử cần được đưa vào để mọi thứ làm việc đúng. Bây giờ, đó là tất cả những gì bạn cần.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — thành phần {{htmlelement("html")}}. Thành phần này bao bọc tất cả nội dung trên toàn bộ trang và đôi khi được gọi là phần tử gốc.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — Thành phần {{htmlelement("head")}}. Là nơi chứa tất cả những nội dung bạn muốn đưa vào trang HTML không phải nội dung bạn hiển thị cho người xem trang của bạn. Điều này bao gồm những thứ như {{Glossary("keyword", "keywords")}} và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS tạo kiểu cho nội dung, khai báo bộ ký tư và những thứ khác.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — thành phần này đặt tài liệu của bạn sử dụng ký tự ở định dạng UTF-8, hầu hết các ký tự phần lớn là các ngôn ngữ chữ viết của con người. Về cơ bản, bây giờ nó có thể xử lý bất kỳ nội dung có thể đặt trên đó. Không có lý do gì để không thiết lập điều này, và nó giúp tránh một số vấn đề sau này.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — thành phần {{htmlelement("title")}}. Điều này đặt tiêu đề cho trang của bạn, là tiêu đề xuất hiện trong tab trình duyệt đang được tải. Nó cũng được sử dụng để mô tà trang khi bạn đánh dấu / yêu thích nó.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — thành phần {{htmlelement("body")}}. Điều này chứa <em>tất cả</em> nội dung mà bạn muốn hiển thị cho người dùng web khi họ truy cập trang của bạn, cho đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hoặc bất kỳ nội dung nào khác.</li>
+</ul>
+
+<h2 id="Hình_ảnh">Hình ảnh</h2>
+
+<p>Hãy chú ý đến phần tử {{htmlelement("img")}} lần nữa:</p>
+
+<pre>&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Như chúng tôi đã nói trước đây, nó nhúng hình ảnh vào trang của chúng tôi ở vị trí xuất hiện. Nó thực hiện điều này thông qua thuộc tín <code>src</code> (source), chứa đường dẫn đến tệp hình ảnh của chúng ta.</p>
+
+<p>Chúng tôi cũng đã bao gồm một thuộc tính <code>alt</code> (alternative). Trong thuộc tính này, bạn chỉ định văn bản mô tả cho người dùng không thể xem hình ảnh, có thể vì:</p>
+
+<ol>
+ <li>Họ bị khiếm thị. Người dùng bị khiếm thị đáng kể thường sử dụng các công cụ được gọi là trình đọc màn hình để đọc to văn bản thay thế chúng.</li>
+ <li>Đã xảy ra sự cố khiến hình ảnh không hiển thị. Ví dụ, cố gắng thay đổi đường dẫn bên trong thuộc tính <code>src</code> của bạn không đúng. Nếu bạn lưu và tải lại trang, bạn sẽ thấy một cái gì đó như thế này cho hình ảnh:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png"></p>
+
+<p>Các từ khóa về văn bản thay thế "văn bản mô tả". Văn bản thay thế bạn nên cung cấp cho người đọc đủ thông tin để có ý tưởng hay về hình ảnh chuyển tải. Trong ví dụ này, văn bản hiện tại của chúng tôi về "Hình ảnh thử nghiệm của tôi" không tốt chút nào. Một thay thế tốt hơn cho biểu tượng Firefox của chúng tôi sẽ là "Biểu thượng Firefox: một con cáo rực lửa xung quanh trái đất."</p>
+
+<p>Hãy thử đưa ra một số văn bản thay thế tốt hơn cho hình ảnh của bạn ngay bây giờ.</p>
+
+<p><strong>Chú thích</strong>: Tìm hiểu thêm về trợ năng tại <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p>
+
+<h2 id="Đánh_dấu_văn_bản">Đánh dấu văn bản</h2>
+
+<p>Phần này sẽ bao gồm một số phần tử HTML cơ bản mà bạn sẽ sử dụng để đánh dấu văn bản.</p>
+
+<h3 id="Đề_mục">Đề mục</h3>
+
+<p>Thành phần đầu đề cho phép bạn chỉ định rằng các thành phần nhất định của nội dung của bạn là các tiêu đề — hoặc các tiêu đề phụ — nội dung của bạn. Trong cùng một một cách mà một cuốn sách có một tiêu đề chính, tiêu đề chương và phụ đề, mà tài liệu HTML có thể có. HTML chứa sáu cấp tiêu đề, {{htmlelement("h1")}}–{{htmlelement("h6")}} thường bạn sẽ chỉ sử dụng tối đa là 3–4:</p>
+
+<pre>&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>Bây giờ hãy thử thêm tiêu đề phù hợp vào trang HTML của bạn ngay phía trên phần tử {{htmlelement("img")}} của bạn.</p>
+
+<h3 id="Đoạn_văn">Đoạn văn</h3>
+
+<p>Như đã giải thích ở trên, các thành phần {{htmlelement("p")}} chứa các đoạn văn bản; bạn sẽ sử dụng chúng thường xuyên khi đánh dấu nội dung văn bản thông thường:</p>
+
+<pre>&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Thêm văn bản mẫu của bạn ( bạn nên tham khảo từ <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>) vào một hoặc một vài đoạn văn, được đặt trực tiếp bên dưới phần tử {{htmlelement("img")}} của bạn.</p>
+
+<h3 id="Danh_sách">Danh sách</h3>
+
+<p>Rất nhiều nội dung của trang web là danh sách và HTML có các yếu tố đặc biệt cho các danh sách này. Việc đánh dấu danh sách luôn bao gồm ít nhất hai phần tử. Các loại danh sách phổ biến nhất có thứ tự và danh sách không có thứ tự:</p>
+
+<ol>
+ <li><strong>Danh sách không có thứ tự</strong> dành cho các danh sách có thứ tự không quan trọng, như danh sách mua sắm. Chúng được bọc trong phần tử {{htmlelement("ul")}}.</li>
+ <li><strong>Danh sách có thứ tự</strong> dành cho các danh sách có thứ tự của các vật phẩm, chẳng hạn như công thức. Chúng được bọc trong thành phần {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Mỗi mục bên trong danh sách được đặt bên trong phần tử {{htmlelement("li")}} (mục danh sách).</p>
+
+<p>Ví dụ, chúng ta muốn thay một phần của đoạn sau vào một danh sách:</p>
+
+<pre>&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>Chúng tôi thực hiên điều đó:</p>
+
+<pre>&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>Thử thêm danh sách có thứ tự và không thứ tự vào trang ví dụ của bạn.</p>
+
+<h2 id="Liên_kết">Liên kết</h2>
+
+<p>Liên kết rất quan trọng — đó là những gì làm cho web trở thành một trang web! Để thêm liên kết, chúng tôi cần sử dụng một thành phần đơn giản — {{htmlelement("a")}} — "a" viết tắt của "anchor". Để làm cho văn bản trong đoạn văn của bạn thành môt liên kết, hãy làm theo các bước sau:</p>
+
+<ol>
+ <li>Chọn một số wăn bản. Chúng tôi đã chọn=&gt; "Mozilla Manifesto".</li>
+ <li>Văn bản được bao bởi thành phần {{htmlelement("a")}}, như sau:
+  <pre>&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Cung cấp thành phần {{htmlelement("a")}} một thuộc tính <code>href</code>, như sau:
+  <pre>&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Điền vào giá trị của thuộc tính này với địa chỉ web mà bạn muốn liên kết đến:
+  <pre>&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Bạn có thể nhận được kết quả không mong muốn nếu bạn bỏ qua phần <code>https://</code> or <code>http://</code>, được gọi là <em>giao thức</em>, ở đầu địa chỉ web. Sau khi tạo liên kết, hãy nhấp vào liên kết đó để đảm bảo rằng nó đang đưa bạn đến đúng nơi bạn muốn.</p>
+
+<p><code>href</code> có thể xuất hiện như một lựa chọn khá mơ hồ đối với tên thuộc tính lúc đầu. Nếu gặp khó khăn khi nhớ nó, hãy nhớ nó là từ viết tắt của <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
+
+<p>Thêm liên kết vào trang của bạn ngay bây giờ, nếu bạn chưa làm như vậy.</p>
+
+<h2 id="Kết_luận">Kết luận</h2>
+
+<p>Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ kết thúc với một trang trông giống như dưới đây (bạn cũng có thể <a href="http://mdn.github.io/beginner-html-site/">xem nó ở đây</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"></p>
+
+<p>Nếu gặp khó khăn, bạn luôn có thể so sánh công việc của mình với <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">mã ví dụ đã hoàn thành của chúng tôi </a>trên GitHub.</p>
+
+<p>Ở đây, chúng tôi chỉ nói sơ qua bên ngoài của HTML. Để tìm hiểu thêm, hãy truy cập <a href="/en-US/Learn/HTML">Chủ đề học tập HTML</a> của chúng tôi.</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="Trong_mô-đun_này">Trong mô-đun này</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Cài đặt phần mềm cơ bản</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">Trang web của bạn trông như thế nào?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Xử lý tập tin</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Cơ bản về HTML</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">Cơ bản về CSS</a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Cơ bản về JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Xuất bản trang web của bạn</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Cách hoạt dông của trang web</a></li>
+</ul>
+</div>
+
+<ul>
+ <li id="How_the_web_works"> </li>
+</ul>
diff --git a/files/vi/learn/getting_started_with_the_web/index.html b/files/vi/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..11088af28b
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,58 @@
+---
+title: Bắt đầu với Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Hướng dẫn
+  - Sơ cấp
+  - Thiết kế
+translation_of: Learn/Getting_started_with_the_web
+---
+<p>{{LearnSidebar}}</p>
+
+<div class="summary">
+<p><em>Bắt đầu với Web</em> là loạt bài ngắn gọn giới thiệu cho bạn tính thực tiễn của việc phát triển web. Bạn sẽ thiết lập các công cụ cần thiết để xây dựng một trang web đơn giản và xuất bản trang web của chính mình.</p>
+</div>
+
+<h2 id="Câu_chuyện_về_trang_web_đầu_tiên_của_bạn">Câu chuyện về trang web đầu tiên của bạn</h2>
+
+<p>Có rất nhiều việc phải làm để tạo ra một trang web chuyên nghiệp, vì vậy nếu bạn là người mới bắt đầu làm web, chúng tôi khuyến khích bạn nên bắt đầu từ mục tiêu nhỏ. Bạn sẽ không xây dựng một trang web tựa như Facebook ngay, nhưng không khó để làm ra một trang web trực tuyến đơn giản của riêng bạn, vì vậy chúng ta sẽ bắt đầu từ đó.</p>
+
+<p>Bằng cách làm theo các bài viết được liệt kê dưới đây, bạn sẽ đi từ lúc không biết gì đến khi có được trang web trực tuyến đầu tiên. Bắt đầu thôi!</p>
+
+<h3 id="Cài_đặt_các_phần_mềm_cơ_bản"><a href="/vi/docs/Learn/Getting_started_with_the_web/C%C3%A0i_%C4%91%E1%BA%B7t_c%C3%A1c_ph%E1%BA%A7n_m%E1%BB%81m_c%C6%A1_b%E1%BA%A3n">Cài đặt các phần mềm cơ bản</a></h3>
+
+<p>Đề cập tới các công cụ để xây dựng một trang web thì có rất nhiều để lựa chọn. Nếu bạn đang bắt đầu, bạn có thể bị rối bởi danh sách những trình soạn thảo code, các thư viện framework, và các công cụ kiểm tra. Trong bài <a href="https://developer.mozilla.org/vi/docs/Learn/Getting_started_with_the_web/C%C3%A0i_%C4%91%E1%BA%B7t_c%C3%A1c_ph%E1%BA%A7n_m%E1%BB%81m_c%C6%A1_b%E1%BA%A3n">Cài đặt các phần mềm cơ bản</a>, chúng tôi sẽ chỉ cho bạn từng bước để cài đặt những phần mềm bạn cần để bắt đầu phát triển web cơ bản.</p>
+
+<h3 id="Trang_web_của_bạn_sẽ_trông_như_thế_nào"><a href="/vi/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Trang web của bạn sẽ trông như thế nào?</a></h3>
+
+<p>Điều đầu tiên, trước khi bắt đầu viết code cho trang web của bạn thì hãy lập một kế hoạch để thực hiện nó. Những thông tin mà bạn muốn giới thiệu là gì? Những font chữ và màu sắc bạn sẽ dùng đến? <a href="/vi/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Trang web của bạn sẽ trông như thế nào?</a> Chúng tôi sẽ phác thảo một phương pháp cơ bản mà bạn có thể học theo để lên kế hoạch cho nội dung và thiết kế của trang web.</p>
+
+<h3 id="Làm_việc_với_các_tập_tin"><a href="/vi/Learn/Getting_started_with_the_web/Dealing_with_files">Làm việc với các tập tin</a></h3>
+
+<p>Một trang web chứa rất nhiều tập tin khác nhau : văn bản, mã nguồn, stylesheets, các tập tin media, v.v. Khi tiến hành xây dựng một trang web, bạn cần phải lắp ráp những tập tin này thành một cấu trúc hợp lý và chắc chắn là chúng cỏ thể tương tác lẫn nhau. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Làm việc với các tập tin</a> giải thích việc làm thế nào để thiết lập một cấu trúc tập tin hợp lý cho trang web của bạn và nhưng vấn đề mà bạn nên biết.</p>
+
+<h3 id="HTML_cơ_bản"><a href="/vi/Learn/Getting_started_with_the_web/HTML_basics">HTML cơ bản</a></h3>
+
+<p>Hypertext Markup Language (HTML) Ngôn Ngữ Đánh Dấu Siêu Văn Bản là ngôn ngữ bạn sẽ dùng để xây dựng cấu trúc nội dung của một trang web, làm cho nội dung của trang web có ý nghĩa và có mục đích . Chẳng hạn như, nội dung của tôi là một tập hợp các đoạn văn, hay một danh sách các liệt kê? Tôi có cần chèn ảnh vào trang hay không? Tôi có chèn bảng dữ liệu hay không? Để không khiến bạn phải bị rối, <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML cơ bản</a> cung cấp đủ thông tin để bạn làm quen với HTML.</p>
+
+<h3 id="CSS_cơ_bản"><a href="/vi/Learn/Getting_started_with_the_web/CSS_basics">CSS cơ bản</a></h3>
+
+<p>Cascading Style Sheets (CSS) (Trang quy định mẫu thiết kế theo tầng) là ngôn ngữ bạn sẽ dùng để tạo kiểu dáng cho trang web của mình . Ví dụ, khi bạn muốn quy dịnh màu của văn bạn hay tiêu đề, màu nền? Cách mà nội dung hiện thị trên trang? Bố cục phông nền và màu sắc để trang trí cho trang web? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS cơ bản</a> đưa bạn qua nơi bạn cần bắt đầu.</p>
+
+<h3 id="JavaScript_cơ_bản"><a href="/vi/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript cơ bản</a></h3>
+
+<p>JavaScript là một ngôn ngữ lập trình mà bạn cần để thêm vào tính năng tương tác cho trang web của mình , chẵng hạn như là các trò chơi, cách xử lý những sự kiện xảy ra khi ta bấm vào một nút hoặc khi dữ liệu được nhập vào từ mẫu đơn, những hiệu ứng động, hoạt hình , và nhiều hơn thế nữa. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript cơ bản</a> sẽ cho bạn  ý tưởng hình dung về những việc mà ngôn ngữ thú vị này có thể làm được và cách để bắt đầu nó.</p>
+
+<h3 id="Xuất_bản_website_của_bạn"><a href="/vi/Learn/Getting_started_with_the_web/Publishing_your_website">Xuất bản website của bạn</a></h3>
+
+<p>Một khi mà bạn đã hoàn thành việc viết mã nguồn và tổ chức các tập tin và trang trí cho trang web của mình xong, bạn cần phải xuất bản nó lên mạng để mọi người có thể tìm thấy nó. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Xuất bản trang web</a> sẽ miêu tả cách để thực hiện việc này một cách đơn giản nhất.</p>
+
+<h3 id="Web_hoạt_động_như_thế_nào"><a href="/vi/Learn/Getting_started_with_the_web/How_the_Web_works">Web hoạt động như thế nào</a></h3>
+
+<p>Khi bạn truy cập vào một trang web ưa thích nào đó, có rất nhiều những điều đang xảy ra bên dưới nó mà có lẽ bạn chưa biết. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Trang web hoạt động như thế nào</a> phác thảo những thứ đang xảy ra khi bạn xem một trang web trên máy tính của mình.</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Một loạt video tuyệt vời giải thích nguyên tắc cơ bản về web, nhằm mục đích phát triển web hoàn chỉnh. Được tạo bởi <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p>
+
+<p> </p>
diff --git a/files/vi/learn/getting_started_with_the_web/javascript_basics/index.html b/files/vi/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..c224472c87
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,420 @@
+---
+title: JavaScript cơ bản
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Cơ Bản
+  - Học javascript
+  - Học lập trình
+  - Học lập trình Web
+  - JavaScrtip
+  - Viết mã
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript là một ngôn ngữ gia thêm khả năng tương tác cho website của bạn (ví dụ: trò chơi, các phản hồi khi các nút được nhấn hoặc nhập dữ liệu trên form, kiểu động, hoạt họa). Bài viết này sẽ giúp bạn khởi động với ngôn ngữ thú vị này và cho bạn ý tưởng về những gì có thể xảy ra.</p>
+</div>
+
+<h2 id="JavaScript_thật_sự_là_gì">JavaScript thật sự là gì?</h2>
+
+<p>{{Glossary("JavaScript")}} (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính năng của một {{Glossary("Dynamic programming language", "ngôn ngữ lập trình động")}} mà khi nó được áp dụng vào một tài liệu {{Glossary("HTML")}}, nó có thể đem lại khả năng tương tác động trên các trang web. Cha đẻ của ngôn ngữ này là Brendan Eich, đồng sáng lập dự án Mozilla, quỹ Mozilla, và tập đoàn Mozilla.</p>
+
+<p>JavaScript thật sự rất linh hoạt. Bạn có thể bắt đầu với các bước nhỏ, với thư viện ảnh, bố cục có tính thay đổi và phản hồi đến các nút nhấn. Khi có nhiều kinh nghiệm hơn, bạn có thể tạo ra các trò chơi, hoạt họa 2D hoặc 3D, ứng dụng cơ sở dữ liệu toàn diện và nhiều thứ khác!</p>
+
+<p>Bản thân Javascript là một ngôn ngữ linh động. Các nhà phát triển đã viết ra một số lượng lớn các công cụ thuộc top của core Javascript, mở ra một lượng lớn tính năng bổ sung với ít nỗ lực nhất. Nó bao gồm:</p>
+
+<ul>
+ <li>Giao diện lập trình ứng dụng trên trình duyệt ({{Glossary("API","API")}}) — Các API được xây dựng bên trong các trình duyệt web, cung cấp tính năng như tạo HTML động, cài đặt CSS, thu tập và điều khiển video trực tiếp từ webcam của người dùng hoặc sinh ra đồ dọa 3D và các mẫu audio.</li>
+ <li>Các API bên thứ ba cho phép nhà phát triển kết hợp tính năng trong website của họ từ người cung cấp nội dung khác chẳng hạn như Twitter hay Facebook.</li>
+ <li>Từ các framework và thư viện bên thứ ba bạn có thể áp dụng tới tài liệu HTML của bạn, cho phép bạn nhanh chóng xây dựng được các trang web và các ứng dụng.</li>
+</ul>
+
+<p>Vì bài viết này chỉ giới thiệu về JavaScript, chúng tôi sẽ không làm bạn bối rối khi nói rõ hơn về sự khác nhau giữa mã nguồn JavaScript căn bản và những công cụ được liệt kê ở trên. Bạn có thể tìm hiểu chi tiết trong  <a href="/en-US/docs/Learn/JavaScript">Mục học JavaScript</a>, và MDN.</p>
+
+<p>Ở phần dưới chúng tôi sẽ giới thiệu cho bạn một số khía cạnh cơ bản về JavaScript và bạn cũng sẽ được làm việc với một vài API. Chúc bạn học tốt!</p>
+
+<h2 id="Ví_dụ_Hello_World">Ví dụ "Hello World"</h2>
+
+<p>Phần phía dưới có thể nghe thật thú vị. JavaScript là một trong những công nghệ web sống động nhất và nếu như bạn sử dụng thật tốt, các website của bạn sẽ mang tính sáng tạo và đầy sức mạnh.</p>
+
+<p>Tuy nhiên, nắm bắt Javascript sẽ có một chút khó hơn so  với HTML và CSS. Bạn có thể phải bắt đầu từng bước nhỏ và giữ cho quá trình làm việc luôn nhất quán. Để bắt đầu, chúng tôi sẽ biểu diễn cách làm thế nào để thêm những đoạn JavaScript cơ bản tới trang web, tạo ví dụ <em>"Hello world" </em>(<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">ví dụ tiêu chuẩn trong lập trình cơ bản</a>).</p>
+
+<div class="warning">
+<p><span style="font-size: 14px;"><strong>Chú ý: </strong></span>nếu bạn không theo dõi toàn bộ bài học<span style="font-size: 14px;">, </span><a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">hãy tải đoạn code mẫu</a> và dùng nó như điểm khơi đầu.</p>
+</div>
+
+<ol>
+ <li>Đầu tiên, đi đến trang web thử nghiệm và tạo một thư mục mới tên là 'scripts' (mà không có dấu nháy). Sau đó, trong thư mục scripts mà bạn vừa tạo, hãy thêm một tệp mới với tên là <code>main.js</code>. Lưu nó vào thư mục <code>scripts</code> .</li>
+ <li>Tiếp theo, trong tệp index.html thêm phần tử sau trên một dòng mới trước thẻ đóng &lt;/body&gt;:
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Điều này là cơ bản giống như việc thêm {{htmlelement("đường dẫn")}} phần tử cho CSS — Nó áp dụng JavaScript tới page, vì vậy nó có thể có ảnh hưởng tới tài liệu HTML(cùng với CSS và bất kỳ điều gì khác trên trang).</li>
+ <li>Thêm đoạn mã sau vào tệp <code>main.js</code> :
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>Cuối cùng, để chắc chắn tập tin HTML và JavaScript đã được lưu. Bạn sẽ phải thấy nội dung sau trên trình duyêt:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Lý do chúng ta đặt thẻ {{htmlelement("script")}} gần cuối tập tin HTML là để nội dung HTML được tải xuống trước và hiển thị trước, còn nếu tập tin JavaScript được tải trước, code trong JavaScript được thực thi trong khi HTML chưa được tải xuống. JavaScript sẽ chạy không đúng. Cho nên cách an toàn nhất là chúng ta đặt JavaScript ở cuối tập tin HTML.</p>
+</div>
+
+<h3 id="Chuyện_gì_đã_xảy_ra">Chuyện gì đã xảy ra?</h3>
+
+<p>Chúng ta thấy dòng tiêu đề bây giờ đã được đổi thành "Hello world!" bằng dòng lệnh JavaScript. Bạn đã làm được điều này bằng cách gọi hàm <code>{{domxref("Document.querySelector", "querySelector()")}} </code>để lấy tham chiếu đến tiêu đề và lưu nó vào biến <code>myHeading</code>. Việc này tương tự như cách chúng ta dùng CSS selectors. Khi cần làm thực hiện điều gì trên một phần tử, trước tiên chúng ta cần tham chiếu đến nó trước.</p>
+
+<p>Sau đó, bạn gán giá trị của thuộc tính <code>{{domxref("Node.textContent", "textContent")}}</code> của biến <code>myHeading</code> thành "Hello world!".</p>
+
+<div class="note">
+<p><strong>Lưu ý: </strong>Cả hai tính năng bạn dùng ở trên đều là một phần của <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, thứ cho phép bạn chọn và xử lý các phần trên tài liệu HTML</p>
+</div>
+
+<h2 id="Khoá_học_cơ_bản_về_ngôn_ngữ">Khoá học cơ bản về ngôn ngữ</h2>
+
+<p>Để bạn hiểu rõ hơn về cách JavaScript làm việc, chúng ta sẽ tiếp tục đi qua một vài khái niệm cơ bản của ngôn ngữ. Các khái niệm này, có thể bạn cũng đã làm quen ở các ngôn ngữ khác, và nếu bạn đã là một lập trình viên, tôi tin chắc bạn đã sẵn sàng để lập trình bất cứ thứ gì với JavaScript.</p>
+
+<div class="warning">
+<p><strong>Lưu ý:</strong> Để việc học hiệu quả hơn, bạn hãy thử viết các dòng code ví dụ vào JavaScript console để thấy sự hoạt động của code. Để hiểu rõ hơn về JavaScript console, hãy xem ở bài viết này <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p>
+</div>
+
+<h3 id="Biến">Biến</h3>
+
+<p>{{Glossary("Variable", "Biến")}} là các thùng chứa các giá trị bên trong. Bạn có thể bắt đầu khai báo một biến với từ khoá <code>var</code> theo sau bởi tên biến.</p>
+
+<pre class="brush: js">let myVariable;</pre>
+
+<div class="note">
+<p><strong>Chú ý:</strong> Dấu chấm phẩy ở phía cuối của dòng để đánh dấu điểm kết thúc của câu lệnh. Nó thực sự cần thiết khi bạn có nhiều câu lệnh trong cùng một dòng, nhưng một số người cho rằng nên đặt dấu chấm phẩy cho mỗi câu lệnh. Có một vài quy tắc khi nào dùng và khi nào không dùng dấu chấm phẩy — xem <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a> để biết thêm chi tiết.</p>
+</div>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có thể đặt bất cứ tên nào cho biến, nhưng có vài tên bị cấm (xem <a href="http://www.codelifter.com/main/tips/tip_020.shtml">bài viết này để biết luật đặt tên</a>.) Nếu vẫn chưa chắc, bạn có thể <a href="https://mothereff.in/js-variables">kiểm tra tên biến của mình</a> để xem liệu nó đã hợp lệ hay chưa.</p>
+</div>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: JavaScript phân biệt hoa thường — <code>myVariable</code> và <code>myvariable</code> là hai biến khác nhau. Nếu có vấn đề trong mã nguồn, hãy kiểm tra chữ hoa-thường!</p>
+</div>
+
+<p>Sau khi khai báo biến, bạn có thể gán giá trị cho nó:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Bạn có thể thực hiện cả hai phép toán này trong cùng một dòng nếu muốn:</p>
+
+<pre class="brush: js">let myVariable = 'Bob';</pre>
+
+<p>Bạn có thể lấy ra giá trị chỉ bằng cách gọi tên biến:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Sau khi gán giá trị cho biến, bạn có thể thay đổi giá trị của nó:</p>
+
+<pre>let myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Hãy nhớ mỗi biến có <a href="/en-US/docs/Web/JavaScript/Data_structures">kiểu dữ liệu</a> khác nhau:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Biến</th>
+   <th scope="col">Giải thích</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Một chuỗi các ký tự hay còn gọi là xâu. Để thông báo giá trị nào đó là xâu, bạn nên đặt nó trong dấu nháy.</td>
+   <td><code>let myVariable = 'Bob';</code> hoặc <code>let myVariable = "Bob";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Số. Không đặt số trong dấu nháy.</td>
+   <td><code>let myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Giá trị True/False. <code>true</code> và <code>false</code> là các từ khoá đặc biệt trong JS, và không cần tới dấu nháy.</td>
+   <td><code>let myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Cấu trúc cho phép bạn lưu trữ nhiều giá trị trong một tham chiếu đơn.</td>
+   <td><code>let myVariable = [1,'Bob','Steve',10];</code><br>
+    Trỏ vào mỗi phần tử của mảng theo cách sau:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, vân vân.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Về cơ bản là bất cứ thứ gì. Mọi thứ trong JavaScript đều là object, và có thể lưu trữ trong biến. Hãy ghi nhớ điều này trong lúc học.</td>
+   <td><code>let myVariable = document.querySelector('h1');</code><br>
+    Tất cả các ví dụ phía trên cũng vậy.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vậy tại sao ta lại cần tới biến? Chà, lập trình mà không có biến thì kém thú vị đi bao nhiêu. Nếu giá trị không thể thay đổi, thì bạn không thể làm mọi thứ một cách động được, như là cá nhân hoá lời mời chào hay thay đổi ảnh hiển thị trong bộ sưu tập.</p>
+
+<h3 id="Comments">Comments</h3>
+
+<p>Bạn có thể viết comment vào mã nguồn JavaScript, như có thể làm với CSS:</p>
+
+<pre class="brush: js">/*
+Mọi thứ giữa khoảng này đều là comment.
+*/</pre>
+
+<p>Nếu comment của bạn không bao gồm ký tự xuống dòng, thường chỉ cần dùng hai dấu sược như sau:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// Đây là một comment
+</pre>
+
+<h3 id="Toán_tử">Toán tử</h3>
+
+<p><code>{{Glossary("operator", "Toán tử")}}</code> là ký hiệu toán học mà tạo ra kết quả dựa trên hai giá trị (hoặc biến). Trong bảng sau, bạn có thể thấy vài toánt ử đơn giản nhất, đi kèm với ví dụ bạn có thể thử trong JavaScript console.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Toán tử</th>
+   <th scope="col">Giải thích</th>
+   <th scope="col">Ký hiệu</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">cộng/nối</th>
+   <td>Dùng để cộng hai số, hoặc nối hai xâu lại với nhau.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">trừ, nhân, chia</th>
+   <td>Ba toán tử này làm y chang những gì bạn được học trong tiết toán ở trường.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // nhân trong JS là dấu sao<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">toán tử gán</th>
+   <td>Bạn từng thấy toán tử này rồi: nó gán giá trị cho một biến.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">toán tử identity (đồng nhất)</th>
+   <td>Kiểm tra xem hai giá trị đã cho có bằng nhau không, và trả về kết quả <code>true</code>/<code>false</code> (Boolean).</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Phủ định, không bằng</th>
+   <td>Trả về giá trị logic đối nghịch; nó biến <code>true</code> thành <code>false</code>, vân vân. Khi dùng cùng với toán tử Bằng, toán tử phủ định kiểm tra xem liệu hai giá trị có <em>không</em> bằng nhau hay không.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Đáng ra sẽ trả về <code>true</code>, nhưng phép so sánh trả về <code>false</code> bởi ta đã phủ định nó:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Ở đây chúng ta kiểm tra xem "liệu <code>myVariable</code> có KHÔNG bằng 3 hay không". Phép toán này trả về<code> false</code> bởi vì <code>myVariable</code> CÓ bằng 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Còn nhiều toán tử cần khám phá lắm, nhưng hiện giờ thì như này là đủ rồi. Xem <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Biểu thức và toán tử</a> để thấy danh sách đầy đủ.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Trộn kiểu dữ liệu có thể dẫn tới kết quả không mong muốn khi thực thi tính toán, nên hãy cẩn trọng khi tham chiếu tới biến để đạt được kết quả mong muốn. Chẳng hạn, nhập <code>"35" + "25"</code> vào console của bạn. Tại sao bạn không nhận được kết quả như mong đợi? Bởi vì dấu nháy đã biến số bạn nhập vào thành xâu, nên bạn vừa nối hai xâu lại với nhau thay vì tìm tổng của chúng. Thay vì thế, <code>35 + 25</code> bạn sẽ nhận được kết quả mong chờ.</p>
+</div>
+
+<h3 id="Điều_kiện">Điều kiện</h3>
+
+<p>Điều kiện là cấu trúc mã nguồn cho phép bạn kiểm tra xem liệu một biểu thức có trả về true hay không, rồi chạy các đoạn mã nguồn kế tiếp dựa theo kết quả ấy. Dạng điều kiện thường thấy nhất là <code>if ... else</code>. Chẳng hạn:</p>
+
+<pre class="brush: js">let iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>Biểu thức bên trong <code>if ( ... )</code> là bài kiểm tra — nó dùng toán tử đồng nhất (vừa mô tả phía trên) để so sánh biến <code>iceCream</code> với xâu <code>chocolate</code> để kiểm tra xem liệu hai giá trị có bằng nhau hay không. Nếu phép so sánh trả về <code>true</code>, khối mã đầu tiên sẽ chạy. Nếu phép so sánh không trả về là true, bỏ qua khối mã đầu và thực thi khối mã thứ hai, sau lệnh <code>else</code>.</p>
+
+<h3 id="Hàm">Hàm</h3>
+
+<p>{{Glossary("Function", "Hàm")}} là một cách để đóng gói tính năng mà bạn muốn tái sử dụng. Khi cần thực thi thủ tục nào đó, bạn chỉ cần gọi hàm, với tên hàm là đủ, thay vì phải viết lại cả đoạn code loằng ngoằng. Bạn vừa thấy vài ví dụ về cách sử dụng hàm ở phía trên, chẳng hạn như:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Những hàm này, <code>document.querySelector</code> và <code>alert</code>, đều được cài sẵn trong trình duyệt cho bạn sử dụng lúc nào muốn.</p>
+
+<p>Nếu bạn thấy thứ gì đấy trông giống biến, nhưng có ngoặc tròn — <code>()</code> — đằng sau, chắc chắn đó là hàm đấy. Hàm thường có {{Glossary("Argument", "đối số")}} — dữ liệu phục vụ cho hàm. Chúng thường nằm trong ngoặc tròn, ngăn cách với nhau bởi dấu phẩy nếu có nhiều hơn một đối số.</p>
+
+<p>Chẳng hạn, hàm <code>alert()</code> tạo ra một hộp thoại pop-up trên trình duyệt của bạn, nhưng ta cần truyền vào đối số của nó một xâu ký tự để bảo hàm đó cái cần phải in ra trong hộp thoại pop-up.</p>
+
+<p>Tin tốt là bạn có thể tự định nghĩa hàm cho riêng mình - trong ví dụ kế tiếp, ta sẽ viết một hàm đơn giản nhận hai giá trị kiểu số làm đối số và nhân chúng lại với nhau:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Thử chạy hàm trên trong console, và thử với vài đối số. Chẳng hạn:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Lệnh <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> bảo trình duyệt trả về biến <code>result</code> ra khỏi hàm để nó có thể được sử dụng. Điều này cực kì cần thiết bởi vì biến định nghĩa trong hàm chỉ khả dụng bên trong hàm đó. Đây gọi là {{Glossary("Scope", "phạm vi")}} biến. (Đọc <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">để hiểu thêm về phạm vi của biến</a>.)</p>
+</div>
+
+<h3 id="Sự_kiện">Sự kiện</h3>
+
+<p>Tương tác thực trên website cần sự kiện. Đây là những cấu trúc mã nguồn lắng nghe những thứ xảy ra trong trình duyệt và chạy mã tương ứng. Ví dụ gần gũi nhất là <a href="/en-US/docs/Web/Events/click">sự kiện click</a>, sẽ nổ ra trên trình duyệt khi bạn bấm vào gì đó bằng con chuột của mình. Để dễ hiểu, nhập đoạn code sau vào console của bạn, rồi click vào trang đang mở:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Có nhiều cách để gắn sự kiện cho một phần tử. Ở đây ta chọn phần tử HTML, cài đặt thuộc tính xử lý <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> cho nó thành hàm không tên, mang theo đoạn code mà ta muốn sự kiện click event chạy.</p>
+
+<p>Hãy nhớ rằng</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>tương tự với</p>
+
+<pre class="brush: js">let myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Chỉ ngắn hơn thôi.</p>
+
+<h2 id="Xây_dựng_trang_Web_mẫu">Xây dựng trang Web mẫu</h2>
+
+<p>Giờ ta đã trải qua JavaScript cơ bản, hãy thêm vài tính năng ngầu bá cháy vào trang web mẫu của chúng ta nào.</p>
+
+<h3 id="Thêm_bộ_chuyển_ảnh">Thêm bộ chuyển ảnh</h3>
+
+<p>Trong phần này, ta sẽ thêm thêm ảnh vào trang của mình bằng cách sử dụng vài tính năng của DOM API, dùng JavaScript để chuyển đổi giữa hai ảnh khi được click.</p>
+
+<ol>
+ <li>Trước tiên, tìm một ảnh khác mà bạn muốn đặt trên trang của mình. Đảm bảo nó bằng hoặc gần với kích cỡ với ảnh ban đầu.</li>
+ <li>Lưu hình ảnh này trong thư mục <code>images</code>.</li>
+ <li>Thay tên cho ảnh thành 'firefox2.png' (không có dấu nháy ' ').</li>
+ <li>Đi tới tệp <code>main.js</code>, và nhập vào đoạn JavaScript sau. (Nếu đống "Hello world!" vẫn còn đấy, xoá nó đi.)
+  <pre class="brush: js">let myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    let 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>
+ </li>
+ <li>Lưu tất cả các tệp tin và mở <code>index.html</code> trên trình duyệt. Giờ khi bạn click hình ảnh, nó sẽ lật qua lại giữa hai hình!</li>
+</ol>
+
+<p>Bạn lưu tham chiếu tới hình ảnh của mình trong biến <code>myImage</code>. Kế đến, bạn tạo hàm không tên cho thuộc tính xử lý sự kiện <code>onclick</code> của biến này. Giờ thì bất cứ khi nào hình ảnh được click:</p>
+
+<ol>
+ <li>Bạn lấy ra giá trị của thuộc tính <code>src</code> trên ảnh của mình.</li>
+ <li>Bạn dùng điều kiện để kiểm tra xem giá trị của <code>src</code> có bằng giá đường dẫn tới hình ảnh ban đầu không:
+  <ol>
+   <li>Nếu có, bạn thay đổi giá trị <code>src</code> thành đường dẫn của hình ảnh thứ hai, ép hình ảnh tải lại trong phần tử {{htmlelement("image")}}.</li>
+   <li>Nếu không (tức là nó đã bị thay đổi), giá trị <code>src</code> vòng lại đường dẫn ban đầu, trở về trạng thái ban đầu.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Thêm_lời_chào_cá_nhân_hoá">Thêm lời chào cá nhân hoá</h3>
+
+<p>Kế đến ta sẽ viết thêm vài dòng code, thay đổi tiêu đề trang thành lời chào cá nhân hoá khi người dùng lần đầu chuyển hướng tới trang. Lời chào này sẽ tồn tại mãi, kể cả khi người dùng ra khỏi trang và quay lại — ta sẽ lưu lại nó bằng cách sử dụng <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Ta cũng sẽ thêm lựa chọn thay đổi người dùng, và vì thế, lời chào sẽ ở đó bất cứ khi nào cần tới.</p>
+
+<ol>
+ <li>Trong <code>index.html</code>, thêm dòng sau ngay trước phần tử {{htmlelement("script")}}:
+
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>Trong <code>main.js</code>, đặt đoạn code sau đây xuống cuối của tệp tin, chính xác như được viết — đoạn này tham chiếu tới nút bấm mới và tiêu đề, lưu trữ chúng trong các biến:
+  <pre class="brush: js">let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Giờ hãy thêm hàm sau để cài đặt lời chào nào — chưa làm gì đâu, nhưng ta sẽ sửa lại nó ngay thôi:
+  <pre class="brush: js">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Hàm này chứa hàm <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, sẽ mở ra một hộp thoại, khá giống với <code>alert()</code>. Tuy nhiên, <code>prompt()</code> yêu cầu người dùng nhập dữ liệu vào, lưu trữ lại dữ liệu đó trong một biến sau khi người dùng nhấn nút <strong>OK</strong><em>.</em> Trong trường hợp này, ta đang yêu cầu nhập tên mình vào. Kế đến, ta gọi API tên là <code>localStorage</code>, cho phép ta lưu trữ dữ liệu trong trình duyệt và lấy ra sau này. Ta dùng hàm <code>setItem()</code> của localStorage để khởi tạo và lưu trữ mục dữ liệu gọi là <code>'name'</code>, cài đặt giá trị của nó cho biến <code>myName</code> chứa dữ liệu mà người dùng nhập vào. Cuối cùng, ta đặt <code>textContent</code> cho tiêu đề thành một xâu, kèm theo tên mà người dùng vừa nhập vào.</li>
+ <li>Tiếp theo, thêm khối <code>if ... else</code> — ta có thể gọi đây là mã khởi tạo, bởi nó bắt đầu khi trình duyệt vừa được tải xong:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Khối code này dùng toán tử phủ định (logical NOT, biểu diễn bởi !) để kiểm tra xem dữ liệu <code>name</code> có tồn tại hay không. Nếu không, hàm <code>setUserName()</code> sẽ chạy để khởi tạo nó. Nếu đã tồn tại (tức là, người dùng đã điền thông tin vào trong lần trước), ta lấy giá trị được trữ bằng <code>getItem()</code> và đặt xâu ký tự vào <code>textContent</code> cho tiêu đề, kèm theo tên người dùng, như đã làm trong hàm <code>setUserName()</code>.</li>
+ <li>Cuối cùng, đặt bộ xử lý sự kiện <code>onclick</code> sau vào nút bấm. Khi được bấm, hàm <code>setUserName()</code> sẽ chạy. Điều này cho phép người dùng đặt tên mới, nếu họ muốn:
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Giờ khi lần đầu vào trang, nó sẽ hỏi tên của bạn, rồi gửi cho bạn một lời chào. Bạn có thể đổi tên bất cứ khi nào tuỳ thích bằng cách nhấn vào nút. Như đã giải thích phía trên, vì tên được lưu bên trong localStorage, nó vẫn sẽ tồn tại ở đó dù cho trang bị đóng lại, giữ lời chào cho lần tiếp theo bạn vào trang!</p>
+
+<h3 id="A_user_name_of_null">A user name of null?</h3>
+
+<p>Khi bạn chạy ví dụ và nhận hộp thoại nhắc bạn nhập tên người dùng của mình, hãy thử nhấn nút <em>Hủy</em>. Bạn sẽ nhận được một tiêu đề có nội dung "Mozilla is cool, null". Điều này là do khi bạn hủy lời nhắc, giá trị được đặt là <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, một giá trị đặc biệt trong JavaScript về cơ bản đề cập đến việc không có giá trị.</p>
+
+<p>Ngoài ra, hãy thử nhấn OK mà không cần nhập bất kỳ tên nào - bạn nên kết thúc bằng một tiêu đề có nội dung "Mozilla is cool,", vì những lý do khá rõ ràng.</p>
+
+<p>Nếu bạn muốn tránh những vấn đề này, bạn có thể kiểm tra xem người dùng đã nhập <code>null</code> hoặc tên trống bằng cách cập nhật hàm <code>setUserName()</code> của bạn thành:</p>
+
+<pre><code>function setUserName() {
+  let myName = prompt('Please enter your name.');
+  if(!myName || myName === null) {
+    setUserName();
+  } else {
+    localStorage.setItem('name', myName);
+    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+  }
+}</code></pre>
+
+<p>Giá trị đầu vào — néu <code>myName</code> không có giá trị, hoặc nó là <code>null</code>, chạy <code>setUserName()</code> một lần nữa từ đầu. Nếu nó có một giá trị (nếu các câu trên không đúng), thì hãy lưu giá trị đó vào <code>localStorage</code> và đặt nó làm văn bản của tiêu đề.</p>
+
+<h2 id="Kết_luận">Kết luận</h2>
+
+<p>Nếu bạn làm theo các hướng dẫn trong bài viết này, thành quả của bạn sẽ trông như thế này (bạn có thể xem <a href="https://mdn.github.io/beginner-html-site-scripted/">phiên bản của chúng tôi tại đây</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>Nếu bạn bị bí ngòi, bạn có thể tham khảo <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">bản đã hoàn thiện trên Github</a>.</p>
+
+<p>Ta vừa mới làm quen với bề nổi của JavaScript. Nếu bạn thích thú việc này, và tiến xa hơn nữa, hãy ghé qua <a href="/en-US/docs/Learn/JavaScript">chủ đề học JavaScript</a> của chúng tôi.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/vi/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/vi/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..54381c5ca0
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,158 @@
+---
+title: Xuất bản trang web của bạn
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p> </p>
+
+<p>{{LearnSidebar}}</p>
+
+<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>
+
+<p> </p>
+
+<div class="summary">
+<p>Sau khi bạn hoàn thành việc viết code và sắp xếp các file trong website của bạn, việc cuối cùng bạn phải làm là đưa nó lên mạng. Bài viết này sẽ cho bạn một cái nhìn cơ bản về những cách đơn giản nhất để làm điều đó.</p>
+</div>
+
+<h2 id="Bạn_có_những_tùy_chọn_nào">Bạn có những tùy chọn nào?</h2>
+
+<p>Xuất bản một trang web không phải là một điều đơn giản, chủ yếu bởi vì có quá nhiều cách để thực hiện nó. Trong bài viết này, chúng tôi không hướng tới việc nêu ra hết tất cả các phương thức hiện có. Thay vào đó, chúng tối sẽ bàn luận về điểm mạnh và điểm yếu của của 3 phương thức phổ biến nhất từ góc nhìn của một người mới bắt đầu viết web, và hướng bạn đến với phương thức phù hợp nhất hiện tại với bạn.</p>
+
+<h3 id="Mua_một_dịch_vụ_hosting_và_tên_miền">Mua một dịch vụ hosting và tên miền</h3>
+
+<p>Nếu bạn muốn toàn quyền điều khiển trang web mà bạn muốn xuất bản, thì bạn có thể cần phải trả tiền để mua những thứ sau:</p>
+
+<ul>
+ <li>Hosting — một không gian lưu trử bạn thuê trên <a href="/en-US/Learn/What_is_a_web_server">máy chủ</a> của một công ty nào đó . Bạn đặt những file của mình trên đó, và máy chủ sẽ phục vụ những người dùng mạng yêu cầu những file đó - ở đây là trang web của bạn.</li>
+ <li>Một <a href="/en-US/Learn/Understanding_domain_names">tên miền</a> — một địa chỉ độc nhất nơi người ta có thể tìm đến trang web của bạn, như <code>http://www.mozilla.org</code>, hoặc <code>http://www.bbc.co.uk</code>. Bạn có thuể thuê tên miền trong vài năm từ một <strong>Nhà đăng ký tên miền</strong>.</li>
+</ul>
+
+<p>Rất nhiều trang web chuyên nghiệp đã được đưa lên mạng qua phương pháp đó.</p>
+
+<p>Thêm vào đó, bạn sẽ cẩn một phần mềm truyền tập tin FTP (xem <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> để biết chi tiết) để thật sự truyền những file của trang web đến máy chủ. Những phần mềm FPT rất khác biệt nhau, nhưng nói chung bạn phải đăng nhập vào máy chủ của bạn bằng những thông tin được công ty hosting cung cấp (VD: username, password, host name). Sau đó phần mềm sẽ hiển thị những file cục bộ trên máy tính của bạn và những file trên máy chủ trong hua cửa sổ riêng biệt để bạn có thể trao đổi file qua lại giữa chúng:</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="Mẹo_để_tìm_dịch_vụ_hosting_và_tên_miền">Mẹo để tìm dịch vụ hosting và tên miền</h4>
+
+<ul>
+ <li>Chúng tôi sẽ không đề cử công ty thương mại nào ở đây. Để tìm công ty hosting và nhà đăng ký tên miền, cứ google "web hosting" và "domain names" để tìm họ. Tất cả công ty đó sẽ có những tính năng cho phép bạn tìm tên miền mà bạn muốn.</li>
+ <li>Công ty cung cấp mạng cho nhà hoặc văn phòng của bạn có thể cung cấp cho bạn một số dịch vụ hosting giới hạn cho một website nhỏ. Chúng sẽ thiếu rất nhiều tính năng, nhưng lại có thể là dịch vụ hoàn hảo cho những thí nghiệm đầu tay của bạn — hãy cứ liên hệ với họ và hỏi!</li>
+ <li>Có một số dịch vụ miễn phí như <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, và <a href="https://wordpress.com/">Wordpress</a>. Nhắc lại lần nữa, bạn chỉ lấy được lại những gì bạn đã cho đi, nhưng chúng rất là lý tưởng cho những thí nghiệm ban đầu của bạn. Những dịch vụ miễn phí hầu hết không yêu cầu một phần mềm FPT để upload dữ liệu — bạn có thể chỉ cần kéo thả một cách đơn giản trên trang web là được.</li>
+ <li>Một số công ty cung cấp cả hosting và tên miền trong một gói dịch vụ.</li>
+</ul>
+
+<h3 id="Sử_dụng_một_số_công_cụ_trực_tuyến_như_GitHub_và_Dropbox">Sử dụng một số công cụ trực tuyến như GitHub và Dropbox</h3>
+
+<p>Một số công cụ cho phép bạn xuất bản trang web trực tuyến:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> là một trang "mạng xã hội lập trình". Nó cho phép bạn tải kho mã nguồn lên để lưu trữ trên hệ thống kiểm soát phiên bản <a href="http://git-scm.com/">Git</a><strong>. </strong>Sau đó bạn có thể làm việc trên dự án của mình, và hệ thống mặc định là mã nguồn mở, nghĩa là bất cứ ai trên thế giới có thể tìm thấy GitHub của bạn, sử dụng nó, học từ nó và cải thiện nó. Bạn cũng có thể làm điều đó với mã nguồn của người khác! Đây là một cộng đồng rất quan trọng và hữu dụng để tham gia vào, và Git/GitHub là <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">một hệ thống kiểm soát phiên bản</a> rất phổ biến— Hầu hết các công ty công nghệ sử dụng nó trong quy trình làm việc của họ. GitHub có một tính năng rất hữu dụng gọi là <a href="https://pages.github.com/">GitHub pages</a>, cho phép bạn có một trang web trực tuyến trên mạng.</li>
+ <li><a href="https://www.dropbox.com/">Dropbox</a> là một hệ thống lưu trữ cho phép bạn lưu dữ liệu trên mạng và truy cập chúng từ bất cứ đâu. Bất kỳ ai có kết nối Internet có thể truy cập thư mục Dropbox công cộng của bạn. Nếu thư mục đó chứa trang web, nó sẽ được hiển thị dưới dạng trang web một cách tự động. Xem <a href="http://www.dropboxwiki.com/tips-and-tricks/host-websites-with-dropbox">Host websites With Dropbox</a> để biết thêm thông tin.</li>
+</ul>
+
+<p>Không như hầu hết các dịch vụ hosting, những công cụ này hoàn toàn miễn phí, nhưng bạn sẽ chỉ có được một số giới hạn những tính năng.</p>
+
+<h3 id="Sử_dụng_một_web-based_IDE_như_Thimble">Sử dụng một web-based IDE như Thimble</h3>
+
+<p>Có một số ứng dụng web có thể giả lập một môi trường phát triển web, cho phép bạn nhập vào HTML, CSS và JavaScript sau đó hiển thị kết quả của những dòng code thành một trang web — tất cả trong một tab của trình duyệt! Nói chung những công cụ này đều dễ dùng, rất tốt cho việc học, và hoàn toàn miễn phí (cho những tính năng cơ bản), và họ có thể host trang web của bạn ở một địa chỉ độc nhất. Tuy nhiên, các tính năng cơ bản rất là giới hạn, và chúng thường không cung cấp hosting cho assets (như ảnh,...).</p>
+
+<p>Hãy thử những công cụ sau đây, và chọn thứ phù hợp với mình nhất:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.webmaker.org/">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</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="Xuất_bản_qua_GitHub">Xuất bản qua GitHub</h2>
+
+<p>Bây giờ chúng tôi sẽ hướng dẫn bạn cách xuất bản trang web qua GitHub. Chúng tôi không cho rằng đây là cách duy nhất hay tốt nhất để xuất bản trang web của bạn, nhưng nó hoàn toàn miễn phí, khá đơn giản, và cho bạn một số kỹ năng hữu dụng cho tương lai.</p>
+
+<h3 id="Thiết_lập_cơ_bản">Thiết lập cơ bản</h3>
+
+<ol>
+ <li>Đầu tiên, <a href="http://git-scm.com/downloads">cài Git</a> lên máy tính của bạn. Đây là phần mềm quản lý phiên bản mà GitHub dựa trên để hoạt động.</li>
+ <li>Tiếp theo, <a href="https://github.com/join">đăng ký một tài khoản GitHub</a>. Nó rất đơn giản  và dễ dàng.</li>
+ <li>Sau khi đăng ký được tài khoản, đăng nhập vào github.com.</li>
+ <li>Tiếp theo, bạn cần tạo một repo mới cho những file của mình. Click dấu cộng (+) trên góc trên bên phải của trang chủ GitHub, rồi chọn <em>New Repository</em>.</li>
+ <li>Trên trang này, trong hộp thoại <em>Repository name</em>, gõ <em>username</em>.github.io, với <em>username</em> là tên đăng nhập của bạn. Lấy ví dụ, bobsmith sẽ nhập <em>bobsmith.github.io</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>Click <em>Create repository</em>; this should bring you to the following page: <img alt="" src="https://mdn.mozillademos.org/files/9481/github-populate-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+</ol>
+
+<h3 id="Tải_file_lên_GitHub">Tải file lên GitHub</h3>
+
+<p>Đây là nơi chúng ta sẽ dùng cửa sổ dòng lệnh để đưa repo của chúng ta lên GitHub. Một cửa sổ dòng lệnh là một cửa sổ để chúng ta gõ vào những dòng lệnh để làm những việc như tạo file và chạy phần mềm, chứ không phải nhấn vào những nút trên một phần mềm bình thường. Nó sẽ giống như thế này:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn cũng có thể dùng <a href="http://git-scm.com/downloads/guis">Giao diện đồ họa cho người dùng của Git</a> để làm việc nếu bạn thấy không thoải mái với những dòng lệnh.</p>
+</div>
+
+<p><span id="command-line">Bất cứ hệ điều hành nào đều đi kèm với một công cụ dòng lệnh:</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: <strong>Command Prompt</strong> có thể truy cập bằng cách nhấn phím Windows, và gõ vào <em>Command Prompt</em>, và chọn nó từ danh sách phần mềm hiện ra. Chú ý rằng những dòng lệnh của Windows rất khác so với Mac và Linux nên những dòng lệnh bên dưới có thể khác biệt với thiết bị của bạn</li>
+ <li><strong>OS X</strong>: <strong>Terminal</strong> có thể tìm trong <em>Applications &gt; Utilities</em>.</li>
+ <li><strong>Linux</strong>: thường thì bạn có thể bật terminal với tổ hợp phím <em>Ctrl + Alt + T</em>. Nếu cách đó không được bạn có thể tìm nó trong menu phần mềm.</li>
+</ul>
+
+<p>Những thứ này có thể hù bạn một chút, nhưng đừng lo — bạn sẽ sớm nắm được căn bản thôi. Bạn yêu cầu máy tính làm gì đó trong terminal bằng cách gõ một dòng lệnh và nhấn Enter.</p>
+
+<ol>
+ <li>Hướng con trỏ dòng lệnh đến thư mục <code>test-site của bạn</code> (hay bất cứ cái tên nào khác mà bạn thích cho thư mục chứa trang web của bạn). Để làm điều này, sử dụng lệnh cd (i.e. "<em>c</em>hange <em>d</em>irectory"). Đây là những gì bạn sẽ phả gõ nếu bạn đặt trang web của mình trong một thư mục gọi <code>test-site</code>:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>Khi đã xong việc trên, gõ tiếp những dòng sau, chúng sẽ yêu cầu <code>git</code> biến thư mục này thành một git repo:
+  <pre class="brush: bash">git init</pre>
+ </li>
+ <li>Tiếp theo, quay trở lại trang GitHub. Trên trang đó hãy chú ý tới tùy chọn <em>…or push an existing repository from the command line</em>. Bạn sẽ thấy hai dòng lệnh ở trong đó. Copy dòng thứ nhất, dán nó vào cửa sổ dòng lệnh và nhấn Enter. Dòng lệnh đó nên trông tương tự như thế này:
+  <pre class="brush: bash">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre>
+ </li>
+ <li>Tiếp theo gõ 2 dòng lệnh này vào, và nhớ nhấn Enter sau mỗi dòng. Đây là đễ chuẩn bị cho việc tải file lên GitHub, và yêu cầu Git quản lý nhũng file đó.
+  <pre class="brush: bash">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>Cuối cùng, đẩy mã nguồn lên GitHub bằng cách truy cập GitHub hồi nãy và nhập vào terminal dòn lệnh thứ 2 bạn đã thấy trong Buớc 3:
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Bây giờ khi bạn truy cập vào trang GitHub của mình trong trình duyệt (<em>username.github.io</em>), bạn nên nhìn thấy trang web của mình <em>trực tuyến</em>! Hãy chia sẽ chúng với bạn bè của mình nào!</li>
+</ol>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Nếu bạn mắc kẹt, <a href="https://pages.github.com/">trang chủ của GitHub Pages</a> có thể sẽ giúp bạn giải quyết rắc rối.</p>
+</div>
+
+<h3 id="Thêm_một_số_kiến_thức_về_GitHub">Thêm một số kiến thức về GitHub</h3>
+
+<p>Nếu bạn muốn thay đổi thêm trang thử nghiệm của bạn và tải lên GitHub, bạn chỉ cần đơn giản thay đổi những file mà bạn đã tải lên trước đây. Sau đó, nhập vào những dòng lệnh sau để đẩy những thay đổi đó lên GitHub:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p>Bạn có thể thay <em>another commit </em>bằng một tin nhắn phù hợp hơn để diễn tả thay đổi mà bạn vừa thực hiện.</p>
+
+<p>Chúng ta chỉ mới lướt qua phần bề mặt của Git. Để tìm hiểu thêm, hãy truy cập trang <a href="https://help.github.com/index.html">GitHub Help site</a>.</p>
+
+<h2 id="Kết_luận">Kết luận</h2>
+
+<p>Tới thời điểm này, bạn đã có một trang web mẫu trên một địa chỉ độc nhất. Chúc mừng bạn.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+
+<p>Tìm hiểu thêm</p>
+
+<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="http://alignedleft.com/resources/cheap-web-hosting">Cheap or free static web hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works")}}</p>
diff --git a/files/vi/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/vi/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..64c9e33c95
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -0,0 +1,183 @@
+---
+title: The web and web standards
+slug: Learn/Getting_started_with_the_web/The_web_and_web_standards
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Bài viết này cung cấp một số thông tin cơ bản trên web - nó ra đời như thế nào, những công nghệ chuẩn của web là gì, chúng làm việc cùng nhau như thế nào, tại sao "phát triển web" là một nghề nghiệp tuyệt vời để lựa chọn, và những loại phương pháp hay nhất nào bạn sẽ được học trong khóa học.</p>
+
+<h2 dir="ltr" id="Lược_sử_web">Lược sử web</h2>
+
+<p dir="ltr">Chúng tôi sẽ giữ phần này thật ngắn gọn, vì có rất nhiều thông tin về lịch sử web ngoài kia, những thứ mà chúng tôi sẽ liên kết đến về sau (cũng hãy thử tìm kiếm từ khóa "lịch sử của web" trên công cụ tìm kiếm yêu thích của bạn và xem những gì bạn nhận được, nếu bạn quan tâm đến nhiều chi tiết hơn.)</p>
+
+<p dir="ltr">Vào cuối những năm 1960, quân đội Mỹ đã phát triển một mạng lưới thông tin liên lạc gọi là <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Arpanet">ARPANET</a>. Nó có thể xem là tiền thân của Web, vì nó hoạt động trên <a href="https://en.wikipedia.org/wiki/Packet_switching">packet switching</a>, và giới thiệu việc triển khai đầu tiên của bộ giao thức TCP/IP. Hai công nghệ này tạo nên nền tảng của cơ sở hạ tầng mà internet được xây dựng trên đó.</p>
+
+<p dir="ltr">Năm 1980, Tim Berners-Lee (thường được gọi là TimBL) viết một chương trình máy tính xách tay gọi là ENQUIRE, trong đó có khái niệm liên kết giữa các nút. Nghe có vẻ quen?</p>
+
+<p dir="ltr">Đến năm 1989, TimBL viết cuốn <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> và HyperText tại CERN; hai ấn phẩm này cùng nhau cung cấp nền tảng cho cách thức hoặt động của web. Họ nhận được một số tiền lãi kha khá, đủ để thuyết phục các ông chủ của TimBL cho phép anh ta tiếp tục và tạo ra một hệ thống siêu văn bản toàn cầu.</p>
+
+<p dir="ltr">Cuối năm 1990, TimBL đã tạo ra tất cả những thứ cần thiết để chạy phiên bản đầu tiên của web — <a href="/en-US/docs/Web/HTTP">HTTP</a>, <a href="/en-US/docs/Web/HTML">HTML</a>, trình duyệt web đầu tiên, được gọi là <a href="https://en.wikipedia.org/wiki/WorldWideWeb">WorldWideWeb</a>, một máy chủ HTTP và một số trang web để xem.</p>
+
+<p dir="ltr">Trong những năm tiếp theo, web bùng nổ, với nhiều trình duyệt web được phát hành, hàng ngàn máy chủ web được thiết lập và hàng triệu trang web được tạo ra. OK, đó là một bảng tóm tắt đơn giản về những gì đã xảy ra, nhưng tôi đã hứa với bạn một bản tóm tắt ngắn gọn.</p>
+
+<p dir="ltr">Một cột mốc quan trọng để chia sẻ là trong năm 1994, TimBL thành lập <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), một tổ chức tập hợp nhiều đại diện từ nhiều công ty công nghệ khác nhau để cùng nhau tạo ra các đặc tả công nghệ web. Sau đó các công nghệ khác như <a href="/en-US/docs/Web/CSS">CSS</a> và <a href="/en-US/docs/Web/JavaScript">JavaScript </a>theo sau, và web bắt đầu nhìn giống như web chúng ta biết ngày nay.</p>
+
+<h2 dir="ltr" id="Các_tiêu_chuẩn_Web">Các tiêu chuẩn Web</h2>
+
+<p dir="ltr"><strong>Các tiêu chuẩn web</strong> là những công nghệ chúng ta dùng để xây dựng các trang web. Các tiêu chuẩn này tồn tại dưới dạng các tài liệu kỹ thuật dài được gọi là thông số kỹ thuật, trình bày chi tiết chính xác cách thức hoạt động của công nghệ.</p>
+
+<p dir="ltr">Ví dụ, tài liệu <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard </a>mô tả chính xác cách HTML (tất cả các phần tử HTML, các API liên quan của chúng, và các công nghệ xung quanh khác) được triển khai.</p>
+
+<p dir="ltr">Các tiêu chuẩn web được tọa ra bởi các cơ quan tiêu chuẩn - các tổ chức mời các nhóm người từ các công ty công nghệ khác nhau cùng nhau tham gia và thống nhất về cách thức thức tốt nhất mà các công nghệ sẽ hoạt động để đáp ứng được tất cả các trường hợp sử dụng. W2C là cơ quan tiêu chuẩn được biết  đến nhiều nhất, nhưng cũng có nhiều cơ quan khác như <a href="https://whatwg.org/">WHATWG </a>(người chịu trách nhiệm về việc hiện đại hóa ngôn ngữ HTML), <a href="https://www.ecma-international.org/">ECMA </a>(người xuất bản tiêu chuẩn cho ECMAScript, nền tảng mà JavaScript dựa trên), <a href="https://www.khronos.org/">Khronos</a> (người xuất bản công nghệ cho đồ họa 3D, chẳng hạn như WebGL), và những cơ quan khác.</p>
+
+<h3 dir="ltr" id="Các_tiêu_chuẩn_Mở">Các tiêu chuẩn "Mở"</h3>
+
+<p dir="ltr">Một trong những khía cạnh chính của tiêu chuẩn web, mà TimBL và W3C đã đồng ý ngay từ đầu, là web (và các công nghệ web) phải được tự do cho cả hai phía đóng góp và sử dụng, và không bị cản trở bởi các bằng sáng chế/cấp phép. Do đó, bất kỳ ai cũng có thể viết code để xây dựng các trang web miễn phí và bất kỳ ai cũng có  thẻ đóng góp và quá trình tạo các tiêu chuẩn, nơi các thông số kỹ thuật được viết.</p>
+
+<p dir="ltr">Bới vì các công nghệ web được tạo ra một cách công khai, với sự hợp tác giữa nhiều công ty khác nhau, điều đó có nghĩa là không môt công ty nào có thể kiểm soát chúng, đó là một điều thực sự tốt. Bạn sẽ không muốn một công ty nào đó đột nhiên quyết định đặt toàn bộ web phía sau một bức tường phí, hoặc phát hành một phiên bản HTML mới mà mọi người phải mua để tiếp tục tọa các trang web, hoặc tệ hơn nữa, chỉ cần quyết định rằng họ không quan tâm nữa mà chỉ cần tắt nó đi.</p>
+
+<p dir="ltr">Điều này cho phép web vẫn là một tài nguyên công cộng có sẵn miễn phí.</p>
+
+<h3 dir="ltr" id="Đừng_phá_vỡ_web">Đừng phá vỡ web</h3>
+
+<p dir="ltr">.Một cụm từ khác mà bạn sẽ nghe thấy xung quanh các tiêu chuẩn web mở là "đừng phá vớ web" - ý tưởng này là bất kỳ công nghệ web được giới thiệu đểu phải tương thích với những điều đã có trước đó (tức là các trang web cũ vẫn sẽ tiếp tục hoạt động), và tương thích về sau (những công nghệ trong tương lai khi ra đời sẽ tương thích với những gì chúng ta hiện có). Khi bạn tim hiểu qua các tài liệu học tập được trình bày ở đây, bạn sẽ bắt đầu tìm hiểu về cách thức thực hiện điều này với một số công việc thiết kế và triển khai rất thông minh.</p>
+
+<h2 id="Trở_thành_một_nhà_phát_triển_Web_là_tốt">Trở thành một nhà phát triển Web là tốt</h2>
+
+<p>Nền công nghiệp web là một thị trường rất hấp dẫn để tham gia nếu bạn đang tìm kiếm một công việc. Các số liệu được công bố gần đây cho biết rằng hiện có khoảng 19 triệu nhà phát triển web trên thế giới và con số này sẽ tăng hơn gấp đôi trong thập kỷ tới. Và đồng thời, có sự thiếu hụt kỹ năng trong ngành - vậy thời điểm nào tốt hơn để học phát triển web?</p>
+
+<p>Tuy nhiên, không phải tất cả đều là trò chơi thú vị -  công việc xây dựng những trang web hiện nay phức tạp hơn nhiều so với trước đây và bạn sẽ phải dành một chút thời gian để nghiên cứu tất cả các công nghệ khác nhau mà bạn cần sử dụng, tất cả các kỹ thuật và thực hành tốt nhất bạn cần biết, cùng với tất cả các mẫu điển hình bạn sẽ được gọi để thực hiện. Bạn sẽ mất vài tháng để thực sự bắt đầu làm quen với nó, và sau đó bạn sẽ cần tiếp tục học hỏi để để kiến thức của bạn luôn cập nhật với tất  cả các công cụ và tính năng mới xuất hiện trên nền tảng web, và tiếp tục luyện tập, trau đồi nghề của bạn.</p>
+
+<p><em>The only constant is change.</em></p>
+
+<p>Nghe có vẻ khó? Đừng lo - mục tiêu của chúng tôi là cung cấp cho bạn mọi thứ bạn cần biết để khởi đầu, và nhiều điều sẽ trở nên dễ dàng hơn. Một khi bạn đã nắm bắt được sự thay đổi liên tục và sự không chắc chắn của web, bạn sẽ bắt đầu thấy thích thú. Là một phần của cộng đồng web, bạn sẽ có toàn bộ các mối liên hệ web và tài liệu hữu ích hỗ trợ bạn, và bạn sẽ bắt đầu tận hưởng khả năng sáng tạo mà nó mang lại.</p>
+
+<p>Bây giờ bạn là nhà sáng tạo số. Hãy tận hưởng trải nghiệm này và tiềm năng kiếm sống mà nó mang lại.</p>
+
+<h2 id="Tổng_quan_về_công_nghệ_web_hiện_đại">Tổng quan về công nghệ web hiện đại</h2>
+
+<p>Có một số công nghệ cần học nếu bạn muốn trở thành nhà phát triển web front-end. trông phần này, chúng tôi sẽ mô tả chúng một cách ngắn gọn. Để có thêm giải thích chi tiết hơn về cách thức một trong số chúng hoạt động cùng nhau, hãy đọc bài viết <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> của chúng tôi.</p>
+
+<h3 id="Trình_duyệt">Trình duyệt</h3>
+
+<p>Có thể bạn đang đọc những dòng này trên một trình duyệt web (trừ khi bạn in nó ra hoặc bạn sử dụng công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình để đọc nó cho bạn ). Trình duyệt web là những chương trình phần mềm mà người ta sử sụng để truy cập trang web, ban gồm <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>Hypertext Transfer Protocol, hay <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, là một giao thức nhắn tin cho phép trình duyệt web giao tiếp với các máy chủ web (noi các trang web được lưu trữ). Một giao tiếp điển hình sẽ giống như sau:</p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p>Cú pháp thực tế của thông điệp HTTP (được gọi là yêu cầu và phản hồi) không phải con người có thể đọc được, nhưng điều này cung cấp cho bạn cái nhìn cơ bản.</p>
+
+<h3 id="HTML_CSS_and_JavaScript">HTML, CSS, and JavaScript</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, và <a href="/en-US/docs/Web/JavaScript">JavaScript</a> là ba công nghệ chính bạn sẽ sử dụng để xây dựng một trang web:</p>
+
+<ul>
+ <li>
+  <p>Hypertext markup language, or <strong>HTML</strong>, là một ngôn nhữ đánh dấu bao gồm nhiều yếu tố bạn có thể đóng gói (đánh dấu) nội dung để tạo cho nó ý nghĩa (ngữ nghĩa) và cấu trúc. HTML đơn giản trông như thế này:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p>Nếu ta hình dung trang web như một ngôi nhà số, thì HTML giống như nền móng và các bức tường của ngôi nhà đó, tạo ra cấu trúc và gắn kết chúng với nhau</p>
+ </li>
+ <li>
+  <p>Cascading Style Sheets (<strong>CSS</strong>) là một ngôn ngữ dựa trên quy tắc được sử dụng để áp dụng các kiểu và HTML của bạn, ví dụ như thiết lập văn bản và màu nền, thêm đường viền, tạo hiệu ứng, hoặc sắp xếp trang theo một cách nhất định. Ví dụ đơn giản, đoạn code sau đây sẽ chuyển đoạn HTML của chúng ta thành màu đỏ:</p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>Trong ngôi nhà số, CSS giống như sơn, giấy dán tường, thảm và các bức tranh bạn sử dụng để làm cho ngôi nhà trông đẹp mắt.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> là một ngôn ngữ lập trình sử dụng để thêm tính tương tác cho các trang web, từ chuyển đổi kiểu động đến tìm nạp các bản cập nhật từ máy chủ, ngay đến cả các đồ họa 3D phức tạp. Ví dụ Javascript đơn giản sau đây sẽ lưu trữ một tham chiếu đến đoạn văn bản của chúng ta trong bộ nhớ và thay đổi văn bản bên trong đó:</p>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p>Trong ngôi nhà số, Javascript giống như bếp, TV, lò vi sóng hay máy sấy tóc, những thứ mang lại chức năng hữu ích cho ngôi nhà của bạn.</p>
+ </li>
+</ul>
+
+<h3 id="Dụng_cụ">Dụng cụ</h3>
+
+<p>Một khi bạn đã học các công nghệ thô có thể được sử dụng để xây dựng các trang web (chẳng hạn như HTML,CSS, và Javascript), bạn sẽ sớm bắt đầu biết đến các công cụ khác nhau để làm cho công việc của bạn dễ dàng và hiệu quả hơn. Ví dụ như:</p>
+
+<ul>
+ <li>Các công cụ dành cho nhà phát triển (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a>) bên trong các trình duyệt hiện đại có thể được dùng để gỡ lỗi cho code của bạn.</li>
+ <li>Các công cụ kiểm tra (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testing tools</a>)  có thể được sử dụng để chạy thử xem code của bạn có đang hoạt động giống như bạn mong muốn hay không.</li>
+ <li>Các thư viện và nền tảng xây dựng dựa trên JavaScript cho phép bạn xây dựng một số loại trang web nhanh chóng và hiệu quả hơn nhiều.</li>
+ <li>Cái gọi là "Linters", tập hợp các quy tắc, xem xét code của bạn, và đánh dấu những chỗ bạn chưa tuân thủ chính xác các quy tắc.</li>
+ <li>Minifiers, loại bỏ tất cả các khoảng trắng trong tệp code của bạn làm cho chúng nhỏ hơn và do đó có thể tải xuống từ server nhanh hơn.</li>
+</ul>
+
+<h3 id="Server-side_languages_and_frameworks">Server-side languages and frameworks</h3>
+
+<p>HTML, CSS và JavaScript là những ngôn ngữ lập trình front-end (hoặc client-side), có nghĩa là chúng được chạy bởi trình duyệt để tạo ra một trang web front-end mà người dùng của bạn có thể sử dụng.</p>
+
+<p>Có một lớp các ngôn ngữ khác gọi là ngôn ngữ back-end (hoặc server-side), nghĩa là chúng được chạy trên server trước khi kết quả được được gửi tới trình duyệt để hiển thị. Cách sử dụng điển hình cho một ngôn ngữ server-side là lấy một số dữ liệu ra khỏi CSDL và tạo một số HTML để chứa dữ liệu, trước khi gửi HTML qua trình duyệt để hiển thị chúng cho người dùng.</p>
+
+<p>Một số ngôn ngữ server-side ví dụ như ASP.NET, Python, PHP, và NodeJS.</p>
+
+<h2 id="Các_phương_pháp_hay_nhất_về_web">Các phương pháp hay nhất về web</h2>
+
+<p>Chúng tôi đã nói ngắn gọn về những công nghệ mà bạn sẽ dùng để xây dựng trang web. Bây giờ hãy cùng thảo luận vè những phương pháp hay nhất mà bạn nên áp dụng để đảm bảo rằng bạn sử dụng các công nghệ đó theo cách tốt nhất có thể.</p>
+
+<p>Khi phát triển web, nguyên nhân chính dẫn đến những sự không chắc chắn đến từ thực tế là bạn không biết mỗi người dùng sử dụng sự kết hợp công nghệ nào để xem trang web của bạn:</p>
+
+<ul>
+ <li>Người dùng 1 có thể xem bằng iPhone, với màn hình nhỏ và hẹp.</li>
+ <li>Người dùng 2 có thể xem bằng laptop chạy Windows gắn màn hình rộng.</li>
+ <li>Người dùng 3 có thể bị mù và sử dụng trình đọc màn hình để đọc trang web cho họ.</li>
+ <li>Người dùng 4 có thể sử dụng một máy tính rất cũ mà không chạy được các trình duyệt hiện đại.</li>
+</ul>
+
+<p>Bởi vì bạn không biết chính xác thứ mà người dùng sử dụng, bạn cần phải thiết kế cẩn thận - làm cho trang web của bạn linh hoạt nhất có thể , để tất cả các người dùng ở trên có thể sử dụng nó, ngay cả khi họ có thể không có được trải nghiệm giống nhau. Tóm lại, chúng ta đang cố gắng làm cho trang web hoạt động cho tất cả mọi người, càng nhiều càng tốt.</p>
+
+<p>Bạn sẽ gặp phải một số khái niệm dưới đây trong quá trính nghiên cứu.</p>
+
+<ul>
+ <li><strong>Khả năng tương thích giữa nhiều trình duyệt</strong> là phương pháp cố gắng đảm bảo cho trang web hoạt động trên nhiều thiết bị nhất có thể. Điều này bao gồm sử dụng các công nghệ mà tất cả các trình duyệt đều hỗ trợ, mang lại những trải nghiệm tốt hơn cho các trình duyệt (cải tiến iên tục) và / hoặc viết code để nó trở lại trải nghiệm đơn giản  nhưng vẫn có thể sử dụng được trong các trình duyệt cũ hơn (xuống cấp tùy theo yêu cầu). Nó cũng liên quan đến rất nhiều thử nghiệm để xem liệu có có điều gì bị lỗi trên một số trình duyệt nhất định hay không và sau đó sẽ làm việc nhiều hơn để sửa những lỗi đó.</li>
+ <li><strong>Thiết kế web phản hồi </strong>là phương pháp làm cho chức năng và bố cục của bạn linh hoạt hơn để chúng có thể tự động thích ứng với những trình duyệt khác nhau. Một ví dụ hiển nhiên là một trang web được bố trí một chiều trên trình duyệt màn hình rộng của máy tính, nhưng lại hiển thị nhỏ gọn hơn, bố cục một cột trên trình duyệt điện thoại di động.Hãy thử điều chỉnh độ rộng của cửa sổ trình duyệt bạn đang dùng xem điều gi xảy ra.</li>
+ <li><strong>Hiệu suất</strong> nghĩa là làm cho các trang web tải nhanh nhất có thể, nhưng cũng làm cho chúng trực quan và dễ sử dụng để cho người dùng không cảm thất thất vọng và rời đi nơi khác.</li>
+ <li><strong>Khả năng truy cập</strong> nghĩa là làm cho nhưng trang web của bạn có thể được sử dụng bởi nhiều đối tượng khác nhau nhất có thể (các khái niệm liên quan là tính đa dạng và tính bao gồm, và thiết kế bao gồm). Điều này bao gồm những người bị khiếm thị, khiếm thính, khuyết tật về nhận thức hoặc thể chất. Vượt ra ngoài phạm vi những người khuyết tật - còn có người già hay trẻ, những người từ những nền văn hóa khác nhau, những người sử dụng thiết bị di động hay những người có kết nối mạng không đáng tin cậy chậm thì sao?</li>
+ <li><strong>Tính quốc tế hóa </strong>nghĩa là làm cho các trang web sử dụng được cho những người từ các nền văn hóa khác nhau, những người nói những ngôn ngữ khác với của bạn. Có những vấn đề kỹ thuật cần cân nhắc ở đây (chẳng hạn như thay đổi bố cục đế trang web vẫn hoạt động OK cho các ngôn ngữ từ phải sang trái hoặc thậm chí theo chiều dọc), và những cân nhắc về con người (chẳng hạn như sử dụng ngôn ngữ đơn giản, không sử dụng tiếng lóng để những người sử dụng ngôn ngữ của bạn như là ngôn ngữ thứ 2 hoặc thứ 2 của họ có thể hiểu được văn bản của bạn).</li>
+ <li><strong>Quyền riêng tư &amp; Bảo mật.</strong> Hai khái niệm này có liên quan với nhau nhưng khác nhau.Quyền riêng tư đề cập đến việc cho phép mọi người tiến hành công việc của họ một cách riêng tư và không theo dõi họ hoặc là thu thập nhiều dữ liệu của họ hơn mức bạn thực sự cần. Bảo mật đề cập đến việc xây dựng trang web của bạn theo cách an toàn để các người dùng độc hại không thể lấy cắp thông tin trên đó từ bạn hoặc người dùng của bạn.</li>
+</ul>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web">History of the World Wide Web</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the internet work?</a></li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 295px; left: 37px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/vi/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/vi/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..44015dc3de
--- /dev/null
+++ b/files/vi/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,91 @@
+---
+title: Trang web của bạn sẽ trông như thế nào?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<p>{{LearnSidebar}}</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>
+
+<div class="summary">
+<p><em>Trang web của bạn sẽ trông như thế nào? </em>Phần này sẽ đề cập về việc lên kế hoạch cho những gì bạn phải làm trước khi bắt tay vào viết code, ví dụ như "<em>Trang web của bạn có những thông tin gì?</em>", "<em>Bạn muốn font chữ và màu sắc chủ đạo cho trang web là gì?</em>" hay "<em>Trang web của bạn dùng để làm gì?</em>".</p>
+</div>
+
+<h2 id="Lên_kế_hoạch">Lên kế hoạch</h2>
+
+<p>Trước khi bạn làm bất cứ điều gì, bạn cần phải có ý tưởng. Trang web của bạn có thể làm gì? Một trang web có thể làm mọi thứ, nhưng bạn nên bắt đầu từ những thứ căn bản nhất. Chúng ta sẽ bắt đầu trang web căn bản với heading (tiêu đề), một tấm hình, và một vài đoạn văn bản. </p>
+
+<p>Để bắt đầu, chúng ta cần trả lời những câu hỏi sau: </p>
+
+<ol>
+ <li><strong>Trang web của bạn nói về chủ đề gì? </strong>Bạn thích chó, New York hay Pacman?</li>
+ <li><strong>Trang web của bạn bao gồm những thông tin gì? </strong>Viết tiêu đề, một vài đoạn văn bản và tìm một tấm hình mà bạn muốn để lên trang web của bạn. </li>
+ <li><strong>Trang web của bạn sẽ trông như thế nào, </strong>một cách tổng quát nhất. Màu nền là màu gì? Phông chữ như thế nào là phù hợp? Trịnh trọng, mang tính chất hoạt hình vui nhộn, to và rõ ràng, hay tinh tế. </li>
+</ol>
+
+<div class="note">
+<p><strong>Chú ý</strong>: Những trang web phức tạp thì cần một kế hoạch chi tiết hơn bao  gồm cách tổ chức màu sắc khác nhau, phông chữ, khoảng cách giữa các mục, cách viết phù hợp, v.v... Những chi tiết này được ghi lại trong design guide (hướng dẫn thiết kế) hoặc brand book (sổ tay thương hiệu). Bạn có thể xem ví dụ sau đây: <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p>
+</div>
+
+<h2 id="Phác_thảo_trang_web">Phác thảo trang web</h2>
+
+<p>Tiếp theo, dùng bút và giấy phác thảo căn ?bản trang web của bạn. Cho một trang web đơn giản, bạn không cần phải đòi hỏi quá cao ở bản phác thảo nhưng bạn nên tập thói quen luôn phác thảo trước khi làm một trang web. Nên nhớ, bạn không cần phải là Van Gogh! </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><strong>Chú ý</strong>: Trên thực tế, ở những trang web phức tạp, đội thiết kế thường bắt đầu với những bản nháp phác thảo trên giấy, sau đó mới xây dựng những mô hình kỹ thuật số sử dụng trình thiết kế đồ hoạ và công nghệ web</p>
+
+<p>Những đội Web luôn bao gồm một thợ thiết kế đồ hoạ một thợ thiết kế {{Glossary("UX", "user-experience")}} (UX) . Thợ thiết kế đồ hoạ, tất nhiên, sẽ phối ngẫu các hiệu ứng hình ảnh của trang web. Thợ thiết kế UX có một vài loại mô hình trừu tượng dẫn dắt cách mà người dùng trải nghiệm và tương tác với trang web.</p>
+</div>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Chọn tài nguyên của bạn</strong></span></font></p>
+
+<p> </p>
+
+<p>Đây là thời điểm tốt để gom những nội dung mà bạn đã đã chuẩn bị vào trang web</p>
+
+<p> </p>
+
+<h3 id="Chữ">Chữ</h3>
+
+<p>Bạn vẫn nên có những đoạn văn và tiêu đề chuẩn bị từ trước. Giữ chúng ngay cạnh bạn</p>
+
+<h3 id="Màu_nền">Màu nền</h3>
+
+<p>Để chọn một màu, hãy vào<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool"> Color Picker</a> và tìm một màu bạn thích. Khi nhấp chuột lên một màu, bạn sẽ thấy một mã sáu ký tự thế này <code>#660066</code>. Nó được gọi mà một mã <em>hex(adecimal)</em>, và nó đại diện cho màu của bạn. Giờ hãy ghi lại đoạn mã đó vào đâu đó an toàn.</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 id="Hình_ảnh">Hình ảnh</h3>
+
+<p>Để chọn một ảnh, hãy vào <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> và tìm thứ gì phù hợp</p>
+
+<ol>
+ <li>Khi tìm thấy ảnh mà bạn muốn, click lên nó.</li>
+ <li>Chọn nút <em>View image</em> .</li>
+ <li>Ở trang kế, chuột phải lên ảnh (Cmd + click trên máy Mac), chọn <em>Save Image As...</em>, và chọn một nơi an toàn để lưu ảnh của bạn. Hoặc thay vì làm thế, hãy lưu lại địa chỉ web từ thanh địa chỉ của trình duyệt để dùng sau này.</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>
+
+<div class="note">
+<p><strong>Chú ý</strong>: Hầu hết các ảnh trên Mạng, kể cả ở Google Images, đều có bản quyền. Nếu tránh phải vi phạm bản quyền, bạn có thể dùng bộ lọc giấy phép của Google. Chỉ cần 1) bấm vào <strong>Search tools</strong>, rồi chọn 2) <strong>Usage rights</strong>:</p>
+
+<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>
+
+<p><strong>Chú ý 2</strong>: Từ ngày 15 tháng 2 năm 2018, Google đã gỡ bỏ nút View Image. Giải pháp thay thế cho việc này là dùng Bing Images (Duckduckgo/ Yahoo đều trả kết quả tới Bing). Ngoài ra có thể dùng Baidu hoặc Yandex.</p>
+</div>
+
+<h3 id="Phông_chữ">Phông chữ</h3>
+
+<p>Để chọn một phông:</p>
+
+<ol>
+ <li>Hãy vào <a href="http://www.google.com/fonts">Google Fonts</a> và cuộn danh sách xuống đến khi bạn thấy cái mình thích. Bạn cũng có thể sử dụng bảng điều chỉnh bên phải để lọc kết quả.</li>
+ <li>Click biểu tượng "cộng" (thêm vào) bên cạnh phông chữ mà bạn muốn.</li>
+ <li>Click nút  "* Family Selected"<em> </em>trong bảng ở dưới cùng trang ("*" Phụ thuộc vào bao nhiêu phông chữ mà bạn đã chọn).</li>
+ <li>Trong cửa sổ bật lên, bạn có thể thấy và copy dòng code của Google cho bạn để lưu lại sử dụng sau<img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png"><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png">{{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")}}</li>
+</ol>
diff --git a/files/vi/learn/html/forms/index.html b/files/vi/learn/html/forms/index.html
new file mode 100644
index 0000000000..5b0215a43c
--- /dev/null
+++ b/files/vi/learn/html/forms/index.html
@@ -0,0 +1,101 @@
+---
+title: HTML forms
+slug: Learn/HTML/Forms
+tags:
+  - Beginner
+  - Featured
+  - Forms
+  - Guide
+  - HTML
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
+
+<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
+
+<p>The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn_mở_đầu">Hướng dẫn mở đầu</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
+ <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
+ <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
+</dl>
+
+<h2 id="Các_form_controls_khác_nhau">Các form controls khác nhau</h2>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></strong><br>
+ Chúng ta bắt đầu phần này bằng việc nhìn vào chức năng khả dụng của của kiểu {{htmlelement("input")}} HTML, tìm hiểu những tùy chọn có thể sử dụng để thu thập các kiểu data khác nhau.</p>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></strong><br>
+ Tại đây chúng ta sẽ tiếp tục đi sâu vào phần tử <code>&lt;input&gt;</code>, tìm hiểu về các kiểu input mới được thêm trong HTML5, và các loại UI controls khác nhau và cách thu thập dữ liệu nâng cao mà chúng làm được. Thêm nữa, chúng ta sẽ xem qua phần tử {{htmlelement('output')}}.</p>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></strong><br>
+ Tiếp sau đó chúng ta sẽ tìm hiểu về các non-<code>&lt;input&gt;</code> form controls và các công cụ có liên quan, ví dụ {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</p>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt></dt>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></dt>
+ <dd>An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.</dd>
+</dl>
+
+<h2 id="Kiểm_tra_và_gửi_dữ_liệu_form">Kiểm tra và gửi dữ liệu form</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
+ <dd>Bài viết này cho biết điều gì sẽ xảy ra khi user submit một cái form - dữ liệu sẽ đi đâu, và làm sao chúng ta có thẻ xử lý dữ liệu đó khi nó đi đến đó? Chúng ta cũng nhìn vào một số vấn đề về bảo mật liên quan đến việc gửi dữ liệu đi.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></dt>
+ <dd>Gửi dữ liệu đi thôi là chưa đủ - chúng ta cũng cần phải đảm bảo rằng dữ liêu mà user điền vào form là đúng định dạng chúng ta mong muốn để xử lý được, và chúng sẽ không làm hư hại ứng dụng của chúng ta. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
+</dl>
+
+<h2 id="Advanced_guides">Advanced guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Làm sao để xây dựng các form widgets tùy chỉnh</a> </dt>
+ <dd>Bạn sẽ bắt gặp các trường hợp mà form tích hợp trong cùng file là không đủ đáp ứng nhu cầu của bạn, ví dụ lý do về styling hay chức năng. Trong các trường hợp này, bạn có thể sẽ cần xây dựng widget form của riêng bạn dựa trên HTML thô. Bài viết này sẽ giải thích làm cách nào đạt được điều đó, và các điều cần cân nhắc khi bạn làm nó, với một case study thực tế.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Gửi form bằng JavaScript</a></dt>
+ <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+</dl>
+
+<h2 id="Form_styling_guides_2">Form styling guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/vi/learn/html/index.html b/files/vi/learn/html/index.html
new file mode 100644
index 0000000000..2f55fd4003
--- /dev/null
+++ b/files/vi/learn/html/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML
+slug: Learn/HTML
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Để xây dựng trang web, bạn nên biết về {{Glossary('HTML')}} - công nghệ cơ bản được sử dụng để xác định cấu trúc của trang web. HTML được sử dụng để xác định xem nội dung web của bạn có được nhận dạng như một đoạn, danh sách, tiêu đề, liên kết, hình ảnh, trình phát đa phương tiện, biểu mẫu hay một trong nhiều thành phần có sẵn khác hay thậm chí là phần tử mới mà bạn định nghĩa.</p>
+
+<h2 id="Lộ_trình_học_tập">Lộ trình học tập</h2>
+
+<p>Cách lý tưởng nhất để bắt đầu quá trình học tập của bạn là học HTML. Khởi đầu bằng việc đọc Giới thiệu về HTML. Sau đó, bạn có thể tiếp tục tìm hiểu về các chủ đề nâng cao hơn như:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a>, và sử dụng nó như nào để tạo kiểu HTML (ví dụ như chuyển đổi kích cỡ văn bản của bạn và phông đã được sử dụng, thêm viền và điểm bóng, bố trí trang của bạn với vô số những cột, thêm hình động cùng những hiệu ứng bắt mắt khác.)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, và làm thế nào để thêm chức năng linh động vào các trang web( ví dụ như tìm vị trí của bạn và đánh dấu nó trên một bản đồ, làm cho phần tử Ul xuất hiện/ biến mất khi bạn thiết lập một button, lưu giữ sơ bộ giữ liệu của người dùng trên máy tính của họ, và còn rất nhiều việc khác nữa.)</li>
+</ul>
+
+<p>Trước khi bắt đầu chủ đề này, bạn nên có ít nhất hiểu biết cơ bản về việc sử dụng máy tính, và việc sử dụng trang web một cách thụ động (ví dụ chỉ nhìn vào đó và tiếp nhận nội dung). Bạn nên có một hệ thiết lập môi trường làm việc chi tiết như trong <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, và hiểu được là làm sao để có thể tạo và quản lý các files chi tiết như trong <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — cả 2 đều là những phần nhỏ của <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> mô đun hoàn chỉnh cho người mới bắt đầu.</p>
+
+<p>Chúng tôi khuyến khích các bạn tìm hiểu qua <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>trước khi bước vào chủ đề này, tuy nhiên thì cũng không thực sự cần thiết cái mà được bao quát trong những bài viết của <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> vì nócũng được tổng quát trong <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> mô đun của chúng tôi tuy rằng là chi tiết hơn nhiều.</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/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/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..e063115936
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,326 @@
+---
+title: Creating hyperlinks
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Hyperlinks are really important — they are what makes the Web <em>a web</em>. This article shows the syntax required to make a link, and discusses link best practices.</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>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to implement a hyperlink effectively, and link multiple files together.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_hyperlink">What is a hyperlink?</h2>
+
+<p>Hyperlinks là một trong những phát minh thú vị nhất mà Web cung cấp. Well, chúng là một tính năng của Web từ những ngày đầu, nhưng chúng là điều làm nên Web thật sự là Web - chúng cho phép ta liên kết các tập tin của chúng ta đến bất kỳ tập tin nào khác (hoặc tài nguyên nào khác) mà ta muốn, chúng ta cũng có thể liên kết đến một phần cụ thể trong một tập tin, và chúng ta có thể khiến cho các apps trở nên khả dụng tại một địa chỉ web đơn giản (trái ngược với native apps, những apps mà cần phải được cài đặt). Gần như mọi nội dung web đều có thể chuyển hóa thành một đường dẫn liên kết, nên khi được click (hoặc được activated) nó sẽ khiến trình duyệt đi đến một địa chỉ ({{glossary("URL")}}) web khác.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Một URL có thể trỏ đến những file HTML, file text, hình ảnh, tập tin text, video, và audio files, và bất kỳ thứ gì có thể tồn tại trên web. Nếu trình duyệt không biết làm sao để hiển thị hoặc xử lý file, nó sẽ hỏi bạn liệu bạn có muốn mở file (trong trường hợp này nhiệm vụ mở hoặc xử lý file đó được chuyển cho một native app khác phù hợp trên thiết bị) hoặc tải file (trong trường hợp này bạn có thể thử với nó ở các phần tiếp theo của bài viết).</p>
+</div>
+
+<p>The BBC homepage, for example, contains a large number of links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/17032/updated-bbc-website.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p>
+
+<h2 id="Cấu_trúc_của_một_link">Cấu trúc của một link</h2>
+
+<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result:</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>
+
+<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3>
+
+<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p>
+</div>
+
+<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3>
+
+<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p>
+
+<ul>
+ <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li>
+ <li>Turn some of the content into links.</li>
+ <li>Include title attributes.</li>
+</ul>
+
+<h3 id="Block_level_links">Block level links</h3>
+
+<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code>&lt;a&gt;&lt;/a&gt;</code> tags.</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
+  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p>
+</div>
+
+<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2>
+
+<p>Để hoàn toàn hiểu về các link targets, bạn cần phải hiểu về các URLs và các đường dẫn file. Phần này sẽ cho bạn thông tin bạn cần để đạt được điều này.</p>
+
+<p>Một URL, hoặc Uniform Resouce Locator (Định vị Tài nguyên Thống nhất) đơn giản là một chuỗi văn bản mà nó định nghĩa cái nơi mà một thứ gì đó được định vị trên Web. Ví dụ, trang chủ của Mozilla được định vị tại: <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<p>Các URLs sử dụng các đường dẫn paths để tìm kiếm các files. Các đường dẫn (paths) chỉ định nơi nào đó ở trong filesystem mà cái file bạn đang tìm được đặt tại đó. Hãy xem một ví dụ đơn giản về cấu trúc thư mục (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p><strong>Root</strong> của cấu trúc thư mục (directory structure) này có tên gọi là <code>creating-hyperlinks</code>. Khi làm việc một cách local với một web site, bạn sẽ có một thư mục mà toàn bộ site đi vào bên trong nó. Bên trong root, chúng ta có một file <code>index.html</code> và <code>contacts.html</code>. Trong một website thực tế, index.html sẽ là trang chủ hoặc landing page (một dạng trang web mà được dùng như một điểm tiếp xúc cho cả website hoặc một phần cụ thể của website.)</p>
+
+<p>Ngoài ra còn có 2 thư mục bên trong root của chúng ta— <code>pdfs</code> and <code>projects</code>. Và chúng lại có một file bên trong mỗi thư mục đó — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p>
+
+<ul>
+ <li>
+  <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
+Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Document_fragments">Document fragments</h3>
+
+<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p>
+
+<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>
+
+<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p>
+
+<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p>
+
+<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>
+
+<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3>
+
+<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p>
+
+<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p>
+
+<p>An absolute URL will always point to the same location, no matter where it is used.</p>
+
+<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p>
+
+<h2 id="Link_best_practices">Link best practices</h2>
+
+<p>There are some best practices to follow when writing links. Let's look at these now.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_clear_link_wording">Use clear link wording</h3>
+
+<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p>
+
+<ul>
+ <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li>
+ <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li>
+ <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li>
+</ul>
+
+<p>Let's look at a specific example:</p>
+
+<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Download Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Click here
+&lt;/a&gt;
+to download Firefox&lt;/p&gt;
+</pre>
+
+<p>Other tips:</p>
+
+<ul>
+ <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li>
+ <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li>
+ <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li>
+ <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li>
+</ul>
+
+<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3>
+
+<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p>
+
+<ul>
+ <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li>
+ <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li>
+</ul>
+
+<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3>
+
+<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p>
+
+<ul>
+ <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li>
+ <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li>
+</ul>
+
+<p>Let's look at some examples, to see what kind of text can be used here:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Download the sales report (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/" target="_blank"&gt;
+  Watch the video (stream opens in separate tab, HD quality)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Play the car game (requires Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3>
+
+<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=en-US"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Download Latest Firefox for Windows (64-bit) (English, US)
+&lt;/a&gt;</pre>
+
+<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2>
+
+<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p>
+
+<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>You should:</p>
+
+<ol>
+ <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li>
+ <li>Turn each page name into a link to that page.</li>
+ <li>Copy the navigation menu across to each page.</li>
+ <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li>
+</ol>
+
+<p>The finished example should end up looking something like this:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p>
+</div>
+
+<h2 id="E-mail_links">E-mail links</h2>
+
+<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p>
+
+<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
+</pre>
+
+<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
+
+<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p>
+
+<h3 id="Specifying_details">Specifying details</h3>
+
+<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>
+
+<p>Here's an example that includes a cc, bcc, subject and body:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
+  Send mail with cc, bcc, subject and body
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&amp;) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p>
+</div>
+
+<p>Here are a few other sample <code>mailto</code> URLs:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links">Test your skills: Links</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "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/vi/learn/html/introduction_to_html/getting_started/index.html b/files/vi/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..9cbcb80907
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,740 @@
+---
+title: Getting started with HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Trong bài viết này, chúng ta đề cập đến các khái niệm cơ bản về HTML để giúp bạn bắt đầu. Chúng tôi xác định các elements (phần tử), attributes (thuộc tính) và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã biết tới và nơi chúng phù hợp với ngôn ngữ. Chúng tôi cũng cho bạn thấy cái cách của một phần tử HTML được cấu tạo, cách một trang HTML điển hình được cấu tạo và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ "chơi" với một số HTML để giúp hứng thú!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện:</th>
+   <td>Máy tính, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">phần mềm cơ bản</a>, và kiến thức cơ bản về <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với các tệp</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Để đạt được sự quen thuộc với ngôn ngữ HTML và biết thực hành được một số cách viết một vài phần tử </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_là_gì">HTML là gì?</h2>
+
+<p>{{glossary("HTML")}} (Ngôn Ngữ Đánh Dấu Siêu Văn Bản) không phải là ngôn ngữ lập trình; nó là một <em>ngôn ngữ đánh dấu</em> được sử dụng để cho trình duyệt của bạn biết cách cấu tạo các trang web bạn truy cập. Nó có thể phức tạp hoặc đơn giản như nhà phát triển web mong muốn. HTML bao gồm một loạt {{glossary ("Element", "elements")}}, mà bạn sử dụng để đính kèm, bọc hoặc đánh dấu các phần khác nhau của nội dung để làm cho nó xuất hiện hoặc hành động theo một cách nhất định. {{Glossary ("Tag", "tags")}} kèm theo có thể tạo một chút nội dung thành siêu liên kết để liên kết đến một trang khác trên web, in nghiêng từ, v.v. Ví dụ: lấy dòng nội dung sau:</p>
+
+<pre class="notranslate">Mèo của tôi rất cục cằn</pre>
+
+<p>nếu chúng ta muốn dòng chữ đấy hiển thị thì chúng ta có thể chỉ rõ rằng nó là một đoạn bằng cách đính kèm nó trong một phần tử "đoạn" ({{htmlelement("p")}}):</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mèo của tôi rất máu chó&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Ghi Chú</strong>: Các thẻ ở trong HTML là trường hợp không quan trọng có thể nói rằng chúng có thể được viết thế ếu nào cũng được, Ví dụ như một thẻ {{phần tử html("title")}} có thể được viết như <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code>, v.v. và nó vẫn sẽ hoạt động ổn hoi. Tốt nhất là được viết thường hết để cho phù hợp, dễ đọc và các lí do khác nữa.</p>
+</div>
+
+<h2 id="Cấu_trúc_của_một_thẻ_HTML">Cấu trúc của một thẻ HTML</h2>
+
+<p>Let's explore our 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>Các phần chính của thẻ bao gồm:</p>
+
+<ol>
+ <li><strong>The opening tag (Thẻ mở):</strong> phần này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc trong các dấu ngoặc nhọn mở và đóng. Điều này nói rõ nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực - trong trường hợp này là nơi bắt đầu của đoạn văn.</li>
+ <li><strong>The closing tag (Thẻ đóng):</strong> Như "the opening tag", ngoại trừ nó bảo gồm dấu gạch chéo trước tên phần tử. Nơi này là nơi phần tử kết thúc - trong trường hợp này là nơi kết thúc của đoạn văn. Không có bao gồm thẻ đóng là lỗi phổ biến của người mới và nó cho ra kết quả khác thường.</li>
+ <li><strong>The content (Nội dung):</strong> Phần này là nội dung của phần tử, trong trường hợp này là chỉ có văn bản.</li>
+ <li><strong>The element:</strong> <strong>Thẻ Đóng + Thẻ Mở + Nội Dung = 1 Phần Tử</strong></li>
+</ol>
+
+<h3 id="Bắt_đầu_học_Tạo_cho_bạn_một_phần_tử_HTML_đầu_tiên">Bắt đầu học: Tạo cho bạn một phần tử HTML đầu tiên</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Chỉnh sử dòng bên dưới bên trong phần <em>Input</em> bằng cách đóng nó trong thẻ </span></font>&lt;em&gt;</code> và <code>&lt;/em&gt;</code> (đặt <code>&lt;em&gt;</code> trước nó để <em>mở phần tử</em>, và <code>&lt;/em&gt;</code> sau nó để <em>đóng phần tử</em>) — Hành động này sẽ hiện thỉ dòng bên dưới sáng chứ in nghiêng! Bạn có thể thấy sự thay đổi được thể hiện ngay trong phần <em>Output</em></p>
+
+<p>Nếu bạn làm sai, bạn có thể ấn nút <em>Reset</em>, nếu bạn thấy khó vãi ồi, ấn nút <em>Show solution</em> để xem câu trả lời.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&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="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>
+
+<pre class="brush: css notranslate">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>
+
+<pre class="brush: js notranslate">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>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Nesting_elements_Các_phần_tử_lồng_nhau">Nesting elements (Các phần tử lồng nhau)</h3>
+
+<p>Bạn cũng có thể để các elements trong các elements khác — và đó gọi là <strong>nesting</strong>. Nếu chúng ta muốn nói rằng con mèo của chúng ta <strong>rất</strong> cục cằn, chúng ta có thể gói từ "rất" trong {{htmlelement("strong")}} element ( tức là phần tử html strong), có nghĩa là từ này được nhấn mạnh:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mèo của tôi &lt;strong&gt;rất&lt;/strong&gt; máu chó.&lt;/p&gt;</pre>
+
+<p>Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng đúng cách: trong ví dụ trên, chúng tôi đã mở phần tử <code>p</code> trước, sau đó là phần tử <code>strong</code>, do đó chúng tôi phải đóng phần tử <code>strong</code> trước, sau đó là phần <code>p</code>. Sau đây là không chính xác:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Mèo của tôi &lt;strong&gt;rất cọc cằn.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Các elements phải mở và đóng một cách chính xác, vì vậy chúng cần phải rõ ràng là ở bên trong hay bên ngoài nhau. Nếu chúng trùng nhau như trên, thì trình duyệt web của bạn sẽ cố gắng đoán đúng nhất những gì bạn đang cố nói và bạn cũng có thể nhận được kết quả không như mong muốn. Vì vậy, đừng làm điều đó!</p>
+
+<h3 id="Phần_tử_dạng_khối_và_phần_tử_dạng_inline">Phần tử dạng khối và phần tử dạng inline </h3>
+
+<p>Có hai điều quan trọng của elements trong HTML mà bạn cần phải biết. Đó là <strong>block-level elements</strong> (phần tử cấp khối) và <strong>inline elements</strong> (nội phần tử). </p>
+
+<ul>
+ <li><strong>Block-level elements</strong> tạo thành một khối hiển thị trên một trang  — nó sẽ xuất hiện ở dòng mới từ bất cứ nội dung nào đã đứng trước nó và bất cứ nội dung nào đứng sau nó thì đều xuất hiện trên dòng mới. <strong>Block-level elements</strong> thường là các phần tử có cấu trúc ở trên trang mà nó hiện diện, ví dụ, paragraphs, lists, navigation menu.. Một <strong>block-level element</strong> không nên nằm bên trong một <strong>inline element, </strong>nhưng nó có thể được lồng bên trong một <strong>block-level element</strong> khác.  </li>
+ <li><strong>Inline elements</strong> là những elements được chứa trong các block-level elements và chỉ bao quanh các phần nhỏ của nội dung tập tin, không phải bao quanh cả paragraph hay các nhóm nội dung. Một inline element sẽ không khiến dòng mới xuất hiện trong tập tin; nó chỉ đởn giản là xuất hiện trong một paragraph, ví dụ một {{htmlelement("a")}} element (siêu liên kết) hoặc các phần tử nhấn mạnh như {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Theo ví dụ dưới đây:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;thứ_nhất&lt;/em&gt;&lt;em&gt;thứ_hai&lt;/em&gt;&lt;em&gt;thứ_ba&lt;/em&gt;
+
+&lt;p&gt;thứ_tư&lt;/p&gt;&lt;p&gt;thứ_năm&lt;/p&gt;&lt;p&gt;thứ_sáu&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} là một inline element, như bạn có thể thấy bên trên, ba cái element đầu tiên nằm ở trên cùng một dòng và không có khoảng cách giữa chúng. Mặt khác, {{htmlelement("p")}} là một block-level element, nên mỗi element xuất hiện ở dòng mới với khoảng cách ở trên và bên dưới (khoảng cách là do <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> mặc định mà các trình duyệt có thể áp dụng cho các đoạn văn).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Ghi Chú</strong>: HTML5 đã thiết lập lại các thể loại element trong HTML5: xem <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. Mặc dù các định nghĩa này chính xác hơn và ít mơ hồ hơn các định nghĩa trước đây, nhưng chúng phức tạp hơn nhiều so với "block" và "inline", vì vậy chúng ta sẽ gắn bó với chúng trong suốt chủ đề này.</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_phần_tử_không_chứa_nội_dung">Empty elements (phần tử không chứa nội dung)</h3>
+
+<p>Không phải mọi element đều tuân theo kiểu mẫu thẻ mở + nội dung + thẻ đóng. Một số element chỉ bao gồm một thẻ duy nhất, điều này thường được sử dụng để insert/embed một số thứ trong tập tin tại nơi mà nó được gắn vào. Ví dụ, {{htmlelement("img")}} element sẽ embeds một file ảnh vào trang, tại vị trí mà thẻ này được gắn:</p>
+
+<pre class="brush: html notranslate">&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="Thuộc_tính_Attributes">Thuộc tính (Attributes)</h2>
+
+<p>Các phần tử cũng có thể có attribute, nó trông như thế này:</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>Các attribute chứa các thông tin thêm về element, những thông tin mà bạn không muốn nó xuất hiện trong nội dung thực sự. Trong trường hợp này, attribute <code>class</code> cho phép bạn gán cho element một định danh mà định danh này sau đó sẽ được sử dụng để xác định element với thông tin về style và các thông tin khác.</p>
+
+<p>Một attribute nên có:</p>
+
+<ol>
+ <li>Một khoảng trống giữa nó và tên của element (hoặc trước attribute khác, nếu element đã có sẵn một hoặc nhiều attribute.)</li>
+ <li>Tên của attribute, theo sau là dấu "=".</li>
+ <li>Giá trị của của attribute, sẽ được bao bọc trong dấu nháy kép.</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_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate">&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;A link to my favorite website.&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>
+
+<pre class="brush: css notranslate">html {
+  font-family: 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>
+
+<pre class="brush: js notranslate">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;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favorite website&lt;/a&gt;.&lt;/p&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>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Boolean_attributes">Boolean attributes</h3>
+
+<p>Đôi khi bạn sẽ thấy các attribute được viết ra mà không có giá trị - điều này hoàn toàn được chấp thuận. Chúng được gọi là các boolean attribute (attribute mang tính logic), và chúng chỉ có thể mang một giá trị, giá trị này thường sẽ chính là tên của attribute. Ví dụ, xét attribute {{htmlattrxref("disabled", "input")}}, bạn có thể gán attribute này vào các element &lt;input&gt; để quyết định việc chúng sẽ bị disabled (biến thành màu xám) từ đó người dùng không thể nhập bất kỳ dữ liệu nào vào chúng.</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Để cho nhanh, nó hoàn toàn có thể được viết như sau đây (chúng tôi cũng bao gồm một phần tử input mà tại đó không có attribute disable để bạn so sánh):</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Cả 2 đều sẽ cho ra kết quả như sau:</p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3>
+
+<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;favorite website&lt;/a&gt;</pre>
+
+<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+
+<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p>
+
+<h3 id="Single_or_double_quotes">Single or double quotes?</h3>
+
+<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>You should however make sure you don't mix them together. The following will go wrong!</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>If you've used one type of quote in your HTML, you can include the other type of quote inside your attribute values without causing any problems:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Tuy nhiên nếu bạn muốn bao gồm một dấu nháy bên trong một dấu nháy mà tại đó cả hai đều cùng một loại dấu nháy (hoặc cùng đơn hoặc cùng kép), bạn có thể dùng<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML"> HTML entities</a>. Ví dụ, đoạn code sau sẽ bị lỗi:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Nên bạn cần sửa lại như thế này:</p>
+
+<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<h2 id="Cấu_trúc_một_tập_tin_HTML">Cấu trúc một tập tin HTML</h2>
+
+<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:</p>
+
+<pre class="brush: html notranslate">&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>Here we have:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: The doctype. Từ lâu lắm rồi, khi HTML mới được phát triển (khoảng tháng 2/1991), doctypes khi đó được dùng để thực thi như các liên kết đến một nhóm các nguyên tắc mà trang HTML cần phải tuần theo để được xem là một HTML tốt, điều này có nghĩa là việc kiểm tra lỗi tự động và nhiều thứ hữu ích khác. Nó từng trông giống như vầy:
+
+  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  Tuy nhiên, ngày nay không ai quan tâm đến chúng, và chúng chỉ còn là di vật lịch sử mà cần được thêm vào để mọi thứ hoạt động đúng. <code>&lt;!DOCTYPE html&gt;</code> là chuỗi ký tự ngắn nhất để cho biết rằng đây là một doctype hợp lệ; đó là tất cả những gì bạn cần biết.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: The {{htmlelement("html")}} element. Element này sẽ bao bọc mọi nội dung trên toàn bộ trang, và đôi khi được biết đến như là một root element.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: The {{htmlelement("head")}} element. Element này sẽ được thực thi như là một vùng chứa mọi thứ mà bạn muốn bao gồm trong trang HTML ở nơi mà <em>không phải</em> là nội dung bạn muốn hiện ra cho người xem trang. Nó bao gồm những thứ như các từ khóa và mô tả của trang mà bạn muốn xuất hiện trên kết quả tìm kiếm, CSS style, khai báo bộ mã ký tự (character set), và nhiều hơn nữa. Bạn sẽ học về điều này trong bài tiếp theo của chuỗi bài học.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: Element này sẽ thiết lập bảng mã kỹ tự (character set) mà tập tin của bạn nên sử dụng để UTF-8, bảng mã mà bao gồm số lượng lớn các ngôn ngữ viết của con người. Về cơ bản, nó hiện tại có thể xử lý mọi loại ngôn ngữ mà bạn đặt vào nó. Nên không có lý do gì để không thiết lập, và nó sẽ giúp bạn tránh rất nhiều vấn đề sau này.</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, and is used to describe the page when you bookmark/favorite it.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: The {{htmlelement("body")}} element.<br>
+  Thẻ này chứa <em>tất cả</em> nội dung mà bạn muốn hiện ra cho người dùng web khi họ xem trang của bạn, dù nó là chữ, hình, video, games, playable audio tracks, hoặc bất kì thứ gì.</li>
+</ol>
+
+<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3>
+
+<p>If you want to experiment with writing some HTML on your local computer, you can:</p>
+
+<ol>
+ <li>Copy the HTML page example listed above.</li>
+ <li>Create a new file in your text editor.</li>
+ <li>Paste the code into the new text file.</li>
+ <li>Save the file as <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p>
+
+<ul>
+ <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code>&lt;h1&gt;</code> opening tag and <code>&lt;/h1&gt;</code> closing tag.</li>
+ <li>Edit the paragraph content to include some text about something you are interested in.</li>
+ <li>Make any important words stand out in bold by wrapping them inside a <code>&lt;strong&gt;</code> opening tag and <code>&lt;/strong&gt;</code> closing tag</li>
+ <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li>
+ <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li>
+</ul>
+
+<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_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&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>
+
+<pre class="brush: css notranslate">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>
+
+<pre class="brush: js notranslate">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 favorite 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>
+</div>
+
+<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 notranslate">&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>Trong HTML, các ký tự <code>&lt;</code>, <code>&gt;</code>, <code>"</code>, <code>'</code> và <code>&amp;</code> là những ký tự đặc biệt. Chúng là một phần của cú pháp HTML, vậy làm sao để bạn gắn kèm một trong những ký tự này vào văn bản của bạn, ví dụ, nếu bạn muốn sử dụng dấu và hoặc dấu bé, và không thể interpret nó dưới dạng code như một số trình duyệt có thể làm?</p>
+
+<p>Chúng ta cần phải sử dụng các tham chiếu ký tự - các đoạn mã đặc biệt đại diện cho các ký tự, và có thể được sử dụng trong những trường hợp phát sinh này. Mỗi ký tự tham chiếu được bắt đầu với một dấu và (&amp;), và kết thúc bởi chấm phẩy (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Ký tự thực sự</th>
+   <th scope="col">Ký tự tham chiếu tương đương</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 notranslate">&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>Ghi chú</strong>: Một bảng chưa tất cả tham chiếu ký tự HTML có thể được tìm thấy trên 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>.<br>
+ Lưu ý là bạn không cần phải sử dụng các tham chiếu ký tự cho mọi ký hiệu, vì các trình duyệt web hiện đại sẽ xử lý các ký hiệu khá tốt miễn là HTML's character encoding của bạn được thiết lập là UTF-8 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</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 notranslate">&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/vi/learn/html/introduction_to_html/index.html b/files/vi/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..43fca0246b
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/index.html
@@ -0,0 +1,68 @@
+---
+title: Giới thiệu về HTML
+slug: Learn/HTML/Introduction_to_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}
+<p class="summary">Về bản chất, {{glossary ("HTML")}} là một ngôn ngữ khá đơn giản được tạo nên từ các phần từ (<a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Element">elements</a>), dùng để phân biệt nội dung bên trong tài liệu (nội dung là một đoạn?  một danh sách tiết mục? thành phần cùa một bảng ?), phân chia một tài liệu thành những phần hợp lý (có tựa hay không? ba cột nội dung? một trình đơn điều hướng?) và những nội dung nhúng bên trong tài liệu như hình ảnh và video. Mô-đun này sẽ giới thiệu hai nguyên tắc đầu tiên, khái niệm cơ bản, và cú pháp cần biết để hiểu HTML.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô đun này, bạn không cần bất kỳ kiến ​​thức HTML nào trước đó, nhưng bạn nên có ít nhất sự quen thuộc cơ bản với việc sử dụng máy tính và sử dụng web một cách thụ động (nghĩa là chỉ cần nhìn vào nó, tiêu thụ nội dung). Bạn nên có môi trường làm việc cơ bản được thiết lập chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> Cài đặt phần mềm cơ bản </a> và hiểu cách tạo và quản lý tệp, như được mô tả chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> Xử lý các tệp </a> - cả hai đều là một phần của <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"> Bắt đầu với web </a> mô-đun hoàn thành của người mới bắt đầu.</p>
+
+<div class="note">
+<p><strong>Lưu ý : Nếu bạn đang làm việc trên máy tính / máy tính bảng / thiết bị khác nơi bạn không có khả năng tạo tệp của riêng mình, bạn có thể thử (phần lớn) các ví dụ mã trong một chương trình mã hóa trực tuyến như <a href="http://jsbin.com/"> JSBin </a> hoặc <a href="https://thimble.mozilla.org/"> Thimble </a>. </strong></p>
+</div>
+
+<h2 id="Hướng_dẫn"><strong>Hướng dẫn </strong></h2>
+
+<p>Mô-đun này chứa các bài viết sau, sẽ đưa bạn qua tất cả các lý thuyết cơ bản về HTML và cung cấp cơ hội phong phú cho bạn để kiểm tra một số kỹ năng.</p>
+
+<dl>
+ <dd><strong> </strong>
+
+ <dl>
+  <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Bắt đầu với HTML </a>  </strong></dt>
+  <dd>Bao gồm các vấn đề cơ bản về HTML, để giúp bạn bắt đầu - chúng tôi xác định các yếu tố, thuộc tính, và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã nghe và chỉ ra vị trí phù hợp của chúng trong ngôn ngữ. Chúng tôi cũng cho thấy một phần tử HTML được cấu trúc như thế nào, cách trang HTML điển hình được cấu trúc và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ chơi với một số HTML, để giúp bạn có hứng thú!  </dd>
+  <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Có gì trong head? Metadata trong HTML </a>  </strong></dt>
+  <dd>Phần <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Head">head</a> của một tập tin HTML là phần <strong>không</strong> hiển thị trong trình duyệt web khi trang được tải. Nó chứa các thông tin như {{htmlelement ("title")}} của trang, các đường dẫn liên kết đến {{glossary ("CSS")}} (nếu bạn muốn định dạng nội dung HTML của mình với CSS), các đường dẫn liên kết đến favicons tùy chỉnh, và metadata (là dữ liệu về HTML, chẳng hạn như người đã viết nó và các từ khóa quan trọng mô tả tập tin HTML).<strong>  </strong></dd>
+  <dt><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Nguyên tắc cơ bản về HTML </a>  </strong></strong></dt>
+  <dd>Một trong những công việc chính của HTML là đưa ra ý nghĩa cho văn bản (còn được gọi là <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Semantics">ngữ nghĩa</a>) để trình duyệt biết cách hiển thị chính xác. Bài viết này xem cách sử dụng HTML để phá vỡ một khối văn bản thành một cấu trúc của các tiêu đề và đoạn văn, thêm sự chú trọng / tầm quan trọng vào từ, tạo danh sách và hơn thế nữa.<strong>  </strong></dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Tạo siêu liên kết </a>  </strong></strong></strong></dt>
+  <dd>Các siêu liên kết thực sự quan trọng - đó là những gì làm cho web trở thành web. Bài viết này cho thấy cú pháp cần thiết để tạo liên kết, và thảo luận các phương pháp hay nhất liên kết.<strong>  </strong></dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Định dạng văn bản nâng cao </a>  </strong></strong></strong></dt>
+  <dd>Có nhiều yếu tố khác trong HTML để định dạng văn bản mà chúng tôi không tìm thấy trong bài viết <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. Các elements ở đây ít được biết đến, nhưng vẫn hữu ích để biết về chúng. Tại đây, bạn sẽ tìm hiểu về cách đánh dấu các báo giá, danh sách mô tả, mã máy tính và các văn bản, chỉ số dưới và ký tự liên quan, thông tin liên hệ và hơn thế nữa.  </dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Cấu trúc tài liệu và trang web </a>  </strong></strong></strong></dt>
+  <dd>Ngoài việc xác định các phần riêng lẻ của trang (chẳng hạn như "đoạn văn" hoặc "hình ảnh"), HTML cũng được sử dụng để xác định các khu vực của trang web của bạn (chẳng hạn như "tiêu đề", "menu điều hướng", " "cột nội dung chính".) Bài viết này xem cách lập kế hoạch cấu trúc trang web cơ bản và viết mã HTML để biểu thị cấu trúc này.<strong>  </strong></dd>
+  <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Gỡ lỗi HTML </a>  </dt>
+  <dt>Viết HTML là tốt, nhưng nếu một cái gì đó đang xảy ra sai, và bạn không thể tìm ra nơi mà các lỗi trong mã là? Bài viết này sẽ giới thiệu cho bạn một số công cụ có thể giúp bạn.
+  <h2 id="Đánh_giá">Đánh giá</h2>
+
+  <p>Các đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các vấn đề cơ bản về HTML được đề cập trong các hướng dẫn ở trên.</p>
+
+  <dl>
+   <dd>
+   <dl>
+    <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Đánh dấu thư </a>  </dt>
+    <dd>Tất cả chúng ta đều biết viết một lá thư sớm hay muộn; nó cũng là một ví dụ hữu ích để kiểm tra kỹ năng định dạng văn bản của chúng tôi! Vì vậy trong đánh giá này, bạn sẽ nhận được một lá thư để đánh dấu.  </dd>
+    <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Stablish_a_page_ofcontent">Cấu trúc một trang nội dung </a>  </dt>
+    <dt>Đánh giá này kiểm tra khả năng sử dụng HTML của bạn để cấu trúc một trang nội dung đơn giản, chứa tiêu đề, chân trang, trình đơn điều hướng, nội dung chính và thanh bên.
+    <h2 id="Xem_thêm">Xem thêm</h2>
+
+    <dl>
+     <dt>
+     <dl>
+      <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Kiến thức cơ bản về Web 1 </a>  </dt>
+      <dd>Khóa học về nền tảng Mozilla tuyệt vời khám phá và kiểm tra rất nhiều kỹ năng được đề cập trong mô-đun Giới thiệu về HTML . Học viên làm quen với việc đọc, viết và tham gia trên web trong mô-đun sáu phần này. Khám phá nền tảng của web thông qua sản xuất và hợp tác.</dd>
+     </dl>
+     </dt>
+    </dl>
+    </dt>
+   </dl>
+   </dd>
+  </dl>
+  </dt>
+ </dl>
+ </dd>
+</dl>
+</div>
diff --git a/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..e73feb86a2
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,285 @@
+---
+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">Phần {{glossary("Head", "head")}} của một tập tin HTML là bộ phận sẽ không hiển thị bên trong trình duyệt khi trang được tải. Nó chứa thông tin ví dụ như {{htmlelement("title")}} của trang, đường dẫn đến {{glossary("CSS")}} (nếu bạn chọn việc trang trí nội dung của bạn với CSS), liên kết đến các ảnh favicons tùy chỉnh, và các thông tin metadata khác (thông tin về HTML, ví dụ như tác giả, các từ khóa quan trọng mô tả tập tin). Trong bài viết này, chúng ta sẽ đi qua tất cả những thứ trên và thêm nhiều cái nữa, để giúp bạn có nền tảng tốt khi làm việc với HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</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">Mục tiêu:</th>
+   <td>Học về head của HTML, mục đích của nó, những mục quan trọng nhất cần thêm vào, và những ảnh hưởng của nó có thể có lên tập tin HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_head_là_gì">HTML head là gì?</h2>
+
+<p>Hãy xem lại ví dụ đơn giản <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>HTML head là những nội dung của element {{htmlelement("head")}} - không giống với nội dung của element {{htmlelement("body")}} (thứ mà được hiển thị trên trang khi được tải trong trình duyệt), nội dung của head không được hiển thị trên trang. Thay vào đó, công việc của head là chứa các siêu dữ liệu {{glossary("Metadata", "metadata")}} về tập tin. Trong ví dụ phía trên, head tương đối ít nội dung:</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>Tuy nhiên trong những trang lớn hơn, head có thể chứa rất nhiều nội dung. Thử đến xem một số website yêu thích của bạn và dùng <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> để kiểm tra các nội dung head của chúng. Mục tiêu của chúng ta ở đây không phải là chỉ ra cho bạn cách làm thế đặt mọi thứ có thể đặt vào trong head, mà là dạy cho bạn làm cách nào để sử dụng những element chính yếu mà bạn sẽ phải thêm vào head, và giúp bạn quen hơn với head. Hãy bắt đầu.</p>
+
+<h2 id="Thêm_title">Thêm title</h2>
+
+<p>Chúng ta đã được xem qua cách hoạt động của {{htmlelement("title")}} - nó có thể được dùng để thêm title vào tập tin. Điều này tuy nhiên có thể bị nhầm lẫn với element {{htmlelement("h1")}}, thứ mà được sử dụng để thêm vào một tiêu đề bao hàm cho toàn bộ nội dung của body - điều này đôi khi cũng được tham chiếu đến title của page. Nhưng chúng là 2 thứ khác nhau!</p>
+
+<ul>
+ <li>Phần tử {{htmlelement("h1")}} xuất hiện trên trang khi được tải trong trình duyệt - thường thì điều này chỉ nên được dùng một lần trên mỗi trang, để đánh dấu tiêu đề cho nội dung của trang của bạn (tiêu đề câu chuyện, hoặc tiêu đề tin tức, hoặc bất kỳ cái gì phù hợp với việc sử dụng của bạn).</li>
+ <li>Phần tử {{htmlelement("title")}} là metadata đại diện cho tiêu đề của cả tập tin HTML (không phải của nội dung tập tin.)</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_phần_tử_&lt;meta>">Metadata: phần tử &lt;meta&gt;</h2>
+
+<p>Metadata là dữ liệu dùng để mô tả dữ liệu, và HTML có một cách thức "chính thống" để thêm metadata vào một tập tin - phần từ {{htmlelement("meta")}}. Tất nhiên, các thứ khác mà chúng ta sẽ nói ngay sau đây trong bài viết này cũng có thể được hiểu như là metadata. Có rất nhiều loại phần tử <code>&lt;meta&gt;</code> khác nhau có thể được thêm vào bên trong phần head của trang của bạn, nhưng đừng cố gắng giải thích tất cả chúng ở giai đoạn này, vì nó sẽ rất rối rắm. Thay vào đó, chúng ta sẽ giải thích một vài thứ mà bạn có thể thường thấy, chỉ để bạn có được ý niệm.</p>
+
+<h3 id="Chỉ_định_bộ_mã_ký_tự_character_encoding_của_tập_tin">Chỉ định bộ mã ký tự (character encoding) của tập tin</h3>
+
+<p>Trong ví dụ chúng ta xem bên trên, dòng này đã được thêm vào:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Phần tử này đơn giản sẽ chỉ định kiểu mã hóa ký tự của tập tin - bảng mã ký tự mà tập tin được phép sử dụng. utf-8 là một bảng mã phổ biến toàn cầu mà nó bao gồm rất nhiều ký tự từ mọi ngôn ngữ của con người. Điều này có nghĩa là web page của bạn sẽ có khả năng xử lý việc hiển thị bất kỳ ngôn ngữ nào; vì thế bạn nên đặt nó trong mọi web page bạn tạo ra! Ví dụ, trang của bạn có thể xử lý cả tiếng Anh và tiếng Nhật đều được:</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;">Nếu bạn thiết lập việc mã hóa ký tự character encoding là <code>ISO-8859-1</code>, ví dụ (bộ mã ký tự Latin), việc render page của bạn có thể bị hỏng:</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>: Một số trình duyệt có thể tự động sửa lỗi encodings, nhưng bạn vẫn nên thiết lập <code>utf-8</code> trên page để tránh lỗi ở các trình duyệt khác.</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="Thêm_thông_tin_tác_giả_và_mô_tả">Thêm thông tin tác giả và mô tả</h3>
+
+<p>Nhiều phần tử <code>&lt;meta&gt;</code> chứa thuộc tính <code>name </code>và <code>content</code>:</p>
+
+<ul>
+ <li><code>name</code> chỉ định kiểu loại của phần tử meta; loại thông tin nào mà nó chứa đựng.</li>
+ <li><code>content</code> chỉ định nội dung meta thật sự.</li>
+</ul>
+
+<p>Hai phần tử meta này hữu ích để gắn vào trang của bạn để xác định tác giả của trang, và cung cấp một mô tả chính xác cho trang. Xem ví dụ:</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>Xác định cụ thể tác giả mang lại nhiều lợi ích: nó hữu ích để biết ai viết ra trang đó, nếu bạn có câu hỏi về nội dung và bạn muốn liên hệ với họ. Một số hệ quản trị nội dung có các chức năng để tự động kết xuất thông tin tác giả và làm nó khả dụng cho những mục đích như vậy.</p>
+
+<p>Xác định một mô tả cụ thể có bao gồm các từ khóa liên quan đến nội dung của trang sẽ hữu ích khi bạn muốn trang hiển thị cao hơn trong kết quả tiềm kiếm tương ứng. (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p>
+
+<h3 id="Active_learning_The_descriptions_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="Các_kiểu_metadata_khác">Các kiểu metadata khác</h3>
+
+<p>Khi bạn dạo vòng quanh trang web, bạn sẽ thấy những kiểu loại khác của metadata. Rất nhiều trong số những tính năng bạn sẽ thấy trên các website là sự sáng tạo độc quyền, được thiết kế để cung cấp cho những trang nhất định (như các trang social networking) với những mẫu thông tin nhỏ cụ thể mà họ có thể sử dụng.</p>
+
+<p>Ví dụ, <a href="http://ogp.me/">Open Graph Data</a> là giao thức metadata mà Facebook phát minh ra để cung cấp metadata phong phú hơn cho các website. Trong mã nguồn của MDN Web Dóc, bạn sẽ thấy thế này:</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>Một tác dụng của thứ này là khi bạn link đến MDN Web Docs trên facebook, đường dẫn sẽ xuất hiện kèm với một hình ảnh và mô tả: một trải nghiệm phong phú hơn cho các người dùng.</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;"></p>
+
+<p>Twitter cũng có các metadata tương tự gọi là <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, 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="Thêm_các_icon_tự_chọn_vào_site_của_bạn">Thêm các icon tự chọn vào site của bạn</h2>
+
+<p>Để làm phong phú hơn thiết kế cho trang của bạn, bạn có thể thêm các tham chiếu đến các icon tự chọn trong metadata của bạn, và chúng sẽ được hiển thị trong những văn bản nhất định. Phổ biến nhất là <strong>favicon</strong> (viết tắt của "favorite icon", đề cập đến việc nó dùng cho danh sách "favorite" hoặc "bookmarks" trong các trình duyệt).</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="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><img alt="" src="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"><img alt="" src="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png" style="height: 50px; width: 50px;">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="Áp_dụng_CSS_và_JavaScript_vào_HTML">Áp dụng CSS và JavaScript vào 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>Phần tử {{htmlelement("link")}} luôn luôn nằm trong phần head của tập tin. Nó có 2 thuộc tính, rel="stylesheet", ý chỉ rằng nó là stylesheet của tập tin, và href, chứa đường dẫn đến file stylesheet:</p>
+ </li>
+ <li>
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>Phần tử {{htmlelement("script")}} không nhất thiết phải ở trong head, thực tế, thường sẽ tốt hơn nếu đặt nó ở dưới cùng của body (trước thẻ đóng <code>&lt;/body&gt;</code>), để đảm bảo mọi nội dung HTML được trình duyệt đọc qua trước khi nó cố gắng áp dụng JavaScript cho nó (nếu JavaScript cố gắng truy cập đến phần tử mà vẫn chưa tồn tại, trình duyệt sẽ throw ra một lỗi.)</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 should be able to 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="Thiết_lập_ngôn_ngữ_chính_của_tập_tin">Thiết lập ngôn ngữ chính của tập tin</h2>
+
+<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>Điều này rất có ích, tập tin HTML của bạn sẽ được index hiệu quả hơn trên các công cụ tìm kiếm nếu ngôn ngữ của nó được thiết lập (ví dụ, cho phép nó xuất hiện chính xác trong các kết quả yêu cầu ngôn ngữ cụ thể), và nó cũng hữu ích với những người có vấn đề về thị giác sử dụng chức năng đọc màn hình thành tiếng (ví dụ, từ "six" tồn tại cả trong tiếng Pháp và tiếng Anh, nhưng được phát âm khác nhau.)</p>
+
+<p>Bạn cũng có thể thiết lập các khu vực con của tập tin của bạn để nó được nhận diện với ngôn ngữ khác. 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/vi/learn/html/multimedia_and_embedding/index.html b/files/vi/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..3b40801d47
--- /dev/null
+++ b/files/vi/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,75 @@
+---
+title: Multimedia and embedding
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - iframes
+  - imagemaps
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary"></p>
+
+<p class="summary">Chúng ta đã xem xét rất nhiều văn bản trong khóa học cho đến nay, nhưng một trang web sẽ thực sự nhàm chán nếu chỉ sử dụng văn bản. Cùng bắt đầu tìm hiểu cách làm cho web trở nên sống động với nhiều nội dung thú vị hơn! Mô-dun này khám phá cách sử dụng HTML để đưa các nội dung đa phương tiện vào trong các trang web, bao gồm nhiều cách khác nhau mà hình ảnh có thể được đưa vào và cách thức để nhúng video, âm thanh và thậm chí toàn bộ trang web.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô-dun này, bạn nên có kiến thức nhất định về những điều cơ bản của HTML, như đã trình bày trước đây trong phần <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Nếu bạn chưa đi qua mô-dun này (hay những phần tương tự), hãy tìm hiểu qua nó trước, sau đó quay lại!</p>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Nếu bạn làm việc trên máy tính / máy tính bảng / thiết bị khác mà bạn không có khả năng tạo file của riêng bạn, bạn có thể thử (đa phần) các ví dụ code trong các chương trình code chẳng hạn như <a href="https://jsbin.com/">JSBin</a> hay <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<p>Mô-dun này bao gồm các bài viết sẽ đưa bạn đi qua tất cả những nguyên tắc cơ bản của việc nhúng đa phương tiện trên các trang web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Hình ảnh trong HTML</a></dt>
+ <dd>Có nhiều loại hình đa phương tiện cần xem xét, nhưng hợp lý là bắt đầu với phần tử {{htmlelement("img")}} khiêm tốn được sử dụng để nhúng một hình ảnh đơn giản vào trong một trang web. Trong bài viết này chúng ta sẽ xem xét cách sử dụng nó sâu hơn, bao gồm cả những điều cơ bản, chú thích nó bằng cách sử dụng {{htmlelement("figure")}}, và cách nó liên quan đến hình nền CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Nội dung video và âm thanh</a></dt>
+ <dd>Tiếp theo, chúng ta xem xét làm cách nào  để sử dụng các nhân tố HTML5 {{htmlelement("video")}} và {{htmlelement("audio")}} để nhúng video và audio vào các trang web, bao gồm cả những điều cơ bản, cung cấp quyền truy cập vào các định dạng tệp cho các trình duyệt khác nhau , thêm chú thích và phụ đề cũng như cách thêm dự phòng cho các trình duyệt cũ hơn.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Từ &lt;object&gt; đến &lt;iframe&gt; — các công nghệ nhúng khác</a></dt>
+ <dd>Tại thời điểm này, chúng tôi muốn thực hiện một số bước khác, xem xét một số yếu tố cho phép bạn nhúng nhiều loại nội dung khác nhau vào các trang web của mình: các nhân tố {{htmlelement("iframe")}},{{htmlelement("embed")}} và {{htmlelement("object")}}. <code>&lt;iframe&gt; </code>là để nhúng các trang web khác, hai nhân tố còn lại cho phep bạn nhúng các file PDF, SVG hay thậm chí là Flash - một công nghệ đang được phát triển, nhưng bạn  vẫn có thể thấy nó bán thường xuyên.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Thêm đồ họa vector vào web</a></dt>
+ <dd>Đồ họa vector có thể rất hữu ích trong một số trường hợp nhất định. Không giống như các định dạng thông thường như PNG/JPG, chúng không làm biến dạng/vỡ điểm ảnh khi phóng to - chúng có thể vẫn mượt mà khi thu nhỏ. Bài viết này giới thiệu với bạn về đồ họa vector là gì và cách đưa định dạng  {{glossary("SVG")}} phổ biến trong các trang web.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Hình ảnh phản hồi</a></dt>
+ <dd>Hiện có nhiều các thiết bị khác nhau có thể truy cập vào Web - từ điện thoại di động đến các máy tính để bàn - một khái niệm cần thiết hiện tại đề là chủ được công nghệ web hiện đại đó là thiết kế đáp ứng. Điều này đề cập đến việc tạo ra các trang web có thể tự động thay đổi các tính năng của nó để phù hợp với các loại kích cỡ màn hình khác nhau, các độ phân giải khác nhau, v.v. Vấn đề này sẽ được đề cập chi tiết hơn trong mô đun CSS sau này, nhưng hiện tại chúng ta xem xét các công cụ HTML có sẵn để tạo ra các trang web đáp ứng, bao gồm các phần tử {{htmlelement("picture")}}.</dd>
+</dl>
+
+<h2 id="Đánh_giá">Đánh giá</h2>
+
+<p>Bài đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các khía niệm cơ bản về HTML được đề cập trong các hướng dẫn ở trên:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Trang giật gân Mozilla</a></dt>
+ <dd>Trong bài đánh giá này, chúng tôi sẽ kiểm tra kiến thức của bạn về các kỹ thuật được thảo luận trong mô đun này, giúp bạn thêm một số hình ảnh và video vào một trang giật gân thú vị về Mozilla!</dd>
+</dl>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Thêm một bản đồ trên đầu một hình ảnh</a></dt>
+ <dd>Bản đồ hình ảnh cung cấp một cơ chế để làm cho các  phần khác nhau của hình ảnh liên kết đến các địa điểm khác nhau (hãy nghĩ về một bản đồ liên kết đến thông tin thêm về mỗi quốc gia khác nhau mà bạn click vào). Kỹ thuật này đôi khi có thể hữu ích.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Kiến thức cơ bản về Web 2</a></dt>
+ <dd>
+ <p>Một điều tuyệt vời của khóa học nền tảng này của Modzilla là khám phá và kiểm tra một số kỹ năng được đề cập trong  mô đun <em>Đa phương tiện và nhúng  </em>này. Tìm hiểu sâu hơn về soạn thảo web, thiết kế khả năng truy cập, chia sẻ tài nguyên, sử dụng phương tiện trực tuyến, và làm việc mở (nghĩa là nội dung của bạn có sẵn và được người khác chia sẻ miễn phí).</p>
+
+
+ </dd>
+</dl>
diff --git a/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..23a21a7731
--- /dev/null
+++ b/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,274 @@
+---
+title: Video and audio content
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Một khi đã cảm thấy tự tin làm việc với hình ảnh trên web, bước tiếp theo chúng ta học cách thêm video và audio player vào HTML! Trong bài viết này chúng ta sẽ học cách sử dụng thẻ {{htmlelement("video")}} và {{htmlelement("audio")}} ; cách thêm captions/subtitles vào trong video.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Cần nắm trước:</th>
+   <td>Kiến thức máy tính căn bản, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">biết cài đặt phần mềm</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với file</a>, có nền tảng HTML (đã giới thiệu trong bài <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) và <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Học cách chèn video và audio vào web, thêm caption/subtitles.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_và_video_trên_web">Audio và video trên web</h2>
+
+<p>Web developer đã muốn sử dụng audio và video từ rất lâu, trước những năm 2000, khi chúng ta bắt đầu có mạng với băng thông lớn hơn, đủ đáp ứng nhiều loại video, (file video thường lớn hơn nhiều so với hình và text.) Trước đây, HTML không thể nhúng video và audio trên Web, trước đây chúng ta sử dụng những plugin như <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (sau đó là <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) để xử lý những nội dung dạng này. Các công nghệ này vướng phải nhiều vấn đề, như không tương thích tốt với HTML/CSS, lỗi bảo mật, và các vấn đề với accessibility.</p>
+
+<p>{{glossary("HTML5")}} specification đã bổ sung element {{htmlelement("video")}} và {{htmlelement("audio")}}, cùng với {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} để làm việc với 2 element này. Chúng ta không bàn về JavaScript ở đây — chỉ những phần cơ bản có thể với HTML.</p>
+
+<p>Chúng ta sử dụng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio và video ví dụ </a> để làm.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Trước khi bắt đầu, bạn cũng nên biết những trang {{glossary("OVP","OVPs")}} (online video providers) như <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, và <a href="https://vimeo.com/">Vimeo</a>, và online audio providers như <a href="https://soundcloud.com/">Soundcloud</a>. Dùng các dịch vụ này để host và hiển thijvideo sẽ đơn giản và tiện lợi hơn, không cần lo lắng về vấn đề băng thông, OVPs cũng thường có hổ trợ code để nhúng video/audio vào web.</p>
+</div>
+
+<h3 id="Thẻ_&lt;video>">Thẻ &lt;video&gt;</h3>
+
+<p>Ví dụ cách sử dụng thẻ {{htmlelement("video")}}:</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p> </p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Tương tự như src của {{htmlelement("img")}}, attribute <code>src</code> chứa đường dẫn đến file video muốn nhúng.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd><code>controls</code> cho phép sử dụng giao diện điều khiển trình chiếu video của trình duyệt, hoặc tự build một giao diện bằng <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Căn bản nhất, giao diện sẽ có nút start và stop, điều chỉnh âm lượng.</dd>
+ <dt>Thẻ paragraph trong <code>&lt;video&gt;</code></dt>
+ <dd>Gọi là <strong>fallback content</strong> — nó sẽ hiện thị nếu trình duyệt không hổ trợ thẻ <code>&lt;video&gt;</code> , cho phép chúng ta hiển thị fallback nếu user đang dùng trình duyệt cũ.</dd>
+</dl>
+
+<p>Video nhúng sẽ được hiển thị như sau:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Dùng <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">thử ví dụ trực tiếp</a> ở đây (xem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p>
+
+<h3 id="Hổ_trợ_nhiều_loại_formats">Hổ trợ nhiều loại formats</h3>
+
+<p>Có một vấn đề với ví dụ ở trên, nếu mở bằng Safari hoặc Internet Explorer. Video sẽ không phát! Bởi vì mỗi trình duyệt chỉ hỗ trợ kiểu video và audio nhất định.</p>
+
+<p>Những định dạng MP3, MP4 và WebM được gọi là <strong>container formats</strong>. nó sẽ chứa nhiều phần khác nhau tạo thành một bài hát hoặc video — chằng hạn như video track, audio track, và metadata để diễn giải nội dung file media.</p>
+
+<p>Audio và video track cũng có nhiều định dạng khác nhau, ví dụ:</p>
+
+<ul>
+ <li>WebM container thường bao gồm Ogg Vorbis audio với VP8/VP9 video. Được hổ trợ chủ yếu bởi Firefox và Chrome.</li>
+ <li>MP4 container thường bao gồm AAC hoặc MP3 audio với H.264 video. Được hổ trợ chủ yếu bởi Internet Explorer và Safari.</li>
+ <li>Ogg container (đã cũ) thường có Ogg Vorbis audio và Ogg Theora video. Được hổ trợ chủ yếu bởi Firefox và Chrome, bị xóa sổ bởi định dạng WebM cho chất lượng âm thanh hình ảnh tốt hơn.</li>
+</ul>
+
+<p>Audio player thường phát audio track trực tiếp, e.g. an MP3 hoặc Ogg . Nó không cần container.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Vấn đề này không hề đơn giản, nếu bạn xem qua bảng<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility </a>. Thêm nữa, nhiều trình duyệt trên mobile có thể phát unsupported format bằng việc sử dụng trình phát của hệ thống, không thông qua trình duyệt.</p>
+</div>
+
+<p>Trình duyệt sử dụng những bộ <strong>{{Glossary("Codec","Codecs")}} </strong>khác nhau, như Vorbis hoặc H.264. Như đã đề cập ở trên, trình duyệt lại không hổ trợ toàn bộ codec, vì vậy bạn phải cung cấp nhiều định dạng khác nhau. Nếu thiếu bộ codec đúng để giải mã, nó sẽ không phát.</p>
+
+<p>Xem ví dụ bên dưới để biết cách làm <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ví dụ được cập nhập ở đây</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">thử bản trực tiếp ở đây</a>):</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Bằng cách này trình duyệt sẽ tìm đến file mà nó có codec để giả mã trong danh sách file được liệt kê trong thẻ <code>source</code>. WebM và MP4 là có thể xem được ở hầu hết các trình duyệt hiện tại.</p>
+
+<p>Trên mỗi thẻ <code>&lt;source&gt;</code> có attribute <code>type</code> . Cái này không bắt buộc, nhưng nên làm — nó chứa thông tin {{glossary("MIME type","MIME types")}} của video, trình duyệt khi đọc qua nó sẽ biết ngay có giải mã được video kiểu này không. Nếu không thêm attribute này, trình duyệt sẽ load và thử phát từng file đến khi nào thấy được, nó sẽ tiêu tốn nhiều thời gian và tài nguyên hơn.</p>
+
+<h3 id="Các_tính_năng_khác_của_&lt;video>">Các tính năng khác của &lt;video&gt;</h3>
+
+<p>Có một số tính năng khác bao gồm trong thẻ video của HTML5. Xem ví dụ bên dưới:</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+ &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Nó sẽ cho ra kết quả như thế này trên trình duyệt:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Những tính này bao gồm:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} và {{htmlattrxref("height","video")}}</dt>
+ <dd>Cho phép tinh chỉnh kích thước bằng atttribute hoặc bằng {{Glossary("CSS")}}. Trong cả 2 trường hợp, video luôn giữ nguyên tỉ lệ chiều cao-chiều rộng của nó — thường gọi là <strong>aspect ratio</strong>. Nếu không đưa đúng giá trị cao và rộng đảm bảo aspect ratio, video sẽ phủ hết chiều ngang, phần chiều rộng bị thiếu hoặc dư sẽ hiển thị bằng màu nền mặc định.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Attribute cho phép audio hoặc video phát ngay lập tức trong khi các phần khác của trang tiếp tục được load. Khuyến khích không nên dùng tính năng này, users sẽ cảm thấy khá khó chịu.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Cho phép video audio lặp lại khi kết thúc</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Bật mặc định tắt tiếng</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Truyền vào url của hình, được hiển thị thay cho video trước khi phát.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Được dùng để bật tính năng buffer nếu file lớn. Truyền vào 1 trong 3 giá trị:</p>
+
+ <ul>
+  <li><code>"none"</code> tắt buffer</li>
+  <li><code>"auto"</code> tự động buffer nếu file lớn</li>
+  <li><code>"metadata"</code> chỉ buffer những thông tin meta data</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Ví dụ này có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">phát trực tiếp trên Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">xem source code</a>.) Để ý, trong ví dụ không đặt thuộc tính <code>autoplay</code> — nếu video tự động phát ngay khi được load, chúng ta sẽ không thấy poster!</p>
+
+<h3 id="Thẻ_&lt;audio>">Thẻ &lt;audio&gt;</h3>
+
+<p>Thẻ {{htmlelement("audio")}} hoạt động tương tự như thẻ {{htmlelement("video")}}:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Kết quả hiển thị trên trình duyệt</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">xem demo trực tiếp</a> trên Github (xem <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">source code</a>.)</p>
+</div>
+
+<p>Một vài điểm khác so với video:</p>
+
+<ul>
+ <li>Thẻ {{htmlelement("audio")}} không hổ trợ attribute <code>width</code>/<code>height</code></li>
+ <li>Cũng không hổ trợ attribute <code>poster</code>.</li>
+</ul>
+
+<h2 id="Hiển_thị_Text_track_cho_video">Hiển thị Text track cho video</h2>
+
+<p>Chúng ta nói thêm về một khái niệm hơi phức tạp hơn nhưng rất hữu ích. Đa phần user không đủ kiên nhẫn đễ đợi audio/video nếu quá lâu. Và một số trường hợp khác:</p>
+
+<ul>
+ <li>Không có thiết bị để phát âm thanh, người khuyết tật không thể nghe được.</li>
+ <li>Không nghe rõ vì môi trường xung quanh quá ồn, hoặc không muốn gây ra âm thanh ví dụ như đang ngồi trong thư viện</li>
+ <li>User có thể không hiểu ngôn ngữ đang phát, nhưng họ có thể đọc hiểu được.</li>
+</ul>
+
+<p>Với HTML5 video chúng ta có thể cung cấp đoạn text cho phần âm thanh đang phát, với định dạng <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> và thẻ {{htmlelement("track")}} .</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: "Transcribe" và "transcript" nghĩ là viết lại thành văn bản cho phần âm thanh.</p>
+</div>
+
+<p>WebVTT là định dạng cho phép viết text dạng nhiều dòng bên trong metadata, thời gian đoạn text xuất hiện trong video, thậm chí styling/position. Đoạn text này gọi là <strong>cues</strong>, các trường hợp sử dụng thường thấy:</p>
+
+<dl>
+ <dt>subtitle</dt>
+ <dd>Dịch thuật</dd>
+ <dt>caption</dt>
+ <dd>Đồng bộ phần transcription với thoại, hoặc diễn giải phần âm thanh đang phát.</dd>
+ <dt>timed description</dt>
+ <dd>Hiển thị text cho người không thể nghe được.</dd>
+</dl>
+
+<p>File WebVTT sẽ như thế này:</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>Để hiển thị cùng khi đang phát, bạn cần:</p>
+
+<ol>
+ <li>Lưu với định dạng <code>.vtt</code>.</li>
+ <li>Link đến file <code>.vtt</code> bằng thẻ {{htmlelement("track")}}. <code>&lt;track&gt;</code> phải đặt trong thẻ <code>&lt;audio&gt;</code> hoặc <code>&lt;video&gt;</code>, sau tất cả thẻ <code>&lt;source&gt;</code>. Sử dụng attribute {{htmlattrxref("kind","track")}} để xác định cái cue là <code>subtitles</code>, <code>captions</code>, hay <code>descriptions</code>. Thêm nữa, sử dụng {{htmlattrxref("srclang","track")}} để nói với trình duyệt ngôn ngữ đang sử dụng trong subtitle.</li>
+</ol>
+
+<p>Ví dụ:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Kết quả sẽ như thế này:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Để biết thêm chi tiết, đọc thêm <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Bạn có thể <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">xem ví dụ</a> dùng trong bài viết này trên Github, tác giả Ian Devlin (xem <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a>.). Để ý có thể tắt/mở subtitle bằng cách click nút "CC" và tùy chọn ngôn ngữ — English, Deutsch, hoặc Español.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Text track cùng đồng thời hổ trợ {{glossary("SEO")}}, bởi vì các máy tìm kiếm luôn đọc text.</p>
+</div>
+
+<h3 id="Hãy_học_một_cách_chủ_động_tự_nhúng_video_và_audio">Hãy học một cách chủ động: tự nhúng video và audio</h3>
+
+<p>Bạn có thể dùng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio/video ví dụ</a> để tự thực hành.</p>
+
+<p>Chỉ dẫn:</p>
+
+<ol>
+ <li>Lưu file audio/video vào một thư mục mới.</li>
+ <li>Tạo một file HTML mới trong cùng thư mục này, đặt là <code>index.html</code>.</li>
+ <li>Thêm thẻ <code>&lt;audio&gt;</code> và <code>&lt;video&gt;</code> vào trang; để xem kết quả hiển thị bằng trình phát mặc định của trình duyệt.</li>
+ <li>Đưa đường link vào thẻ <code>&lt;source&gt;</code>. Nhớ khai báo <code>type</code>.</li>
+ <li>Với thẻ <code>&lt;video&gt;</code> khai báo attribute poster.</li>
+</ol>
+
+<h2 id="Xem_thêm_các_tài_liệu_tham_khảo_khác">Xem thêm các tài liệu tham khảo khác</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
+ <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="Trong_loạt_bài_này">Trong loạt bài này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/vi/learn/html/tables/index.html b/files/vi/learn/html/tables/index.html
new file mode 100644
index 0000000000..84e53983e9
--- /dev/null
+++ b/files/vi/learn/html/tables/index.html
@@ -0,0 +1,60 @@
+---
+title: HTML Tables
+slug: Learn/HTML/Tables
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Một tác vụ rất phổ biến trong HTML đó là cấu trúc dữ liệu dạng bảng, và nó có một số phần tử và thuộc tính chỉ cho mục đích này. Kết hợp với một chút <a href="/en-US/docs/Learn/CSS">CSS </a>để tạo kiểu, HTML giúp dễ dàng hiển thị các bảng thông tin trên web chẳng hạn như kế hoạch giảng dạy của trường, thời gian biểu tại bể bơi địa phương hoặc số liệu thống kê về đội khủng long hay bóng đá yêu thích của bạn. Mô-đun này đưa bạn đi qua tất cả những điều bạn cần biết về cấu trúc dữ liệu dạng bảng sử dụng HTML.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Muốn_trở_thành_một_nhà_phát_triển_web_front-end">Muốn trở thành một nhà phát triển web front-end?</h3>
+
+<p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết bạn cần để chinh phục mục tiêu của bạn.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô-đun này, bạn cần có những hiểu biết cơ bản về HTML - hãy xem <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<p>Mô-đun này chứa các bài viết sau:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Những điều cơ bản về bảng HTML</a></dt>
+ <dd>Bài viết này đưa bạn bắt đầu với các bảng HTML, bao gồm những điều rất cơ bản chẳng hạn như các hàng và cột, tiêu đề, làm cho các ô mở rộng nhiều hàng và cột, và cách nhóm tất cả các ô khac nhau trong một cột cho mục đích tạo kiểu.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Các tính năng và khả năng truy cập nâng cao của bảng HTML </a></dt>
+ <dd>Mô-đun này xem xét một vài tính năng nâng cao hơn của bảng HTML - chẳng hạn như chú thích / tóm tắt và nhóm các hàng của bạn thành các tiêu đề bảng, phần thân và phần chân trang - cũng như xem xét khả năng truy cập của bảng cho người dùng khiếm thị.</dd>
+</dl>
+
+<h2 id="Đánh_giá">Đánh giá</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Cấu trúc dữ liệu hành tinh</a></dt>
+ <dd>Trong phần đánh giá bảng của chúng tôi, chúng tôi cung cấp cho bạn một số dữ liệu về các hành tinh trong hệ mặt trời và giúp bạn cấu trục nó thành một bảng HTML.</dd>
+</dl>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1555px; left: 50px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/vi/learn/index.html b/files/vi/learn/index.html
new file mode 100644
index 0000000000..d508871fa8
--- /dev/null
+++ b/files/vi/learn/index.html
@@ -0,0 +1,122 @@
+---
+title: Học phát triển Web
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Người Mới Bắt Đầu
+  - TopicStub
+  - Web
+translation_of: Learn
+---
+<div>{{LearnSidebar}}</div>
+
+<div>
+<p class="summary">Chào mừng đến với Khu vực học tập của MDN. Ở đây tập hợp những bài viết với mục đích là cung cấp một hướng dẫn hoàn chỉnh cho người mới bắt đầu, và tất cả những gì cần thiết để làm trang web.</p>
+</div>
+
+<p>Mục đích của khu vực này không phải là giúp bạn từ "người mới bắt đầu" trở thành "chuyên gia", mà là giúp bạn từ "bỡ ngỡ" trở nên "thoải mái". Từ đây, bạn có thể bắt đầu làm việc theo cách của riêng bạn, học tại <a href="https://developer.mozilla.org/vi/docs/Learn">Khu vực hỗ trợ Lập trình MDN</a> và các nguồn tài nguyên khác từ trung cấp đến nâng cao sẽ giúp bạn củng cố rất nhiều kiến thức trước đó.</p>
+
+<p>Nếu bạn là "người hoàn toàn mới", việc phát triển web có thể có đôi chút khó khăn -  chúng tôi sẽ dẫn dắt bạn và cung cấp cho bạn đầy đủ chi tiết giúp bạn cảm thấy thoải mái để học. Bạn sẽ cảm thấy như ở nhà cho dù bạn là sinh viên đang học làm web (tự học hoặc học tại lớp), một giáo viên đang tìm kiếm tư liệu, hay ai đó chỉ muốn hiểu thêm về cách mà các công nghệ web làm việc.</p>
+
+<div class="warning">
+<p><strong>Quan trọng</strong>: Nội dung trong Khu vực Học tập đang được bổ sung thường xuyên. Nếu bạn có thắc mắc về các chủ đề bạn muốn xem hoặc cảm thấy bị thiếu, hãy xem phần {{anch("Liên hệ")}} để biết thông tin về cách liên lạc.</p>
+</div>
+
+<h2 id="Nơi_để_bắt_đầu">Nơi để bắt đầu</h2>
+
+<ul class="card-grid">
+ <li><span>Dành cho người hoàn toàn mới:</span>Nếu bạn là người hoàn toàn mới, chúng tôi đề nghị bạn nên bắt đầu từ <a href="/en-US/docs/Learn/Getting_started_with_the_web">Khởi đầu cùng Web</a>, thứ mà sẽ cung cấp một giới thiệu thực tế việc phát triển web.</li>
+ <li><span>Các câu hỏi cụ thể:</span>Nếu bạn có một câu hỏi cụ thể về việc phát triển web, phần <a href="/en-US/docs/Learn/Common_questions">Câu hỏi thường gặp</a> của chúng tôi có thể có câu trả lời cho bạn.</li>
+ <li><span>Ngoài những điều cơ bản:</span>Nếu bạn đã có một chút vốn kiến thức, bước tiếp theo là học {{glossary("HTML")}} và {{glossary("CSS")}} một cách chi tiết: bắt đầu với mô đun <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Giới thiệu về HTML</a> của chúng tôi rồi tiếp tục với mô đun <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Giới thiệu về CSS</a>.</li>
+ <li><span>Chuyển sang lập trình javascript:</span>Nếu bạn đã cảm thấy thoải mái với HTML và CSS, hoặc bạn chủ yếu quan tâm đến việc lập trình, thì bạn sẽ muốn chuyển sang mô đun <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript những bước khởi đầu</a> của chúng tôi và mô đun <a href="/en-US/docs/Learn/Server-side/First_steps">Phía-server những bước khởi đầu</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: <a href="/en-US/docs/Glossary">Danh sách thuật ngữ</a> của chúng tôi cung cấp các định nghĩa thuật ngữ.</p>
+</div>
+
+<p>{{LearnBox({"title":"Thuật ngữ ngẫu nhiên"})}}</p>
+
+<h2 id="Danh_sách_chủ_đề">Danh sách chủ đề</h2>
+
+<p>Dưới đây là danh sách tất cả các chủ đề trình bày tại Khu vực học tập của MDN.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/Getting_started_with_the_web">Bắt đầu với Web</a></dt>
+ <dd>Giới thiệu trực quan về phát triển Web cho người mới bắt đầu.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/HTML">HTML — Cấu trúc của Web</a></dt>
+ <dd>HTML là ngôn ngữ được sử dụng để tạo cấu trúc cho các phần nội dung và thể hiện ý nghĩa của chúng. Chi tiết về HTML được trình bày tại chủ đề này.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/CSS">CSS — Tạo giao diện cho Web</a></dt>
+ <dd>CSS là ngôn ngữ dùng để tạo giao diện và bố cục cho web, bao gồm một số tính năng như animation. CSS được trình bày chi tiết tại đây.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/JavaScript">JavaScript — Lập trình động phía client</a></dt>
+ <dd>JavaScript là ngôn ngữ kịch bản được dùng để thêm tính năng động cho trang web. Chủ đề này giúp bạn hiểu và viết code Javascript dễ dàng.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms">Web forms - Thu thập dữ liệu từ người dùng</a></dt>
+ <dd>Các web form là một công cụ mạnh mẽ để tương tác với người dùng - phần lớn chúng được sử dụng để thu thập dữ liệu từ người dùng, hoặc cho phép họ điều khiển một giao diện người dùng. Trong các bài viết bên dưới, chúng tôi sẽ cover tất cả các khía cạnh cần thiết cơ bản của việc cấu trúc, styling, và tương tác với các web forms.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/Accessibility">Accessibility — Web dễ sử dụng cho mọi người</a></dt>
+ <dd>Accessibility (Khả năng tiếp cận) của web là khả năng nội dung web có thể dễ dàng tiếp cận số người dùng nhiều nhất có thể bất kể người tàn tật, không phụ thuộc vào thiết bị, vùng địa lý và các yếu tố khác. Chủ đề này sẽ cho bạn các thông tin cần biết.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Performance">Web Performance — làm nên những website nhanh và responsive</a></dt>
+ <dd>Tối ưu hiệu suất web là một nghệ thuật trong việc đảm bảo các ứng dụng web được tải nhanh và hỗ trợ tốt giao diện người dùng, không quan trọng băng thông người dùng là bao nhiêu, kích thước màn hình như thế nào, network ra sao hay khả năng của thiết bị thế nào.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/Tools_and_testing">Công cụ và Kiểm thử</a></dt>
+ <dd>Công cụ được các developers sử dụng được thảo luận tại đây, ví dụ như các công cụ kiểm thử cross-browser.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/Server-side">Lập trình website phía server</a></dt>
+ <dd>Mặc dù bạn có thể chỉ tập trung về lập trình phía client, nhưng kiến thức về servers và việc lập trình phía server cũng có thể hữu dụng. Chủ đề này sẽ trình bày nội dung từ tổng quan về cách server hoạt động, đến chi tiết việc xây dựng server application với 2 frameworks được yêu thích: Django (Python) và Express (Node.js)  </dd>
+</dl>
+
+<h2 id="Mã_nguồn_ví_dụ">Mã nguồn ví dụ</h2>
+
+<p>Các code mẫu đều <a href="https://github.com/mdn/learning-area/">có sẵn trên GitHub</a>. Nếu bạn muốn copy tất cả chúng vào máy tính, cách dễ nhất là <a href="https://github.com/mdn/learning-area/archive/master.zip">download a ZIP of the latest master code branch</a>. Hoặc bạn có thể làm theo các bước sau:</p>
+
+<ol>
+ <li><a href="http://git-scm.com/downloads">Cài đặt Git</a> trên máy tính. Đây là phần mềm kiểm soát phiên bản dữ liệu và là nền tảng của GitHub.</li>
+ <li><a href="https://github.com/join">Đăng kí tài khoản GitHub</a></li>
+ <li>Khi bạn đã đăng kí thành công, dùng username và password đăng nhập vào <a href="https://github.com">github.com</a>.</li>
+ <li>Trên máy tính, mở <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> nếu bạn xài Windows hoặc Terminal nếu bạn xài <a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOS</a>.</li>
+ <li>Để sao chép kho file (repo) vào thư mục tên <code>learning-area</code> trên máy tính của bạn, nhập dòng lệnh dưới đấy vào command prompt hoặc terminal:
+  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>Bây giờ bạn có thể vào thư mục để xem các file bạn vừa copy. (Bạn có thể dùng Finder/ File Explorer, hoặc <a href="https://en.wikipedia.org/wiki/Cd_(command)">dòng lệnh cd</a>). </li>
+</ol>
+
+<p>Bạn có thể cập nhật kho file <code>learning-area</code> lên GitHub theo các bước sau:</p>
+
+<ol>
+ <li>Trong command prompt hoặc terminal, chuyển vào thư mục <code>learning-area</code> bằng cách sử dụng dòng lệnh <code>cd</code>. Ví dụ, nếu bạn đang ở thư mục gốc:
+
+  <pre class="brush: bash notranslate">cd learning-area</pre>
+ </li>
+ <li>Cập nhật code lên bằng cách sử dụng lệnh:
+  <pre class="brush: bash notranslate">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="Liên_hệ">Liên hệ</h2>
+
+<p>Nếu bạn muốn liên lạc với chúng tôi, bạn có thể vào <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area discourse thread</a> hoặc <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a>. Chúng tôi mong muốn nhận được phản hồi từ bạn về bất kỳ vấn đề gì trên trang web, như thông tin sai hoặc thiếu, yêu cầu về chủ đề mới, yêu cầu trợ giúp với các mục bạn không hiểu, hoặc các vấn đề khác.</p>
+
+<p>Nếu bạn quan tâm đến việc phát triển / cải tiến nội dung, bạn có thể vào mục <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">bạn có thể giúp gì</a>! Chúng tôi hân hạnh khi được chia sẻ với bạn, dù bạn là người học, giáo viên, nhà phát triển web có kinh nghiệm.</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Bản Tin Mozilla Developer</a></dt>
+ <dd>Bản tin mới nhất dành cho các nhà phát triển web và là nguồn thông tin cho các lập trình viên ở mọi trình độ.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
+ <dd>Các khóa học miễn phí và mở cho việc học các kỹ năng công nghệ, với sự hướng dẫn và học tập dựa trên dự án</dd>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>Một trang web tương tác giúp bạn học lập trình từ căn bản tới nâng cao.</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Lý thuyết và thực hành căn bản về lập trình dành cho trẻ em và người mới bắt đầu.</dd>
+ <dt><a href="https://www.freecodecamp.com/">FreeCodeCamp.com</a></dt>
+ <dd>Trang web cung cấp các hướng dẫn giúp bạn học lập trình web. </dd>
+</dl>
+
+<dl>
+ <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
+ <dd>Một framework về những yếu tố căn bản cho một trang web ở thế kỉ 21 cùng các hoạt động giảng dạy. </dd>
+ <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd>Một chuỗi các hoạt động giảng dạy được xây dựng bởi Mozilla Foundation, bao hàm từ lý thuyết web căn bản, bảo mật trong Javascript cho đến hack Minecraft. </dd>
+</dl>
diff --git a/files/vi/learn/javascript/building_blocks/events/index.html b/files/vi/learn/javascript/building_blocks/events/index.html
new file mode 100644
index 0000000000..9fc6ba4253
--- /dev/null
+++ b/files/vi/learn/javascript/building_blocks/events/index.html
@@ -0,0 +1,583 @@
+---
+title: Giới thiệu về sự kiện
+slug: Learn/JavaScript/Building_blocks/Events
+tags:
+  - Article
+  - Beginner
+  - Event Handler
+  - JavaScript
+  - Learn
+  - events
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Các sự kiện là các hành động hoặc sự cố xảy ra trong hệ thống mà bạn đang lập trình, hệ thống sẽ báo cho bạn biết về chúng để bạn có thể phản hồi lại theo cách nào đó nếu bạn muốn. Ví dụ: nếu người dùng nhấp vào một nút trên trang web, bạn có thể muốn phản hồi hành động đó bằng cách hiển thị một hộp thông tin. Trong bài viết này, chúng ta sẽ thảo luận về một số khái niệm quan trọng xung quanh các sự kiện và xem xét cách chúng hoạt động trong trình duyệt như thế nào. Đây không phải là một nghiên cứu đầy đủ mà chỉ là những gì bạn cần biết ở giai đoạn này.</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, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_series_of_fortunate_events">A series of fortunate events</h2>
+
+<p>As mentioned above, <strong>events</strong> are actions or occurrences that happen in the system you are programming — the system will fire a signal of some kind when an event occurs, and also provide a mechanism by which some kind of action can be automatically taken (e.g. some code running) when the event occurs. For example in an airport when the runway is clear for a plane to take off, a signal is communicated to the pilot, and as a result, they commence piloting the plane.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are a lot of different types of events that can occur, for example:</p>
+
+<ul>
+ <li>The user clicking the mouse over a certain element or hovering the cursor over a certain element.</li>
+ <li>The user pressing a key on the keyboard.</li>
+ <li>The user resizing or closing the browser window.</li>
+ <li>A web page finishing loading.</li>
+ <li>A form being submitted.</li>
+ <li>A video being played, or paused, or finishing play.</li>
+ <li>An error occurring.</li>
+</ul>
+
+<p>You will gather from this (and from glancing at the MDN <a href="/en-US/docs/Web/Events">Event reference</a>) that there are <strong>a lot</strong> of events that can be responded to.</p>
+
+<p>Each available event has an <strong>event handler</strong>, which is a block of code (usually a user-defined JavaScript function) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are <strong>registering an event handler</strong>. Note that event handlers are sometimes called <strong>event listeners</strong> — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.</p>
+
+<div class="note">
+<p><strong>Note</strong>: It is important to note that web events are not part of the core JavaScript language — they are defined as part of the JavaScript APIs built into the browser.</p>
+</div>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<p>Let's look at a simple example to explain what we mean here. You've already seen events and event handlers used in many of the examples in this course already, but let's recap just to cement our knowledge. In the following example, we have a single {{htmlelement("button")}}, which when pressed, will make the background change to a random color:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>The JavaScript looks like so:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>In this code, we store a reference to the button inside a variable called btn, using the {{domxref("Document.querySelector()")}} function. We also define a function that returns a random number. The third part of the code is the event handler. The <code>btn</code> variable points to a <code>&lt;button&gt;</code> element, and this type of object has a number of events that can fire on it, and therefore, event handlers are available. We are listening for the click event firing, by setting the <code>onclick</code> event handler property to equal an anonymous function containing code that generated a random RGB color and sets the <code>&lt;body&gt;</code> background-color equal to it.</p>
+
+<p>This code will now be run whenever the click event fires on the <code>&lt;button&gt;</code> element, i.e., whenever a user clicks on it.</p>
+
+<p>The example output is as follows:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="It's_not_just_web_pages">It's not just web pages</h3>
+
+<p>Another thing worth mentioning at this point is that events are not particular to JavaScript — most programming languages have some kind of event model, and the way it works will often differ from JavaScript's way. In fact, the event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments.</p>
+
+<p>For example, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like <code>on()</code> to register an event listener, and <code>once()</code> to register an event listener that unregisters after it has run once. The <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> provide a good example of use.</p>
+
+<p>As another example, you can now also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (e.g. <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage page</a> for an example.</p>
+
+<p>You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.</p>
+
+<h2 id="Ways_of_using_web_events">Ways of using web events</h2>
+
+<p>There are a number of different ways in which you can add event listener code to web pages so that it will be run when the associated event fires. In this section, we will review the different mechanisms and discuss which ones you should use.</p>
+
+<h3 id="Event_handler_properties">Event handler properties</h3>
+
+<p>These are the properties that exist to contain event handler code that we have seen most frequently during the course. Returning to the above example:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>The <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), but it is a special type — when you set it to be equal to some code, that code will be run when the event fires on the button.</p>
+
+<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>There are many different event handler properties available. Let's do an experiment.</p>
+
+<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color will change when the button is focused and unfocused (try pressing tab to tab on to the button and off again). These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color will change only when it is double-clicked.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color will change when a key is pressed on the keyboard. <code>keypress</code> refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color will change when the mouse pointer is moved so it begins hovering over the button, or when it stops hovering over the button and moves off of it, respectively.</li>
+</ul>
+
+<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p>
+
+<h3 id="Inline_event_handlers_—_don't_use_these">Inline event handlers — don't use these</h3>
+
+<p>You might also see a pattern like this in your code:</p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p>
+</div>
+
+<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (aka <strong>inline event handlers</strong>) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.</p>
+
+<p>For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.</p>
+
+<p>Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:</p>
+
+<pre class="brush: js">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p>
+</div>
+
+<h3 id="addEventListener()_and_removeEventListener()">addEventListener() and removeEventListener()</h3>
+
+<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p>
+</div>
+
+<p>Inside the <code>addEventListener()</code> function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the <code>addEventListener()</code> function, in an anonymous function, like this:</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p>This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.</p>
+
+<p>Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:</p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>As the second line would overwrite the value of <code>onclick</code> set by the first. This would work, however:</p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>Both functions would now run when the element is clicked.</p>
+
+<p>In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p>
+
+<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3>
+
+<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p>
+
+<p>The other two are relatively interchangeable, at least for simple uses:</p>
+
+<ul>
+ <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li>
+ <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li>
+</ul>
+
+<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:</p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p>
+</div>
+
+<h2 id="Other_event_concepts">Other event concepts</h2>
+
+<p>In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.</p>
+
+<h3 id="Event_objects">Event objects</h3>
+
+<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:</p>
+
+<pre class="brush: js">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p>
+</div>
+
+<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. <code>e</code>/<code>evt</code>/<code>event</code> are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.</p>
+</div>
+
+<p><code>e.target</code> is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p>
+
+<pre class="brush: js">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>The output is as follows (try clicking around on it — have fun):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p>
+
+<h3 id="Preventing_default_behavior">Preventing default behavior</h3>
+
+<p>Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)</p>
+
+<p>The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.</p>
+
+<p>First, a simple HTML form that requires you to enter your first and last name:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>Now some JavaScript — here we implement a very simple check inside an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:</p>
+
+<pre class="brush: js">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p>
+</div>
+
+<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3>
+
+<p>The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code>&lt;div&gt;</code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code>&lt;div&gt;</code> and the second one to the <code>&lt;video&gt;</code>. The idea is that when the area of the <code>&lt;div&gt;</code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p>
+
+<pre>videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code>&lt;div&gt;</code> to also be hidden at the same time. This is because the video is inside the <code>&lt;div&gt;</code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p>
+
+<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4>
+
+<p>When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p>
+
+<p>In the <strong>capturing</strong> phase:</p>
+
+<ul>
+ <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it in the capturing phase, and runs it if so.</li>
+ <li>Then it moves on to the next element inside <code>&lt;html&gt;</code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li>
+</ul>
+
+<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p>
+
+<ul>
+ <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it in the bubbling phase, and runs it if so.</li>
+ <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code>&lt;html&gt;</code> element.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Click on image for bigger diagram)</p>
+
+<p>In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <code>&lt;video&gt;</code> element outwards to the <code>&lt;html&gt;</code> element. Along the way:</p>
+
+<ul>
+ <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li>
+ <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li>
+</ul>
+
+<h4 id="Fixing_the_problem_with_stopPropagation()">Fixing the problem with stopPropagation()</h4>
+
+<p>This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.</p>
+
+<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and having a go at fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p>
+</div>
+
+<h4 id="Event_delegation">Event delegation</h4>
+
+<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent, rather than having to set the event listener on every child individually.</p>
+
+<p>A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the <code>click</code> event listener on the parent <code>&lt;ul&gt;</code>, and it will bubble to the list items.</p>
+
+<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.</p>
+
+<p>Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/javascript/building_blocks/index.html b/files/vi/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..097d323722
--- /dev/null
+++ b/files/vi/learn/javascript/building_blocks/index.html
@@ -0,0 +1,59 @@
+---
+title: Nền tảng của JavaScript
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - Article
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - Functions
+  - Guide
+  - Introduction
+  - JavaScript
+  - Landing
+  - Loops
+  - Module
+  - NeedsTranslation
+  - TopicStub
+  - events
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Trong mô-đun này, chúng ta tiếp tục công việc tìm hiểu tất cả các tính năng cơ bản nhất của JavaScript, và chuyển sự chú ý sang các khối mã thường gặp như câu lệnh điều kiện, vòng lặp, hàm và sự kiện. Trong khóa học, bạn đã thấy những thứ này trước đây, nhưng chỉ lướt qua - giờ đây chúng ta sẽ thảo luận chúng một cách rõ ràng.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt>
+ <dd>In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></dt>
+ <dd>Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></dt>
+ <dd>Another essential concept in coding is <strong>functions. Functions</strong> allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></dt>
+ <dd>With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt>
+ <dd>The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt>
+ <dd>Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt>
+ <dd>Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.</dd>
+</dl>
diff --git a/files/vi/learn/javascript/first_steps/index.html b/files/vi/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..57fe422862
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/index.html
@@ -0,0 +1,60 @@
+---
+title: JavaScript cơ bản
+slug: Learn/JavaScript/First_steps
+tags:
+  - Biến
+  - Chuỗi
+  - Cơ Bản
+  - Hướng dẫn
+  - JavaScript
+  - Mảng
+  - Toán tử
+translation_of: Learn/JavaScript/First_steps
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<p class="summary">Trong mô-đun (module) đầu tiên về JavaScript, đầu tiên chúng ta sẽ trả lời một vài câu hỏi căn bản chẳng hạn "JavaScript là gì?", "nó trông như thế nào?", và "nó có thể làm gì?", trước khi chuyển bạn sang trải nghiệm thực hành đầu tiên bằng việc viết JavaScript. Sau đó, chúng ta sẽ thảo luận chi tiết một vài cấu phần chính, chẳng hạn như các biến (variables), các chuỗi (strings), các số (numbers) và các mảng (arrays).</p>
+
+<h2 id="Điều_Kiện_Tiên_Quyết">Điều Kiện Tiên Quyết</h2>
+
+<p>Trước khi bắt đầu mô-đun này, bạn không cần phải biết trước bất kì kiến thức JavaScript nào, nhưng cần một chút hiểu biết về HTML và CSS. Lời khuyên là bạn nên tìm hiểu các mô-đun sau trước khi bắt đầu với JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Nếu bạn đang thực hành trên một máy tính/máy tính bảng/ hoặc các thiết bị mà bạn không có quyền tạo các files, bạn có thể thực hành các ví dụ trong bài học trên trình biên tập code online như <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Chuỗi_Bài_Hướng_Dẫn">Chuỗi Bài Hướng Dẫn</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt>
+ <dd>Chào mừng đến khóa học JavaScript cơ bản của MDN! Trong bài đầu tiên chúng ta sẽ nhìn nhận JavaScript từ góc độ tổng quát, trả lời các câu hỏi như "JavaScript là gì?" và "nó có khả năng gì?" cũng như giúp bạn làm quen với các chức năng của JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt>
+ <dd>Giờ bạn đã được học lý thuyết tổng quát về JavaScript cũng như khả năng ứng dụng của chúng. Tiếp theo chúng ta sẽ tiềm hiểu nhanh những tính năng cơ bản trong JavaScript thông qua thực hành, trong bài này, bạn sẽ được hướng dẫn từng bước xây dựng trò chơi "Đoán số" đơn giản.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt>
+ <dd>Trò chơi "Đoán số" trong bài trước mà bạn đã xây dựng, khả năng cao là chương trình của bạn không hoạt động như mong muốn. Đừng sợ - bài này sẽ giúp bạn không phải "vò đầu bức tai" trong những trường hợp như vậy bằng một vài mẹo đơn giản - tìm và chữa lỗi chương trình JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt>
+ <dd>Trong những bài trước bạn được tìm hiểu JavaScript là gì, khả năng ứng dụng của nó và cách kết hợp nó với các công nghệ web khác cũng như các tính năng cốt lõi nhìn từ góc độ tổng quát. Trong bài này chúng ta sẽ bắt đầu làm việc với thành phần cơ bản nhất của JavaScript - "Các Biến".</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt>
+ <dd>Tiếp theo trong khóa học chúng ta sẽ thảo luận về toán học trong JavaScript - cách kết hợp các toán tử, toán hạng và các tính năng khác để vận dụng chúng một cách thành công.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt>
+ <dd>Trong phần này chúng ta sẽ tìm hiểu về chuỗi (string) - tên gọi của các đoạn văn bản trong lập trình. Bài này tập trung vào những hiểu biết chung về chuỗi mà bạn thật sự cần phải biết khi học JavaScript như tạo chuỗi, escape quote trong chuỗi, xâu các chuỗi và kí tự cùng nhau.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt>
+ <dd>Giờ chúng ta đã tìm hiểu cơ bản về chuỗi, hãy tiến thêm một bước nữa và bắt đầu nghĩ về những cách vận dụng hữu ích nào chúng ta có thể thực hiện trên chuỗi với các phương thức (methods) dựng sẵn như tìm độ dài (length) của chuỗi, xâu (join) và phân tách (split) chuỗi, tách kí tự từ một chuỗi vv...</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt>
+ <dd>Trong bài cuối của mô-đun này, chúng ta sẽ được giới thiệu về mảng (arrays) - một cách tiện lợi để lưu trữ danh sách các phần tử của một dãy thông tin trong một tên biến duy nhất. Tìm hiểu tính hữu dụng của kiểu dữ liệu mảng, khám phá cách tạo mảng, nhận, thêm, xóa phần tử được lưu trữ trong mảng vv...</dd>
+</dl>
+
+<h2 id="Bài_Tập">Bài Tập</h2>
+
+<p>Bài tập sau đây sẽ giúp bạn kiểm tra kiến thức JavaScript cơ bản được trình bày trong mô-đun.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt>
+ <dd>Trong bài tập này bạn sẽ ứng dụng những kiến thức trong mô-đun để tạo một ứng dụng thú vị. Ứng dụng của bạn có nhiệm vụ tạo ra những câu chuyện ngớ ngẩn một cách ngẫu nhiên. Chúc vui!</dd>
+</dl>
diff --git a/files/vi/learn/javascript/first_steps/math/index.html b/files/vi/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..d4a9085d82
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,418 @@
+---
+title: Toán học cơ bản trong JavaScript — số và toán tử
+slug: Learn/JavaScript/First_steps/Math
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Tới đây ta sẽ bàn về toán học trong JavaScript — cách sử dụng {{Glossary("Operator","toán tử")}} và các tính năng khác để thao tác thành công với các con số phục vụ mục đích của chúng ta.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Biết cách sử dụng máy tính cơ bản, hiểu cơ bản về HTML và CSS, hiểu được JavaScript là gì.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Quen với cơ bản của toán trong JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tất_cả_mọi_người_đều_yêu_toán">Tất cả mọi người đều yêu toán</h2>
+
+<p>Được rồi, có thể là không. Một số trong chúng ta yêu toán, một số thì ghét toán ngay từ khi ta phải học bảng cửu chương và cách chia số lớn ở trường, và một số khác thì đứng ở đâu đó giữa cả hai. Nhưng ta chẳng thể phủ nhận rằng toán là một phần cốt lõi của cuộc sống mà ta không thể nào tiến xa nếu không có nó. Đặc biệt là khi ta ta học cách lập trình JavaScript (hoặc bất kì ngôn ngữ lập trình nào khác) - chủ yếu phụ thuộc vào xử lý dữ liệu kiểu số, tính toán giá trị mới, vân vân... khiến bạn không khỏi bất ngờ khi nhận ra JavaScript có sẵn đầy đủ các hàm toán học.</p>
+
+<p>Bài viết này chỉ đề cập tới những phần cơ bản mà bạn cần phải biết vào lúc này.</p>
+
+<h3 id="Kiểu_số_học">Kiểu số học</h3>
+
+<p>Trong lập trình, thậm chí cả hệ số thập phân xoàng mà ta đều hiểu rõ cũng phức tạp hơn bạn có thể mường tượng được. Chúng tôi dùng nhiều thuật ngữ khác nhau để mô tả các kiểu số thập phân khác nhau, chẳng hạn:</p>
+
+<ul>
+ <li><strong>Integers</strong> là số nguyên, ví dụ 10, 400, or -5.</li>
+ <li><strong>Floating point numbers</strong> (số thực dấu phẩy động) có dấu chấm thập phân và vị trí thập phân, ví dụ 12.5, và 56.7786543.</li>
+ <li><strong>Doubles</strong> là một kiểu số thực dấu phẩy động đặc biệt có độ chính xác cao hơn số thực dấu phẩy động bình thường (độ chính xác liên quan đến số lượng vị trí sau dấu chấm thập phân).</li>
+</ul>
+
+<p>Chúng tôi còn có một số kiểu hệ số khác! Thập phần là hệ cơ số 10 (tức là sử dụng 0–9 trong từng hàng từ đơn vị đến chục trăm...), nhưng chúng tôi cũng có những thứ như là:</p>
+
+<ul>
+ <li><strong>Binary</strong> — Cấp độ thấp nhất trong ngôn ngữ máy; 0 và 1.</li>
+ <li><strong>Octal</strong> — Cơ số 8, dùng 0–7 trong từng hàng.</li>
+ <li><strong>Hexadecimal</strong> — Cơ số 16, dùng 0–9 và tới a–f trong từng hàng. Có lẽ bạn từng sử dụng kiểu số này khi thiết lập <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">màu sắc trong CSS</a>.</li>
+</ul>
+
+<p><strong>Trước khi nghĩ rằng não bạn sắp tan chảy, dừng lại ngay đó!</strong> Để bắt đầu, ta sẽ chỉ dùng số thập phân xuyên suốt khoá học này; hiếm khi bạn phải nghĩ đến dạng số khác, nếu điều đó xảy ra.</p>
+
+<p>Tin mừng thứ hai là không giống như một số ngôn ngữ lập trình khác, JavaScript chỉ có duy nhất một kiểu dữ liệu cho số, đó là, {{jsxref("Number")}}. Điều này nghĩa là dù bạn gặp phải kiểu số học nào trong JavaScript, bạn cũng có thể xử lý chúng cùng một cách.</p>
+
+<h3 id="Với_tôi_tất_cả_chỉ_là_số">Với tôi tất cả chỉ là số</h3>
+
+<p>Hãy thử chơi với một vài con số để làm quen với cú pháp căn bản mà ta cần nào. Nhập lệnh được liệt kê bên dưới vào <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript console trong công cụ dành cho nhà phát triển của bạn</a>, hoặc dùng console dựng sẵn phía dưới tuỳ thích.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Mở trong cửa sổ mới</a></strong></p>
+
+<ol>
+ <li>Trước hết, hay khai báo một cặp biến và khởi tạo lần lượt giá trị cho chúng với integer (số nguyên) và float (số thực), rồi gõ tên từng biến vào để kiểm tra thứ tự của chúng:
+  <pre class="brush: js">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Giá trị số học không cần tới cặp dấu nháy — thử khai báo và khởi tạo thêm vài cặp biến nữa trước khi chuyển sang bước tiếp theo.</li>
+ <li>Giờ hãy kiểm tra xem hai biến vừa tạo của chúng ta có cùng kiểu dữ liệu không. Có một toán tử trong JavaScript tên là {{jsxref("Operators/typeof", "typeof")}} làm được điều này. Hãy nhập hai dòng phía dưới:
+  <pre class="brush: js">typeof myInt;
+typeof myFloat;</pre>
+  Giá trị trả về sẽ luôn là <code>"number"</code> trong cả hai trường hợp — điều này khiến mọi thứ dễ dàng hơn thay vì có nhiều kiểu dữ liệu khác nhau, và ta sẽ phải xử lý theo các cách khác nhau. Phù!</li>
+</ol>
+
+<h2 id="Toán_tử_số_học">Toán tử số học</h2>
+
+<p>Toán tử số học là những toán tử căn bản để ta dùng cho phép tính:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Cộng</td>
+   <td>Cộng hai số lại với nhau.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Trừ</td>
+   <td>Trừ số bên trái bằng số bên phải.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Nhân</td>
+   <td>Nhân hai số lại với nhau.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Chia</td>
+   <td>Chia số bên trái bằng số bên phải.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Chia lấy dư (thi thoảng gọi là modulo)</td>
+   <td>
+    <p>Trả về phần dư sau khi bạn thực hiện phép chia số bên trái cho số bên phải.</p>
+   </td>
+   <td><code>8 % 3</code> (trả về 2, bởi vì 3 nhân 2 được 6, 8 trừ 6 còn 2.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Đôi khi bạn sẽ thấy các số trong phép tính được đề cập dưới dạng các {{Glossary("Operand", "toán hạng")}}.</p>
+</div>
+
+<p>Chắc chắn chúng tôi không cần dạy bạn cách làm toán căn bản, nhưng chúng tôi muốn thử độ hiểu về cú pháp liên quan. Hãy thử nhập ví dụ bên dưới vào trong <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript console trong công cụ dành cho nhà phát triển của bạn</a>, hoặc dùng console dựng sẵn phía dưới tuỳ thích, để bạn quen với cú pháp.</p>
+
+<ol>
+ <li>Trước hết hãy thử tự nhập vào vài ví dụ đơn giản, như là
+  <pre class="brush: js">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>Bạn còn có thể thử khai báo và khởi tạo vài số bên trong biến, vả thử dùng các biến này trong phép tính — các biến sẽ hành xử như giá trị chúng đang mang. Chẳng hạn:
+  <pre class="brush: js">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Cuối phần này, hãy thử nhập vài biểu thức phức tạp hơn một chút, như là:
+  <pre class="brush: js">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Một vài phép tính phía trên không trả về giá trị mà bạn mong muốn; phần dưới đây sẽ giải thích cho bạn lý do.</p>
+
+<h3 id="Thứ_tự_ưu_tiên_toán_tử">Thứ tự ưu tiên toán tử</h3>
+
+<p>Hãy xem lại ví dụ cuối cùng phía trên, giả sử <code>num2</code> giữ giá trị là 50 và <code>num1</code> giữ giá trị là 10 (như đã khởi tạo ở phía trên):</p>
+
+<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
+
+<p>Là con người, có lẽ bạn sẽ đọc là <em>"50 cộng 10 bằng 60"</em>, rồi <em>"8 cộng 2 bằng 10"</em>, và cuối cùng <em>"60 chia cho 10 bằng 6"</em>.</p>
+
+<p>Nhưng trình duyệt thực hiện từ <em>"10 chia cho 8 bằng 1.25"</em>, rồi <em>"50 cộng 1.25 cộng 2 bằng 53.25"</em>.</p>
+
+<p>Đó là bởi vì <strong>thứ tự ưu tiên toán tử</strong> — vài toán tử sẽ được áp dụng trước toán tử khác trong khi tính toán kết quả của một phép tính (hay còn gọi là biển thức, trong lập trình). Thứ tự ưu tiên toán tử trong JavaScript giống hệt với những gì ta được dạy ở trường — Nhân và chia luôn được thực hiện trước, rồi tới cộng và trừ (phép tính luôn thực hiện từ trái qua phải).</p>
+
+<p>Nếu bạn muốn vượt thứ tự ưu tiên toán tử, bạn có thể đặt cặp ngoặc tròn quanh phần mà bạn muốn thực hiện trước. Thế nên để trả về giá trị 6, ta sẽ làm như sau:</p>
+
+<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
+
+<p>Hãy thử xem.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Danh sách tất cả toán tử và thứ tự của chúng trong JavaScript có thể được tìm thấy trong <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Biểu thức và toán tử</a>.</p>
+</div>
+
+<h2 id="Toán_tử_tăng_và_giảm">Toán tử tăng và giảm</h2>
+
+<p>Đôi khi bạn sẽ muốn cộng hoặc trừ liên tục thêm/ bớt một với một biến số học nhất định. Việc này có thể dễ dàng thực hiện bằng toán tử tăng (<code>++</code>) và toán tử giảm (<code>--</code>). Chúng tôi đã dùng <code>++</code> trong trò chơi "Đoán số" trong bài viết <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> của chúng tôi, khi chúng tôi thêm 1 vào biến <code>guessCount</code> để đếm số lần đáon của người dùng sau mỗi lượt.</p>
+
+<pre class="brush: js">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Chúng được dùng phần lớn trong <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">vòng lặp</a>, ta sẽ học về nó trong các bài tiếp trong khoá học này. Chẳng hạn, bạn muốn lặp qua danh sách các đơn giá, và thêm thuế giá trị gia tăng vào mỗi đơn giá. Bạn có thể lặp qua từng giá trị rồi đồng thời tính toán thuế và thêm vào đơn giá. Biến tăng sẽ được dùng để chuyển sang giá trị kế tiếp khi cần. Chúng tôi đã chuẩn bị sẵn một ví dụ đơn giản để cho bạn xem cách hoạt động của nó — <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">thử nó ngay đi</a>, và <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">trông vào mã nguồn này</a> để xem liệu bạn có thể tìm thấy biến tăng hay không! Ta sẽ xem chi tiết về vòng lặp trong các bài viết tiếp theo.</p>
+</div>
+
+<p>Hãy thử những dòng lệnh dưới đây trong console của bạn. Trước khi bắt đầu, hãy nhớ rằng bạn không thể áp dụng những toán tử vừa kể trên trực tiếp vào số, nghe có vẻ hơi lạ nhỉ, nhưng ta chỉ có thể gán giá trị mới cập nhật vào một biến, chứ không thể thực thi trên chính giá trị đó. Làm như sau sẽ hiện ra lỗi:</p>
+
+<pre class="brush: js">3++;</pre>
+
+<p>Thế nên, bạn chỉ có thể dùng toán tử tăng với biến đã tồn tại. Thử lệnh này xem:</p>
+
+<pre class="brush: js">var num1 = 4;
+num1++;</pre>
+
+<p>Được rồi, kì quái tập 2! Khi làm theo bạn sẽ thấy giá trị trả về là 4 — đó là bởi vì trình duyệt trả về giá trị hiện tại, <em>rồi</em> tăng giá trị của biến lên. Bạn sẽ thấy giá trị của biến đã tăng lên nếu nhập lại biến vào console:</p>
+
+<pre class="brush: js">num1;</pre>
+
+<p>Điều tương tự xảy ra với <code>--</code>, hãy thử đoạn bên dưới:</p>
+
+<pre class="brush: js">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có thể bắt trình duyệt làm điều ngược lại — tăng giảm giá trị của biến <em>rồi</em> trả về giá trị — bằng cách đặt toán tử lên phía trước biến thay vì đặt ở sau. Thử lại ví dụ trên một lần nữa, nhưng lần này hãy dùng <code>++num1</code> và <code>--num2</code>.</p>
+</div>
+
+<h2 id="Toán_tử_gán">Toán tử gán</h2>
+
+<p>Toán tử gán là những toán tử gán giá trị cho biến. Ta đã dùng toán tử đơn giản nhất, <code>=</code>, rất nhiều lần — nó đơn thuần gán giá trị bên phải cho biến bên trái:</p>
+
+<pre class="brush: js">var x = 3; // x giữ giá trị 3
+var y = 4; // y giữ giá trị 4
+x = y; // x giờ giữ giá trị giống hệt với y, 4</pre>
+
+<p>Nhưng có vài kiểu phức tạp hơn, tạo ra lối tắt khiến mã nguồn của bạn sạch sẽ hơn và hữu hiệu hơn. Những toán tử thông dụng nhất được liệt kê bên dưới:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+   <th scope="col">Viết tắt cho</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Cộng gán</td>
+   <td>Cộng giá trị bên phải vào giá trị của biến bên trái, rồi trả về gía trị mới cho biến</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Trừ gán</td>
+   <td>Trừ giá trị của biến biến bên trái cho giá trị bên phải, rồi trả về giá trị mới cho biến</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Nhân gán</td>
+   <td>Nhân giá trị của biến bên trái với giá trị bên phải, rồi trả về gía trị mới cho biến</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Chia gán</td>
+   <td>Chia giá trị của biến biến bên trái cho giá trị bên phải, rồi trả về giá trị mới cho biến</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Thử gõ vài ví dụ phía trên vào console của bạn, để hiểu nguyên lý hoạt động của chúng. Trong mỗi trường hợp, thử đoán xem giá trị của chúng trước khi xuống dòng kế..</p>
+
+<p>Bạn có thể vô tư sử dụng biến khác vào phía bên phải của mỗi biểu thức, chẳng hạn:</p>
+
+<pre class="brush: js">var x = 3; // x giữ giá trị 3
+var y = 4; // y giữ giá trị 4
+x *= y; // x giờ giữ giá trị 12</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Còn có nhiều <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">toán tử gán khác nữa</a>, nhưng bây giờ bạn chỉ cần học những toán tử trên thôi.</p>
+</div>
+
+<h2 id="Học_chủ_động_định_cỡ_của_hộp_canvas">Học chủ động: định cỡ của hộp canvas</h2>
+
+<p>Trong bài luyện này, bạn sẽ thao tác với vài con số và toán tử để thay đổi kích thước của một chiếc hộp. Chiếc hộp được vẽ nên bởi API của trình duyệt tên là {{domxref("Canvas API", "", "", "true")}}. Bạn không cần quan tâm đến nguyên lý vận hành của nó — giờ chỉ cần tập trung vào phép tính thôi. Chiều rộng và chiều cao của chiếc hộp (theo pixels) được định nghĩa bởi hai biến <code>x</code> và <code>y</code>, được khởi tạo với giá trị bằng 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Mở trong cửa sổ mới</a></strong></p>
+
+<p>Trong hộp thoại mã nguồn chỉnh sửa được phía trên, có hai dòng được đặt trong comment mà chúng tôi muốn bạn cập nhật để khiến chiếc hộp phóng to/ thu nhỏ đến theo kích cỡ xác định, sử dụng toán tử và/ hoặc giá trị xác định trong mỗi trường hợp. Hãy thử theo bên dưới:</p>
+
+<ul>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng của chiếc hộp vẫn là 50px, nhưng 50 được tính toán ra bởi hai số 43 và 7 và một toán tử số học.</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao của chiếc hộp là 75px, nhưng 75 được tính toán ra bởi hai số 25 và 3 và một toán tử số học.</li>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng của chiếc hộp là 250px, nhưng 250 được tính toán bởi hai số và một toán tử chia lấy dư (modulo).</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao là 150px, nhưng 150 được tính toán ra bởi ba số và toán tử trừ và chia.</li>
+ <li>Thay đổi dòng tính toán giá trị của x sao cho chiều rộng là 200px, nhưng 200 được tính toán ra bởi 4 và một toán tử gán.</li>
+ <li>Thay đổi dòng tính toán giá trị của y sao cho chiều cao là 200px, nhưng 200 được tính toán ra bởi 50 và 3, toán tử nhân, và toán tử cộng gán.</li>
+</ul>
+
+<p>Đừng lo nếu nhỡ có làm sai gì đó. Bạn luôn có thể nhấn nút Reset để mọi thứ lại trở lại như ban đầu. Sau khi đã trả lời đúng tất cả câu hỏi phía trên, đừng ngần ngại chơi đùa với mã nguồn và tự tạo ra thử thách cho bản thân.</p>
+
+<h2 id="Toán_tử_so_sánh">Toán tử so sánh</h2>
+
+<p>Đôi khi ta sẽ muốn kiểm tra true/false, rồi quyết định làm gì đó tiếp dựa trên kết quả của phép kiểm tra — để làm điều này ta dùng <strong>toán tử so sánh</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Toán tử</th>
+   <th scope="col">Tên</th>
+   <th scope="col">Mục đích</th>
+   <th scope="col">Ví dụ</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Bằng chính xác</td>
+   <td>Kiểm tra xem liệu hai giá trị trái phải có giống hệt nhau hay không</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Không bằng chính xác</td>
+   <td>Tiểm tra xem liệu hai giá trị trái phải có <strong>không</strong> giống hệt nhau hay không</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Nhỏ hơn</td>
+   <td>Kiểm tra xem giá trị bên trái có nhỏ hơn giá trị bên phải hay không.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Lớn hơn</td>
+   <td>Kiểm tra xem giá trị bên trái có lớn hơn giá trị bên phải hay không.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;=</code></td>
+   <td>Nhỏ hơn hoặc bằng</td>
+   <td>Kiểm tra xem giá trị bên trái có nhỏ hơn hoặc bằng giá trị bên phải hay không</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;=</code></td>
+   <td>Lớn hơn hoặc bằng</td>
+   <td>Kiểm tra xem giá trị bên trái có lớn hơn hoặc bằng giá trị bên phải hay không.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Có lẽ bạn sẽ thấy có người sử dụng <code>==</code> và <code>!=</code> trong mã nguồn của họ. Đây là những toán tử hợp lệ trong JavaScript, nhưng chúng khác với <code>===</code>/<code>!==</code>. Hai toán tử trước kiểm tra sự giống nhau về giá trị nhưng không kiểm tra sự giống nhau về kiểu dữ liệu. Hai toán tử sau, kiểm tra chính xác sự giống nhau về cả giá trị lẫn kiểu dữ liệu. Toán tử so sánh chính xác thường gây ra ít lỗi hơn, nên chúng tôi đề nghị bạn dùng chúng.</p>
+</div>
+
+<p>Nếu bạn thử nhập những giá trị sau vào console, bạn sẽ thấy chúng đều trả về giá trị <code>true</code>/<code>false</code> — những giá trị boolean mà ta đã nhắc tới ở bài viết trước. Chúng cực kì hữu dụng bởi chúng giúp ta tạo quyết định trong chương trình của mình, và chúng được dùng mỗi khi ta cần đưa ra lựa chọn. Chẳng hạn, boolean có thể dùng để:</p>
+
+<ul>
+ <li>Hiển thị nhãn ký tự chính xác tuỳ thuộc liệu một chức năng nào đó đang bật hay tắt</li>
+ <li>Hiển thị hộp thoại trò chơi kết thúc khi một trò chơi kết thúc hoặc hộp thoại chiến thắng khi đạt được chiến thắng trong trò chơi</li>
+ <li>Hiển thị câu chào mừng hợp với dịp lễ/ hội nào đó</li>
+ <li>Phóng to/ thu nhỏ bản đồ tuỳ theo nút nào được nhấn</li>
+</ul>
+
+<p>Ta sẽ học cách viết đống logic đó trong các bài viết sau khi học về câu điều kiện. Bây giờ, hãy xem qua ví dụ sau:</p>
+
+<pre class="brush: html">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Mở trong cửa sổ mới</a></strong></p>
+
+<p>Bạn có thể thấy toán tử so sánh bằng được dùng trong hàm <code>updateBtn()</code>. Trong trường hợp này, ta không so sánh hai biểu thức toán học có trả về cùng một giá trị hay không - ta đang kiểm tra xem liệu nội dung ký tự bên trong một nút bấm có chứa một xâu ký tự xác định không — nhưng nguyên lý hoạt động cũng tương tự. Nếu nút bấm có xâu ký tự là "Start machine" khi đã được nhấn, ta chuyển nhãn của nó thành "Stop machine", và cập nhật lại nhãn dán. Nếu nút bấm có xâu ký tự là "Stop machine" khi đã được nhấn, ta chuyển nó ngược lại.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Việc chuyển tiếp liên tục giữa hai giá trị thường được gọi là <strong>toggle</strong>. Nó chuyển từ trạng thái này qua trạng thái kia — đèn bật, đèn tắt, vân vân.</p>
+</div>
+
+<h2 id="Tóm_lại">Tóm lại</h2>
+
+<p>Trong bài viết này chúng tôi đã gợi ra thông tin căn bản bạn cần để biết về số trong JavaScript, cho lúc này. Bạn sẽ còn thấy các con số xuất hiện lại liên tục, xuyên suốt quá trình học JavaScript, thế nên giờ là lúc tốt nhất để học về chúng. Nếu bạn là một trong những người không yêu thương gì toán học, bạn sẽ thấy vui vì bài viết này khá là ngắn.</p>
+
+<p>Trong bài viết tới, ta sẽ học về văn bản và cách JavaScript cho phép ta thao tác với chúng.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Nếu bạn thực sự yêu toán và muốn đọc thêm về cách cài đặt chúng trong JavaScript, bạn có thể tìm vô số bài viết chi tiết trong khu vực chính về JavaScript của MDN. Những điểm đến thú vị có thể kể đến như là bài viết về <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Số và ngày tháng</a> và <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Biểu thức và toán tử</a> của chúng tôi.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="Trong_mô-đun_này">Trong mô-đun này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Toán học cơ bản trong JavaScript — số và toán tử</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Mảng</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/vi/learn/javascript/first_steps/strings/index.html b/files/vi/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..df1650498d
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,290 @@
+---
+title: Handling text — strings in JavaScript
+slug: Learn/JavaScript/First_steps/Strings
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"><span style="background-color: #f6d5d9;">Tiếp theo chúng ta sẽ cùng tập trung vào</span> chuỗi (string) — Trong lập trình chuỗi là một phần nhỏ của văn bản. Trong bài viết này chúng ta sẽ cùng tìm hiểu tất cả các đặc điểm chúng mà bạn cần phải biết về chuỗi khi học JavaScript, như là tạo chuỗi, escaping quotes trong chuỗi và kết hợp chuỗi lại với nhau.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu cầu:</th>
+   <td>
+    <p>Trình độ máy tính cơ bản, có hiểu biết cơ bản về HTML, CSS và JavaScript.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>
+    <p>Làm quen với những thứ cơ bản của chuỗi trong Javascript.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sức_mạnh_của_từ_ngữ">Sức mạnh của từ ngữ</h2>
+
+<p>Từ ngữ rất quan trọng với con người - Chúng là một phần của giao tiếp. Bởi vì Web được tạo nên từ một lượng lớn văn bản là vật trung gian giúp con người có thể giao tiếp và chia sẻ thông tin, sẽ hữu ích hơn nếu ta có thể làm chủ được toàn bộ từ ngữ xuất hiện trong nó. {{glossary("HTML")}} cung cấp cấu trúc và định nghĩa cho văn bản, {{glossary("CSS")}} cho phép ta có thể tạo kiểu một cách tỷ mỉ cho nó và JavaSript chứa một lượng các tính năng giúp cho việc thao tác lên văn bản, tạo những tin nhắn trang trọng tùy ý, biểu thị đúng nhãn văn bản khi cần thiết, sắp xếp thuận ngữ theo thứ tự mong muốn và nhiều hơn nữa.</p>
+
+<p>Khá nhiều những chương trình mà chúng tôi đã giới thiệu với bạn trong khóa học này, đã có liên quan tới vài việc thao tác lên chuỗi.</p>
+
+<h2 id="Chuỗi_—_Khái_niệm_cơ_bản">Chuỗi — Khái niệm cơ bản</h2>
+
+<p>Chuỗi có vẻ tương tự với số khi ta mới lướt qua, nhưng khi bạn đào sâu hơn, bạn sẽ bắt đầu thấy một số sự khác biệt đáng lưu tâm. Cùng bắt đầu với việc nhập một vài dòng vào console để làm quen nhé. Chúng tôi đã cung cấp một console bên dưới (Bạn có thể mở <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">console này</a> ở một tab hoặc cửa sổ khác, hoặc sử dụng <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console của trình duyệt</a> ở chế độ developer (browser developer console) nếu bạn thích).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Creating_a_string">Creating a string</h3>
+
+<ol>
+ <li>To start with, enter the following lines:
+  <pre class="brush: js">var string = 'The revolution will not be televised.';
+string;</pre>
+  Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.</li>
+ <li>If you don't do this, or miss one of the quotes, you'll get an error. Try entering the following lines:
+  <pre class="brush: js example-bad">var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';</pre>
+  These lines don't work because any text without quotes around it is assumed to be a variable name, property name, reserved word, or similar. If the browser can't find it, then an error is raised (e.g. "missing ; before statement"). If the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). If your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks.</li>
+ <li>The following will work if you previously defined the variable <code>string</code> — try it now:
+  <pre class="brush: js">var badString = string;
+badString;</pre>
+  <code>badString</code> is now set to have the same value as <code>string</code>.</li>
+</ol>
+
+<h3 id="Single_quotes_vs._double_quotes">Single quotes vs. double quotes</h3>
+
+<ol>
+ <li>In JavaScript, you can choose single quotes or double quotes to wrap your strings in. Both of the following will work okay:
+  <pre class="brush: js">var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>There is very little difference between the two, and which you use is down to personal preference. You should choose one and stick to it, however; differently quoted code can be confusing, especially if you use the different quotes on the same string! The following will return an error:
+  <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>The browser will think the string has not been closed, because the other type of quote you are not using to contain your strings can appear in the string. For example, both of these are okay:
+  <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>However, you can't include the same quote mark inside the string if it's being used to contain them. The following will error, as it confuses the browser as to where the string ends:
+  <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
+  This leads us very nicely into our next subject.</li>
+</ol>
+
+<h3 id="Escaping_characters_in_a_string">Escaping characters in a string</h3>
+
+<p>To fix our previous problem code line, we need to escape the problem quote mark. Escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. In JavaScript, we do this by putting a backslash just before the character. Try this:</p>
+
+<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>This works fine. You can escape other characters in the same way, e.g. <code>\"</code>,  and there are some special codes besides. See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a> for more details.</p>
+
+<h2 id="Concatenating_strings">Concatenating strings</h2>
+
+<ol>
+ <li>Concatenate is a fancy programming word that means "join together". Joining together strings in JavaScript uses the plus (+) operator, the same one we use to add numbers together, but in this context it does something different. Let's try an example in our console.
+  <pre class="brush: js">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  The result of this is a variable called <code>joined</code>, which contains the value "Hello, how are you?".</li>
+ <li>In the last instance, we just joined two strings together, but you can do as many as you like, as long as you include a <code>+</code> between each one. Try this:
+  <pre class="brush: js">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>You can also use a mix of variables and actual strings. Try this:
+  <pre class="brush: js">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: When you enter an actual string in your code, enclosed in single or double quotes, it is called a <strong>string literal</strong>.</p>
+</div>
+
+<h3 id="Concatenation_in_context">Concatenation in context</h3>
+
+<p>Let's have a look at concatenation being used in action — here's an example from earlier in the course:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Here we're using a {{domxref("window.prompt()", "window.prompt()")}} function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case <code>name</code>. We then use an {{domxref("window.alert()", "window.alert()")}} function in line 5 to display another popup containing a string we've assembled from two string literals and the <code>name</code> variable, via concatenation.</p>
+
+<h3 id="Numbers_vs._strings">Numbers vs. strings</h3>
+
+<ol>
+ <li>So what happens when we try to add (or concatenate) a string and a number? Let's try it in our console:
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  You might expect this to throw an error,  but it works just fine. Trying to represent a string as a number doesn't really make sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings together.</li>
+ <li>You can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. Try the following (we are using the <code>typeof</code> operator to check whether the variable is a number or a string):
+  <pre class="brush: js">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>If you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs:
+  <ul>
+   <li>The {{jsxref("Number")}} object will convert anything passed to it into a number, if it can. Try the following:
+    <pre class="brush: js">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>On the other hand, every number has a method called <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> that will convert it to the equivalent string. Try this:
+    <pre class="brush: js">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  These constructs can be really useful in some situations. For example, if a user enters a number into a form text field, it will be a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through <code>Number()</code> to handle this. We did exactly this in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61">Number Guessing Game, in line 61</a>.</li>
+</ol>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's the very basics of strings covered in JavaScript. In the next article we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/javascript/first_steps/what_is_javascript/index.html b/files/vi/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..a8c837a2e2
--- /dev/null
+++ b/files/vi/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,422 @@
+---
+title: JavaScript là Gì?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Chào mừng đến khóa học JavaScript cơ bản của MDN! Trong bài đầu tiên chúng ta sẽ nhìn nhận JavaScript từ góc độ tổng quát, trả lời các câu hỏi như "JavaScript là gì?" và "nó có khả năng gì?" cũng như giúp bạn làm quen với các chức năng của JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Yêu cầu:</th>
+   <td>
+    <p>Sử dụng máy cơ bản, hiểu HTML và CSS mức độ căn bản</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>
+    <p>Làm quen với JavaScript, tìm hiểu về ứng dụng của JavaScript và cách tích hợp chúng vào một trang web.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_high-level_definition">A high-level definition</h2>
+
+<p>JavaScript là một ngôn ngữ lập trình hoặc ngôn ngữ kịch bản cho phép triển khai những chức năng phức tạp trên trang web như hiển thị các cập nhật nội dung kịp thời, tương tác với bản đồ, hoạt cảnh 2D/3D vv... - điều có sự hỗ trợ của JavaScript. Nó là lớp thứ ba của chiếc bánh tiêu chuẩn của các công nghệ web, hai trong số chúng (<a href="/en-US/docs/Learn/HTML">HTML</a> và <a href="/en-US/docs/Learn/CSS">CSS</a>) đã được chúng tôi trình bày rất chi tiết trong các phần khác của Learning Area.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} là ngôn ngữ đánh dấu được sử dụng để cấu thành nội dung và mang đến ngữ nghĩa cho trang web, ví dụ như định danh cho các đoạn văn, tiêu đề, dữ liệu dạng bảng hoặc nhúng hình ảnh, video vào trang web. </li>
+ <li>{{glossary("CSS")}} là một ngôn ngữ định dạng được áp dụng để tạo nên "vẻ ngoài" của một trang web, ví dụ thiết lập màu nền và font chữ, bố trí nội dung dựa theo mô hình cột.</li>
+ <li>{{glossary("JavaScript")}} là ngôn ngữ kịch bản cho phép tạo ra trang web động - cập nhật nội dung theo ngữ cảnh, điều khiển đa phương tiện, hoạt cảnh các hình ảnh và nhiều thứ hay ho khác. (Dĩ nhiên không phải mọi thứ, nhưng chỉ với một vài dòng code, JavaScript có thể làm được nhiều điều đáng kinh ngạc.)</li>
+</ul>
+
+<p>Ba lớp công nghệ xếp chồng lên nhau một cách thích hợp. Hãy xem xét ví dụ một đoạn văn bản đơn giản. Chúng ta có thể đánh dấu đoạn văn bảng bằng HTML.</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Sau đó thêm một vài đoạn CSS giúp tăng tính thẩm mỹ cho đoạn văn:</p>
+
+<pre class="brush: css">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Và cuối cùng, chúng ta có thể áp dụng JavaScript vào đoạn văn để tăng tính tương tác.</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Thử nhấp vào phiên bản cuối cùng của đoạn văn để thấy cách nó hoạt động (bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn: <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, hoặc chạy trực tiếp: <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>)!</p>
+
+<p>JavaScript có thể làm được nhiều hơn thế  — Cùng khám phá chi tiết hơn.</p>
+
+<h2 id="So_what_can_it_really_do">So what can it really do?</h2>
+
+<p>Bên trong ngôn ngữ JavaScript bao gồm một vài tính năng lập trình phổ biến cho phép bạn thực hiện một vài điều như:</p>
+
+<ul>
+ <li>Lưu trữ các giá trị (thông tin) trong các biến (variables). Đại loại như ở ví dụ bên trên, chúng tôi yêu cầu nhập một tên mới sau đó lưu trữ tên vừa nhập trong một biến gọi là <code>name</code>.</li>
+ <li>Thao tác trên các đoạn văn bản (còn gọi là chuỗi - strings trong lập trình). Trong ví dụ trên, chúng tôi lấy chuỗi "Player 1:" và xâu nó vào biến <code>name</code> để tạo đoạn văn bản hoàn chỉnh là ''Player 1: Chris".</li>
+ <li>Chạy code phản hồi lại những sự kiện đang xãy ra trên trang web. Chúng tôi đã dùng một sự kiện {{Event("click")}} trong ví dụ bên trên để phát hiện sự kiện nhấp chuột vào nút nhấn và chạy code tương ứng để cập nhật đoạn văn bản.</li>
+ <li>Và nhiều hơn thế nữa!</li>
+</ul>
+
+<p>Tuy nhiên thứ mà thậm chí còn thú vị hơn nữa là các lớp tính năng (functionality) được xây dựng trên lõi của ngôn ngữ JavaScript. Cái được gọi là <strong>Giao Diện Lập Trình Ứng Dụng</strong> (Application Programming Interfaces-APIs) trao thêm cho bạn siêu sức mạnh để sử dụng trong code JavaScript.</p>
+
+<p>APIs là các bộ code được dựng sẵn cho phép một nhà pháp triển (developer) triển khai các chương trình mà nếu thiếu nó sẽ khó hoặc bất khả thi để triển khai. Chúng hoạt động trong lập trình tương tự như những bộ nội thất làm sẵn cho việc xây nhà — sẽ dễ dàng hơn nhiều nếu lắp ráp một kệ sách với gỗ đã gia công theo thiết kế và ốc vít có sẵn hơn là tự tìm gỗ nguyên liệu, tự gia công theo kích cỡ đã thiết kết, tìm ốc vít đúng cỡ rồi lắp ráp thành một kệ sách.</p>
+
+<p>APIs thường được chia thành hai loại:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser APIs (APIs Trình Duyệt)</strong> được tích hợp sẵn trong trình duyệt web, có khả năng phơi bày dữ liệu từ môi trường máy tính xung quanh hoặc làm những điều phức tạp hữu ích. Ví dụ:</p>
+
+<ul>
+ <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} cho phép bạn điều khiển HTML và CSS, tạo mới, loại bỏ và thay đổi HTML, áp dụng các định dạng (style) mới vào trang của bạn một cách linh hoạt vv... Mỗi khi bạn nhìn thấy một cửa sổ bật lên (popup window) trên một trang hoặc một vài nội dung mới được hiển thị (như chúng ta được thấy trong ví dụ đơn giản ở trên) chẳng hạn, đó là các hoạt động điển hình của DOM.</li>
+ <li>{{domxref("Geolocation","Geolocation API")}} tiếp nhận thông tin địa lí. Đây là cách <a href="https://www.google.com/maps">Google Maps</a> tìm vị trí của bạn và định vị nó trên bản đồ.</li>
+ <li>{{domxref("Canvas_API","Canvas")}} và {{domxref("WebGL_API","WebGL")}} APIs cho phép bạn tạo hoạt cảnh đồ họa 2D và 3D. Các lập trình viên đang sáng tạo những thứ hay ho nhờ sử dụng các công nghệ web này — xem <a href="https://www.chromeexperiments.com">Chrome Experiments</a> và <a href="http://webglsamples.org/">webglsamples</a> để biết thêm.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> như {{domxref("HTMLMediaElement")}} và {{domxref("WebRTC API", "WebRTC")}} cho phép bạn làm những điều thứ thật sự thú vị với đa phương tiện (multimedia) như chạy âm thanh (audio) và video ngay trong trang web hoặc thu video từ webcam và hiển thị nó trên máy tính của người khác  (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p>
+</div>
+
+<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p>
+
+<ul>
+ <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li>
+ <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p>
+</div>
+
+<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p>
+
+<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2>
+
+<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p>
+
+<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p>
+
+<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p>
+
+<h3 id="Browser_security">Browser security</h3>
+
+<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p>
+</div>
+
+<h3 id="JavaScript_running_order">JavaScript running order</h3>
+
+<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p>
+
+<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p>
+</div>
+
+<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3>
+
+<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.</p>
+
+<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer.</p>
+
+<p>JavaScript is a lightweight interpreted programming language. Both approaches have different advantages, which we won't discuss at this point.</p>
+
+<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3>
+
+<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about <strong>client-side JavaScript</strong>.</p>
+
+<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p>
+
+<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3>
+
+<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p>
+
+<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p>
+
+<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2>
+
+<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p>
+
+<h3 id="Internal_JavaScript">Internal JavaScript</h3>
+
+<ol>
+ <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li>
+ <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
+ <li>Next, go to your text editor and add the following in your head — just before your closing <code>&lt;/head&gt;</code> tag:
+  <pre class="brush: html">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
+  <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code>&lt;/head&gt;</code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="External_JavaScript">External JavaScript</h3>
+
+<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
+
+<ol>
+ <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
+ <li>Replace your current {{htmlelement("script")}} element with the following:
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Inside <code>script.js</code>, add the following script:
+  <pre class="brush: js">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+</div>
+
+<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3>
+
+<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>You can try this version of our demo below.</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p>
+
+<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p>
+
+<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p>
+
+<pre class="brush: js">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p>
+</div>
+
+<h3 id="Script_loading_strategies">Script loading strategies</h3>
+
+<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p>
+
+<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p>
+
+<p>In the internal example, you can see this structure around the code:</p>
+
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</pre>
+
+<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p>
+
+<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code>&lt;script&gt;</code> tag element has been reached.</p>
+
+<pre class="brush: js">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+
+<p>In this case both the script and the HTML will load simultaneously and the code will work.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p>
+</div>
+
+<p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code>&lt;/body&gt;</code> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.</p>
+
+<h4 id="async_and_defer">async and defer</h4>
+
+<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p>
+
+<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p>
+
+<p>For example, if you have the following script elements:</p>
+
+<pre class="brush: html">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p>
+
+<p><code>defer</code> will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p>
+
+<pre class="brush: html">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p>
+
+<p>To summarize:</p>
+
+<ul>
+ <li>If your scripts don't need to wait for parsing and can run independently without dependencies, then use <code>async</code>.</li>
+ <li>If your scripts need to wait for parsing and depend on other scripts load them using <code>defer</code> and put their corresponding <code>&lt;script&gt;</code> elements in the order you want the browser to execute them.</li>
+</ul>
+
+<h2 id="Comments">Comments</h2>
+
+<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p>
+
+<ul>
+ <li>A single line comment is written after a double forward slash (//), e.g.
+  <pre class="brush: js">// I am a comment</pre>
+ </li>
+ <li>A multi-line comment is written between the strings /* and */, e.g.
+  <pre class="brush: js">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
+
+<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In general more comments is usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p>
+
+<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/vi/learn/javascript/index.html b/files/vi/learn/javascript/index.html
new file mode 100644
index 0000000000..c1ccb8de4b
--- /dev/null
+++ b/files/vi/learn/javascript/index.html
@@ -0,0 +1,82 @@
+---
+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")}} là ngôn ngữ lập trình cho phép bạn triển khai những thứ phức tạp trên trang web - mỗi khi trang web hoạt động nhiều hơn là chỉ hiển thị thông tin tĩnh để bạn xem - hiển thị cập nhật nội dung kịp thời, bản đồ tương tác, hoạt ảnh 2D / 3D đồ họa hoặc cuộn các hộp video, v.v. - bạn có thể đặt cược rằng JavaScript dùng để làm những việc đó.</p>
+
+<p class="summary">BẠN ĐANG MUỐN TRỞ THÀNH MỘT FRONT-END DEVELOPER ?</p>
+
+<p class="summary">Chúng tôi đã tổng hợp một khóa học bao gồm tất cả thông tin cần thiết mà bạn cần để hướng tới mục tiêu của mình.</p>
+
+<p class="syntaxbox"><a href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Get started</a></p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>JavaScript được cho là khó học hơn các công nghệ liên quan như <a href="/en-US/docs/Learn/HTML">HTML</a> và <a href="/en-US/docs/Learn/CSS">CSS</a>. Trước khi cố gắng học JavaScript, bạn nên làm quen trước với ít nhất hai công nghệ này trước tiên, và có thể cả các công nghệ khác nữa. Bắt đầu bằng cách học tập qua các đường dẫn sau :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">B</a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">ắt đầu với trang Web</a>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Giới thiệu về HTML </a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Giới thiệu về CSS</a></li>
+</ul>
+
+<p>Nếu bạn có kinh nghiệm lập trình với các ngôn ngữ khác thì nó sẽ giúp ích rất nhiều.</p>
+
+<p>Sau khi làm quen với các kiến thức cơ bản về JavaScript, bạn đã sẵn sàng để tìm hiểu về các chủ đề nâng cao hơn, ví dự:</p>
+
+<ul>
+ <li>JavaScript in depth, được dạy ở <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>Chủ đề này đã được chia nhỏ thành các phần, để tiện cho việc học và tìm hiểu chúng.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt>
+ <dd>Trong phần đầu tiên của bài hướng dẫn JavaScript, đầu tiên chúng ta trả lời một số câu hỏi cơ bản như "JavaScript là gì ?", "Nó trong như thế nào?", và "Nó có thể làm gì ?", trước khi chuyển qua phần hướng dẫn bạn trải nghiệm thực hành viết JavaScript. Sau đó,chúng ta sẽ thảo luận chi tiết về một số chức năng chính của JavaScript, như : biến, chuỗi, các số và mảng.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt>
+ <dd>Trong phần này, chúng ta tiếp tục đề cập đến tất cả những tính năng cơ bản của JavaScript, sau đó hãy chuyển sự chú ý sang các loại khối lệnh thường gặp như : câu lệnh điều kiện, vòng lặp, hàm và sự kiện . Có lẽ bạn đã nhìn thấy những thứ trên trong khóa học này rồi nhưng đó mới chỉ là thoáng qua thôi — ở đây chúng ta sẽ thảo luận một cách rõ ràng.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt>
+ <dd>Trong JavaScript, mọi thứ đều được coi là objects, từ các tính năng cốt lõi của JavaScript như chuỗi và mảng cho đến các APIs của trình duyệt được xây dựng trên JavaScript. Bạn thậm chí có thể tự tạo ra các objects của riêng mình để đóng gói các hàm và biến liên quan thành các packages hiệu quả. Bản chất hướng đối tượng của JavaScript là thứ vô cùng quan trọng bạn phải hiểu nếu như bạn muốn tiến xa hơn với ngôn ngữ và viết code hiệu quả hơn, do đó chúng tôi đã chia nhỏ khóa học thành từng phần nhỏ để giúp bạn học hiệu quả hơn. Ở đây chúng tôi dạy chi tiết về lý thuyết các object và các cú pháp, hãy nhìn xem làm thế nào để tạo được một object của bạn, và hãy giải thích dữ liệu JSON là gì và làm thế nào để làm việc với nó.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
+ <dd>Khi bạn viết JavaScript ở phía máy khách cho một website hay một ứng dụng, bạn không thể làm tốt nếu không sử dụng  APIs — giao diện dùng để thao tác các khía cạnh khác nhau của trình duyệt và hệ điều hành mà trang web đang chạy, hoặc thậm chí là dữ liệu từ các web sites hoặc dịch vụ khác. Trong phần này chúng ta sẽ cùng tìm hiểu APIs là gì, và làm thế nào để sử dụng một số APIs phổ biến nhất mà chắc chắn bạn sẽ thường sử dụng chúng trong công việc phát triển phần mềm của mình. </dd>
+</dl>
+
+<h2 id="Giải_quyết_một_số_vấn_đề_thường_gặp_của_JavaScript">Giải quyết một số vấn đề thường gặp của JavaScript</h2>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Howto">S</a>ử dụng JavaScript để giải quyết một số vấn đề thường gặp cung cấp nhưng đường dẫn đến các phần của nội dung để để giải thích làm thế nào để sử dụng JavaScript để giải quyết các vấn đề thường gặp khi tạo một trang web.</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt>
+ <dd>Cổng vào cho tài liệu core JavaScript trên MDN - đây là nơi bạn sẽ tìm thấy các tài liệu tham khảo mở rộng về tất cả các khía cạnh của ngôn ngữ JavaScript và một số hướng dẫn nâng cao dành cho những người dùng JavaScript có kinh nghiệm.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>Một nguồn tài nguyên tuyệt vời cho các nhà phát triển web đầy tham vọng - Học JavaScript trong môi trường tương tác, với các bài học ngắn và bài kiểm tra có tính tương tác, được định hướng bởi các bài đánh giá tự động. 40 bài học đầu tiên là miễn phí và bạn có thể mua toàn bộ khoá học với một khoản phí nhỏ.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">JavaScript Fundamentals on EXLskills</a></dt>
+ <dd>Học JavaScript miễn phí với khóa học mã nguồn mở EXLskills giới thiệu tất cả những gì bạn cần để bắt đầu xây dựng ứng dụng bằng JS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
+ <dd>Một loạt các video hướng dẫn tuyệt vời để dạy bạn những phép toán cần biết để trở thành một lập trình viên hiệu quả, bởi <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/vi/learn/javascript/objects/index.html b/files/vi/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..adaad99507
--- /dev/null
+++ b/files/vi/learn/javascript/objects/index.html
@@ -0,0 +1,42 @@
+---
+title: Introducing JavaScript objects
+slug: Learn/JavaScript/Objects
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<div>Trong JavaScript, hầu hết mọi thứ đều là các đối tượng, từ các tính nắng cốt lõi của JavaScript như chuỗi và mảng đến các {{Glossary("API", "APIs")}} của trình duyệt được xây dựng dựa trên JavaScript. Thậm chí bạn có thể tự tạo các đối tượng để bao đóng các hàm và các biến thành các gói và hoạt động như một kho chứa dữ liệu. Bản chất của JavaScript là dựa trên đối tượng, đây là hiểu biết quan trọng nếu bạn muốn tìm hiểu sâu hơn về ngôn ngữ này. Do đó, chúng tôi cung cấp mô đun này để giúp bạn. Chúng tôi trình bày chi tiết về nguyên lý và cú pháp đối tượng, sau đó là cách để bạn tự tạo các đối tượng cho riêng mình.</div>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô đun này, bạn cần có hiểu biết về {{Glossary("HTML")}} và {{Glossary("CSS")}}. Bạn có thể tìm hiểu qua <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a> và <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> trước khi bắt đầu học JavaScript.</p>
+
+<p>Bạn cũng cần có hiểu biết cơ bản về JavaScript. Trước khi bắt đầu nghiên cứu mô đun này, bạn nên tìm hiểu <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> và <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>.</p>
+
+<div class="note">
+<p><strong>Chú ý</strong>: Nếu bạn đang làm việc trên các thiết bị (máy tính bàn/máy tính bản/các thiết bị khác) mà không thể tạo các tệp riêng trên đó thì bạn có thể thử gõ mã trên <a href="http://jsbin.com/">JSBin</a> hoặc <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Các_hướng_dẫn">Các hướng dẫn</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Cơ bản về đối tượng</a></dt>
+ <dd>In the first article looking at JavaScript objects, we'll look at fundamental JavaScript object syntax, and revisit some JavaScript features we've already looked at earlier on in the course, reiterating the fact that many of the features you've already dealt with are in fact objects.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Hướng đối tượng trong JavaScript cho người mới học</a></dt>
+ <dd>With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) — this article presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Nguyên mẫu của đối tượng</a></dt>
+ <dd>Prototypes are the mechanism by which JavaScript objects inherit features from one another, and they work differently to inheritance mechanisms in classical object-oriented programming languages. In this article we explore that difference, explain how prototype chains work, and look at how the prototype property can be used to add methods to existing constructors.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Kế thừa trong JavaScript</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Làm việc với định dạng dữ liệu JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax, which is commonly used for representing and transmitting data on web sites (i.e. sending some data from the server to the client, so it can be displayed on a web page). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing the JSON so you can access data items within it and writing your own JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Luyện tập xây dựng đối tượng</a></dt>
+ <dd>In previous articles we looked at all the essential JavaScript object theory and syntax details, giving you a solid base to start from. In this article we dive into a practical exercise, giving you some more practice in building custom JavaScript objects, which produce something fun and colorful — some colored bouncing balls.</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/vi/learn/javascript/objects/inheritance/index.html b/files/vi/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..56fb732295
--- /dev/null
+++ b/files/vi/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,440 @@
+---
+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>Lúc này chúng ta đã timnf hiểu hầu hết về OOJS, bài viết này sẽ nói về cách để tạo ra một đối tượng "child" classes (constructors), thứ kế thừa các đặc trưng từ "parent" classes. Thêm nữa, chúng tôi sẽ chỉ cho bạn khi nào và ở đâu bạn có thể sử dụng OOJS, và cách mà các classes được xử lý trong cú pháp ECMAScript.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện:</th>
+   <td>Kiến thức cơ bản về máy tính, hiểu biết về HTML và CSS, đã quen với Javsacript căn bản (xem <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> và <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) và OOJS căn bản (xem <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Hiểu về cách thực hiện việc kế thừa trong Javascript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Prototypal_inheritance">Prototypal inheritance</h2>
+
+<p>Ở nhứng bài trước chúng ta đã thực hiện việc kế thừa — chúng ta đã thấy cách mà prototype chains hoạt động, và cách mà các thành phần được kế thừa bằng cách đi ngược lên chuỗi prototype. Nhưng hầu hết chúng chỉ liên quan đến kế thừa từ function. Làm sao để tạo ra một object trong Javascript kế thừa từ một object khác?</p>
+
+<p>Hãy cùng tìm hiểu với một ví dụ cụ thể:</p>
+
+<h2 id="Getting_started">Getting started</h2>
+
+<p>Đầu tiên, hãy tạo một bản copy của file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (xem nó hoạt động: <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a>). Bạn sẽ thấy có cùng một constructor <code>Person()</code> mà chúng ta sử dụng trong các bài trước, và một chút thay đổi — chúng tôi chỉ định nghĩa các properties trong constructor:</p>
+
+<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p>Các methods đều được định nghĩa trong prototype của constructor. Ví dụ:</p>
+
+<pre class="brush: js notranslate">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Trong source code, bạn sẽ thấy các methods <code>bio()</code> và <code>farewell()</code> được định nghĩa. Lát nữa bạn sẽ thấy cách chúng được kế thừa bởi các constructors khác.</p>
+</div>
+
+<p>Chúng ta muốn tạo một class <code>Teacher</code>, như đã mô tả trong định nghĩa ban đầu về object-oriented, là class kế thừa mọi thành phần từ <code>Person</code>, và có cả:</p>
+
+<ol>
+ <li>Một property mới, <code>subject</code> — nó sẽ chứa tên môn học mà teacher dạy.</li>
+ <li>Một method <code>greeting()</code> đã được chỉnh sửa sao cho trang trọng hơn so với method <code>greeting()</code> ban đầu — để phù hợp hơn khi một giáo viên nói chuyện với một học sinh ở trường.</li>
+</ol>
+
+<h2 id="Định_nghĩa_hàm_Teacher_constructor">Định nghĩa hàm Teacher() constructor</h2>
+
+<p>Đầu tiên chúng ta cần tạo một <code>Teacher()</code> constructor — hãy thêm đoạn code bên dưới vào source code:</p>
+
+<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p>Nhìn có vẻ giống với Person constructor, nhưng có một vài điều khác lạ mà chúng ta chưa từng thấy trước đó — hàm <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Hàm này cho phép bạn gọi một function được định nghĩa ở một nơi khác. Tham số đầu tiên có giá trị <code>this</code> mà bạn muốn sử dụng khi đang thực thi function, và các tham số khác sẽ được chuyển cho function khi nó được gọi.</p>
+
+<p>Chúng ta muốn <code>Teacher()</code> constructor có cùng tham số với <code>Person()</code> constructor mà nó kế thừa, nên chúng ta chỉ định chúng như các tham số khi gọi hàm <code>call()</code>.</p>
+
+<p>Dòng cuối cùng trong constructor chỉ đơn giản định nghĩa property <code>subject</code>.mà chỉ teachers có, và people không có</p>
+
+<p>Nhưng chúng ta cũng có thể thực hiện điều này như sau:</p>
+
+<pre class="brush: js notranslate">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>Nhưng đó là định nghĩa một properties mới, không kế thừa từ <code>Person()</code>, không giống như những gì chúng ta định làm. Nó cũng khiến code dài dòng hơn.</p>
+
+<h3 id="Kế_thừa_từ_một_constructor_không_có_tham_số">Kế thừa từ một constructor không có tham số</h3>
+
+<p>Lưu ý rằng nếu constructor mà bạn đang kế thừa không nhận các giá trị properties của nó từ tham số, bạn không cần thêm các tham số vào <code>call()</code>. Vậy, nếu bạn viết một vài dòng code như sau:</p>
+
+<pre class="brush: js notranslate">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>Bạn có thể kế thừa các properties <code>width</code> và <code>height</code> (cũng như các bước khác đã được mô tả bên dưới):</p>
+
+<pre class="brush: js notranslate">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>Chú ý rằng chúng ta chỉ chỉ định <code>this</code> bên trong <code>call()</code> — Không có tham số nào là bắt buộc vì chúng ta không kế thừa bất cứ properties nào từ cha nó thông qua tham số.</p>
+
+<h2 id="Cấu_hình_prototype_của_Teacher_và_về_constructor">Cấu hình prototype của Teacher() và về constructor</h2>
+
+<p>Mọi thứ đều ổn, nhưng có một vấn đề. Chúng ta vừa định nghĩa một constructor mới, và nó có <code>prototype</code> property, được mặc định là tham chiếu đến hàm constructor của nó. Nó không chứa các method trong property <code>prototype</code> của constructor của Person. Để thấy điều này, nhập <code>Object.getOwnPropertyNames(Teacher.prototype)</code> vào màn hình Javascript console. Sau đó, thay thế <code>Teacher</code> thành <code>Person</code>. Constructor cũng không kế thừa các methods đó. Đề thấy điều này, hãy so sánh kết quả của <code>Person.prototype.greeting</code> và <code>Teacher.prototype.greeting</code>. Chúng ta cần các methods của <code>Teacher()</code> để kế thừa các methods được định nghĩa trong prototype của <code>Person()</code>. Làm sao để thực hiện việc này?</p>
+
+<ol>
+ <li>Thêm dòng code sau vào dưới phần đã thêm vào trước đó:
+  <pre class="brush: js notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate"> 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 notranslate">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 notranslate">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 notranslate">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 notranslate">// 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="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">Test your skills: Object-oriented JavaScript</a>.</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/vi/learn/learning_and_getting_help/index.html b/files/vi/learn/learning_and_getting_help/index.html
new file mode 100644
index 0000000000..3c5a5a186e
--- /dev/null
+++ b/files/vi/learn/learning_and_getting_help/index.html
@@ -0,0 +1,322 @@
+---
+title: Learning and getting help
+slug: Learn/Learning_and_getting_help
+tags:
+  - Bắt đầu
+  - Học tập
+  - Phát triển Web
+  - Tìm kiếm trợ giúp
+translation_of: Learn/Learning_and_getting_help
+---
+<h5 id="learnsidebar">{{learnsidebar}}</h5>
+
+<p>Thật tuyệt khi bạn dành thời gian để học thêm một loạt những kỹ năng mới, nhưng có những phương pháp hay để sử dụng sẽ giúp việc học của bạn hiệu quả hơn. Cũng sẽ có những lúc bạn gặp phải khó khăn và cảm thấy thất vọng - ngay cả những nhà phát triển web chuyên nghiệp cũng thường xuyên cảm thấy điều này - và phải trả giá để biết được những cách hiệu quả nhất để thử và nhận trợ giúp để bạn có thể tiến bộ trong công việc của mình. Bài viết này cung cấp một số gợi ý và mẹo trong cả hai lĩnh vực này sẽ giúp bạn hiểu thêm về phát triển web, cũng như đọc thêm để bạn có  thể tìm hiểu thêm thông tin về tùng chủ đề phụ nếu bạn muốn ...</p>
+
+<h2 id="Học_tập_hiệu_quả">Học tập hiệu quả</h2>
+
+<p>Cùng nhau đi thẳng tới và nghĩ về cách học hiệu quả.</p>
+
+<h3 id="Các_phương_pháp_học_khác_nhau">Các phương pháp học khác nhau</h3>
+
+<p>Một điều thú vị để cân nhắc đó là có 2 cách chính mà bộ não của bạn học hỏi mọi thứ — học tập trung và học lan tỏa:</p>
+
+<ul>
+ <li>Học tập trung là cách học truyền thống với các môn học. Bạn tập trung sâu vào một chủ đề cấp thấp và giải quyết các vấn đề cụ thể mà nó mang lại. Bạn tập trung vào một phạm vi hẹp.</li>
+ <li>Học tập lan tỏa liên quan nhiều hơn đến tư duy cao cấp bao quanh một phạm vi rộng lớn hơn. Bạn để tâm trí mình lang thang rộng rãi hơn, và dường như tạo ra những kết nối ngẫu nhiên giữa những thứ khác nhau. Đât là kiểu suy nghĩ bạn thường làm khi bạn đang tắm hay trong giờ giải lao.</li>
+</ul>
+
+<p>Từ những nghiên cứu mà nhiều nhà thần kinh học đã thực hiện về hoạt động của não, chúng tôi đã phát hiện ra rằng bạn không thể thực sự tham gia vào cùng lúc cả hai cách học - hoặc suy nghĩ.</p>
+
+<p>Suy nghĩ tập trung rất tốt cho việc tập trung cao độ vào các chủ đề cụ thể, đi sâu vào giải quyết vấn đề, và nâng cao khả năng thông thạo các kỹ thuật cần thiết -  củng cố các đường dẫn thần kinh trong não của bạn nơi mà thông tin được lưu trữ. Tuy nhiên, việc hiểu "bức tranh toàn cảnh" và mở khóa các đường đẫn thần kinh mới không phải là rất tốt khi bạn đang cố gắng tìm hiểu một vấn đề mới hay giải quyết một vấn đề mới mà bạn chưa gặp phải trước đây. </p>
+
+<p>Để làm được điều đó, bạn cần có tư duy lan tỏa. Điều này trái ngược với sự tập trung - bạn để cho bộ não của mình lang thang quanh một khung cảnh rộng lớn, tìm kiếm những kết nối mà trước đây bạn chưa có, chạm vào những thứ mới (hoặc những sự kết hợp mới) mà bạn có thể tập trung vào nó sau này, để  củng cố chúng và bắt đầu thực sự hiểu ý nghĩa của chúng.</p>
+
+<p>Đây là lý do tại sao bạn nên đọc một số tài liệu giới thiệu trước để hiểu rõ hơn về một lĩnh vực trước khi đi sâu vào các chi tiết cụ thể.</p>
+
+<p>Đó cũng là lý do tại sao đôi khi bạn có thể gặp khó khăn ở một vấn đề, nhưng sau đó tìm ra câu trả lời khi bạn giải lao (hoặc đi dạo). Bạn có thể:</p>
+
+<ol>
+ <li>Biết cách khắc phục sự cố A bằng công cụ A.</li>
+ <li>Biết cách khắc phục sự cố B bằng công cụ B.</li>
+ <li>Không biết cách khắc phục sự cố C.</li>
+</ol>
+
+<p>Giả sử bạn tập trung vào vấn đề C trong một thời gian và cảm thấy thất vọng bởi vì bạn không nghĩ ra cách giải quyết nó. Nhưng rồi sau khi đi dạo để tận hưởng không khí trong lành, bạn có thấy rằng khi tâm trí bạn đang lang thang, bạn đột nhiên tạo ra một mối liên hệ giữa công cụ A và công cụ B, và nhận ra rằng bạn có  thể sử dụng chúng cùng nhau để khắc phục vấn đề C! Không phải lúc nào cũng đơn giản như vậy, nhưng cũng đáng ngạc nhiên là điều này xảy ra nhiều lần. Điều này cũng nhấn mạnh tầm quan trọng của việc nghỉ giải lao khi bạn học tập và nghiên cứu trước máy tính.</p>
+
+<h3 id="Các_tài_liệu_học_tập_khác_nhau">Các tài liệu học tập khác nhau</h3>
+
+<p>Bạn cũng nên xem xét các loại tài liệu học tập khác nhau hiện có, để xem bạn học tập với loại nào hiệu quả nhất.</p>
+
+<h4 id="Các_bài_báo_dạng_văn_bản">Các bài báo dạng văn bản</h4>
+
+<p>Bạn sẽ tìm thấy nhiều bài báo trên web dạy bạn về thiết kế web. Tương tự như khóa học này. Một vài bài báo sẽ hướng dẫn, dạy bạn  một kỹ thuật nhất định hoặc một khái niệm quan trọng ( chẳng hạn như "làm thế nào để tạo ra một trình phát video" hoặc "tìm hiểu mô hình hộp CSS" ), và một số bài viết sẽ là tài liệu tham khảo, cho phép bạn tìm kiếm các chi tiết mà bạn có thể đã quên ( chẳng hạn như "cú pháp của thuộc tính nền CSS là gì?").</p>
+
+<p>MDN Web Docs thực sự tốt cho cả hai loại - những phần hiện tại bạn đang theo dõi rất tốt cho việc học các kỹ thuật và khái niệm, chúng tôi cũng có một số phần tham khảo khổng lồ cho phép bạn tìm kiếm bất kỳ cú pháp nào mà bạn không thể nhớ.</p>
+
+<p>Ngoài ra còn có một số tài nguyên tuyệt vời trên web, một số trong đó được chúng tôi đề cập đến ở dưới.</p>
+
+<div class="blockIndicator note">
+<p><strong>Lưu ý</strong>: Những dòng trên mang đến cho bạn một thực tế quan trọng - bạn không cần thiết phải ghi nhớ mọi thứ! Các nhà phát triển web chuyên nghiệp sử dụng các công cụ như MDN Web Docs để tìm kiếm những thứ họ đã quên mọi lúc. Bạn sẽ khám phá ra rằng  học phát triển web thiên về giải quyết vấn đề và học các mẫu hơn là học rất nhiều về cú pháp.</p>
+</div>
+
+<h4 id="Videos">Videos</h4>
+
+<p>Ngoài ra cũng có một số trang web có nội dung học qua video. Youtube là một trang điển hình, với những kênh như <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a>, và <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> cung cấp rất nhiều video hữu ích. Nhiều người thích các bài viết để có tài liệu tham khảo và học sâu hơn, và các video để giải thích nhanh về các khái niệm và tính năng mới, nhưng bạn thực sự muốn học điều gì  tùy  thuộc vào bạn. Không có câu trả lời đúng sai ở đây.</p>
+
+<h4 id="Sân_chơi_code_tương_tác">Sân chơi code tương tác</h4>
+
+<p>Bạn có thể là loại người thích sự hướng dẫn tối thiểu và muốn nhảy thẳng vào và bắt đầu chiến với code. Đây cũng là một cách tiếp cận hợp lý, và một số trang web học tập có xu hướng ưa chuộng nó. <a href="https://www.codecademy.com/">Codecademy</a> là một ví dụ cho một trang web học tập nơi mà các hướng dẫn chủ yếu bao gồm các trình soạn thỏa tương tác, nơi mà bạn phải trực tiếp viết code và xem liệu có đạt được kết quả như mong muốn hay không.</p>
+
+<p>Nhiều trang tham chiếu tài liệu  MDN Web docs cũng cung cấp các ví dụ tương tác, nơi bạn có thể thay đổi code và xem kết quả trực tiếp thay đổi như thế nào.  Và cũng không có gì sai khi tạo ra các ví dụ code của riêng bạn trên máy tính, hoặc trên các trình soạn thảo code trực tuyến như <a href="https://jsbin.com/?html,css,js,output">JSBin</a>, <a href="https://codepen.io/">Codepen</a>, hay <a href="https://glitch.com/">Glitch</a>. Trên thực tế, bạn sẽ được yêu cầu làm như vậy như một phần của khóa học này khi bạn đang học!</p>
+
+<div class="blockIndicator note">
+<p><strong>Lưu ý</strong>: Các trình soạn thảo code trực tuyến cũng thực sự hữu dụng để chia sẻ code của bạn đã viết, ví dụ, nếu bạn cùng học với một ai khác ở xa, hoặc gửi  chugns cho một ai đó đê xin được giúp đỡ. Bạn có thể chia sẻ địa chỉ web của ví dụ đó cho họ xem.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Lưu ý</strong>: Bạn có thể ưa thích phương pháp học này hơn phương pháp khác, nhưng trên thực tế, một phương pháp kết hợp có thể là điều bạn sẽ gặp phải. Và có thể bạn sẽ nghĩ ra các phương pháp khác ngoài ba phương pháp ngoài ba phương pháp mà chúng tôi đã trình bày ở trên.</p>
+</div>
+
+<h3 id="Lập_kế_hoạch">Lập kế hoạch</h3>
+
+<p>Bạn nên lập một kế hoạch để giúp bạn đạt được những gì bạn muốn đạt được thông qua quá trình học tập của mình.</p>
+
+<h4 id="Tuyên_bố_mục_tiêu">Tuyên bố mục tiêu</h4>
+
+<p>Nghe có vẻ ngu ngốc, nhưng tại sao không bắt đầu với một câu nói thể hiện bạn muốn đạt được cái gì? Những điều sau có các phạm vi khác nhau, nhưng chúng đều thực tế và có thể đạt được:</p>
+
+<ul>
+ <li>Tôi muốn trở thành một nhà phát triển web chuyên nghiệp trong vòng 2 năm.</li>
+ <li>Tôi muốn học đủ để xây dựng một trang web cho câu lạc bộ tennnis địa phương.</li>
+ <li>Tôi muốn học HTML và CSS để có thể mở rộng vai trò công việc của mình để đảm nhận việc cập nhật nội dung trên trang web của công ty chúng tôi.</li>
+</ul>
+
+<p>Những điều sau thì không hợp lý lắm:</p>
+
+<ul>
+ <li>Tôi muốn từ một người hoàn toàn mới bắt đầu trở thành một nhà phát triển web trong 3 tháng.</li>
+ <li>Tôi muốn thành lập công ty riêng của mình và xây dựng một mạng xã hội sẽ vượt qua Facebook trong vòng 2 năm.</li>
+</ul>
+
+<h4 id="Bạn_cần_gì_để_đạt_được_điều_đó">Bạn cần gì để đạt được điều đó?</h4>
+
+<p>Một khi bạn đã vạch ta được mục tiêu của mình, bạn nên nghiên cứu nhứng gì bạn cần để đạt được mục tiêu. Ví dụ:</p>
+
+<p>Vật liệu tôi cần:</p>
+
+<ul>
+ <li>Một máy tính</li>
+ <li>Đường truyền internet</li>
+ <li>Giấy và bút</li>
+</ul>
+
+<p>Kiến thức tôi cần:</p>
+
+<ul>
+ <li>Cách sử dụng HTML, CSS, JavaScript, các công cụ liên quan và các bài tập tốt nhất để xây dựng các trang web (chúng tôi chắc chắn có thể giúp bạn những điều này)</li>
+ <li>Cách lấy tên miền, lưu trữ và sử dụng chúng để đưa một trang web hoặc ứng dụng lên mạng internet.</li>
+ <li>Cách điều hành một doanh nghiệp nhỏ.</li>
+ <li>Cách để quảng cáo doanh nghiệp và thu hút khách hàng.</li>
+</ul>
+
+<h4 id="Tôi_cần_bỏ_ra_bao_nhiêu_thời_gian_và_tiền_bạc">Tôi cần bỏ ra bao nhiêu thời gian và tiền bạc?</h4>
+
+<p>Ước tính thời gian và chi phí để có được những thứ bạn cần. Nếu bạn cần phải làm việc để kiếm tiền mua các vật liệu cần thiết, thì thời gian làm việc đó cần phải được tính vào. Khi đã ước tính được thời gian, bạn có thể bắt đầu xây dựng kế hoạch cho cuộc đời mình.</p>
+
+<h4 id="Tôi_cần_làm_bao_nhiêu_tiếng_mỗi_tuần">Tôi cần làm bao nhiêu tiếng mỗi tuần?</h4>
+
+<p>Một khi bạn đã biết bạn cần làm gì, và thời gian cần phải tiêu tốn là bao nhiêu, bạn có thể bắt đầu lập một kế hoạch để thực hiện theo, để đạt được mục tiêu của mình. Nó có thể đơn giản như:</p>
+
+<p>"Tôi cần phải mất 500 giờ để học những thứ tôi cần biết, và tôi có 1 năm để thực hiện, vì vậy nếu tôi giả sử kỳ nghỉ là 2 tuần, tôi sẽ cần làm việc này 10 giờ mỗi tuần. Tôi rảnh vào các buổi tối và cuối tuần, nên tôi sẽ lên kế hoạch cho thời gian của mình xung quanh các thứ đó. "</p>
+
+<p>Bạn cần tiêu tốn bao nhiêu thời gian cho khóa học này tùy thuộc vào bạn đang ở trong hoàn cảnh nào. Nếu bạn còn là học sinh, bạn sẽ có nhiều thời gian rảnh hơn khi bạn đi làm hoặc có con cái cần chu cấp. Bạn vẫn có thể đạt được các mục tiêu, nhưng bạn cần phải thực tế về việc bạn đạt được chúng nhanh như thế nào.</p>
+
+<p>Nếu bạn đang thực hiện một khóa học về phát triển web tại đại học hay cao đẳng, thì hầu hết kế hoạch này bạn đã thực hiện xong - bạn thật may mắn!</p>
+
+<p>Khi bạn đã lên lịch trình hàng tuần, thì bạn nên ghi lại những gì bạn quản lý để làm mỗi tuần trong một bảng tính đơn giản hoặc thậm chí trong một cuốn sổ!</p>
+
+<p>Ngoài ra, có thể là một ý tưởng hay nếu bạn thực hiện một số mục tiêu phụ để cho phép bạn theo dõi vị trí của mình dễ dàng hơn:</p>
+
+<ul>
+ <li>HTML và CSS cơ bản học vào mùa hè.</li>
+ <li>JavaScript cơ bản học trong tháng 12.</li>
+ <li>Dự án trang web ví dụ xây dựng vào tháng tư tới.</li>
+ <li>v.v.</li>
+</ul>
+
+<p>Liên tục suy nghĩ về mức độ tiến bộ của bạn đạt được và điều chỉnh kế hoạch của bạn nếu cần.</p>
+
+<h3 id="Duy_trì_động_lực">Duy trì động lực</h3>
+
+<p>Rất khó để duy trì động lực, đặc biệt nếu bạn đang cố gắng để học một kỹ năng phức tạp như lập trình hay phát triển web. Những điều sau là một vài mẹo để duy trì động lực và tiếp tục làm việc:</p>
+
+<ul>
+ <li><strong>Cố gắng làm cho môi trường làm việc của bạn hiệu quả nhất có thể</strong>. Cố gắng tìm một bộ bàn ghê làm việc thoải mái, đảm bảo có đủ ánh sáng và cố gắng sắp đặt các thứ giúp bạn tập trung (chẳng hạn như âm nhạc êm dịu, nước hoa hay bất cứ thứ gì bạn cần). Đừng cố gắng làm việc trong một căn phòng có nhiều phiền nhiễu - ví dụ như một người bạn đang xem bóng đá trên tivi! Ngoài ra, hay để điện thoại di động của bạn ở ngoài phòng - hầu hết mọi người đều bị sao nhãng nhiều bởi điện thoại của họ, do đó bạn nên để nó ở chỗ khác. Làm việc quá lâu mà không nghỉ ngơi cũng không tốt cho bạn về mặt thể chất - nhìn vào màn hình máy tính quá lâu có thể gây hại cho mắt, và ngồi yên một chỗ quá lâu có thể gây hại cho lưng hoặc chân của bạn. Chúng tôi khuyên bạn nên dành 15 phút giải lao mỗi 1 giờ hay 90 phút làm việc.</li>
+ <li><strong>Nghỉ giải lao thường xuyên</strong>. Không tốt cho tinh thần của bạn khi làm việc liên tục trong nhiều giờ mà không nghỉ giải lao, đặc biệt là khi bạn thẩy bị mắc kẹt tại một vấn đề. Điều đó dẫn đến sự chán nản - tốt hơn là bạn nên nghỉ ngơi, di chuyển xung quanh một chút, sau đó thư giãn với đồ uống trước khi trở lại làm việc, và như chúng tôi đã nói từ trước, cách học tập lan tỏa mà bạn thực hiện trong thời gian đó thường giúp bạn tìm ra giải pháp cho vấn đề bạn đang gặp phải.</li>
+ <li><strong>Ăn, tập thể dục và ngủ</strong>. Ăn uống lành mạnh, tập thể dục thường xuyên và ngủ đủ giấc . Điều này nghe có vẻ hiển nhiên, nhưng cũng dễ quên khi bạn thực sự bắt đầu viết code. Đưa những thành phần thiết yếu vào lịch trình của bạn, và đảm bảo rằng bạn không dành thời gian học tập mà bỏ qua những thứ này.</li>
+ <li><strong>Tự thưởng cho bản thân</strong>. Một sự thật là chỉ làm mà không chơi đùa khiến sẽ khiến người ta trở nên buồn tẻ. Bạn nên sắp xếp làm những điều thú vị sau mỗi buổi học, điều mà bạn sẽ chỉ có khi quá trình học kết thúc và hoàn thành. Ví dụ, nếu bạn thực sự đam mê chơi game, hãy đặt ra mục tiêu như "không chơi game tối nay trừ khi tôi vượt qua 5 giờ học tập". Bây giờ tất cả những gì bạn cần là ý chí. Chúc may mắn! </li>
+ <li><strong>Đồng học và demo</strong>. Đây không phải là lựa chọn cho tất cả mọi người, nhưng nếu có thể, hãy cố gắng học cùng những người khác. Một lần nữa, sẽ dễ dàng hơn nếu bạn tham gia một khóa học đại học về phát triển web, nhưng có lẽ bạn nên thuyết phục một người bạn học cùng với mình, hoặc tìm một nhóm gặp mặt, chia sẻ kỹ năng tại đại phương. Việc có ai đó để thảo luận các ý tưởng và yêu cầu giúp đỡ thực sự rất hữu ích và tạo động lực, bạn cũng nên dành thời gian để demo công việc của mình. Những lời tán thưởng sẽ tạo thêm động lực cho bạn.</li>
+</ul>
+
+<h3 id="Giải_quyết_vấn_đề_hiệu_quả">Giải quyết vấn đề hiệu quả</h3>
+
+<p>Không có một cách giải quyết hiệu quả cho tất cả mọi vấn đề (hay để học mọi thứ) liên quan đến thiết kế và phát triển web, nhưng có một số lời khuyên chung sẽ phục vụ bạn tốt trong hầu hết mọi trường hợp.</p>
+
+<h4 id="Chia_nhỏ_mọi_thứ_thành_nhiều_phần">Chia nhỏ mọi thứ thành nhiều phần</h4>
+
+<p>Để bắt đầu, khi bạn đang cố gắng thực hiện một điều gì đó cụ thẻ và có vẻ như rất khó để làm được điều đó, bạn nên thử chia nó thành nhiều vấn đề nhỏ hơn hoặc thành nhiều phần.</p>
+
+<p>Ví dụ như, nếu bạn đang xem nhiệm vụ "Xây dựng một trang web 2 cột đơn giản", bạn có thể chia nhỏ nó như sau:</p>
+
+<ul>
+ <li>Tạo một cấu trúc HTML</li>
+ <li>Tạo kiểu chữ cơ bản cho trang</li>
+ <li>Lập bảng màu cơ bản</li>
+ <li>Triển khai bố cục cấp cao - tiêu đề, menu điều hướng ngang, khu vực nội dung chính với các cột chính và phụ, và chân trang.</li>
+ <li>Triển khai menu điều hướng ngang.</li>
+ <li>v.v.</li>
+</ul>
+
+<p>Sau đó bạn có thể chia nhỏ thêm, ví dụ như, "Triển khải menu điều hướng ngang" có thể được viết thành:</p>
+
+<ul>
+ <li>Tạo một danh sách các mục nằm ngang trên một dòng.</li>
+ <li>Xóa các giá trị mặc định không cần thiết, như khoảng trống hay đấu đầu dòng.</li>
+ <li>Tạo các kiểu di chuột/ tiêu điểm / trạng thái hoạt động của các mục menu một cách thích hợp.</li>
+ <li>Tạo các mục menu cách đều trên một hàng.</li>
+ <li>Cấp đủ khoảng cách dọc cho các mục menu.</li>
+ <li>Đảm bảo các dòng chữ nằm ở chính giữa mỗi mục.</li>
+ <li>v.v.</li>
+</ul>
+
+<p>Mỗi một vấn đề trên dường như không khó giải quyết bằng một vấn đề lớn mà bạn gặp phải lúc đầu. Bây giờ bạn chỉ cần đi qua và giải quyết tất cả!</p>
+
+<h4 id="Tìm_hiểu_và_nhận_ra_các_mẫu">Tìm hiểu và nhận ra các mẫu</h4>
+
+<p>Như chúng tôi đã nói từ trước, thiết kê / lập trình web đa phần là về việc giải quyết vấn đề và các mẫu. Một khi bạn đã viết ra những gì bạn cần là để giải quyết một vấn đề cụ thể nào đó, bạn có thể bắt đầu tìm ra những công nghệ cần sử dụng để giải quyết vấn đề đó. Ví dụ như, một nhà phát triển web chuyên nghiệp đã tạo ra rất nhiều menu điều hướng ngang, nên họ có thể ngay lập tức bắt đầu nghĩ về giải pháp như:</p>
+
+<p>Một menu điều hướng thường được tạo ra từ danh sách các liên kết, giống như:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;First menu item&lt;/li&gt;
+  &lt;li&gt;Second menu item&lt;/li&gt;
+  &lt;li&gt;Third menu item&lt;/li&gt;
+  &lt;li&gt;etc.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Để làm cho tất cả các mục xếp thẳng hàng ngang, các hiện đại dễ nhất là sử dụng flexbox:</p>
+
+<pre class="brush: css notranslate">ul {
+  display: flex;
+}</pre>
+
+<p>Để xóa những khoảng trống và dấu đầu dòng không cần thiết, ta có thể làm như sau:</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-type: none;
+  padding: 0;
+}</pre>
+
+<p>v.v.</p>
+
+<p>Nếu bạn là một người hoàn toàn mới bắt đầu phát triển web, bạn sẽ phải thực hiện một số nghiên cứu và tìm kiếm trên web cũng như tra cứu các giải pháp cho những vấn đề như vậy. Nếu bạn là một nhà phát triển web chuyên nghiệp, bạn có thể nhớ lần cuối bạn giải quyết một vấn đề tương tự như vậy, và chỉ cần tra cứu một chút cú pháp mà bạn đã quên.</p>
+
+<p>Khi bạn tìm thấy những giải pháp để giải quyết các vấn đề như vậy, bạn nên ghi lại những gì bạn đã làm và giữu một số code ví dụ tối thiểu trong một thư mục ở đâu đó để bạn có thể nhìn lại các công việc trước đó.</p>
+
+<p>Ngoài ra, trang web có <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools </a>cho phép bạn xem code được sử dụng để xây dựng bất kỳ trang web nào - nếu bạn không có một giải pháp nào trong tay, một phương pháp tốt là tìm các trang web với các tính năng tương tự, và tìm hiểu cách họ làm điều đó.</p>
+
+<div class="blockIndicator note">
+<p><strong>Chú ý</strong>: Hãy chú ý các chúng tôi nói về việc cố gắng tím cách giải quyết vấn đề đầu tiên, sau đó là công nghệ sử dụng để giải quyết vấn đề. Đây luôn là cách tốt nhất để làm điều đó - đừng bắt đầu với một công nghệ mới thú vị mà bạn muốn sử dụng mà cố gằng đưa nó và trường hợp sử dụng cụ thể.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Chú ý</strong>: Cách giải quyế đơn giản nhất luôn luôn là tốt nhất.</p>
+</div>
+
+<h3 id="Thực_hành">Thực hành</h3>
+
+<p>Bạn càng thực hành giải quyết vấn đề nhiều, các đường dẫn thần kinh trong não bạn về lĩnh vực đó càng mạnh hơn, việc nhớ lại các chi tiết và logic của vấn đề cụ thể nào đó càng trở nên dễ dàng hơn.</p>
+
+<p>Tiếp tục mày mò với code và thực hành nhiều hơn. Nếu bạn không còn vấn đề gì để giải quyết, hãy  tìm một số bài kiểm tra trực tuyến, thực hiện thêm một số khóa học, hoặc hỏi bạn bè và gia đình (hoặc trường học hay nhà thờ địa phương) xem có điều gì họ muốn bạn xây dựng cho họ không.</p>
+
+<h2 dir="ltr" id="Tìm_sự_giúp_đỡ">Tìm sự giúp đỡ</h2>
+
+<p dir="ltr">Phát triển web yêu cầu bạn phải học một bộ kỹ năng phức tạp - bạn nhất định gặp phải khó khăn tại một số thời điểm và cần sự giúp đỡ. Như chúng tôi đã nói từ trước, ngay cả nhà phát triển chuyên nghiệp cũng thường xuyên cần sự trợ giúp để giải quyết các vấn đề.</p>
+
+<p dir="ltr">Có nhiều cách để nhận trợ giúp và sau đây là một số mẹo để làm làm vậy được hiệu quả hơn.</p>
+
+<h3 dir="ltr" id="Tìm_kiếm_hiệu_quả_trên_web">Tìm kiếm hiệu quả trên web</h3>
+
+<p dir="ltr">Một kỹ năng quan trọng cần học là nghệ thuật tìm kiếm hiệu quả trên web - bạn cần sử dụng cụm từ tìm kiếm nào trên công cụ tìm kiếm yêu thích của mình để tìm được các bài viết bạn cần.</p>
+
+<p dir="ltr">Việc tìm kiếm thường khá rõ ràn. Ví dụ như:</p>
+
+<ul dir="ltr">
+ <li>Nếu bạn muốn tìm hiểu về thiết kế web phản hồi, bạn có thể tìm kiếm cụm từ "thiết kế web phản hồi".</li>
+ <li>Nếu bạn muốn tìm hiểu thêm về một tính năng công nghệ cụ thể, chẳng hạn như phần tử HTML <code>&lt;video&gt; </code>hoặc các thuộc tính <code>background-color</code> hay <code>opacity</code> của CSS, hoặc phương thức JavaScript <code>Date.setTime() </code>bạn nên tìm kiếm chỉ tên tính năng.</li>
+ <li>Nếu bạn đang tìm kiếm một số thông tin cụ thể hơn, bạn có thể thêm các từ khóa khác làm công cụ sửa đổi, ví dụ: "thuộc tính tự động phát phần tử &lt;video&gt;" hoặc "tham số Date.setTime".</li>
+</ul>
+
+<p dir="ltr">Nếu bạn muốn tìm kiếm thứ gì đó có từ khóa ít rõ ràng hơn, bạn cần phải suy nghĩ về những gì có nhiều khả năng trả lại những gì bạn muốn nhất..</p>
+
+<ul dir="ltr">
+ <li>Chạy code sau một vài lời hứa được thực hiện</li>
+ <li>Phát một video stream từ một webcam trong trình duyệt</li>
+ <li>Tạo một gradient tuyến tính trong nền phần tử của bạn</li>
+</ul>
+
+<h4 id="Thông_báo_lỗi">Thông báo lỗi</h4>
+
+<p>Nếu bạn đang gặp vấn đề mới một số code và một thông báo lỗi cụ thể hiện ra, bạn thường chỉ cần copy thông báo lỗi đó vào công cụ tìm kiếm và sử dụng nó làm cụm từ tìm kiếm. Nếu người khác đã gặp phải vấn đề như vậy, có thể sẽ có một số bài báo hoặc bài đăng trên blog về vấn đề này ở những nơi như MDN hay Stack Overflow.</p>
+
+<div class="blockIndicator note">
+<p><strong>Chú ý</strong>: <a href="https://stackoverflow.com/">Stack Overflow </a>là một trang web thực sự hữu ích - nó cơ bản là một cơ sở dữ liệu khổng lồ gồm các câu hỏi và câu trả lời về các công nghệ và kỹ thuật liên quan khác nhau. Bạn có thể sẽ tìm thấy câu trả lời cho câu hỏi của bạn. Nếu không, bạn có thể đặt câu hỏi và xem liệu có ai có thể giúp bạn không.</p>
+</div>
+
+<h4 id="Kiểm_tra_trình_duyệt">Kiểm tra trình duyệt</h4>
+
+<p dir="ltr"></p>
+
+<p dir="ltr">Thông thường, bạn nêu xem liệu sự cố của bạn có ảnh hưởng đến tất cả các trình duyệt hay chỉ xảy ra ở một hay một số ít trình duyệt. Ví dụ, nếu nó chỉ ảnh hưởng đến một trình duyệt, bạn có thể sử dụng trình duyệt đó để thu hẹp việc tìm kiếm. Các mẫu tìm kiếm có thể giống như sau:</p>
+
+<ul dir="ltr">
+ <li>Trình phát &lt;video&gt; không làm việc trên trình duyệt iOS</li>
+ <li>Firefox có vẻ không hỗ trợ Beetlejuice API.</li>
+</ul>
+
+<h3 dir="ltr" id="Sử_dụng_MDN">Sử dụng MDN</h3>
+
+<p dir="ltr">Trang web bạn đang truy cập có rất nhiều thông tin có sẵn dành cho bạn - cả tài kiệ tham khảo để tra cứu cú pháp code và các hướng dẫn để học các kỹ thuật.</p>
+
+<p dir="ltr">Chúng tôi cung cấp hầu hết câu trả lời cho các câu hỏi bạn sẽ có về các nguyên tắc cơ bản để phát triển web trong phần này của MDN. Nếu bạn đang gặp khó khăn, thì tốt hơn là đọc lại các bài báo liên quan để xem bạn có bỏ sót điều gì không.</p>
+
+<p dir="ltr">Nếu bạn không chắc chắn nên đọc bài báo nào, hãy thử tìm kiếm trên MDN cho một số từ khóa tiên quan (như được chỉ ra ở trên) hoặc thử tìm kiếm trên trang web chung. Để tìm kiếm trên MDN, bạn có thể sử dụng chức năng tìm kiếm tích hợp sẵn trên trang web hoặc tốt hơn nữa, sử dụng công cụ tìm kiếm yêu thích của bạn và đặt "MDN" trước các cụm từ tìm kiếm, ví dụ như "MDN background-color".</p>
+
+<h3 dir="ltr" id="Các_nguồn_tài_nguyên_trực_tuyến_khác">Các nguồn tài nguyên trực tuyến khác</h3>
+
+<p>Chúng tôi đã đề cập đến Stack Overflow, nhưng ngoài ra còn nhiều nguồn tài nguyên trục tuyến khác có thể trợ giúp.</p>
+
+<p>Thật tốt khi tìm được một cộng đồng để tham gia và bạn sẽ nhật được rất nhiều sự tôn trọng nếu bạn cố gắng giúp đỡ các người khác trả lời các câu hỏi của họ cũng như câu hỏi của chính bạn. Một số ví dụ điển hình như:</p>
+
+<ul dir="ltr">
+ <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
+ <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
+ <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
+</ul>
+
+<p dir="ltr">Tuy nhiên, việc tìm các nhóm hữu ích trên các trang mạng xã hội như Twitter hay Facebook cũng rất hợp lý. Tìm các nhóm thảo luận về các chủ đề phát triển web mà bạn quan tâm và tham gia. Theo dõi những người trênTwitter mà bạn biết  là có ảnh hưởng, thông minh hay chỉ đơn giản là chia sẻ nhiều mẹo hữu ích.</p>
+
+<h3 dir="ltr" id="Các_buổi_gặp_mặt">Các buổi gặp mặt</h3>
+
+<p dir="ltr">Cuối cùng, bạn nên tham dự một và buổi gặp mặt để gặp gỡ những người có cùng chí hướng, đặc biệt là những ai mới bắt đầu. <a href="https://www.meetup.com/find/tech/">meetup.com</a> là một nơi tốt để tìm các buổi gặp mặt thực tế tại địa phương và bạn cũng có thẻ thử báo chí địa phương / nội dung trên các trang web.</p>
+
+<p dir="ltr">Bạn cũng có thể thử tham dự các hội nghị web chính thức. Mặc dù những thứ này có thể đắt đỏ, bạn có thể thử làm tình nguyện viên và nhiều hội nghị cung cấp các vé giảm giá, ví dụ như cho sinh viên.</p>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
+ <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
+ <li><a href="https://www.codecademy.com/">Codecademy</a></li>
+</ul>
diff --git a/files/vi/learn/server-side/express_nodejs/development_environment/index.html b/files/vi/learn/server-side/express_nodejs/development_environment/index.html
new file mode 100644
index 0000000000..f46ebd1a9f
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/development_environment/index.html
@@ -0,0 +1,407 @@
+---
+title: Setting up a Node development environment
+slug: Learn/Server-side/Express_Nodejs/development_environment
+tags:
+  - Cài đặt
+  - Express
+  - Hướng dẫn
+  - hello world
+  - nodejs
+  - npm
+translation_of: Learn/Server-side/Express_Nodejs/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Bây giờ bạn đã biết Express là gì, chúng tôi sẽ chỉ cho bạn cách cài đặt và kiểm tra một môi trường phát triển Node/Express trên Windows, Linux (Ubuntu) và macOS. Bất kể hệ điều hành bạn đang dùng là gì, bài này sẽ cho biết những thứ cần thiết để bắt đầu phát triển ứng dụng Express.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>
+    <p>Biết mở Terminal / Command Prompt.<br>
+     Biết cài đặt các gói trên hệ điều hành của bạn.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Cài đặt một môi trường phát triển cho Express (X.XX) trên máy tính của bạn.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tổng_quan_môi_trường_phát_triển_Express">Tổng quan môi trường phát triển Express</h2>
+
+<p>Node và Express rất dễ dàng cài đặt trên máy tính của bạn để bắt đầu phát triển ứng dụng web. Mục này cho biết tổng quan về những công cụ nào cần dùng, giải thích một số phương pháp đơn giản nhất để cài Node (và Express) trên Ubuntu, macOS và Windows, kèm theo là hướng dẫn kiểm tra bạn đã cài được chưa.</p>
+
+<h3 id="Môi_trường_phát_triển_Express_là_gì">Môi trường phát triển Express là gì?</h3>
+
+<p>Môi trường phát triển Express bao gồm cài đặt <em>Nodejs, trình quản lý gói NPM</em> và (tuỳ chọn) <em>Express Application Generator (trình khởi tạo ứng dụng Express) </em>trên máy của bạn.</p>
+
+<p><em>Node</em> và <em>trình quản lý gói NPM</em> được cài đặt cùng nhau từ một gói, trình cài đặt, trình quản lý gói của hệ điều hành hoặc từ mã nguồn (xem các phần sau). <em>Express</em> được cài đặt sau đó bởi NPM như một phụ thuộc (dependency) của ứng dụng web <em>Express</em> (cùng với các thư viện khác như template engines, database drivers, authentication middleware, middleware to serve static files, v.v...).</p>
+
+<p><em>NPM</em> có thể được dùng để cài <em>Express Application Generator</em>, một công cụ tiện dụng để tạo bộ khung ứng dụng web Express theo <a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">mô hình MVC</a>. Công cụ này là tuỳ chọn vì bạn không cần phải sử dụng nó để tạo ứng dụng Express. Tuy nhiên chúng tôi sẽ sử dụng, bởi vì nó giúp chúng ta bắt đầu dễ dàng hơn và cho chúng tâ cấu trúc ứng dụng dạng mô-đun.</p>
+
+<div class="note">
+<p><strong>Ghi chú:</strong> Không như một số web frameworks khác có môi trường phát triển không bao gồm một server rời. Trong <em>Node / Express</em>, một ứng dụng web tạo và chạy web server của nó!</p>
+</div>
+
+<p>Có những công cụ ngoại vi khác thường dùng trong môi trường phát triển bao gồm <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">text editors</a> hoặc IDEs để chỉnh sửa code và công cụ quản lý mã nguồn như <a href="https://git-scm.com/">Git</a> để quản lý các phiên bản code khác nhau của bạn. Chúng tôi giả định bạn đã cài những công cụ này (đặc biệt là một text editor).</p>
+
+<h3 id="Những_hệ_điều_hành_nào_được_hỗ_trợ">Những hệ điều hành nào được hỗ trợ?</h3>
+
+<p>Node có thể chạy trên Windows, macOS, nhiều bản distro của Linux, Docker, v.v... (có danh sách đầy đủ ở <a href="https://nodejs.org/en/download/">Nodejs Downloads page</a>). Hầu hết mọi máy tính cá nhân đủ khả năng để chạy Node trong khi phát triển. Express chạy trong môi trường Node, do dó nó có thể chạy trên mọi nền tảng có Node.</p>
+
+<p>Trong bài này chúng tôi hướng dẫn cài đặt cho Windows, macOS và Ubuntu Linux.</p>
+
+<h3 id="Bạn_nên_sử_dụng_NodeExpress_phiên_bản_nào">Bạn nên sử dụng Node/Express phiên bản nào?</h3>
+
+<p>Có nhiều <a href="https://nodejs.org/en/blog/release/">phiên bản Node</a> — những bản mới được vá lỗi, hỗ trợ nhiều hơn cho các chuẩn ECMAScript (JavaScript) gần đây, và nâng cấp các Node APIs.</p>
+
+<p>Nhìn chung, bạn nên sử dụng bản<em> LTS (được hỗ trợ dài hạn)</em> mới nhất bởi vì nó ổn định hơn các các bản "current" mà vẫn có các tính năng tương đối mới gần đây (và vẫn được tích cực bảo trì). Bạn nên sử dụng phiên bản <em>Current</em> nếu bạn muốn dùng tính năng không có ở bản LTS.<br>
+ <br>
+ Với Express, bạn nên luôn sử dụng bản mới nhất.</p>
+
+<h3 id="Còn_cơ_sở_dữ_liệu_và_các_phụ_thuộc_khác_thì_sao">Còn cơ sở dữ liệu và các phụ thuộc khác thì sao?</h3>
+
+<p>Các phụ thuộc khác như database drivers, template engines, authentication engines, v.v.. là một phần của ứng dụng, được import vào môi trường ứng dụng bởi sử dụng trình quản lý gói NPM. Chúng tôi sẽ nói đến trong các bài cụ thể sau.</p>
+
+<h2 id="Cài_đặt_Node">Cài đặt Node</h2>
+
+<p>Để sử dụng <em>Express</em>, trước hết bạn phải cài <em>Nodejs</em> và <a href="https://docs.npmjs.com/">trình quản lý gói Node (NPM)</a> trên hệ điều hành của bạn. Những mục sau hướng dẫn cách đơn giản nhất để cài Nodejs phiên bản LTS trên Ubuntu Linux 16.04, macOS và Windows 10.</p>
+
+<div class="note">
+<p><strong>Mẹo:</strong> Những mục bên dưới hướng dẫn cách dễ nhất để cài Node và NPM trên các nền tảng OS của chúng tôi. Nếu bạn đang dùng OS khác hoặc muốn xem các cách khác để cài thì xem tại  <a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org).</p>
+</div>
+
+<h3 id="Windows_và_macOS">Windows và macOS</h3>
+
+<p>Cài đặt <em>Node</em> và <em>NPM</em> trên Windows và macOS đơn giản chỉ cần dùng trình cài đặt được cung cấp sẵn.</p>
+
+<ol>
+ <li>Tải trình cài đặt:
+  <ol>
+   <li>Truy cập <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li>
+   <li>Chọn nút tải xuống bản LTS.</li>
+  </ol>
+ </li>
+ <li>Click đúp chuột vào file đã tải và làm theo các hướng dẫn.</li>
+</ol>
+
+<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
+
+<p>Cách đơn giản nhất để cài phiên bản LTS mới nhất của Node là sử dụng <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">trình quản lý gói</a> để lấy từ Ubuntu <em>binary distributions</em> repository. Đơn giản là chạy hai câu lệnh sau trong terminal:</p>
+
+<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
+sudo apt-get install -y nodejs</code>
+</pre>
+
+<div class="warning">
+<p><strong>Lưu ý:</strong> Không cài trực tiếp từ normal Ubuntu repositories bởi vì các bản Node ở đó quá cũ.</p>
+</div>
+
+<ol>
+</ol>
+
+<h3 id="Kiểm_tra_kết_quả_cài_đặt">Kiểm tra kết quả cài đặt</h3>
+
+<p>Cách đơn giản nhất để kiểm tra xem node đã được cài chưa là chạy lệnh "version" trong terminal/ command prompt và xem phiên bản in ra:</p>
+
+<pre class="brush: bash">&gt;node -v
+v8.11.3</pre>
+
+<p>Trình quản lý gói Nodejs (NPM) cũng được cài đặt luôn, kiểm tra tương tự:</p>
+
+<pre class="brush: bash">&gt;npm -v
+5.8.0</pre>
+
+<p>Một bài kiểm tra thú vị hơn là tạo một server rất cơ bản "thuần Node" đơn giản in ra "Hello World" trong trình duyệt của bạn khi truy cập đúng URL:</p>
+
+<ol>
+ <li>Copy đoạn mã sau vào một file đặt tên là <strong>hellonode.js</strong>. Đoạn mã này sử dụng các tính năng <em>Node</em> thuần (không dùng gì của Express) và một vài cú pháp ES6:
+
+  <pre class="brush: js">//Load HTTP module
+const http = require("http");
+<code>const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) =&gt; {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () =&gt; {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});</code>
+
+</pre>
+
+  <p>Đoạn mã import mô-đun "http" và dùng nó để tạo một server (<code>createServer()</code>) lắng nghe HTTP request ở cổng 3000. Sau đó in ra một thông điệp về URL bạn có thể dùng để kiểm tra server. Hàm <code>createServer()</code> nhận tham số là một hàm callback được gọi khi nhận được một HTTP request — nó đơn giản trả về một response với HTTP status code 200 ("OK") và đoạn chữ "Hello World".</p>
+
+  <div class="note">
+  <p><strong>Ghi chú:</strong> Đừng lo lắng nếu bạn không hiểu chính xác việc mà đoạn code thực hiện. Chúng tôi sẽ giải thích rất chi tiết khi chúng ta bắt đầu sử dụng Express!</p>
+  </div>
+ </li>
+ <li>Khởi động server bằng cách điều hướng đến thư mục chứa <code>hellonode.js</code> trong terminal/ command prompt và gọi <code>node</code> với tên script, như sau:
+  <pre class="brush: bash">&gt;node hellonode.js
+Server running at http://127.0.0.1:3000/
+</pre>
+ </li>
+ <li>Truy cập vào URL <a href="http:127.0.0.1:3000">http://127.0.0.1:3000</a>. Nếu mọi thứ hoạt động, trình duyệt sẽ hiển thị dòng chữ "Hello World".</li>
+</ol>
+
+<h2 id="Using_NPM">Using NPM</h2>
+
+<p>Next to <em>Node</em> itself, <a href="https://docs.npmjs.com/">NPM</a> is the most important tool for working with<em> Node </em>applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process. </p>
+
+<div class="note">
+<p><strong>Note:</strong> From Node's perspective, <em>Express</em> is just another package that you need to install using NPM and then require in your own code.</p>
+</div>
+
+<p>You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named <a href="https://docs.npmjs.com/files/package.json">package.json</a>. This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of <em>Node</em> it can work with, etc. The <strong>package.json</strong> file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).</p>
+
+<h3 id="Adding_dependencies">Adding dependencies</h3>
+
+<p>The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Here we show the instructions to fetch and install the <em>Express</em> package. Later on we'll show how this package, and others, are already specified for us using the <em>Express Application Generator</em>. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.</p>
+</div>
+
+<ol>
+ <li>First create a directory for your new application and navigate into it:
+  <pre class="brush: bash">mkdir myapp
+cd myapp</pre>
+ </li>
+ <li>Use the npm <code>init</code> command to create a <strong>package.json</strong> file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is <strong>index.js</strong>). For now, just accept the defaults:
+  <pre class="brush: bash">npm init</pre>
+
+  <p>If you display the <strong>package.json</strong> file (<code>cat package.json</code>), you will see the defaults that you accepted, ending with the license.</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+</pre>
+ </li>
+ <li>Now install Express in the <code>myapp</code> directory and save it in the dependencies list of your package.json file</li>
+ <li>
+  <pre class="brush: bash">npm install express --save</pre>
+
+  <p>The dependencies section of your <strong>package.json</strong> will now appear at the end of the <strong>package.json</strong> file and will include <em>Express</em>.</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+<strong>  "dependencies": {
+    "express": "^4.16.3"
+  }</strong>
+}
+</pre>
+ </li>
+ <li>To use the library you call the <code>require()</code> function as shown below in your index.js file.
+  <pre><code><strong>const express = require('express')</strong>
+const app = express();
+
+app.get('/', (req, res) =&gt; {
+  res.send('Hello World!')
+});
+
+app.listen(</code>8000<code>, () =&gt; {
+  console.log('Example app listening on port </code>8000<code>!')
+});</code>
+</pre>
+
+  <p>This code shows a minimal "HelloWorld" Express web application. This imports the "express" module and uses it to create a server (<code>app</code>) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The <code>app.get()</code> function only responds to HTTP <code>GET</code> requests with the specified URL path ('/'), in this case by calling a function to send our <em>Hello World!</em> message. <br>
+   <br>
+   Create a file named <strong>index.js</strong> in the root of the "myapp" application directory and give it the contents shown above.</p>
+ </li>
+ <li>You can start the server by calling node with the script in your command prompt:
+  <pre class="brush: bash">&gt;node index.js
+Example app listening on port 8000
+</pre>
+ </li>
+ <li>Navigate to the URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). If everything is working, the browser should simply display the string "Hello World!".</li>
+</ol>
+
+<h3 id="Development_dependencies">Development dependencies</h3>
+
+<p>If a dependency is only used during development, you should instead save it as a "development dependency" (so that your package users don't have to install it in production). For example, to use the popular JavaScript Linting tool <a href="http://eslint.org/">eslint</a> you would call NPM as shown:</p>
+
+<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
+
+<p>The following entry would then be added to your application's <strong>package.json</strong>:</p>
+
+<pre class="brush: js">  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linters</a>" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.</p>
+</div>
+
+<h3 id="Running_tasks">Running tasks</h3>
+
+<p>In addition to defining and fetching dependencies you can also define <em>named</em> scripts in your <strong>package.json</strong> files and call NPM to execute them with the <a href="https://docs.npmjs.com/cli/run-script">run-script</a> command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Task runners like <a href="http://gulpjs.com/">Gulp</a> and <a href="http://gruntjs.com/">Grunt</a> can also be used to run tests and other external tools.</p>
+</div>
+
+<p>For example, to define a script to run the <em>eslint</em> development dependency that we specified in the previous section we might add the following script block to our <strong>package.json</strong> file (assuming that our application source is in a folder /src/js):</p>
+
+<pre class="brush: js">"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+</pre>
+
+<p>To explain a little further, <code>eslint src/js</code> is a command that we could enter in our terminal/command line to run <code>eslint</code> on JavaScript files contained in the <code>src/js</code> directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — <code>lint</code>.</p>
+
+<p>We would then be able to run <em>eslint</em> using NPM by calling:</p>
+
+<pre class="brush: bash"><code>npm run-script lint
+# OR (using the alias)
+npm run lint</code>
+</pre>
+
+<p>This example may not look any shorter than the original command, but you can include much bigger commands inside your npm scripts, including chains of multiple commands. You could identify a single npm script that runs all your tests at once.</p>
+
+<h2 id="Installing_the_Express_Application_Generator">Installing the Express Application Generator</h2>
+
+<p>The <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> tool generates an Express application "skeleton". Install the generator using NPM as shown (the <code>-g</code> flag installs the tool globally so that you can call it from anywhere):</p>
+
+<pre><code>npm install express-generator -g</code></pre>
+
+<p>To create an <em>Express</em> app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:</p>
+
+<pre class="brush: bash">express helloworld</pre>
+
+<div class="note">
+<p><strong>Note: </strong>You can also specify the template library to use and a number of other settings. Use the <code>help</code> command to see all the options:</p>
+
+<pre class="brush: bash">express --help
+</pre>
+
+<p> </p>
+</div>
+
+<p>NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.</p>
+
+<div class="note">
+<p>The new app will have a <strong>package.json</strong> file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:</p>
+
+<pre class="brush: js">{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.15.5",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  }
+}</pre>
+
+<p> </p>
+</div>
+
+<p>Install all the dependencies for the helloworld app using NPM as shown:</p>
+
+<pre class="brush: bash">cd helloworld
+npm install
+</pre>
+
+<p>Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:</p>
+
+<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* &amp; npm start
+
+# Run the helloworld on Windows with PowerShell
+SET DEBUG=helloworld:* | npm start
+
+# Run helloworld on Linux/macOS
+DEBUG=helloworld:* npm start
+</pre>
+
+<p>The DEBUG command creates useful logging, resulting in an output like that shown below.</p>
+
+<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
+
+&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
+&gt; node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms</pre>
+
+<p>Open a browser and navigate to <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a> to see the default Express welcome page.</p>
+
+<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+
+<p>We'll talk more about the generated app when we get to the article on generating a skeleton application.</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.</p>
+
+<p>In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
+ <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
+ <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/vi/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
new file mode 100644
index 0000000000..6d5192d404
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
@@ -0,0 +1,135 @@
+---
+title: Kiểm soát luồng không đồng bộ bằng cách sử dụng async
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
+---
+<p>Mã điều khiển cho một số trang <em>LocalLibrary</em> của chúng tôi sẽ phụ thuộc vào kết quả của nhiều yêu cầu bất đồng bộ, có thể được yêu cầu chạy theo một số thứ tự cụ thể hoặc song song. Để quản lý kiểm soát dòng chảy, và đưa ra trang khi chúng tôi có tất cả các thông tin cần thiết có sẵn, chúng tôi sẽ sử dụng các nút phổ biến <a class="external external-icon" href="https://www.npmjs.com/package/async" rel="noopener">async</a> module.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Có một số cách khác để quản lý hành vi bất đồng bộ và kiểm soát luồng trong JavaScript, bao gồm các tính năng ngôn ngữ JavaScript tương đối gần đây như <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Techniques/Promises">Promises</a>.</p>
+</div>
+
+<p>Async có rất nhiều phương pháp hữu ích (xem <a class="external external-icon" href="http://caolan.github.io/async/docs.html" rel="noopener">tài liệu</a> ). Một số chức năng quan trọng hơn là:</p>
+
+<ul>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> để thực hiện bất kỳ thao tác nào phải được thực hiện song song.</li>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> khi chúng ta cần đảm bảo rằng các hoạt động bất đồng bộ được thực hiện theo chuỗi.</li>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> cho các hoạt động phải được chạy theo chuỗi, với mỗi thao tác tùy thuộc vào kết quả của các phép toán trước đó.</li>
+</ul>
+
+<h2 id="Tại_sao_nó_cần_thiết">Tại sao nó cần thiết?</h2>
+
+<p>Hầu hết các phương thức chúng tôi sử dụng trong <em>Express</em> đều bất đồng bộ — bạn chỉ định một thao tác để thực hiện, chuyển một cuộc gọi lại. Phương thức trả về ngay lập tức và gọi lại được gọi khi hoạt động được yêu cầu hoàn tất. Theo quy ước trong <em>Express</em> , hàm gọi lại truyền giá trị <em>lỗi</em> làm tham số đầu tiên (hoặc <code>null</code>thành công) và kết quả từ hàm (nếu có) làm tham số thứ hai.</p>
+
+<p>Nếu một bộ điều khiển chỉ cần <em>thực hiện <strong>một</strong> thao tác bất đồng bộ</em> để có được thông tin cần thiết để hiển thị một trang thì việc triển khai thực hiện rất dễ dàng — chúng tôi chỉ cần hiển thị mẫu trong cuộc gọi lại. Đoạn mã dưới đây cho thấy điều này cho một hàm làm cho số đếm của một mô hình <code>SomeModel</code>(sử dụng <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.count" rel="noopener">count()</a></code>phương thức Mongoose ):</p>
+
+<pre class="brush: js"><code>exports.some_model_count = function(req, res, next) {
+
+</code>  SomeModel.count ({a_model_field: 'match_value'}, hàm (err, count) {
+    // ... làm gì đó nếu có lỗi
+
+    // Khi thành công, trả kết quả bằng cách chuyển số đếm vào hàm render (ở đây, dưới dạng biến 'data').
+    res.render ('the_template', {data: count});
+  });
+<code>}</code>
+</pre>
+
+<p>Tuy nhiên, nếu bạn cần thực hiện <strong>nhiều</strong> truy vấn bất đồng bộ và bạn không thể hiển thị trang cho đến khi tất cả các thao tác đã hoàn tất? Việc triển khai ngây thơ có thể "chuỗi daisy" các yêu cầu, khởi động các yêu cầu tiếp theo trong cuộc gọi lại của yêu cầu trước đó và hiển thị phản hồi trong cuộc gọi lại cuối cùng. Vấn đề với cách tiếp cận này là các yêu cầu của chúng tôi sẽ phải được chạy theo chuỗi, mặc dù nó có thể hiệu quả hơn để chạy chúng song song. Điều này cũng có thể dẫn đến mã lồng nhau phức tạp, thường được gọi là <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">địa chỉ gọi lại</a> (<strong>callback hell</strong>) .</p>
+
+<p>Một giải pháp tốt hơn sẽ là thực hiện tất cả các yêu cầu song song và sau đó có một cuộc gọi lại duy nhất thực hiện khi tất cả các truy vấn đã hoàn thành. Đây là loại hoạt động lưu lượng mà mô-đun <em>Async</em> làm cho dễ dàng!</p>
+
+<h2 id="Hoạt_động_bất_đồng_bộ_song_song">Hoạt động bất đồng bộ song song</h2>
+
+<p>Phương pháp <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code>này được sử dụng để chạy nhiều hoạt động bất đồng bộ song song.</p>
+
+<p>Đối số đầu tiên <code>async.parallel()</code>là một tập hợp các hàm bất đồng bộ để chạy (một mảng, đối tượng hoặc có thể lặp lại khác). Mỗi chức năng được truyền <code>callback(err, result)</code>mà nó phải gọi khi hoàn thành với một lỗi <code>err</code>(có thể là <code>null</code>) và một <code>results</code>giá trị tùy chọn .</p>
+
+<p>Đối số thứ hai tùy chọn  <code>async.parallel()</code>là một cuộc gọi lại sẽ được chạy khi tất cả các hàm trong đối số đầu tiên đã hoàn thành. Gọi lại được gọi với một đối số lỗi và một bộ sưu tập kết quả có chứa các kết quả của các hoạt động bất đồng bộ riêng lẻ. Bộ sưu tập kết quả có cùng kiểu với đối số đầu tiên (tức là nếu bạn truyền một mảng các hàm bất đồng bộ, thì hàm gọi lại cuối cùng sẽ được gọi với một mảng các kết quả). Nếu bất kỳ hàm song song nào báo cáo lỗi thì gọi lại được gọi sớm (với giá trị lỗi).</p>
+
+<p>Ví dụ dưới đây cho thấy cách thức này hoạt động khi chúng ta truyền một đối tượng làm đối số đầu tiên. Như bạn có thể thấy, các kết quả được <em>trả về</em> trong một đối tượng có cùng tên thuộc tính như các hàm ban đầu được truyền vào.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">async.parallel({
+  one: function(callback) { ... },
+  two: function(callback) { ... },
+  ...
+  something_else: function(callback) { ... }
+  },
+  // optional callback
+  function(err, results) {
+    // 'results' is now equal to: {one: 1, two: 2, ..., something_else: some_value}
+  }
+);</code></pre>
+
+<p>Nếu bạn thay vì truyền một mảng các hàm như đối số đầu tiên, kết quả sẽ là một mảng (kết quả thứ tự mảng sẽ khớp với thứ tự ban đầu mà các hàm được khai báo — không phải thứ tự mà chúng đã hoàn thành).</p>
+
+<h2 id="Các_hoạt_động_bất_đồng_bộ_trong_chuỗi">Các hoạt động bất đồng bộ trong chuỗi</h2>
+
+<p>Phương thức <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code>này được sử dụng để chạy nhiều hoạt động bất đồng bộ theo thứ tự, khi các hàm tiếp theo không phụ thuộc vào đầu ra của các hàm trước đó. Nó cơ bản được khai báo và cư xử theo cùng một cách như <code>async.parallel()</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">async.series({
+  one: function(callback) { ... },
+  two: function(callback) { ... },
+  ...
+  something_else: function(callback) { ... }
+  },
+  // optional callback after the last asynchronous function completes.
+  function(err, results) {
+    // 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value}
+  }
+);</code></pre>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Đặc tả ngôn ngữ ECMAScript (JavaScript) nói rằng thứ tự liệt kê một đối tượng là không xác định, vì vậy có thể các hàm sẽ không được gọi theo cùng thứ tự như bạn chỉ định chúng trên tất cả các nền tảng. Nếu thứ tự thực sự quan trọng, thì bạn nên chuyển một mảng thay vì một đối tượng, như hình dưới đây.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">async.series([
+  function(callback) {
+    // do some stuff ...
+    callback(null, 'one');
+  },
+  function(callback) {
+    // do some more stuff ...
+    callback(null, 'two');
+  }
+ ],
+  // optional callback
+  function(err, results) {
+  // results is now equal to ['one', 'two']
+  }
+);</code></pre>
+
+<h2 id="Các_hoạt_động_bất_đồng_bộ_phụ_thuộc_trong_chuỗi">Các hoạt động bất đồng bộ phụ thuộc trong chuỗi</h2>
+
+<p>Phương thức <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code>này được sử dụng để chạy nhiều hoạt động bất đồng bộ theo thứ tự khi mỗi hoạt động phụ thuộc vào kết quả của hoạt động trước đó.</p>
+
+<p>Hàm gọi lại được gọi bởi mỗi hàm bất đồng bộ chứa <code>null</code>đối số đầu tiên và kết quả trong các đối số tiếp theo. Mỗi hàm trong chuỗi lấy các đối số kết quả của lần gọi lại trước đó làm tham số đầu tiên, và sau đó là một hàm gọi lại. Khi tất cả các hoạt động được hoàn thành, một cuộc gọi lại cuối cùng được gọi với kết quả của hoạt động cuối cùng. Cách làm việc này là rõ ràng hơn khi bạn xem xét các đoạn mã dưới đây (ví dụ này là từ <em>async</em> tài liệu):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">async.waterfall([
+  function(callback) {
+    callback(null, 'one', 'two');
+  },
+  function(arg1, arg2, callback) {
+    // arg1 now equals 'one' and arg2 now equals 'two'
+    callback(null, 'three');
+  },
+  function(arg1, callback) {
+    // arg1 now equals 'three'
+    callback(null, 'done');
+  }
+], function (err, result) {
+  // result now equals 'done'
+}
+);</code></pre>
+
+<h2 id="Cài_đặt_bất_đồng_bộ">Cài đặt bất đồng bộ</h2>
+
+<p>Cài đặt mô-đun bất đồng bộ bằng cách sử dụng trình quản lý gói NPM để chúng tôi có thể sử dụng nó trong mã của chúng tôi. Bạn làm điều này theo cách thông thường, bằng cách mở một dấu nhắc trong thư mục gốc của dự án <em>LocalLibrary</em> và nhập vào lệnh sau đây:</p>
+
+<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">npm install async</code></pre>
+
+<h2 id="Bước_tiếp_theo">Bước tiếp theo</h2>
+
+<ul>
+ <li>Quay lại  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Hướng dẫn Express Phần 5: Hiển thị dữ liệu thư viện</a> .</li>
+ <li>Chuyển đến phần con tiếp theo của Phần 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Mẫu mồi</a> .</li>
+</ul>
diff --git a/files/vi/learn/server-side/express_nodejs/displaying_data/index.html b/files/vi/learn/server-side/express_nodejs/displaying_data/index.html
new file mode 100644
index 0000000000..bdbf433fc3
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/displaying_data/index.html
@@ -0,0 +1,98 @@
+---
+title: 'Express Tutorial Part 5: Displaying library data'
+slug: Learn/Server-side/Express_Nodejs/Displaying_data
+tags:
+  - Beginner
+  - Controller
+  - Express
+  - Learn
+  - NeedsTranslation
+  - Template
+  - TopicStub
+  - View
+  - nodejs
+  - pug
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">We're now ready to add the pages that display the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> website books and other data. The pages will include a home page that shows how many records we have of each model type, and list and detail pages for all of our models. Along the way we'll gain practical experience in getting records from the database, and using templates.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Complete previous tutorial topics (including <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how to use the async module and Pug template language, and how to get data from the URL in our controller functions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>In our previous tutorial articles we defined <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Mongoose models</a> that we can use to interact with a database and created some initial library records. We then <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">created all the routes</a> needed for the LocalLibrary website, but with "dummy controller" functions (these are skeleton controller functions that just return a "not implemented" message when a page is accessed).</p>
+
+<p>The next step is to provide proper implementations for the pages that <em>display</em> our library information (we'll look at implementing pages featuring forms to create, update, or delete information in later articles). This includes updating the controller functions to fetch records using our models, and defining templates to display this information to users.</p>
+
+<p>We will start by providing overview/primer topics explaining how to manage asynchronous operations in controller functions and how to write templates using Pug. Then we'll provide implementations for each of our main "read only" pages with a brief explanation of any special or new features that they use.</p>
+
+<p>At the end of this article you should have a good end-to-end understanding of how routes, asynchronous functions, views, and models work in practice.</p>
+
+<h2 id="Displaying_library_data_tutorial_subarticles">Displaying library data tutorial subarticles</h2>
+
+<p>The following subarticles go through the process of adding the different features required for us to display the required website pages. You need to read and work through each one of these in turn, before moving on to the next one.</p>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async">Asynchronous flow control using async</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a></li>
+</ol>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We've now created all the "read-only" pages for our site: a home page that displays counts of instances of each of our models, and list and detail pages for our books, book instances, authors, and genres. Along the way we've gained a lot of fundamental knowledge about controllers, managing flow control when using asynchronous operations, creating views using <em>Pug</em>, querying the database using our models, how to pass information to a template from your view, and how to create and extend templates. Those who completed the challenge will also have learned a little about date handling using <em>moment</em>.</p>
+
+<p>In our next article we'll build on our knowledge, creating HTML forms and form handling code to start modifying the data stored by the site.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://caolan.github.io/async/docs.html">Async module</a> (Async docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using Template engines with Express</a> (Express docs)</li>
+ <li><a href="https://pugjs.org/api/getting-started.html">Pug</a> (Pug docs)</li>
+ <li><a href="http://momentjs.com/docs/">Moment</a> (Moment docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/server-side/express_nodejs/index.html b/files/vi/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..8cdfa86487
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,77 @@
+---
+title: Express web framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Express.js
+  - Intro
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Node
+  - Server-side programming
+  - TopicStub
+  - node.js
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express là một web framework phổ biến, được viết bằng JavaScript và chạy trên môi trường Node.js. Mô-đun sẽ giải thích một số lợi ích của framework này, cách để thiết lập môi trường, phát triển cũng như triển khai ứng dụng.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu với module này, bạn cần có kiến thức về lập trình web phía máy chủ và web framework là gì, bạn có thể đọc: <a href="/en-US/docs/Learn/Server-side/First_steps">Những bước đầu về lập trình web phía máy chủ</a>. Bạn cũng cần có kiến thức tổng quát về ngôn ngữ lập trình và đặc biệt là <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, nhưng không quá quan trọng để hiểu những khái niệm cốt lõi.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Những trang web có nhiều tài nguyên để học JavaScript<em> về phát triển ở phía client (khách)</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). Những khái niệm cốt lõi và ngôn ngữ JavaScript là tương tự với phát triển ở phía server (chủ) trên Node.js và tài liệu này sẽ đề cập. Node.js cung cấp các <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">APIs bổ sung</a> để hỗ trợ các chức năng hữu ích trong môi trường không có trình duyệt, ví dụ: tạo các máy chủ HTTP và truy cập hệ thống tệp, nhưng không hỗ trợ các JavaScript APIs để làm việc với trình duyệt và DOM.</p>
+
+<p>Hướng dẫn này sẽ cung cấp một số kiến thức khi làm việc với Node.js và Express, có vô số tài nguyên tuyệt vời khác trên Internet và trong sách — vài trong số đó đến từ <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) và <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Hướng_Dẫn">Hướng Dẫn</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Giới thiệu Express/Node</a></dt>
+ <dd>Trong bài viết đầu tiên về Express, chúng ta trả lời câu hỏi "Node là gì?" và "Express là gì?" và cho bạn một cái nhìn tổng quan về thứ làm nên sự đặc biệt của Express web framework. Chúng ta sẽ điểm qua các tính năng chính và cho bạn thấy những thành phần dựng nên một ứng dụng Express (mặc dù hiện tại bạn chưa có môi trường phát triển để thử nó).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Cài đặt một môi trường phát triển Node (Express)</a></dt>
+ <dd>Bây giờ bạn đã biết Express là gì, chúng ta sẽ xem cách để cài đặt một môi trường Node/Express trên Windows, Linux (Ubuntu), và macOS. Bất kỳ hệ điều hành phổ biến nào bạn đang sử dụng, bài viết này sẽ cho bạn những thứ cần thiết để có thể bắt đầu phát triển ứng dụng Express.</dd>
+ <dt><a href="/vi/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Hướng dẫn Express: Trang web Local Library</a></dt>
+ <dd>Bài đầu tiên trong chuỗi hướng dẫn thực hành giải thích những gì bạn sẽ học, và tổng quan về ví dụ trang web "local library" mà chúng ta sẽ làm việc và phát triển trong các bài tiếp theo.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Hướng dẫn Express Phần 2: Tạo cấu trúc cho dự án</a></dt>
+ <dd>Bài này hướng dẫn bạn cách tạo một "bộ khung" cho dự án web, là nơi để bạn tiếp tục phát triển định tuyến (routes) cho các trang, templates/views và cơ sở dữ liệu.</dd>
+ <dt><a href="https://developer.mozilla.org/vi/docs/Learn/Server-side/Express_Nodejs/mongoose">Hướng dẫn Express Phần 3: Sử dụng cơ sở dữ liệu (với Mongoose)</a></dt>
+ <dd>Bài này giới thiệu tóm tắt về cơ sở dữ liệu cho Node/Express. Sau đó là cách chúng ta sử dụng <a href="http://mongoosejs.com/">Mongoose</a> để truy cập cơ sở dữ liệu cho trang web <em>LocalLibrary</em>. Bài viết giải thích cách lược đồ đối tượng và các mô hình được khai báo, các trường chính và xác thực cơ bản, cũng như cho biết một số cách chính để truy cập dữ liệu mô hình.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Hướng dẫn Express Phần 4: Routes và controllers</a></dt>
+ <dd>Trong phần này chúng ta sẽ thiếp lập định tuyến (code xử lý URL) với các hàm xử lý "?giả" cho các tài nguyên cần thiết trong trang web <em>LocalLibrary</em>. Khi hoàn thành, chúng ta sẽ có một cấu trúc mô-đun để đặt code xử lý định tuyến, sau đó có thể mở rộng bằng các hàm xử lý thật ở các bài sau. Từ đó chúng ta có được hiểu biết tốt về cách tạo mô-đun định tuyến sử dụng Express.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Hướng dẫn Express Phần 5: Hiển thị dữ liệu thư viện</a></dt>
+ <dd>Bây giờ chúng ta đã sẵn sàng để thêm các trang hiển thị sách và dữ liệu của trang web <em>LocalLibrary</em>. Những trang này gồm một trang chủ để xem có bao nhiêu bản ghi trên mỗi loại mô hình, các trang xem danh sách, chi tiết cho tất cả các mô hình. Chúng ta sẽ thực hành theo cách lấy các bản ghi từ cơ sở dữ liệu và dùng các bản mẫu (templates).</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Hướng dẫn Express Phần 6: Làm việc với forms</a></dt>
+ <dd>Trong bài này chúng ta sẽ xem cách làm việc với <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> trong Express, sử dụng Pug và cách để viết form tạo, cập nhật, xoá tài liệu từ cơ sở dữ liệu.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Hướng dẫn Express Phần 7: Triển khai sử dụng</a></dt>
+ <dd>Bây giờ bạn đã tạo xong trang web <em>LocalLibrary</em> tuyệt vời, bạn sẽ muốn cài đặt nó lên một máy chủ public để các nhân viên thư viện và các thành viên có thể truy cập được từ Internet. Bài này cung cấp tổng quan về cách làm sao để bạn có thể tìm một máy chủ để triển khai trang web của bạn và những gì bạn cần để giúp trang web sẵn sàng sử dụng.</dd>
+</dl>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Cài đặt LocalLibrary trên PWS/Cloud Foundry</a></dt>
+ <dd>Bài này cung cấp một minh họa thực tế cách để cài đặt <em>LocalLibrary</em> trên <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — một dịch vụ nguồn mở với đầy đủ tính năng thay thế cho Heroku, dịch vụ cloud PaaS đã sử dụng ở Phần 7 của hướng dẫn bên trên. PWS/Cloud Foundry chắc chắn đáng giá để dùng nếu bạn đang tìm một sự thay thế cho Heroku (hoặc một dịch vụ cloud PaaS khác), hoặc đơn giản là muốn thử một thứ gì đó khác.</dd>
+</dl>
+
+<h2 id="Thêm_các_bài_hướng_dẫn">Thêm các bài hướng dẫn</h2>
+
+<div>
+<p>Các bài hướng dẫn kết thúc tại đó (đến hiện tại). Nếu bạn muốn mở rộng, các chủ đề thú vị khác để nói đến là:</p>
+
+<ul>
+ <li>Sử dụng phiên (sessions)</li>
+ <li>Xác thực người dùng</li>
+ <li>Định quyền người dùng và các quyền hạn</li>
+ <li>Kiểm thử một ứng dụng web Express</li>
+ <li>An ninh cho các ứng dụng web Express.</li>
+</ul>
+
+<p>Và đương nhiên sẽ rất tuyệt nếu có một bài tập đánh giá!</p>
+</div>
diff --git a/files/vi/learn/server-side/express_nodejs/mongoose/index.html b/files/vi/learn/server-side/express_nodejs/mongoose/index.html
new file mode 100644
index 0000000000..fdf6531d75
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/mongoose/index.html
@@ -0,0 +1,800 @@
+---
+title: 'Hướng dẫn Express Phần 3: Sử dụng Database (với Mongoose)'
+slug: Learn/Server-side/Express_Nodejs/mongoose
+translation_of: Learn/Server-side/Express_Nodejs/mongoose
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Bài viết này giới thiệu tổng quan về cơ sở dữ liệu và cách dùng chúng với các ứng dụng Node/Express. Sau đó nó sẽ chỉ cho ta thấy cách sử dụng <a href="http://mongoosejs.com/">Mongoose</a> để tạo ra kết nối đến cơ sở dữ liệu cho trang web <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. Nó giải thích cách mà schema và model của đối tượng được định nghĩa, các kiểu trường chính, và cách thức xác thực cơ bản. Nó còn trình bày một số cách chính để bạn có thể truy cập tới dữ liệu của model.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Bài viết trước:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Có thể thiết kế và tự tạo model của riêng mình thông qua Mongoose.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Khái_quát">Khái quát</h2>
+
+<p>Thủ thư sẽ dùng trang web Local Library để lưu trữ thông tin về sách và người mượn, trong khi các bạn đọc sẽ dùng nó để kiếm sách, tìm xem có bao nhiêu cuốn có sẵn, và tiếp tục như thế hoặc làm thủ tục mượn sách. Để có thể lưu trữ và truy xuất thông tin một cách hiệu quả, ta sẽ lưu trữ tất cả trong một <em>cơ sở dữ liệu</em>.</p>
+
+<p>Các ứng dụng Express có thể dùng nhiều loại cơ sở dữ liệu khác nhau, và có khá là nhiều hướng tiếp cận để bạn có thể thi hành <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (CRUD). Bài viết này sẽ cung cấp khái quát một số lựa chọn có thể áp dụng, và sẽ đi vào phân tích một phương pháp nhất định.</p>
+
+<h3 id="Tôi_có_thể_dùng_cơ_sở_dữ_liệu_nào">Tôi có thể dùng cơ sở dữ liệu nào?</h3>
+
+<p>Ứng dụng<em> Express</em> có thể dùng bất cứ cơ sở dữ liệu nào được hỗ trợ bởi <em>Node</em> (Chính <em>Express</em> không đưa ra bất cứ đặc tả chỉ tiết hành vi hay ràng buộc nào về hệ quản trị cơ sở dữ liệu). Thành ra có <a href="https://expressjs.com/en/guide/database-integration.html">rất nhiều thứ</a> để bạn thoả sức chọn lựa, bao gồm PostgreSQL, MySQL, Redis, SQLite, và MongoDB.</p>
+
+<p>Khi chọn một cơ sở dữ liệu, bạn nên cân nhắc những thứ như là độ khó, hiệu năng, dễ dàng bảo trì, chi phí, sự hỗ trợ của cộng đồng, vân vân và mây mây. Do chưa có cơ sở dữ liệu nào đạt được danh hiệu 'tốt nhất', nên ta có thể lựa chọn hầu như mọi giải pháp vừa kể trên cho một trang cỡ nhỏ tới vừa như trang Local Library của chúng ta.</p>
+
+<p>Để biết thêm chi tiết để tiện đường lựa chọn: <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Tài liệu của Express).</p>
+
+<h3 id="Cách_nào_tốt_nhất_để_thao_tác_với_cơ_sở_dữ_liệu">Cách nào tốt nhất để thao tác với cơ sở dữ liệu?</h3>
+
+<p>Có hai hướng tiếp cận để tương tác với một cơ sở dữ liệu: </p>
+
+<ul>
+ <li>Sử dụng ngôn ngữ truy vấn của riêng cơ sở dữ liệu đó (ví dụ như SQL)</li>
+ <li>Sử dụng Object Data Model ("ODM") / Object Relational Model ("ORM"). ODM/ORM đại diện cho dữ liệu của trang web dưới dạng đối tượng trong JavaScript, sau đó ánh xạ tới cơ sở dữ liệu bên dưới. Một vài ORMs được gắn với một cơ sở dữ liệu nào đó, trong khi số khác chỉ là một cầu nối giữa cơ sở dữ liệu và phần code backend.</li>
+</ul>
+
+<p>Sử dụng ngôn ngữ truy vấn được hỗ trợ bởi cơ sở dữ liệu (như là SQL) sẽ đạt được <em>hiệu suất</em> cao nhất. ODM thường chậm hơn bởi nó phải thông dịch mã để có thể truy vấn giữa đối tượng và định dạng của cơ sở dữ liệu, mà không dùng được các truy vấn hiệu quả nhất của cơ sở dữ liệu (điều này càng nghiêm trọng hơn khi ORM được sử dụng cho nhiều dạng cơ sở dữ liệu khác nhau, và phải tạo ra nhiều điều khoản lằng nhằng hơn đối với lượng tính năng được cơ sở dữ liệu hỗ trợ).</p>
+
+<p>Điểm mạnh của ORM là lập trình viên có thể giữ tư duy như với đối tượng của JavaScript thay vì phải ngôn ngữ thuần tuý viết riêng cho cơ sở dữ liệu — điều này càng đúng khi bạn phải làm việc với nhiều loại cơ sở dữ liệu (trên cùng hoặc khác trang web). ORM còn cung cấp các tính năng để thực hiện xác thực và kiểm tra dữ liệu.</p>
+
+<div class="note">
+<p><strong>Mẹo:</strong>  Sử dụng ODM/ORMs thường giúp giảm thiểu chi phí phát triển và bảo trì! Trừ khi bạn đã quá thân thuộc với ngôn ngữ truy vấn thuần tuý hoặc hiệu suất là trên hết, bạn nên cân nhắc đến việc sử dụng ODM.</p>
+</div>
+
+<h3 id="Tôi_nên_dùng_ORMODM_nào">Tôi nên dùng ORM/ODM nào?</h3>
+
+<p>Có nhiều giải pháp cho ODM/ORM có sẵn trên trang quản lý gói NPM (tìm theo nhãn <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> và <a href="https://www.npmjs.com/browse/keyword/orm">orm</a>!).</p>
+
+<p>Vào thời điểm viết bài này có một số giải pháp phổ biến như sau:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose là một công cụ mô hình hoá đối tượng <a href="https://www.mongodb.org/">MongoDB</a>, được thiết kế để làm việc trên môi trường bất đồng bộ.</li>
+ <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: Một ORM trích xuất từ <a href="http://sailsjs.com/">Sails</a> framework, có nền tảng là Express. Nó cung cấp một bộ API tiêu chuẩn để truy cập vào vô số kiểu cơ sở dữ liệu khác nhau, bao gồm Redis, mySQL, LDAP, MongoDB, và Postgres.</li>
+ <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Trên nền promise và giao diện callback truyền thống, cung cấp hỗ trợ transaction, eager/nested-eager relation loading, sự kết hợp đa hình, and hỗ trợ quan hệ một-một, một-nhiều, nhiều-nhiều. Làm việc với PostgreSQL, MySQL, và SQLite3.</li>
+ <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Vận dụng hết sức mạnh của SQL và hạ tầng cơ sở dữ liệu bên dưới (hỗ trợ SQLite3, Postgres, và MySQL) theo cách dễ dàng nhất có thể.</li>
+ <li>
+  <p><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> là một ORM nền Promise dành cho Node.js và io.js. Nó hỗ trợ biên dịch PostgreSQL, MySQL, MariaDB, SQLite và MSSQL và hỗ trợ giao tác cứng, các quan hệ, read replication và nhiều hơn thế.</p>
+ </li>
+ <li>
+  <p><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2 </a>là Trình quản lý mối quan hệ đối tượng cho NodeJS. Nó hỗ trợ MySQL, SQLite và Progress, giúp làm việc với cơ sở dữ liệu bằng cách sử dụng phương pháp hướng đối tượng.</p>
+ </li>
+ <li>
+  <p><a href="http://1602.github.io/jugglingdb/">JugglingDB </a>là ORM DB chéo cho NodeJS, cung cấp giao diện chung để truy cập hầu hết các định dạng cơ sở dữ liệu phổ biến. Hiện đang hỗ trợ MySQL, SQLite3, Postgres, MongoDB, Redis và js-memory-Storage (công cụ tự viết để chỉ sử dụng thử nghiệm).</p>
+ </li>
+</ul>
+
+<p>Như một luật ngầm định, bạn nên cân nhắc cả tính năng được công bố cũng như "hoạt động cộng đồng" (tải xuống, sự đóng góp, báo lỗi, chất lượng của tài liệu, vân vân và mây mây) khi lựa chọn một giải pháp. Vào thời điểm viết bài thì Mongoose là một ORM phổ biến nhất, và là lựa chọn hợp lý nếu bạn dùng MongoDB làm cơ sở dữ liệu của mình.</p>
+
+<h3 id="Sử_dụng_Mongoose_và_MongoDb_cho_LocalLibrary">Sử dụng Mongoose và MongoDb cho LocalLibrary</h3>
+
+<p>Đối với ví dụ <em>Local Library</em> (và cho cả phần còn lại của bài viết này) ta sẽ sử dụng <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> để truy cập dữ liệu thư viện của chúng ta. Mongoose hoạt động như một frontend của <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, cơ sở dữ liệu mở dạng <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> sử dụng mô hình dữ liệu hướng document. Một “collection” và “documents”, trong cơ sở dữ liệu MongoDB, <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">tương tự với</a> một “table” và “row” trong cơ sở dữ liệu quan hệ.</p>
+
+<p>ODM và kết hợp cơ sở dữ liệu này cực kì phổ biến trong cộng đồng Node, phần lớn là bởi kho chứa document và hệ thống truy vấn khá là giống với JSON, vã dĩ nhiên rất đỗi thân quen với các lập trình viên JavaScript.</p>
+
+<div class="note">
+<p><strong>Mẹo:</strong> Bạn không cần phải biết gì về MongoDB để có thể sử dụng được Mongoose, mặc dù vài phần trong <a href="http://mongoosejs.com/docs/guide.html">tài liệu của Mongoose</a> <em>sẽ</em> dễ đọc hiểu hơn nếu bạn đã quen với MongoDB rồi.</p>
+</div>
+
+<p>Phần còn lại của bài viết này hướng dẫn cách để định nghĩa và truy cập schema và model của Mongoose thông qua ví dụ làm trang web cho <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>.</p>
+
+<h2 id="Thiết_kế_model_LocalLibrary">Thiết kế model LocalLibrary</h2>
+
+<p>Trước khi nhảy bổ vào viết code cho model, sẽ tốt hơn nếu ta dành vài phút để nghĩ về dữ liệu ta cần phải lưu trữ và mối quan hệ giữa các đối tượng khác nhau.</p>
+
+<p>Chúng ta biết rằng chúng ta cần phải lữu trữ dữ liệu về sách (tựa đề, tóm tắt, tác giả, thể loại, mã số tiêu chuẩn quốc tế cho sách) và sẽ có khá nhiều cuốn giống nhau (với mã số quốc tế riêng biệt, tình trạng, vân vân.). Có lẽ ta sẽ cần lưu trữ nhiều thông tin về tác giả hơn chỉ là tên của người đó, và có vô số tác giả trùng hoặc có tên na ná nhau. Chúng ta muốn phân loại thông tin dựa theo tựa đề, tác giả, thể loại, và kiểu sách.</p>
+
+<p>Công cuộc thiết kế model yêu cầu thiết kế các mô hình riêng rẽ cho từng "object" (nhóm các thông tin có liên quan với nhau). Trong trường hợp này thì các object ấy hẳn là sách, các thuộc tính của sách, và tác giả.</p>
+
+<p>Bạn chắc hẳn sẽ muốn biểu diễn mô hình dưới dạng danh sách liệt kê (ví dụ như một danh sách các lựa chọn), thay vì code cứng tất tần tật — việc này được đề nghị khi các lựa chọn vẫn chưa được liệt kê hết hoặc có thể bị thay đổi. Ứng viên sáng giá cho việc mô hình hoá này chính là thể loại sách (ví dụ như Khoa học Viễn tưởng, Ngôn tình, hoặc gì đó tương tự.)</p>
+
+<p>Khi đã quyết định được các mô hình và trường dữ liệu, ta cần phải suy ngẫm về mối quan hệ giữa chúng.</p>
+
+<p>Để làm tốt việc này, ta sẽ dùng biểu đồ liên hệ UML như bên dưới để biểu diễn các model ta sắp định nghĩa ra (trong các hộp). Như đã nói ở trên, ta vừa tạo ra model cho sách (chi tiết cơ bản nhất cho sách), phần tử của sách (lượng bản sách còn trong hệ thống), và tác giả. Chúng ta cũng vừa quyết định sẽ tạo thêm model cho thể loại, để giá trị của nó thay đổi động. Ta cũng vừa quyết định sẽ không tạo mô hình cho <code>BookInstance:status</code> — chúng ta sẽ code cứng phần này đến một giá trị có thể chấp nhận được bởi ta không mong muốn giá trị của nó bị thay đổi. Bạn có thể thấy trong mỗi hộp là tên của mô hình, tên của các trường và kiểu dữ liệu tương ứng, đồng thời cả các thuộc tính và kiểu trả về nữa.</p>
+
+<p>Biểu đồ còn chỉ ra mối quan hệ giữa các mô hình, bao gồm cả <em>bội số</em>. Bội số là các con số nhỏ nhỏ nằm trên các đường thẳng nối các hộp lại với nhau (lớn nhất và nhỏ nhất) để chỉ ra độ liên hệ trong các mối quan hệ giữa các mô hình với nhau. Láy ví dụ như trong hình dưới, những đoạn kẻ nối giữa các hộp biểu diễn rằng <code>Book</code> và <code>Genre</code> liên quan đến nhau. Con số nằm gần với mô hình <code>Book</code> chỉ ra rằng Book phải có từ 0 đến nhiều <code>Genre</code> (bao nhiêu tuỳ thích), trong khi con số nằm ở đầu đoạn bên kia của <code>Genre</code> lại chỉ ra rằng nó có 0 hoặc nhiều liên hệ với Book.</p>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Như đã nói trong <a href="#related_documents">Mongoose primer</a> phía dưới, thường sẽ tốt hơn nếu có một trường riêng để định nghĩa mối quan hệ giữa documents/models chỉ trong <em>một</em> mô hình (bạn vẫn có thể tìm thấy mối quan hệ ngược lại bằng cách tìm kiếm <code>_id</code> liên quan trong các mô hình khác). Bên dưới biểu diễn mối quan hệ giữa Book/Genre and Book/Author trong Book schema, và mối quan hệ giữa Book/BookInstance trong BookInstance Schema. Việc lựa chọn này hơi cảm tính — ta hoàn toàn có thể định nghĩa các trường trong một schema khác.</p>
+</div>
+
+<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Phần tiếp theo cung cấp kiến thức cơ bản giải thích cách mô hình được định nghĩa và sử dụng. Ta sẽ tìm cách để xây dựng đống mô hình vừa vẽ ra trong biểu đồ trên.</p>
+</div>
+
+<h2 id="Mongoose_primer">Mongoose primer</h2>
+
+<p>Phần này giới thiệu khái quát cách để kết nối Mongoose với một cơ sở dữ liệu MongoDB, cách định nghĩa một schema và một model, và cách viết vài câu truy vấn đơn giản. </p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Cái primer này "bị ảnh hưởng mạnh" bởi <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> trên <em>npm</em> và <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p>
+</div>
+
+<h3 id="Cài_đặt_Mongoose_và_MongoDB">Cài đặt Mongoose và MongoDB</h3>
+
+<p>Mongoose được cài đặt vào trong project của bạn (<strong>package.json</strong>) giống hệt như các dependency khác — dùng NPM. Để cài đặt nó, chạy câu lệnh sau trong thư mục project của bạn:</p>
+
+<pre class="brush: bash"><code>npm install mongoose</code>
+</pre>
+
+<p>Sau khi cài xong, <em>Mongoose</em> sẽ tự động thêm mọi dependencies của nó, bao gồm cả driver cơ sở dữ liệu cho MongoDB, nhưng nó sẽ không cài đặt MongoDB đâu nhé. Nếu bạn muốn cài đặt một máy chủ MongoDB thì bạn có thể <a href="https://www.mongodb.com/download-center">tải xuống bộ cài tại đây</a>, dành cho nhiều vô số hệ điều hành khác nhau và cài đặt nó trên hệ thống của mình. Bạn cũng có thể sử dụng MongoDB trên đám mây.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Trong bài viết này, ta sẽ sử dụng mLab, một <em>cơ sở dữ liệu được cung cấp dưới dạng dịch vụ</em> trên nền tảng điện toán đám mây và chọn <a href="https://mlab.com/plans/pricing/">sandbox tier</a> nhé. Cái này khá hợp với khâu phát triển, và không phụ thuộc vào việc "cài đặt" hệ điều hành (cơ-sở-dữ-liệu-cung-cấp-dưới-dạng-dịch-vụ là một hướng tiếp cận nếu sử dụng trong dự án thật).</p>
+</div>
+
+<h3 id="Kết_nối_với_MongoDB">Kết nối với MongoDB</h3>
+
+<p><em>Mongoose</em> yêu cầu một kết nối tới cơ sở dữ liệu MongoDB. Bạn có thể <code>require()</code> và kết nối cục bộ tới cơ sở dữ liệu thông qua <code>mongoose.connect()</code>, như bên dưới.</p>
+
+<pre class="brush: js">//Nhập mô-đun mongoose
+var mongoose = require('mongoose');
+
+//Thiết lập một kết nối mongoose mặc định
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB);
+//Ép Mongoose sử dụng thư viện promise toàn cục
+mongoose.Promise = global.Promise;
+//Lấy kết nối mặc định
+var db = mongoose.connection;
+
+//Ràng buộc kết nối với sự kiện lỗi (để lấy ra thông báo khi có lỗi)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>Bạn có thể lấy ra đối tượng mặc định <code>Connection</code> với <code>mongoose.connection</code>. Ngay khi đã kết nối, sự kiện sẽ nổ ra trên thuộc tính <code>Connection</code>.</p>
+
+<div class="note">
+<p><strong>Mẹo:</strong> Nếu bạn muốn thêm mới các kết nối khác thì có thể dùng <code>mongoose.createConnection()</code>. Vẫn dùng chung định dạng URI (bao gồm máy chủ, cơ sở dữ liệu, cổng, lựa chọn khác.) như <code>connect()</code> và trả về một đối tượng <code>Connection</code>).</p>
+</div>
+
+<h3 id="Định_nghĩa_và_tạo_ra_các_model">Định nghĩa và tạo ra các model</h3>
+
+<p>Model được <em>định nghĩa </em>thông qua giao diện <code>Schema</code>. Schema định nghĩa các trường được lưu trong mỗi document đi kèm với điều kiện xác thực và giá trị mặc định cho chúng. Hơn nữa, bạn có thể khởi tạo các thuộc tính tĩnh và phương thức hỗ trợ để làm việc với kiểu dữ liệu của bạn dễ dàng hơn, và cả các đặc tính ảo để có thể dùng như bất cứ trường nào, mà không bị lưu vào trong cơ sở dữ liệu (ta sẽ bàn về vấn đề này sau).</p>
+
+<p>Schema sau đó được "biên dịch" thành mô hình qua phương thức <code>mongoose.model()</code>. Một khi đã có mô hình thì bạn có thể dùng nó để tìm, thêm, sửa, và xoá các đối tượng cùng kiểu.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Mỗi mô hình có liên kết tới một <em>bộ sưu tập</em> các<em> tài liệu</em> trong cơ sở dữ liệu MongoDB. Documents sẽ chứa các trường/kiểu schema được định nghĩa trong mô hình <code>Schema</code>.</p>
+</div>
+
+<h4 id="Định_nghĩa_schema">Định nghĩa schema</h4>
+
+<p>Đoạn code bên dưới trình bày cách cách thức tạo ra một Schema đơn giản. Đầu tiên bạn <code>require()</code> mongoose, rồi dùng phương thức khởi tạo của Schema để tạo ra một biến schema, định nghĩa một vài trường trong tham số truyền vào của phương thức khởi tạo.</p>
+
+<pre class="brush: js">//Require Mongoose
+var mongoose = require('mongoose');
+
+//Định nghĩa một schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+</pre>
+
+<p>Trong trường hợp trên ta chỉ có 2 trường, một string và một date. Trong phần tiếp theo, ta sẽ thêm một vài trường khác, xác thực, và một số phương thức khác.</p>
+
+<h4 id="Thêm_mới_một_mô_hình">Thêm mới một mô hình</h4>
+
+<p>Mô hình được tạo ra từ schema qua phương thức <code>mongoose.model()</code>:</p>
+
+<pre class="brush: js">// Định nghĩa schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+
+<strong>// Biên dịch mô hình từ schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn (Mongoose sẽ khởi tạo một collection cho model <em>SomeModel</em> ở phía trên), và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Khi đã có các model class, bạn có thể sử dụng chúng để thêm, sửa, hoặc xoá các bản ghi, và để chạy các câu truy vấn lấy tất cả các bản ghi hoặc tạo các tập hợp con cho một số lượng bản ghi nhất định. Ta sẽ tìm hiểu việc này trong phần <a href="#">Sử dụng mô hình</a>, và khi ta tạo khung nhìn.</p>
+</div>
+
+<h4 id="Kiểu_Schema_(các_trường)">Kiểu Schema (các trường)</h4>
+
+<p>Một schema có thể có số trường thông tin tuỳ ý — mỗi trường đại diện cho một document lưu trong <em>MongoDB</em>. Schema trong ví dụ bên dưới trình bày các kiểu đơn giản của các trường cũng như cách định nghĩa chúng.</p>
+
+<pre class="brush: js">var schema = new Schema(
+{
+  name: <strong>String</strong>,
+  binary: <strong>Buffer</strong>,
+  living: <strong>Boolean</strong>,
+  updated: { type: <strong>Date</strong>, default: Date.now },
+  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
+  mixed: <strong>Schema.Types.Mixed</strong>,
+  _someId: <strong>Schema.Types.ObjectId</strong>,
+  array: <strong>[]</strong>,
+  ofString: [<strong>String</strong>], // Bạn có thể tạo mảng cho các trường khác
+  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
+})</pre>
+
+<p>Hầu hết các <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (đống miêu tả sau từ “type:” hoặc sau tên trường) đều tự định nghĩa chính nó. Ngoại trừ:</p>
+
+<ul>
+ <li><code>ObjectId</code>: Đại diện cho các thuộc tính đặc trưng của mô hình trong cơ sở dữ liệu. Chẳng hạn, một cuốn sách có thể dùng thứ này để đại diện cho tác giả của nó. Nó còn sẽ chứa cả ID đặc trưng (<code>_id</code>) cho đối tượng đặc trưng. Ta có thể dùng phương thức <code>populate()</code> để lấy các thông tin liên quan nếu cần thiết.</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: Một kiểu schema chồng chập.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: Mảng. Bạn có thể sử dụng các phương thức cho mảng riêng của JavaScript trên các mô hình này (push, pop, unshift, shift, reduce, vân vân và mây mây.). Ví dụ phía trên có một mảng đối tượng không định kiểu và một mảng đối tượng kiểu <code>String</code>, bạn vẫn có thể định nghĩa một mảng tuỳ ý kiểu đối tượng.</li>
+</ul>
+
+<p>Đoạn code cũng chỉ ra hai cách để khai báo một trường:</p>
+
+<ul>
+ <li><em>Tên</em> và <em>kiểu</em> của trường là một cặp khoá-giá trị (ví dụ như với các trường <code>name</code>, <code>binary</code> và <code>living</code>).</li>
+ <li><em>Tên</em> trường chứa một đối tượng gồm có <code>type</code>, và nhiều <em>lựa chọn</em> khác. Lựa chọn bao gồm những thứ như là:
+  <ul>
+   <li>giá trị mặc định.</li>
+   <li>công cụ xác thực định sẵn (như giá trị max/min) và các hàm tuỳ chỉnh.</li>
+   <li>Trường ấy có bắt buộc (required) hay không</li>
+   <li>Trường kiểu <code>String</code> nên tự động ở kiểu chữ nhỏ, chữ to, hoặc tỉa gọn (ví dụ <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Để biết thêm chi tiết, mời bạn xem thêm <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Tài liệu của Mongoose).</p>
+
+<h4 id="Xác_thực">Xác thực</h4>
+
+<p>Mongoose cung cấp một số hàm xác thực định sẵn và tuỳ chỉnh, và các hàm xác thực đồng bộ cũng như bất đồng bộ. Nó cho phép bạn đặc tả cả phạm vi chấp nhận hoặc giá trị và thông báo lỗi khi hàm xác thực gặp phải sự cố trong mọi trường hợp.</p>
+
+<p>Các hàm xác thực định sẵn bao gồm:</p>
+
+<ul>
+ <li>Tất cả các <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> đều có hàm xác thực là <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a>. Hàm này xác minh rằng liệu trường dữ liệu đó có bắt buộc phải được cung cấp nếu muốn lưu lại vào trong document hay không.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> có hai hàm là <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> và <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a>.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> có:
+  <ul>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: đặc tả tập các giá trị được cho phép truyền vào trường tương ứng.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: đặc tả một regex để tạo luật cho xâu truyền vào.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> và <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> cho xâu truyền vào.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Ví dụ bên dưới (hơi khác một chút so với tài liệu của Mongoose) chỉ ra cách để thêm các hàm xác minh và thông báo lỗi:</p>
+
+<pre class="brush: js"><code>
+    var breakfastSchema = new Schema({
+      eggs: {
+        type: Number,
+        min: [6, 'Too few eggs'],
+        max: 12
+        required: [true, 'Why no eggs?']
+      },
+      drink: {
+        type: String,
+        enum: ['Coffee', 'Tea', 'Water',]
+      }
+    });
+</code></pre>
+
+<p>Để biết thêm thông tin chi tiết về các hàm xác minh, hãy vào <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (tài liệu của Mongoose) để tìm đọc.</p>
+
+<h4 id="Thuộc_tính_ảo">Thuộc tính ảo</h4>
+
+<p>Thuộc tính ảo là các thuộc tính của document mà bạn có thể lấy ra và đặt lại mà không làm ảnh hưởng tới MongoDB. Hàm lấy ra hiệu quả cho việc định dạng lại hoặc kết hợp các trường, trong khi hàm đặt lại lại hữu dụng cho việc phân tách một giá trị riêng lẻ thành nhiều giá trị trong cơ sở dữ liệu. Ví dụ trong tài liệu khởi tạo (và huỷ tạo) một thuộc tính ảo tên đầy đủ từ trường họ và tên, điều đó sẽ dễ dàng và sạch sẽ hơn thay vì tạo ra một trường họ tên mỗi khi có ai đó sử dụng mẫu.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Ta sẽ dùng thuộc tính ảo trong thư viện để định nghĩa một URL đặc trưng cho từng bản ghi của mô hình thông qua một đường dẫn và giá trị của mỗi bản ghi <code>_id</code> của mỗi bản ghi.</p>
+</div>
+
+<p>Để biết thêm chi tiết hãy vào <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (tài liệu của Mongoose).</p>
+
+<h4 id="Phương_thức_và_câu_truy_vấn_trợ_giúp">Phương thức và câu truy vấn trợ giúp</h4>
+
+<p>Một schema có thể còn có <a href="http://mongoosejs.com/docs/guide.html#methods">phương thức biến</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">phương thức tĩnh</a>, và <a href="http://mongoosejs.com/docs/guide.html#query-helpers">hỗ trợ truy vấn</a>. Phương thức biến và phương thức tĩnh gần như tương tự nhau, điểm khác biệt duy nhất là phương thức tĩnh liên kết với một bản ghi xác định và có quyền truy cập tới đối tượng hiện tại. Hỗ trợ truy vấn cho phép bạn mở rộng <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> của mongoose (ví dụ như, cho phép bạn thêm câu truy vấn "byName" sau các phương thức <code>find()</code>, <code>findOne()</code> và <code>findById()</code>).</p>
+
+<h3 id="Sử_dụng_mô_hình">Sử dụng mô hình</h3>
+
+<p>Ngay khi đã có một schema, bạn có thể dùng nó để tạo ra các mô hình. Mô hình đại diện cho một bộ sưu tập các tài liệu trong cơ sở dữ liệu mà bạn có thể tìm kiếm, trong khi các phần tử của mô hình đại diện cho từng tài liệu mà bạn có thể lưu trữ và truy xuất.</p>
+
+<p>Chúng ta chỉ có thể tìm hiểu sơ qua như trên thôi. Nếu muốn chi tiết hơn thì hãy vào xem: <a href="http://mongoosejs.com/docs/models.html">Models</a> (tài liệu của Mongoose).</p>
+
+<h4 id="Thêm_mới_và_chỉnh_sửa_tài_liệu">Thêm mới và chỉnh sửa tài liệu</h4>
+
+<p>Để thêm mới một bản ghi, bạn có thể định nghĩa một phần tử của mô hình và sau đó dùng lời gọi <code>save()</code>. Ví dụ bên dưới chỉ ra rằng SomeModel là một đối tượng (chỉ có một trường là "name") mà ta vừa tạo ra từ schema của mình.</p>
+
+<pre class="brush: js"><code>// Thêm mới một phần tử của mô hình SomeModel
+var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' });
+
+// Lưu phần tử vừa thêm mới lại, thông qua việc truyền vào một hàm callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+</code></pre>
+
+<p>Việc thêm bản ghi (đi kèm với sửa, xoá, và tìm kiếm) là các công việc bất đồng bộ — bạn phải truyền vào một hàm callback sau khi công việc hoàn tất. API sử dụng quy ước lỗi-trước, thế nên tham số thứ nhất trong hàm callback luôn là một giá trị lỗi (hoặc null). Nếu API trả về kết quả nào đó, nó sẽ được truyền vào qua tham số thứ hai.</p>
+
+<p>Bạn cũng có thể sử dụng <code>create()</code> để vừa định nghĩa một phần tử của mô hình vừa lưu lại nó luôn. Hàm callback sẽ trả về một lỗi ứng với tham số thứ nhất và phần tử của mô hình vừa khởi tạo qua tham số thứ hai.</p>
+
+<pre class="brush: js">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // lưu!
+});</code></pre>
+
+<p>Mỗi mô hình đều có một kết nối liên quan  (kết nối sẽ mặc định nếu dùng lệnh <code>mongoose.model()</code>). Bạn thêm mới một kết nối và gọi lệnh <code>.model()</code> để tạo thêm tài liệu trên một cơ sở dữ liệu khác.</p>
+
+<p>Bạn có thể truy cập vào trường của bản ghi mới thông qua cú pháp chấm (.) , và thay đổi giá trị ở trong. Bạn sẽ phải gọi <code>save()</code> hoặc <code>update()</code> để lưu lại giá trị vừa chỉnh sửa vào cơ sở dữ liệu.</p>
+
+<pre class="brush: js">// Truy cập vào trường dữ liệu của bản ghi qua cú pháp (.)
+console.log(<code>awesome_instance.name</code>); //sẽ in ra '<code>also_awesome</code>'
+
+// Thay đổi bản ghi bằng cách chỉnh sửa trường thông tin, sau đó gọi lệnh save().
+<code>awesome_instance</code>.name="New cool name";
+<code>awesome_instance.save(function (err) {
+   if (err) return handleError(err); // lưu!
+   });</code>
+</pre>
+
+<h4 id="Tìm_kiếm_các_bản_ghi">Tìm kiếm các bản ghi</h4>
+
+<p>Bạn có thể tìm kiếm các bản ghi bằng các phương thức truy vấn, viết các câu truy vấn như đối với một tài liệu JSON. Đoạn code phía dưới trình bày cách tìm kiếm các vận động viên chơi ten-nít trong cơ sở dữ liệu, chỉ trả về các trường như <em>tên</em> và <em>tuổi </em>của vận động viên. GIờ ta sẽ chỉ xác định ra một trường (thể thao) bạn có thể thêm bao nhiêu tiêu chí tuỳ ý, xác định thêm các tiêu chí với regex, hoặc loại bỏ tất cả các điều kiện để trả về tất cả các vận động viên.</p>
+
+<pre class="brush: js"><code>var Athlete = mongoose.model('Athlete', yourSchema);
+
+// tìm tất cả các vận động viên chơi tennis, chọn hai trường 'name' và 'age'
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' chứa danh sách các vận động viên phù hợp với tiêu chí đã đề ra.
+})</code></pre>
+
+<p>Nếu bạn ném vào môt hàm callback, như ở trên, câu truy vấn sẽ được thực thi ngay lập tức. Hàm callback sẽ được gọi khi câu truy vấn hoàn tất.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Tất cả các hàm callback trong Mongoose sử dụng mẫu <code>callback(error, result)</code>. Nếu có lỗi xảy ra khi thực hiện câu truy vấn, tham số <code>error</code> sẽ chứa tất cả các lỗi, và <code>result</code> sẽ trở thành null. Nếu câu truy vấn hợp lệ, tham số <code>error</code> sẽ trở thành null, và <code>result</code> sẽ chứa đựng kết quả của câu truy vấn.</p>
+</div>
+
+<p>Nếu bạn không truyền vào một hàm callback nào thì API sẽ trả về một giá trị kiểu <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. Bạn có thể sử dụng đối tượng query này để kéo dài câu truy vấn trước khi thực thi nó (thông qua việc truyền vào một hàm callback) sau sử dụng phương thức <code>exec()</code>.</p>
+
+<pre class="brush: js"><code>// tìm kiếm tất cả các vận động viên
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// chọn ra hai trường 'name' và 'age'
+query.select('name age');
+
+// giới hạn kết quả lại 5 bản ghi
+query.limit(5);
+
+// sắp xếp theo tên
+query.sort({ age: -1 });
+
+// thực thi câu truy vấn
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes chứa một danh sách 5 vận động viên chơi tennis được xếp theo tên
+})</code></pre>
+
+<p>Ở trên ta đưa tất cả điều kiện truy vấn vào trong phương thức <code>find()</code>. Thay vì vậy ta cũng có thể sử dụng hàm <code>where()</code>, và ta có thể xâu chuỗi các lời gọi bằng cú pháp chấm (.) thay vì phải gọi từng câu riêng rẽ. Đoạn code phía dưới làm y chang phần trên, thêm vài điều kiện cho trường tuổi.</p>
+
+<pre><code>Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Điều kiện thêm vào sau hàm where
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // callback ở đây là tên hàm callback của ta.</code></pre>
+
+<p>Phương thức <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> lấy ra tất cả các bản ghi thoả mãn điều kiện, nhưng thường thì bạn chỉ muốn lấy ra một thôi. Các phương thức truy vấn phía dưới chỉ lấy ra một bản ghi:</p>
+
+<ul>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Tìm kiếm tài liệu theo <code>id</code> (mỗi tài liệu có một <code>id</code> duy nhất).</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Tìm kiếm một tài liệu dựa theo tiêu chí đặt vào.</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Tìm kiếm một tài liệu theo <code>id</code> hoặc theo tiêu chí và sửa hoặc xoá nó. Đây là các mẫu có ích khi cần phải tìm kiếm và chỉnh sửa.</li>
+</ul>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Còn có phương thức <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> để đếm số lượng bản ghi phù hợp với điều kiện đề ra. Cái này sẽ có ích nếu bạn chỉ cần tìm ra số lượng thay vì phải kéo về tất cả các bản ghi.</p>
+</div>
+
+<p>Còn có nhiều thứ nữa mà bạn có thể làm với các câu truy vấn. Để biết thêm thông tin mời xem: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (tài liệu Mongoose).</p>
+
+<h4 id="Làm_việc_với_tài_liệu_liên_quan_—_sự_cư_ngụ">Làm việc với tài liệu liên quan — sự cư ngụ</h4>
+
+<p>Bạn có thể thêm mới mối liên quan giữa các tài liệu/phần tử của mô hình qua trường schema <code>ObjectId</code>, hoặc từ một tài liệu đến nhiều qua một mảng <code>ObjectIds</code>. Trường này lưu trữ id của mô hình liên quan. Nếu bạn muốn lấy nội dung của tài liệu liên quan, bạn có thể sử dụng phương thức <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> trong câu truy vấn để thay thế id với đống dữ liệu tương ứng.</p>
+
+<p>Chẳng hạn, schema sau đây định nghĩa tác giả và tác phẩm. Mỗi tác giả có thể có nhiều tác phẩm, nên ta sử dụng một mảng đối tượng <code>ObjectId</code>. Mỗi tác phẩm có thể có một tác giả. Thuộc tính "ref" (được in đậm) kể cho ta biết schema nào mà model có thể gắn vào được.</p>
+
+<pre class="brush: js"><code>var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);</code></pre>
+
+<p>Ta có thể lưu lại đống liên quan đến tài liệu tương ứng bằng cách gán cho nó giá trị <code>_id</code>. Đoạn bên dưới ta tạo ra một tác giả, rồi một cuốn sách và gắn id của tác giả vào trường tác giả của tác phẩm.</p>
+
+<pre class="brush: js"><code>var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob giờ đã tồn tại, đến lúc tạo tác phẩm rồi
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // gắn _id của tác giả Bob. ID này được tạo ra mặc định!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob giờ đã có tác phẩm của mình
+  });
+});</code></pre>
+
+<p>Tài liệu tác phẩm của ta giờ được nối với trường tác giả thông qua ID của trong tài liệu tác giả. Để lấy thông tin của tác giả ta dùng hàm <code>populate()</code>, như bên dưới.</p>
+
+<pre class="brush: js"><code>Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //Thay thế ID của tác giả bằng thông tin của tác giả!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // in ra "The author is Bob Smith"
+});</code></pre>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Ta vừa thêm tác giả vào tác phẩm, nhưng lại không hề thêm tác phẩm vào mảng <code>stories</code> của tác giả. Thế thì làm thế nào để lấy ra tất cả tác phẩm của một tác giả nào đó? Có một cách là thêm tác giả vào mảng tác phẩm, nhưng như thế sẽ thành ra phân vị trí các thành phần trong khi ta cần giữ cho mối liên hệ giữa tác giả với tác phẩm được bảo toàn.</p>
+
+<p>Cách tốt hơn là lấy <code>_id</code> của <em>tác giả</em>, rồi dùng <code>find()</code> để tìm trong trường tác giả xuyên suốt tác phẩm.</p>
+
+<pre class="brush: js"><code>Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // trả về tất cả các tác phẩm có id của Bob.
+});</code>
+</pre>
+</div>
+
+<p>Đến đây là đã đủ hết mọi thứ bạn cần biết trong<em> bài viết này rồi</em>. Để biết thêm thông tin chi tiết, mời bạn tham khảo <a href="http://mongoosejs.com/docs/populate.html">Population</a> (tài liệu của Mongoose).</p>
+
+<h3 id="Một_schemamô_hình_trên_một_tập_tin">Một schema/mô hình trên một tập tin</h3>
+
+<p>Dù bạn có thể tạo ra schema và mô hình theo bất cứ kiến trúc nào bạn thích, nhưng chúng tôi vẫn khuyến nghị nên định nghĩa chúng trên mỗi mô đun riêng rẽ (tập tin), rồi xuất mô hình ra ngoài. Làm như thế này này:</p>
+
+<pre class="brush: js"><code>// Tập tin: ./models/somemodel.js
+
+//Nhập Mongoose
+var mongoose = require('mongoose');
+
+//Định nghĩa một schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string          : String,
+    a_date            : Date,
+});
+
+<strong>//Xuất ra lớp mô hình "SomeModel"
+module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre>
+
+<p>Sau đó bạn có thể nhập và sử dụng mô hình ngay tắp lự ở bất cứ đâu. Dưới đây là cách bạn lấy ra mọi phần tử của mô hình.</p>
+
+<pre class="brush: js"><code>//Thê mới mô hình SomeModel thông qua lệnh require
+var SomeModel = require('../models/somemodel')
+
+// Sử dụng đối tượng SomeModel để tìm tất cả bản ghi của SomeModel
+SomeModel.find(callback_function);</code></pre>
+
+<h2 id="Thiết_lập_cơ_sở_dữ_liệu_MongoDB">Thiết lập cơ sở dữ liệu MongoDB</h2>
+
+<p>Giờ khi đã hiểu những gì Mongoose có thể làm và cách để ta có thể thiết kế một cơ sở dữ liệu, đến lúc thực hành trên trang web <em>LocalLibrary</em> rồi. Bước đầu tiên trong bài thực hành là tạo mới một cơ sở dữ liệu MongoDb để lưu trữ dữ liệu cho thư viện của chúng ta.</p>
+
+<p>Trong bài viết này ta sẽ sử dụng cơ sở dữ liệu nền điện toán đám mây của <a href="https://mlab.com/welcome/">mLab</a> (chọn kiểu "<a href="https://mlab.com/plans/pricing/">sandbox</a>" để dùng miễn phí). Cơ sở dữ liệu kiểu này không phù hợp dành cho các trang web thật vì nó không có dư thừa dữ liệu, nhưng lại rất hợp dành cho việc phát triển và xây dựng mẫu vật. Và bởi nó dễ dùng cũng như dễ thiết lập, và đừng quên rằng mLab là một trong những bên cung cấp khá nổi tiếng <em>cơ sở dữ liệu cung cấp dưới dạng dịch vụ</em> mà bạn có thể sẽ dùng cho dự án thật (vào thời điểm viết bài này bạn cũng có thể chọn các nhà cung cấp như <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> và <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Nếu bạn muốn thiết lập cơ sở dữ liệu MongoDb cục bộ thì hãy tìm và tải xuống <a href="https://www.mongodb.com/download-center">bản phù hợp với hệ thống của mình</a>. Phần còn lại khá là đơn giản, trừ phần URL của cơ sở dữ liệu mà bạn sẽ phải xác định nếu muốn kết nối tới.</p>
+</div>
+
+<p>Trước hết bạn cần <a href="https://mlab.com/signup/">tạo tài khoản</a> mLab (miễn phí, chỉ cần điền mẫu đăng ký là xong). </p>
+
+<p>Sau khi đã đăng nhập vào, bạn sẽ được chuyển tới <a href="https://mlab.com/home">trang chủ</a>:</p>
+
+<ol>
+ <li>Nhấn <strong>Create New</strong> trong phần <em>MongoDB Deployments</em>.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li>
+ <li>Nó sẽ mở ra màn hình <em>Cloud Provider Selection</em>.<br>
+  <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br>
+
+  <ul>
+   <li>Chọn SANDBOX (Free) plan trong phần Plan Type. </li>
+   <li>Chọn bất cứ nhà cung cấp nào trong phần <em>Cloud Provider</em>. Mỗi nhà cung cấp khác nhau ở các vùng lãnh thổ địa lý khác nhau (ở ngay dưới phần selected plan type).</li>
+   <li>Bấm nút <strong>Continue</strong>.</li>
+  </ul>
+ </li>
+ <li>Màn hình <em>Select Region</em> mở ra.
+  <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Chọn vùng lãnh thổ gần bạn nhất rồi nhấn <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>Màn hình <em>Final Details</em> mở ra.<br>
+   <img alt="New deployment database name" src="https://mdn.mozillademos.org/files/15663/mLab_new_deployment_final_details.png" style="height: 569px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Nhập tên cho cơ sở dữ liệu vừa tạo ra như <code>local_library</code> và chọn <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>Màn hình <em>Order Confirmation</em> sẽ mở lên.<br>
+   <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p>
+
+  <ul>
+   <li>
+    <p>Nhấn <strong>Submit Order</strong> để tạo mới cơ sở dữ liệu.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>Bạn sẽ được điều hướng về trang chủ. Nhấn vào cơ sở dữ liệu vừa thêm mới để xem chi tiết. Như bạn thấy đấy, cơ sở dữ liệu không có bất cứ bộ sưu tập nào (dữ liệu).<br>
+   <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br>
+    <br>
+   URL mà bạn cần ở ngay đầu trang (trong phần khoanh đỏ). Để dùng được nó bạn phải tạo ra người dùng mới.</p>
+ </li>
+ <li>Nhấn vào tab <strong>Users</strong> và bấm nút <strong>Add database user</strong>.</li>
+ <li>Điền tên đăng nhập và mật khẩu (hai lần), và nhấn nút <strong>Create</strong>. Đừng bao giờ chọn <em>Make read only</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li>
+</ol>
+
+<p>Giờ đã có cơ sở dữ liệu rồi, và cả URL (với tên đăng nhập và mật khẩu) đã sẵn sàng để truy xuất. Trông nó sẽ như thế này: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p>
+
+<h2 id="Cài_đặt_Mongoose">Cài đặt Mongoose</h2>
+
+<p>Mở command prompt và chuyển tới thư mục chứa <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">trang web Local Library</a>. Nhập lệnh dưới để cài đặt Mongoose (và đống dependency của nó) và nó sẽ tự động thêm vào <strong>package.json</strong> của bạn, nếu bạn đã làm như với <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> ở trên.</p>
+
+<pre class="brush: bash">npm install mongoose --save
+</pre>
+
+<h2 id="Kết_nối_tới_MongoDB">Kết nối tới MongoDB</h2>
+
+<p>Mở <strong>/app.js</strong> (trong project của bạn) và sao chép đống phía dưới để khai báo<em> đối tượng ứng dụng Express</em> (sau dòng <code>var app = express();</code>). Thay thế url của cơ sở dữ liệu ('<em>insert_your_database_url_here</em>') bằng URL của mình (như cái vừa tạo ra bằng<a href="#Setting_up_the_MongoDB_database"> mLab</a>).</p>
+
+<pre class="brush: js">//Thiết lập kết nối tới Mongoose
+var mongoose = require('mongoose');
+var mongoDB = '<em>insert_your_database_url_here</em>';
+mongoose.connect(mongoDB);
+mongoose.Promise = global.Promise;
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>Như đã nói <a href="#Connecting_to_MongoDB">trong phần Mongoose primer phía trên</a>, đoạn code này tạo ra kết nối mặc định tới cơ sở dữ liệu và ràng buộc sự kiện lỗi (để in lỗi ra console). </p>
+
+<h2 id="Định_nghĩa_Schema_cho_LocalLibrary">Định nghĩa Schema cho LocalLibrary</h2>
+
+<p>Ta sẽ tạo ra mô đun cho từng mô hình, như <a href="#One_schemamodel_per_file">đã đề cập phía trên</a>. Bắt đầu bằng cách thêm mới thư mục trong thư mục gốc (<strong>/models</strong>) và tạo từng tập tin cho mỗi mô hình:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/models</strong>
+    <strong>author.js</strong>
+    <strong>book.js</strong>
+    <strong>bookinstance.js</strong>
+    <strong>genre.js</strong>
+</pre>
+
+<h3 id="Mô_hình_tác_giả">Mô hình tác giả</h3>
+
+<p>Sao chép đoạn code schema <code>Author</code> code bên dưới và dán vào tập tin <strong>./models/author.js</strong>. Scheme định nghĩa rằng một tác giả có kiểu <code>String</code> SchemaTypes cho hai trường họ và tên , bắt buộc và có giới hạn nhiều nhất 100 ký tự, và kiểu <code>Date</code> cho trường ngày sinh và ngày mất.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+<strong>// Tạo phương thức ảo cho tên đầy đủ
+AuthorSchema
+.virtual('name')
+.get(function () {
+  return this.family_name + ', ' + this.first_name;
+});</strong>
+
+// Phương thức ảo cho URL của tác giả
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//xuất mô hình
+module.exports = mongoose.model('Author', AuthorSchema);
+
+</pre>
+
+<p>Ta vừa khai báo <a href="#Virtual_properties">phần ảo</a> cho AuthorSchema với tên là "url" trả về URL tuyệt đối bắt buộc để lấy ra phần tử nhất định của mô hình — ta sẽ dùng thuộc tính này trong mẫu mỗi khi cần lấy ra đường dẫn tới tác giả.</p>
+
+<div class="note">
+<p><strong>Lưu ý:</strong> Khai báo URL bằng hàm ảo trong schema là ý tưởng tốt bởi vì URL sẽ chỉ cần thay đổi tại một nơi.<br>
+ Vào lúc này các URL sẽ không thể hoạt động, ta chưa đặt ra các route nào để dẫn lối cho từng phần tử của mô hình. Ta sẽ làm việc này trong các bài viết sau!</p>
+</div>
+
+<p>Sau khi đã xong thì ta xuất mô hình ra thôi.</p>
+
+<h3 id="Mô_hình_sách">Mô hình sách</h3>
+
+<p>Sao chép đoạn code schema <code>Book</code> bên dưới và dán nó vào tập tin <strong>./models/book.js</strong>. Làm tương tự đối như với tác giả — ta vừa khai báo một schema có nhiều trường String và một phần ảo để lấy URL của các bản ghi sách, sau đó thì xuất nó ra.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+  <strong>  author: {type: Schema.ObjectId, ref: 'Author', required: true},</strong>
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+  <strong>  genre: [{type: Schema.ObjectId, ref: 'Genre'}]</strong>
+  }
+);
+
+// Tạo hàm ảo lấy URL của sách
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Xuất mô hình
+module.exports = mongoose.model('Book', BookSchema);
+</pre>
+
+<p>Sự khác biệt chính là ta vừa tạo ra hai mối liên quan đến sách:</p>
+
+<ul>
+ <li>author được trỏ tới mô hình đối tượng <code>Author</code>, và bắt buộc.</li>
+ <li>genre được trỏ tới một mảng mô hình đối tượng <code>Genre</code>. Ta vẫn chưa định nghĩa đối tượng này!</li>
+</ul>
+
+<h3 id="Mô_hình_BookInstance">Mô hình BookInstance</h3>
+
+<p>Cuối cùng sao chép đoạn code schema <code>BookInstance</code> bên dưới và dán nó vào tập tin <strong>./models/bookinstance.js</strong>. <code>BookInstance</code> đại diện cho số bản sách mà ai đó mượn, và bao gồm thông itn về thời điểm sách  về hoặc hạn trả sách dự kiến, "đánh dấu" hoặc lấy chi tiết phiên bản.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
+    due_back: {type: Date, <strong>default: Date.now</strong>}
+  }
+);
+
+// Lấy ra URL của bookinstance
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Xuất mô hình
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+
+<p>Các thuộc tính mới được thêm vào trong này nằm trong phần trường dữ liệu:</p>
+
+<ul>
+ <li><code>enum</code>: Cho phép ta đặt giá trị chấp nhận được cho xâu truyền vào. Trong trường hợp này ta dùng nó để xác định trạng thái còn sẵn của sách (sử dụng enum sẽ giúp ta tránh khỏi các lỗi chính tả hoặc khai khống giá trị cho trạng thái)</li>
+ <li><code>default</code>: Ta dùng default để đặt giá trị mặc định cho những bookinstances mới khởi tạo để bảo trì <code>due_back</code> mặc định <code>now</code> (lưu ý cách gọi hàm Date khi thiết lập ngày giờ!)</li>
+</ul>
+
+<p>Những schema còn lại làm tương tự.</p>
+
+<h3 id="Mô_hình_thể_loại_-_thử_thách!">Mô hình thể loại - thử thách!</h3>
+
+<p>Mở tập tin <strong>./models/genre.js</strong> của bạn lên và tạo mới một schema để lưu lại thể loại sách (các kiểu sách như là truyện tiểu thuyết, tư liệu lịch sử...).</p>
+
+<p>Cách định nghĩa cũng giống như các mô hình ở trên:</p>
+
+<ul>
+ <li>Mô hình nên có một <code>String</code> SchemaType tên là <code>name</code> để mô tả thể loại.</li>
+ <li>Tên này phải bắt buộc và có từ 3 đến 100 kí tự.</li>
+ <li>Tạo một <a href="#Virtual_properties">phương thức ảo</a> cho URL của thể loại, để tên là <code>url</code>.</li>
+ <li>Xuất mô hình.</li>
+</ul>
+
+<h2 id="Kiểm_thử_—_tạo_ra_vài_bản_ghi">Kiểm thử — tạo ra vài bản ghi</h2>
+
+<p>Xong xuôi rồi đó. Giờ ta đã có tất cả mô hình!</p>
+
+<p>Để có thể kiểm thử mô hình (và để tạo ra vài sách mẫu và một số thứ khác ta sẽ dùng trong bài viết sau) ta sẽ chạy một đoạn kịch bản <em>independent</em> để tạo ra các bản ghi cho từng mô hình:</p>
+
+<ol>
+ <li>Tải về (hoặc tạo mới) tập tin <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> trong thư mục <em>express-locallibrary-tutorial</em> (đồng cấp với <code>package.json</code>).
+
+  <div class="note">
+  <p><strong>Lưu ý:</strong> Bạn không cần hiểu cách thức <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> hoạt động; nó chỉ thêm dữ liệu mẫu vào trong cơ sở dữ liệu thôi.</p>
+  </div>
+ </li>
+ <li>Nhập lệnh phía dưới vào trong thư mục chứa project để cài đặt mô-đun <em>async</em> để có thể chạy được đoạn kịch bản (ta sẽ bàn về việc này trong bài tiếp theo, )
+  <pre class="brush: bash">npm install async --save</pre>
+ </li>
+ <li>Chạy đoạn kịch bản bằng node trong command prompt của bạn, truyền vào URL của cơ sở dữ liệu MongoDB (như cái bạn đã thay thế cho <em>insert_your_database_url_here</em>, trong <code>app.js</code> phía trên):
+  <pre class="brush: bash">node populatedb &lt;your mongodb url&gt;​​​​</pre>
+ </li>
+ <li>Đoạn code sẽ chạy thành công và in ra những vật được tạo ra trên màn console.</li>
+</ol>
+
+<div class="note">
+<p><strong>Mẹo:</strong> Lên cơ sở dữ liệu của bạn trên <a href="https://mlab.com/home">mLab</a>. Giờ bạn có thể chui vào bộ sưu tập Books, Authors, Genres và BookInstances, và kiểm tra các tài liệu vừa được tạo.</p>
+</div>
+
+<h2 id="Tóm_lại">Tóm lại</h2>
+
+<p>Trong bài viết này ta học một chút về cơ sở dữ liệu và ORMs trên Node/Express, và cách để định nghĩa schema và mô hình của Mongoose. Sau đó ta đã thực hành thiết kế và triển khai các mô hình <code>Book</code>, <code>BookInstance</code>, <code>Author</code> và <code>Genre</code> cho trang web <em>LocalLibrary</em>.</p>
+
+<p>Sau cùng ta kiểm thử những gì vừa viết ra bằng cách tạo một đống các phần tử (bằng cách sử dụng một đoạn mã kịch bản). Trong bài tiếp theo ta sẽ học cách tạo các trang để trình bày các thứ.</p>
+
+<h2 id="Đọc_thêm">Đọc thêm</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (tài liệu của Express)</li>
+ <li><a href="http://mongoosejs.com/">Mongoose website</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (tài liệu của Mongoose)</li>
+ <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (tài liệu của Mongoose)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/vi/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..3f1fa21d2f
--- /dev/null
+++ b/files/vi/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Express Tutorial: The Local Library website'
+slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p>
+</div>
+
+<p class="summary">Đây là bài đầu tiên sẽ giải thích những gì chúng ta sẽ học và giới thiệu tổng quan về dự án thư viên cục bộ mà chúng ta sẽ cải tiến trong suốt khoá học.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiền quyết:</th>
+   <td>Đọc bài  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express Introduction</a>. Sau đó bạn cũng cẩn phải cài đặt môi trường phát triển Node <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">set up a Node development environment</a>. </td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Để giới thiệu ví dụ sẽ được sử dụng trong bài học và giúp người đọc hiểu những chủ đề sẽ được dạy.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Khái_quát">Khái quát</h2>
+
+<p>Chào mứng đến với bộ tài liệu sử dụng Express(Node) để xây dựng một trang web quản lý các chỉ mục trong thư viện.</p>
+
+<p>Trong loạt bài học này, bạn sẽ được day:</p>
+
+<ul>
+ <li>Sử dụng công cụ <em>trang web Application Generator</em> để tạo ra cái sườn cho một website và ứng dụng.</li>
+ <li>Start và stop Node web server.</li>
+ <li>Sử dụng database để lưu trữ dữ liệu của bạn.</li>
+ <li>Tạo những cái routes cho những đường dẫn khác nhau và template ("views") để hiển thị dữ liệu dưới đạng HTML trong trình duyệt.</li>
+ <li>Làm việc với form.</li>
+ <li>Triển khai ứng dụng ra thực tế.</li>
+</ul>
+
+<p>Nếu bạn đã học những chủ đề này rồi và lướt sơ qua các phần khác. Tới cuối loạt bài học này bạn sẽ đủ hiểu biết để phát triển một ứng dụng đơn giản với Express.</p>
+
+<h2 id="LocalLibrary_website">LocalLibrary website</h2>
+
+<p><em>LocalLibrary</em> là tên của website mà bạn sẽ tạo ra và cải tiến trong loạt các bài học này. Như bạn mong đợi, mục tiêu của trang web là cung cấp một danh mục trực tuyến cho một thư viện cục bộ nhỏ, nơi mà người dùng có thể truy cập những quyển sách có sẵn và quản lý tài khoản của họ.</p>
+
+<p>Ví dụ này được lựa chọn rất cẩn thận bởi vì nó có thể được điều chỉnh để chỉ hiển thị những chức năng vừa phải để có thể ứng dụng hầu hết các chức năng của Express. Quan trọng hơn nữa, nó giúp chúng tôi vẽ ra con đường để hướng dẫn các chức năng cần thiệt trong việc phát triển bất kỳ website nào :</p>
+
+<ul>
+ <li>Trong các bài đầu tiên, chúng tôi chỉ tạo ra một thư viện đơn giản, mà người dùng có thể tìm kiếm những quyển sách sẵn có. Điều này dạy chúng ta cách đọc và hiển thị nội dung từ một cơ sở dữ liệu, chức năng thường có trong lập trình web.</li>
+ <li>Như chúng tôi đã cân nhấc, ứng dụng thư viện còn có các chức năng nâng cao của việc phát triển web. Ví dụ chức năng thêm vào một quyển sách mới giúp bạn học được cách làm việc với Form và chứng thực người dùng</li>
+</ul>
+
+<p>Tuy đây là một ví dụ có tính mở rộng cao, nhưng nó được gọi là "LocalLibrary" bởi vì chúng tôi hy vọng chỉ để thể hiện những thông tin tối thiểu để giúp bạn bắt đầu với Express một cách nhanh chóng. Cho nên chúng ta sẽ lưu thông tin về sách, bản sao sách, tác giả và các thông tin mấu chốt khác, mà chúng ta không lưu thông tin về những phần khác thư viện như việc cho mượn hay cơ sở hạ tầng để hỗ trợ đặt trang web cho thư viện hay những chức năng cho một "thư viện lớn".</p>
+
+<h2 id="Khi_gặp_khó_khăn_thì_tham_khảo_ở_đâu">Khi gặp khó khăn, thì tham khảo ở đâu? </h2>
+
+<p>Trong suốt tài liệu chúng tôi sẽ cung cấp những đoạn mã nguồn mà bạn có thể tham khảo ở mỗi phần, và có nhiều mã nguồn khác mà chúng tôi hi vọng bạn sẽ mở rộng nó.</p>
+
+<p>Nếu bạn bí quá thì có thể tham khảo toàn bộ mã nguồn của website <a href="https://github.com/mdn/express-locallibrary-tutorial">trên Github</a>.</p>
+
+<div class="note">
+<p><strong>Chú ý: </strong> Những phiên bản của node, Express và những modules khác mà tài liệu này sử dụng được liệt kê ở trong <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a>.</p>
+</div>
+
+<h2 id="Tổng_Kết">Tổng Kết</h2>
+
+<p>Bây giờ bạn đã biết về dự án LocalLibrary, giờ thì bắt đầu tạo <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">cấu trúc dự án</a> nào.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/vi/learn/server-side/first_steps/index.html b/files/vi/learn/server-side/first_steps/index.html
new file mode 100644
index 0000000000..95ddf775ab
--- /dev/null
+++ b/files/vi/learn/server-side/first_steps/index.html
@@ -0,0 +1,46 @@
+---
+title: Các bước đầu tiên để lập trình trang web phía máy chủ
+slug: Learn/Server-side/First_steps
+tags:
+  - Giới thiệu
+  - Hướng dẫn
+  - Học
+  - Lập trình máy chủ
+  - Ngôn ngữ lập trình
+  - Người Mới Bắt Đầu
+translation_of: Learn/Server-side/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Trong mô-đun này chúng ta tìm cầu trả lời về một vài câu hỏi chức năng về lập trình phía máy chủ<span class="seoSummary"> — "Nó là gì?", "Nó khác như nào so với lập trình phía máy khách ?", và "Tại sao nó lại hữu ích?".</span> Tiếp theo chúng ta tìm hiểu tổng quan về một số framework (Một nền tảng bao gồm các tệp/thư mục tạo sẵn được quy chuẩn khi sử dụng nó để lập trình khi tạo một dự án mới) phổ biến để tạo web phía máy chủ, cùng với hướng dẫn phù hợp nhất để lựa chọn framework phù hợp để tạo trang web đầu tiên của bạn. Cuối cùng chúng ta tìm hiểu bài viết cấp cao về bảo mật máy chủ web.</p>
+
+<h2 id="Kiến_thức_yêu_cầu">Kiến thức yêu cầu </h2>
+
+<p>Trước khi bắt đầu mô-dun này, bạn không cần phải có bất kỳ hiểu biết nào về lập trình phía máy chủ, hoặc bất kỳ ngôn ngữ lập trình nào khác. </p>
+
+<p>Tuy nhiên, bạn cần hiểu về cách web làm việc. Chúng tôi đề xuất bạn nên đọc các chủ đề này trước khi bắt đầu:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Một máy chủ web là gì?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Phần mềm nào cần thiết để xây dựng một trang web?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Làm thế nào để đẩy tập tin lên một máy chủ web?</a></li>
+</ul>
+
+<p>Với các hiểu biết cơ bản, bạn sẽ sẵn sàng để làm việc theo cách của mình thông qua các mô-dun trong phần này. </p>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Giới thiệu về phía máy chủ</a> </dt>
+ <dd>Chào mừng bạn đến với khóa học lập trình phía máy chủ của MDN cho người mới bắt đầu! <font>Trong bài viết đầu tiên này, chúng tôi xem xét lập trình phía máy chủ từ cấp độ cao, trả lời các câu hỏi như "Nó là gì?", "Nó khác với lập trình phía máy khách như thế nào?" Và "Tại sao nó lại hữu ích như vậy?" . </font><font>Sau khi đọc bài viết này, bạn sẽ hiểu sức mạnh bổ sung có sẵn cho các trang web thông qua mã hóa phía máy chủ</font>.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Tổng quan về Khách-Chủ</a> </dt>
+ <dd><font>Bây giờ bạn đã biết mục đích và lợi ích tiềm năng của lập trình phía máy chủ, chúng ta sẽ kiểm tra chi tiết điều gì xảy ra khi máy chủ nhận được "yêu cầu động" từ trình duyệt. </font><font>Vì mã phía máy chủ của hầu hết các trang web xử lý các yêu cầu và phản hồi theo cách tương tự, điều này sẽ giúp bạn hiểu những gì bạn cần làm khi viết mã của riêng mình. </font></dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Các framework phía máy chủ</a></dt>
+ <dd><font>Bài viết cuối cùng cho bạn thấy một ứng dụng web phía máy chủ cần làm gì để đáp ứng các yêu cầu từ trình duyệt web. </font><font>Bây giờ chúng tôi chỉ ra cách các khung web có thể đơn giản hóa các tác vụ này và giúp bạn chọn khung phù hợp cho ứng dụng web phía máy chủ đầu tiên của bạn.</font></dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Bảo mật trang web</a> </dt>
+ <dd><font>Bảo mật trang web đòi hỏi sự cảnh giác trong tất cả các khía cạnh của thiết kế và sử dụng. </font><font>Bài viết giới thiệu này sẽ không làm bạn thành một chuyên gia bảo mật trang web, nhưng nó sẽ giúp bạn hiểu các bước quan trọng đầu tiên bạn có thể thực hiện để bảo vệ ứng dụng web của mình trước các mối đe dọa phổ biến nhất.</font></dd>
+</dl>
+
+<h2 id="Đánh_giá">Đánh giá</h2>
+
+<p><font>Mô-đun "tổng quan" này không có bất kỳ đánh giá nào vì chúng tôi chưa hiển thị cho bạn bất kỳ mã nào. </font><font>Chúng tôi hy vọng rằng tại thời điểm này, bạn hiểu rõ về loại chức năng nào bạn có thể cung cấp bằng lập trình phía máy chủ và bạn đã đưa ra quyết định về khung web phía máy chủ nào bạn sẽ sử dụng để tạo trang web đầu tiên của mình.</font></p>
diff --git a/files/vi/learn/server-side/first_steps/introduction/index.html b/files/vi/learn/server-side/first_steps/introduction/index.html
new file mode 100644
index 0000000000..9594c42833
--- /dev/null
+++ b/files/vi/learn/server-side/first_steps/introduction/index.html
@@ -0,0 +1,228 @@
+---
+title: Introduction to the server side
+slug: Learn/Server-side/First_steps/Introduction
+translation_of: Learn/Server-side/First_steps/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary"><span class="seoSummary">Chào mừng bạn đến với khóa học lập trình phía máy chủ của người mới bắt đầu MDN! Trong bài viết đầu tiên này, chúng tôi xem xét lập trình phía máy chủ từ cấp độ cao, trả lời các câu hỏi như "nó là gì?", "Nó khác với lập trình phía máy khách như thế nào?" Và "tại sao nó lại hữu ích như vậy?" . Sau khi đọc bài viết này, bạn sẽ hiểu sức mạnh bổ sung có sẵn cho các trang web thông qua mã hóa phía máy chủ.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện:</th>
+   <td>Kiến thức cơ bản về máy tính. Một sự hiểu biết cơ bản về những gì là một máy chủ web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Để làm quen với lập trình phía máy chủ là gì, nó có thể làm gì và nó khác với lập trình phía máy khách như thế nào.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Hầu hết các trang web quy mô lớn sử dụng mã phía máy chủ để hiển thị động các dữ liệu khác nhau khi cần, các dữ liệu thường rút ra khỏi cơ sở dữ liệu được lưu trữ trên máy chủ và được gửi đến máy khách để được hiển thị thông qua một số mã (ví dụ: HTML và JavaScript).</p>
+
+<p>Có lẽ lợi ích đáng kể nhất của mã phía máy chủ là nó cho phép bạn điều chỉnh nội dung trang web cho từng người dùng. Các trang web động có thể làm nổi bật nội dung phù hợp hơn dựa trên sở thích và thói quen của người dùng. Nó cũng có thể làm cho các trang web dễ sử dụng hơn bằng cách lưu trữ thông tin và sở thích cá nhân - ví dụ: sử dụng lại chi tiết thẻ tín dụng được lưu trữ để hợp lý hóa các khoản thanh toán tiếp theo.</p>
+
+<p>Nó thậm chí có thể cho phép tương tác với người dùng của trang web, gửi thông báo và cập nhật qua email hoặc qua các kênh khác. Tất cả các khả năng này cho phép tham gia sâu hơn nhiều với người dùng.</p>
+
+<p>Trong thế giới phát triển web hiện đại, việc tìm hiểu về phát triển phía máy chủ rất được khuyến khích.</p>
+
+<h2 id="Lập_trình_trang_web_phía_máy_chủ_là_gì">Lập trình trang web phía máy chủ là gì?</h2>
+
+<p>Trình duyệt web giao tiếp với máy chủ web bằng cách sử dụng <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ({{glossary("HTTP")}}). Khi bạn nhấp vào một liên kết trên một trang web, gửi biểu mẫu hoặc chạy tìm kiếm, một <strong>yêu cầu</strong> <strong>HTTP</strong> được gửi từ trình duyệt của bạn đến máy chủ mục tiêu.</p>
+
+<p>Yêu cầu bao gồm một URL xác định tài nguyên bị ảnh hưởng, một phương thức xác định hành động được yêu cầu (ví dụ để lấy, xóa hoặc đăng tài nguyên) và có thể bao gồm thông tin bổ sung được mã hóa trong các tham số URL (các cặp giá trị trường được gửi qua <a href="https://en.wikipedia.org/wiki/Query_string">truy vấn chuỗi</a>), dưới dạng dữ liệu POST (dữ liệu được gửi bởi <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST">phương thức HTTP POST</a> ), hoặc trong các {{glossary("Cookie", "cookies")}} được liên kết.</p>
+
+<p>Các máy chủ web chờ tin nhắn yêu cầu của khách hàng, xử lý chúng khi chúng đến và trả lời trình duyệt web bằng tin nhắn <strong>phản hồi HTTP</strong>. Phản hồi chứa một dòng trạng thái cho biết liệu yêu cầu có thành công hay không (ví dụ:  "HTTP/1.1 200 OK" for success). </p>
+
+<p>Phần chính của phản hồi thành công đối với yêu cầu sẽ chứa tài nguyên được yêu cầu (ví dụ: trang HTML mới hoặc hình ảnh, v.v.), sau đó có thể được trình duyệt web hiển thị.</p>
+
+<h3 id="Trang_web_tĩnh">Trang web tĩnh</h3>
+
+<p>Sơ đồ bên dưới hiển thị kiến trúc máy chủ web cơ bản cho một <em>trang tĩnh</em> (một trang tĩnh là một trang trả về cùng một nội dung được mã hóa cứng từ máy chủ bất cứ khi nào một tài nguyên cụ thể được yêu cầu). Khi người dùng muốn điều hướng đến một trang, trình duyệt sẽ gửi yêu cầu "GET" HTTP chỉ định URL của nó.</p>
+
+<p>Máy chủ lấy tài liệu được yêu cầu từ hệ thống tệp của nó và trả về phản hồi HTTP có chứa tài liệu và <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status#Successful_responses">trạng thái thành công</a> (thường là 200 OK). Nếu một số lý do không thể truy xuất tệp, một trạng thái lỗi được trả về (xem <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status#Client_error_responses">phản hồi lỗi máy khách</a> và <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status#Server_error_responses">phản hồi lỗi máy chủ</a>).</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+
+<h3 id="Trang_web_động">Trang web động</h3>
+
+<p>Trang web động là một trong đó một số nội dung phản hồi được tạo <em>động</em>, chỉ khi cần. Trên trang web động, các trang HTML thường được tạo bằng cách chèn dữ liệu từ cơ sở dữ liệu vào trình giữ chỗ trong các mẫu HTML (đây là cách lưu trữ lượng lớn nội dung hiệu quả hơn nhiều so với sử dụng trang web tĩnh).</p>
+
+<p>Trang web động có thể trả về dữ liệu khác nhau cho một URL dựa trên thông tin được cung cấp bởi người dùng hoặc tùy chọn được lưu trữ và có thể thực hiện các hoạt động khác như một phần của việc trả lại phản hồi (ví dụ: gửi thông báo).</p>
+
+<p>Hầu hết các mã để hỗ trợ một trang web động phải chạy trên máy chủ. Tạo mã này được gọi là "<strong>lập trình phía máy chủ</strong>" (hoặc đôi khi là "<strong>kịch bản phía sau</strong>").</p>
+
+<p>Sơ đồ dưới đây cho thấy một kiến trúc đơn giản cho một <em>trang web động</em>. Như trong sơ đồ trước, các trình duyệt gửi yêu cầu HTTP đến máy chủ, sau đó máy chủ xử lý các yêu cầu và trả về các phản hồi HTTP thích hợp.</p>
+
+<p>Các yêu cầu đối với tài nguyên tĩnh được xử lý theo cách tương tự như đối với các trang web tĩnh (tài nguyên tĩnh là bất kỳ tệp nào không thay đổi về cách thức: CSS, JavaScript, Hình ảnh, tệp PDF được tạo trước, v.v.).</p>
+
+<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+
+<p>Yêu cầu tài nguyên động thay vào đó được chuyển tiếp (2) sang mã phía máy chủ (được hiển thị trong sơ đồ dưới dạng <em>Ứng dụng web</em>). Đối với "yêu cầu động", máy chủ diễn giải yêu cầu, đọc thông tin bắt buộc từ cơ sở dữ liệu (3), kết hợp dữ liệu được truy xuất với các mẫu HTML (4) và gửi lại phản hồi có chứa HTML được tạo (5,6). </p>
+
+<div>
+<h2 id="Các_chương_trình_phía_máy_chủ_và_phía_máy_khách_có_giống_nhau_không">Các chương trình phía máy chủ và phía máy khách có giống nhau không?</h2>
+</div>
+
+<p>Bây giờ chúng ta hãy chú ý đến mã liên quan đến lập trình phía máy chủ và phía máy khách. Trong mỗi trường hợp, mã là khác nhau đáng kể:</p>
+
+<ul>
+ <li>Chúng có những mục đích và mối quan tâm khác nhau.</li>
+ <li>Chúng thường không sử dụng cùng một ngôn ngữ lập trình (ngoại lệ là JavaScript, có thể được sử dụng ở phía máy chủ và phía máy khách).</li>
+ <li>Chúng chạy bên trong các môi trường hệ điều hành khác nhau.</li>
+</ul>
+
+<p>Mã chạy trong trình duyệt được gọi là <strong>mã phía máy khách</strong> và chủ yếu liên quan đến việc cải thiện giao diện và hành vi của một trang web được hiển thị. Điều này bao gồm lựa chọn và tạo kiểu các thành phần UI, tạo bố cục, điều hướng, xác thực mẫu, v.v ... Ngược lại, lập trình trang web phía máy chủ chủ yếu liên quan đến việc chọn <em>nội dung</em> nào được trả về trình duyệt để đáp ứng yêu cầu. Mã phía máy chủ xử lý các tác vụ như xác thực dữ liệu và yêu cầu đã gửi, sử dụng cơ sở dữ liệu để lưu trữ và truy xuất dữ liệu và gửi dữ liệu chính xác đến máy khách theo yêu cầu.</p>
+
+<p>Mã phía máy khách được viết bằng <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> và <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> - nó được chạy bên trong trình duyệt web và có ít hoặc không có quyền truy cập vào hệ điều hành bên dưới (bao gồm quyền truy cập hạn chế vào hệ thống tệp).</p>
+
+<p>Các nhà phát triển web không thể kiểm soát trình duyệt mà mọi người dùng có thể đang sử dụng để xem trang web - trình duyệt cung cấp mức độ tương thích không nhất quán với các tính năng mã phía máy khách và một phần thách thức của lập trình phía máy khách là xử lý các khác biệt trong hỗ trợ trình duyệt một cách duyên dáng.</p>
+
+<p>Mã phía máy chủ có thể được viết bằng bất kỳ số ngôn ngữ lập trình nào - ví dụ về các ngôn ngữ web phía máy chủ phổ biến bao gồm PHP, Python, Ruby, C # và NodeJS (JavaScript). Mã phía máy chủ có toàn quyền truy cập vào hệ điều hành máy chủ và nhà phát triển có thể chọn ngôn ngữ lập trình (và phiên bản cụ thể) mà họ muốn sử dụng.</p>
+
+<p>Các nhà phát triển thường viết mã của họ bằng cách sử dụng <strong>các khung web</strong>. Các khung web là tập hợp các hàm, đối tượng, quy tắc và các cấu trúc mã khác được thiết kế để giải quyết các vấn đề phổ biến, tăng tốc độ phát triển và đơn giản hóa các loại nhiệm vụ khác nhau phải đối mặt trong một miền cụ thể.</p>
+
+<p>Một lần nữa, trong khi cả mã phía máy khách và máy chủ đều sử dụng các khung, các miền rất khác nhau và do đó là các khung. Các khung web phía máy khách đơn giản hóa các tác vụ bố trí và trình bày trong khi các khung web phía máy chủ cung cấp rất nhiều chức năng máy chủ web phổ biến mà bạn có thể phải tự thực hiện (ví dụ: hỗ trợ phiên, hỗ trợ người dùng và xác thực, truy cập cơ sở dữ liệu dễ dàng, thư viện templating, vv).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Client-side frameworks thường được sử dụng để giúp tăng tốc độ phát triển mã phía máy khách, nhưng bạn cũng có thể chọn viết tất cả mã bằng tay; thực tế, viết mã bằng tay có thể nhanh hơn và hiệu quả hơn nếu bạn chỉ cần một giao diện người dùng trang web nhỏ, đơn giản.</p>
+
+<p><br>
+ Ngược lại, bạn gần như sẽ không bao giờ xem xét việc viết thành phần phía máy chủ của ứng dụng web mà không có framework — thực hiện một tính năng quan trọng như máy chủ HTTP thực sự khó thực hiện từ đầu khi nói Python, nhưng các web frameworks như Django cung cấp một của hộp, cùng với các công cụ rất hữu ích khác.</p>
+</div>
+
+<div>
+<h2 id="Bạn_có_thể_làm_gì_ở_phía_máy_chủ">Bạn có thể làm gì ở phía máy chủ?</h2>
+
+<p>Lập trình phía máy chủ rất hữu ích vì nó cho phép chúng tôi cung cấp <em>hiệu quả</em> thông tin phù hợp cho từng người dùng và từ đó tạo ra trải nghiệm người dùng tốt hơn nhiều.</p>
+</div>
+
+<p>Các công ty như Amazon sử dụng lập trình phía máy chủ để xây dựng kết quả tìm kiếm cho sản phẩm, đưa ra đề xuất sản phẩm được nhắm mục tiêu dựa trên sở thích của khách hàng và thói quen mua trước đó, đơn giản hóa việc mua hàng, v.v.</p>
+
+<p>Các ngân hàng sử dụng lập trình phía máy chủ để lưu trữ thông tin tài khoản và chỉ cho phép người dùng được ủy quyền xem và thực hiện giao dịch. Các dịch vụ khác như Facebook, Twitter, Instagram và Wikipedia sử dụng lập trình phía máy chủ để làm nổi bật, chia sẻ và kiểm soát quyền truy cập vào nội dung thú vị.</p>
+
+<p>Một số sử dụng và lợi ích chung của lập trình phía máy chủ được liệt kê bên dưới. Bạn sẽ lưu ý rằng có một số chồng chéo!</p>
+
+<h3 id="Lưu_trữ_và_cung_cấp_thông_tin_hiệu_quả">Lưu trữ và cung cấp thông tin hiệu quả</h3>
+
+<p>Hãy tưởng tượng có bao nhiêu sản phẩm có sẵn trên Amazon và tưởng tượng có bao nhiêu bài viết đã được viết trên Facebook? Tạo một trang tĩnh riêng cho từng sản phẩm hoặc bài đăng sẽ hoàn toàn không thực tế.</p>
+
+<p>Thay vào đó, lập trình phía máy chủ cho phép chúng tôi lưu trữ thông tin trong cơ sở dữ liệu và tự động xây dựng và trả về HTML và các loại tệp khác (ví dụ: PDF, hình ảnh, v.v.). Cũng có thể chỉ cần trả lại dữ liệu ({{glossary("JSON")}}, {{glossary("XML")}}, v.v) để hiển thị bằng các khung web phía máy khách thích hợp (điều này giúp giảm gánh nặng xử lý trên máy chủ và lượng dữ liệu cần gửi).</p>
+
+<p>Máy chủ không giới hạn gửi thông tin từ cơ sở dữ liệu và có thể trả về kết quả của các công cụ phần mềm hoặc dữ liệu từ các dịch vụ truyền thông. Nội dung thậm chí có thể được nhắm mục tiêu cho loại thiết bị khách đang nhận nó.</p>
+
+<p>Vì thông tin có trong cơ sở dữ liệu, nên nó cũng có thể dễ dàng chia sẻ và cập nhật hơn với các hệ thống kinh doanh khác (ví dụ: khi sản phẩm được bán trực tuyến hoặc trong cửa hàng, cửa hàng có thể cập nhật cơ sở dữ liệu về hàng tồn kho).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Trí tưởng tượng của bạn không nhất thiết phải làm việc chăm chỉ để xem lợi ích của mã server-side cho việc lưu trữ và cung cấp thông tin hiệu quả:</p>
+
+<ol>
+ <li>Truy cập <a href="https://www.amazon.com/">Amazon</a> hoặc một số trang web thương mại điện tử khác.</li>
+ <li>Tìm kiếm một số từ khóa và lưu ý cách thức cấu trúc trang không thay đổi, mặc dù kết quả thực hiện.</li>
+ <li>Mở hai hoặc ba sản phẩm khác nhau. Lưu ý một lần nữa cách chúng có cấu trúc và bố cục chung, nhưng nội dung cho các sản phẩm khác nhau đã được lấy từ cơ sở dữ liệu.</li>
+</ol>
+
+<p>Đối với cụm từ tìm kiếm chung (giả sử "cá" ), bạn có thể thấy hàng triệu giá trị được trả về theo nghĩa đen. Sử dụng cơ sở dữ liệu cho phép những thứ này được lưu trữ và chia sẻ hiệu quả, và nó cho phép việc trình bày thông tin được kiểm soát chỉ ở một nơi.</p>
+</div>
+
+<h3 id="Tùy_chỉnh_trải_nghiệm_người_dùng">Tùy chỉnh trải nghiệm người dùng</h3>
+
+<p>Máy chủ có thể lưu trữ và sử dụng thông tin về khách hàng để cung cấp trải nghiệm người dùng thuận tiện và phù hợp. Ví dụ: nhiều trang web lưu trữ thẻ tín dụng để các chi tiết không phải nhập lại. Các trang web như Google Maps có thể sử dụng các vị trí đã lưu hoặc hiện tại để cung cấp thông tin định tuyến và lịch sử tìm kiếm hoặc du lịch để làm nổi bật các doanh nghiệp địa phương trong kết quả tìm kiếm.</p>
+
+<p>Một phân tích sâu hơn về thói quen người dùng có thể được sử dụng để dự đoán sở thích của họ và tùy chỉnh thêm các phản hồi và thông báo, ví dụ như cung cấp danh sách các địa điểm phổ biến đã truy cập trước đây hoặc bạn có thể muốn xem trên bản đồ.</p>
+
+<div class="note">
+<p><strong>Note: </strong><a href="https://maps.google.com/">Google Maps</a> lưu lịch sử tìm kiếm và truy cập của bạn. Các địa điểm thường xuyên truy cập hoặc tìm kiếm thường được tô sáng hơn các địa điểm khác.</p>
+
+<p>Kết quả tìm kiếm của Google được tối ưu hóa dựa trên các tìm kiếm trước đó.</p>
+
+<ol>
+ <li> Chuyển đến tìm kiếm <a href="https://google.com/">Google</a>.</li>
+ <li> Tìm kiếm "bóng đá".</li>
+ <li>Bây giờ hãy thử gõ "yêu thích" vào hộp tìm kiếm và quan sát các dự đoán tìm kiếm tự động hoàn tất.</li>
+</ol>
+
+<p>Sự trùng hợp? Không có gì!</p>
+</div>
+
+<h3 id="Kiểm_soát_truy_cập_nội_dung">Kiểm soát truy cập nội dung</h3>
+
+<p>Lập trình phía máy chủ cho phép các trang web hạn chế quyền truy cập đối với người dùng được ủy quyền và chỉ cung cấp thông tin mà người dùng được phép xem.</p>
+
+<p>Các ví dụ trong thế giới thực bao gồm:</p>
+
+<ul>
+ <li>Các mạng xã hội như Facebook cho phép người dùng kiểm soát hoàn toàn dữ liệu của riêng họ nhưng chỉ cho phép bạn bè của họ xem hoặc nhận xét về nó. Người dùng xác định ai có thể xem dữ liệu của họ và bằng tiện ích mở rộng, dữ liệu của ai xuất hiện trong nguồn cấp dữ liệu của họ - ủy quyền là một phần trung tâm của trải nghiệm người dùng!</li>
+ <li>
+  <p>Trang web bạn đang truy cập ngay bây giờ kiểm soát quyền truy cập vào nội dung: mọi người đều có thể xem bài viết, nhưng chỉ những người dùng đã đăng nhập mới có thể chỉnh sửa chúng. Để thử điều này, nhấp vào nút <strong>Chỉnh sửa (Edit)</strong> ở đầu trang này - nếu bạn đã đăng nhập, bạn sẽ được hiển thị chế độ xem chỉnh sửa; nếu bạn chưa đăng nhập, bạn sẽ được đưa đến trang đăng ký.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Xem xét các ví dụ thực tế khác, nơi quyền truy cập vào nội dung được kiểm soát. Ví dụ: bạn có thể thấy gì nếu bạn truy cập trang web trực tuyến cho ngân hàng của mình? Đăng nhập vào tài khoản của bạn - bạn có thể xem và sửa đổi thông tin bổ sung nào? Thông tin nào bạn có thể thấy rằng chỉ có ngân hàng mới có thể thay đổi?</p>
+</div>
+
+<h3 id="Lưu_trữ_thông_tin_phiên_trạng_thái">Lưu trữ thông tin phiên / trạng thái</h3>
+
+<p>Lập trình phía máy chủ cho phép các nhà phát triển sử dụng các <strong>phiên</strong> - về cơ bản, một cơ chế cho phép máy chủ lưu trữ thông tin về người dùng hiện tại của trang web và gửi các phản hồi khác nhau dựa trên thông tin đó.</p>
+
+<p>Ví dụ, điều này cho phép một trang web biết rằng người dùng đã đăng nhập trước đó và hiển thị các liên kết đến email hoặc lịch sử đặt hàng của họ hoặc có thể lưu trạng thái của một trò chơi đơn giản để người dùng có thể truy cập lại trang web và tiếp tục họ đã bỏ nó</p>
+
+<div class="note">
+<p><strong>Note</strong>: Truy cập trang web báo có mô hình đăng ký và mở một loạt các tab (ví dụ: <a href="http://www.theage.com.au/">The Age</a>). Tiếp tục truy cập trang web trong một vài giờ / ngày. Cuối cùng, bạn sẽ bắt đầu được chuyển hướng đến các trang giải thích cách đăng ký và bạn sẽ không thể truy cập các bài viết. Thông tin này là một ví dụ về thông tin phiên được lưu trữ trong cookie.</p>
+</div>
+
+<h3 id="Thông_báo_và_liên_lạc">Thông báo và liên lạc</h3>
+
+<p>Máy chủ có thể gửi thông báo chung hoặc cụ thể cho người dùng thông qua trang web hoặc qua email, SMS, tin nhắn tức thời, cuộc trò chuyện video hoặc các dịch vụ liên lạc khác.</p>
+
+<p>Một vài ví dụ bao gồm:</p>
+
+<ul>
+ <li>Facebook và Twitter gửi email và tin nhắn SMS để thông báo cho bạn về các liên lạc mới.</li>
+ <li>Amazon thường xuyên gửi e-mail sản phẩm đề xuất các sản phẩm tương tự như những sản phẩm đã mua hoặc đã xem mà bạn có thể quan tâm.</li>
+ <li>Một máy chủ web có thể gửi thông điệp cảnh báo đến quản trị viên trang web cảnh báo chúng về bộ nhớ thấp trên máy chủ hoặc hoạt động đáng ngờ của người dùng.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Loại thông báo phổ biến nhất là "xác nhận đăng ký". Chọn hầu hết mọi trang web lớn mà bạn quan tâm (Google, Amazon, Instagram, v.v.) và tạo một tài khoản mới bằng địa chỉ email của bạn. Bạn sẽ sớm nhận được một email xác nhận đăng ký của bạn hoặc yêu cầu xác nhận để kích hoạt tài khoản của bạn.</p>
+</div>
+
+<h3 id="Phân_tích_dữ_liệu">Phân tích dữ liệu</h3>
+
+<p>Một trang web có thể thu thập rất nhiều dữ liệu về người dùng: những gì họ tìm kiếm, những gì họ mua, những gì họ giới thiệu, thời gian họ ở lại trên mỗi trang. Lập trình phía máy chủ có thể được sử dụng để tinh chỉnh các phản hồi dựa trên phân tích dữ liệu này.</p>
+
+<p>Ví dụ: Amazon và Google đều quảng cáo sản phẩm dựa trên các tìm kiếm trước đó (và mua hàng).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Nếu bạn là người dùng Facebook, hãy truy cập nguồn cấp dữ liệu chính của bạn và xem luồng bài đăng. Lưu ý cách một số bài đăng không theo thứ tự số - cụ thể, các bài đăng có nhiều lượt "thích" thường cao hơn trong danh sách so với các bài đăng gần đây.</p>
+
+<p>Ngoài ra, hãy nhìn vào loại quảng cáo bạn đang được hiển thị - bạn có thể thấy quảng cáo cho những thứ bạn đã xem trên các trang web khác. Thuật toán của Facebook để làm nổi bật nội dung và quảng cáo có thể là một bí ẩn, nhưng rõ ràng là nó phụ thuộc vào sở thích và thói quen xem của bạn!</p>
+</div>
+
+<h2 id="Tóm_lược">Tóm lược</h2>
+
+<p>Xin chúc mừng, bạn đã đến cuối bài viết đầu tiên về lập trình phía máy chủ. </p>
+
+<p>Bây giờ bạn đã biết rằng mã phía máy chủ được chạy trên máy chủ web và vai trò chính của nó là kiểm soát <em>thông tin</em> nào được gửi đến người dùng (trong khi mã phía máy khách chủ yếu xử lý cấu trúc và trình bày dữ liệu đó cho người dùng) </p>
+
+<p>Bạn cũng nên hiểu rằng nó hữu ích vì nó cho phép chúng tôi tạo các trang web cung cấp thông tin phù hợp cho người dùng cá nhân và có ý tưởng tốt về một số điều bạn có thể làm khi bạn là lập trình viên phía máy chủ.</p>
+
+<p>Cuối cùng, bạn nên hiểu rằng mã phía máy chủ có thể được viết bằng một số ngôn ngữ lập trình và bạn nên sử dụng web framework để làm cho toàn bộ quá trình dễ dàng hơn.</p>
+
+<p>Trong một bài viết trong tương lai, chúng tôi sẽ giúp bạn chọn web framework tốt nhất cho trang web đầu tiên của bạn. Ở đây chúng tôi sẽ đưa bạn qua các tương tác máy khách-máy chủ chính chỉ chi tiết hơn một chút.</p>
+
+<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li>
+</ul>
diff --git a/files/vi/learn/server-side/index.html b/files/vi/learn/server-side/index.html
new file mode 100644
index 0000000000..e2c651cc55
--- /dev/null
+++ b/files/vi/learn/server-side/index.html
@@ -0,0 +1,59 @@
+---
+title: Lập trình website khía cạnh server
+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">Chủ đề <strong>Web động - Lập trình phía máy chủ </strong>là một loạt các bài viết hướng dẫn cách tạo ra các trang web động; là các trang web sẽ cung cấp thông tin tùy chỉnh dựa trên một yêu cầu HTTP. Các bài viết sẽ cung cấp một sự giới thiệu chung cho lập trình phía máy chủ, đi kèm với hướng dẫn cụ thể cho người mới bắt đầu trên các framework như Django (Python) và Express (Node.js/Javascript) để tạo nên các ứng dụng cơ bản.</p>
+
+<p>Các trang web phổ biến nhất sử dụng một số kỹ thuật về phía máy chủ để hiển thị dữ liệu động khác nhau khi được yêu cầu. Ví dụ, hình dung rằng có bao nhiêu sản phẩm bày bán trên Amazon, và hình dung rằng có bao nhiêu bài đăng được viết trên Facebook? Việc hiển thị tất cả những nội dung đó trên các trang tĩnh là hoàn toàn không hiệu quả, do đó thay vì các trang hiển thị tĩnh (xây dựng dựa trên HTML, CSS và Javascript), thì tự động cập nhật dữ liệu được hiển thị bên trong các trang đó khi cần, ví dụ: khi bạn muốn xem một sản phẩm khác trên Amazon. </p>
+
+<p>Trong thế giới phát trển web hiện đại, việc học về phát triển phía máy chủ rất được khuyến khích.</p>
+
+<h2 id="Chặng_đường_học_tập">Chặng đường học tập</h2>
+
+<p>Bắt đầu với lập trình phía máy chủ thường dễ hơn so với phát triển phía máy khách, vì các trang web động có xu hướng thực hiện rất nhiều hoạt động tương tự nhau( lấy dữ liệu từ cơ sở dữ liệu và hiển thị nó trong một trang, xác thực dữ liệu do người dùng nhập và lưu nó trong cơ sở dữ liệu, kiểm tra quyền người dùng và ghi nhật ký người dùng, v.v.) và được xây dựng bằng cách sử dụng web framework làm cho các thao tác trên máy chủ web trở nên dễ dàng hơn.</p>
+
+<p>Một kiến ​​thức cơ bản về các khái niệm lập trình (hoặc của một ngôn ngữ lập trình cụ thể) là hữu ích, nhưng không cần thiết. Tương tự như vậy, chuyên môn về lập trình phía máy khách là không cần thiết, nhưng kiến ​​thức cơ bản sẽ giúp bạn làm việc tốt hơn với các nhà phát triển tạo trang web phía máy khách của bạn.</p>
+
+<p>Bạn sẽ cần phải hiểu "web làm việc thế nào". Chúng tôi giới thiệu bạn một số chủ đề cơ bản:</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>Với sự hiểu biết cơ bản, bạn sẽ sẵn sàng để qua phần Modules trong bài viết này. </p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>Chủ đề này chứa một số module. Bạn nên bắt đầu với module đầu tiên, sau đó đến 1 trong 2 module sau, đây là 2 ngôn ngữ server side rất phổ biến sẽ cho bạn thấy cách nó hoạt động</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="Xem_thêm">Xem thêm</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/vi/learn/tools_and_testing/cross_browser_testing/index.html b/files/vi/learn/tools_and_testing/cross_browser_testing/index.html
new file mode 100644
index 0000000000..b581a119f1
--- /dev/null
+++ b/files/vi/learn/tools_and_testing/cross_browser_testing/index.html
@@ -0,0 +1,33 @@
+---
+title: Kiểm tra trình duyệt chéo
+slug: Learn/Tools_and_testing/Cross_browser_testing
+translation_of: Learn/Tools_and_testing/Cross_browser_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Mô-đun này tập trung vào kiểm thử các dự án web trên các trình duyệt khác nhau. Chúng tôi xem xét việc xác định đối tượng mục tiêu của bạn (ví dụ: người dùng, trình duyệt và thiết bị nào bạn cần quan tâm nhất?), Cách thực hiện kiểm thử, các vấn đề chính mà bạn sẽ phải đối mặt với các loại mã khác nhau và cách giảm thiểu chúng, những công cụ nào hữu ích nhất trong việc giúp bạn kiểm thử và khắc phục sự cố và cách sử dụng tự động hóa để tăng tốc độ kiểm thử.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Bạn nên thành thạo cốt lõi của các ngôn ngữ <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, và <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> trước khi sử dụng công cụ được liệt kê trong loạt bài viết này.</p>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Giới thiệu về kiểm thử trình duyệt chéo</a></dt>
+ <dd>Khởi đầu mô-đun bằng cách cung cấp khái quát về vấn đề kiểm thử trình duyệt chéo, trả lời các câu hỏi như là "kiểm thử trình duyệt chéo là gì?", "các sự cố thường gặp như thế nào?", và "các hướng tiếp cận chính để kiểm thử, xác định và sửa chữa các sự cố đó?"</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Chiến lược kiểm thử</a></dt>
+ <dd>Tiếp theo, ta đào sâu vào chiến lược kiểm thử, xác định đối tượng mục tiêu (tức là trình duyệt, thiết bị, và những phân đoạn nào bạn nên kiểm thử kỹ lưỡng), chiến lược kiểm thử low fi (kiếm thật nhiều thiết bị và vài máy ảo, và kiểm thử ad hoc nếu cần), chiếc lược high tech (tự động hoá, sử dụng ứng dụng dành riêng cho việc kiểm thử), và kiểm thử với nhóm người dùng.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Xử lý sự cố HTML và CSS thường gặp</a></dt>
+ <dd>Sau khi đã nắm bắt được căn bản, ta sẽ đi vào tìm hiểu những sự cố tương thích trình duyệt thường gặp trong các đoạn mã HTML và CSS, và dùng công cụ nào để ngăn chặn sự cố xảy ra, hoặc sửa chữa lỗi lầm hiện hành. Điều này bao gồm phân tích mã nguồn (linting), xử lý tiền tố CSS, dùng công cụ dành cho nhà phát triển của trình duyệt để mò lỗi, dùng polyfill để hỗ trợ thêm cho trình duyệt, xác định vấn đề trong thiết kế linh hoạt, và nhiều hơn nữa.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Xử lý sự cố JavaScript thường gặp</a></dt>
+ <dd>Giờ ta sẽ xem xét tới sự cố tương thích trình duyệt của JavaScript và cách sửa chúng. Điều này bao gồm thông tin về cách dùng công cụ dành cho nhà phát triển của trình duyệt đề mò lỗi và cách sửa chúng, dùng polyfill và thư viện để dựng giải pháp dự phòng, dùng tính năng cao cấp của JavaScript trên các trình duyệt cổ, và hơn thế nữa.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Xử lý sự cố tiếp cận thường gặp</a></dt>
+ <dd>Tiếp đến ta dành tâm trí cho khả năng tiếp cận, cung cấp thông tin về các sự cố thường gặp, cách kiểm thử đơn giản, và cách dùng công cụ kiểm toán/ tự động hoá để tìm kiếm sự cố tiếp cận.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Hiện thực bộ nhận diện tính năng</a></dt>
+ <dd>Nhận diện tính năng liên quan tới kiểm tra xem trình duyệt này có hỗ trợ khối lệnh kia hay không, và chạy lệnh khác tuỳ thuộc vào câu trả lời là có hay không, để các trình duyệt luôn hoạt động thay vì oẳng hoặc báo lỗi. Bài viết này hướng dẫn chi tiết bạn cách viết bộ nhận diện tính năng một cách đơn giản, cách dùng thư viện để tăng tốc hiện thực nó, và các tính năng dựng sẵn dành dành cho bộ nhận diện tính năng như <code>@supports</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Tự động hoá kiểm thử</a></dt>
+ <dd>Tiến hành kiểm thử bằng tay trên nhiều trình duyệt và thiết bị, liên tục nhiều ngày, có thể gây ra chán nản và tốn tohừi gian. Để gia tăng hiệu suất kiểm thử, bạn nên làm quen với một vài công cụ tự động. Trong bài viết này, ta sẽ nghiên cứu công cụ nào dùng được, cách chạy công việc, và cơ bản cách dùng ứng dụng kiểm thử tự động thương mại (tốn phí) như Sauce Labs và Browser Stack.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Cấu hình môi trường kiểm thử tự động của riêng mình</a></dt>
+ <dd>Trong bài viết này, chúng tôi sẽ dạy bạn cách cài đặt môi trường tự động cho riêng mình và chạy test trên Selenium/WebDriver và thư viện kiểm thử như selenium-webdriver cho Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd>
+</dl>
diff --git a/files/vi/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/vi/learn/tools_and_testing/cross_browser_testing/introduction/index.html
new file mode 100644
index 0000000000..aedc41104b
--- /dev/null
+++ b/files/vi/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -0,0 +1,201 @@
+---
+title: Giới thiệu về kiểm tra trình duyệt chéo
+slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction
+translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+
+<p class="summary">Bài viết này bắt đầu bằng cách cung cấp tổng quan về chủ đề kiểm thử trình duyệt (chéo), trả lời các câu hỏi như "kiểm thử trình duyệt chéo là gì?", "Loại sự cố phổ biến nhất bạn gặp phải là gì?" Và "các phương pháp chính để thử nghiệm, xác định và khắc phục sự cố là gì?"</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Quen thuộc với các các khái niệm cốt lõi của các ngôn ngữ <a href="https://developer.mozilla.org/vi/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/vi/docs/Learn/CSS">CSS</a> và <a href="https://developer.mozilla.org/vi/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Để hiểu được các khái niệm cấp cao liên quan đến kiểm tra trình duyệt chéo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Kiểm_thử_trình_duyệt_chéo_là_gì">Kiểm thử trình duyệt chéo là gì?</h2>
+
+<p>Kiểm thử trình duyệt chéo là hoạt động đảm bảo trang web hoặc ứng dụng web của bạn chạy ổn trên một lượng trình duyệt chấp nhận được. Là một nhà phát triển web, bạn không chỉ có trách nhiệm đảm bảo dự án của mình chạy được, mà còn phải chạy được trên mọi trình duyệt, thiết bị hoặc thiết bị hỗ trợ mà người dùng của bạn sử dụng. Bạn cần tính đến các phương án như sau:</p>
+
+<ul>
+ <li>Trình duyệt khác một hoặc hai loại mà bạn thường dùng trên thiết bị của mình, bao gồm cả những trình duyệt hơi cũ một chút - không hỗ trợ tính năng "xịn xò" hoặc mới nhất của CSS hoặc JavaScript - mà một vài người vẫn còn dùng.</li>
+ <li>Thiết bị khác nhau có khả năng khác nhau, từ những dòng tablet và điện thoại thông minh đời mới nhất, hay tivi thông minh, đến những dòng rẻ tiền và cũ kỹ mà chỉ có thể chạy được những trình duyệt có tính năng giới hạn.</li>
+ <li>Người khuyết tật, những người dùng Web với công nghệ hỗ trợ như screenreader (trình đọc màn hình), hoặc không dùng chuột (vài người chỉ dùng bàn phím).</li>
+</ul>
+
+<p>Hãy nhớ bạn không phải người dùng trang web của bạn — web của bạn có thể chạy ngon lành trên Macbook Pro hay dòng Galaxy Nexus cao cấp không có nghĩa là nó sẽ chạy được cho mọi người dùng — bạn còn phải kiểm thử nhiều lắm!</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">Make the web work for everyone</a> đưa ra nhiều góc nhìn dựa trên trình duyệt mà mọi người dùng, thị phần của các trình duyệt, và sự cố tương thích trình duyệt chéo.</p>
+</div>
+
+<p>Ta nên xem xét vài thuật ngữ đã. Trước hết, khi nhắc tới trang web "chạy ổn trên trình duyệt chéo", tức là chúng phải đạt được một lượng trải nghiệm người dùng chấp nhận được trên nhiều trình duyệt khác nhau. Một trang web được xếp vào dạng OK không có nghĩa trải nghiệm đều như nhau trên mọi trình duyệt, mà chỉ cần cho phép truy cập được các chức năng cốt lõi. Trên trình duyệt hiện đại, bạn có thể có đạt được hoạt hoạ (anmiation), 3D và các hiệu ứng chuyên nghiệp, trong khi trên trình duyệt cũ hơn, bạn sẽ chỉ có các mảng tĩnh chứa đầy đủ thông tin cần thiết. Chỉ cần chủ của trang web vui là bạn làm được việc rồi.</p>
+
+<p>Mặt khác, sẽ chẳng OK tẹo nào nếu một trang chỉ chạy ổn với những người bình thường, còn người khuyết tật thì hoàn toàn không thể truy cập được bởi vì trình screen reader của họ không thể đọc được nội dung trên trang web.</p>
+
+<p>Thứ hai, khi nhắc tới "một lượng trình duyệt web chấp nhận được", không có nghĩa hoàn toàn 100% trình duyệt trên toàn thế giới — điều này là bất khả thi. Bạn nên dự đoán trước các trình duyệt và thiết bị mà người dùng trang web sẽ có thể dùng tới (ta sẽ bàn về vấn đề này trong phần thứ hai của loạt bài viết này — mời đọc <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), nhưng bạn không thể đảm bảo mọi thhws. Là nhà phát triển web, bạn cần ước lượng một khoảng nhất định trình duyệt và thiết bị chắc chắn chạy được mã bạn viết ra; còn ngoài khoảng đó, bạn phải viết làm sao để cho các trìnhh duyệt khác cũng có thheer sử dụng nội dung của mình. Đây là một trong những thách thức khó nhằn nhất với nhà phát triển web.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Ta sẽ xem mã nguồn về phần này trong các bài viết sau.</p>
+</div>
+
+<h2 id="Tại_sao_lại_xảy_ra_sự_cố_tương_thích_trình_duyệt_chéo">Tại sao lại xảy ra sự cố tương thích trình duyệt chéo?</h2>
+
+<p>Có nhiều lý do khác nhau giải thích tại sao sự cố tương thích trình duyệt chéo lại xảy ra, trong bài viết này, chúng tôi chủ yếu đề cập những sự cố với hành vi khác nhau trên các trình duyệt / thiết bị / cài đặt duyệt web khác nhau. Before you even get to cross browser issues, you should have already fixed out bugs in your code (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Gỡ lỗi HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Gỡ lỗi CSS</a>, và <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Sai ở đâu? Khắc phục sự cố JavaScript</a> từ các chủ đề trước đây để nạp lại trí nhớ của bạn).</p>
+
+<p>Sự cố trình duyệt chéo thường xảy ra vì:</p>
+
+<ul>
+ <li>thỉnh thoảng trình duyệt có lỗi, hoặc hiện thực hoá các tính năng theo cách riêng biệt. Trường hợp này giờ đỡ khiếp hơn ngày trước; vào thời kỳ IE4 và Netscape 4 tranh nhhau thị phần mảng trình duyệt trong thập niên 80, các công ty trình duyệt thời đó cố tình cài đặt mọi thứ theo cách riêng biệt để đạt được lợi thế cạnh tranh, điều đó khiến cho các nhà phát triển ứng dụng mệt lử. Trình duyệt hiện nay đã bớt đi các khía cạnh đó, nhưng thi thoảng sự khác biệt và lỗi vẫn phát sinh</li>
+ <li>một số trình duyệt có hỗ trợ tính năng công nghệ theo mức khác nhhau. Điều này là không thể tránh khỏi khi bạn sử dụng công nghệ quá tân tiến mà trình duyệt hiện đại đang chuẩn bị cài đặt chúng, hoặc bạn phải hỗ trợ các trình duyệt cũ kỹ mà chẳng ai thèm phát triển thêm nữa, hay còn gọi là đóng băng (tức là không có thêm cập nhật mới) khá lâu trước cả khi tính năng đó được tạo ra. Chẳng hạn, nếu bạn muốn dùng tính năng tân tiến của JavaScript trong trang web của mình, những tính năng đó có thể sẽ không hoạt động trên trình duyệt cũ. Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn, có lẽ bạn phải dùng đoạn mã khác, hoặc tìm cách dịch ngược đoạn mã của mình thành mã mà trình duyệt đó có thể hiểu được (thông qua các trình biên dịch chéo).</li>
+ <li>một số thiết bị có thể có hạn chế khiến cho trang web chạy chậm, hoặc hiển thị tồi. Chẳng hạn, nếu một web được thiết kế thật đẹp trên PC, chắc chắn người dùng điện thoại sẽ thấy nó nhỏ xíu và khó đọc. Nếu trang của bạn có nhiều hoạt hoạ nặng, chắc hẳn nó sẽ chạy êm ru trên một chiếc tablet cấu hỉnh mạnh, nhưng sẽ chậm chạp và ì achhj trên một thiết bị yếu đuối hơn.</li>
+</ul>
+
+<p>và còn nhiều lý do hơn nữa.</p>
+
+<p>Trong các bài viết tiếp sau này, ta sẽ khám phá thêm các sự cố trình duyệt chéo thường gặp, và tìm giải pháp.</p>
+
+<h2 id="Quy_trình_kiểm_thử_trình_duyệt_chéo">Quy trình kiểm thử trình duyệt chéo</h2>
+
+<p>Mới nghe qua về công việc kiểm thử trình duyệt chéo thì có vẻ đáng sợ vầ tốn thời gian thật, nhưng không hẳn là vậy đâu - bạn chỉ cần lên kế hoạch thật kỹ càng, và đảm bảo bạn thực hiện đủ và đúng chỗ để không bị lạc vào những sự cố khó lường. Nếu bạn làm việc với một dự án lớn, bạn nên kiểm thử định kỳ, để chắc chắn tính năng mới hoạt động với đối tượng mục tiêu của bạn, và những đoạn mã mới thêm không phá huỷ tính năng cũ mà trước đó hoạt động ngon nghẻ.</p>
+
+<p>Nếu bạn để dành kiểm thử tới cuối dự án, lúc này mọi lỗi bạn phát hiện ra đều tốn kém chi phí và thời gian để sửa hơn trong lúc xây dựng.</p>
+
+<p>Quy trình kiểm thử và sửa lỗi cho một dự án có thể được chia làm 4 pha (mỗi người có cách chia khác nhau):</p>
+
+<p><strong>Lên kế hoạchh &gt; Phát triển &gt; Kiểm thử/ khai phá &gt; Sửa lỗi/ lặp lại</strong></p>
+
+<p>Từ bước 2 – 4 sẽ thường được lặp đi lặp lại cho tới khi đã cài đặt hết tất cả mọi thứ. Ta sẽ xem kỹ hơn về từng giai đoạn thuộc quy trình kiểm thử trong các bài viết sau, còn giờ cứ lướt qua từng bước nhé.</p>
+
+<h3 id="Lên_kế_hoạch">Lên kế hoạch</h3>
+
+<p>Trong pha lên kế hoạch, chắc hẳn bạn sẽ gặp mặt chủ của trang/ khách hàng (đây có thể là sếp của bạn, hoặc một người ở đơn vị ngoài thuê bận làm), tại đây bạn sẽ xác định chính xác xem trang web nên trông như thế nào - nội dung và tính năng của trang là gì, trông nó ra làm sao, vân vân. Ngoài ra, bạn sẽ còn muốn biết bạn có bao nhiêu thời gian để thực hiện trang web - hạn cuối của họ là bao giờ, và họ định bỏ bao nhiêu ra để trả cho bạn? Ta sẽ không đi quá chi tiết vào phần này, nhưng sự cố trình duyệt chéo thường có ảnh hưởng quan trọng tới bước lên kế hoạch.</p>
+
+<p>Ngay khi có ý tưởng về các chức năng cần làm, và công nghệ để bạn dựng chúng lên, bạn nên bắt đầu tìm hiểu về đối tượng mục tiêu — trình duyệt hay thiết bị nào sẽ là đối tượng mục tiêu cho trang web của bạn? Có thể khách hàng của bạn đã có dữ liệu về những đối tượng này rồi, thông qua các nghiên cứu của riêng bên họ, như là từ các trang web mà họ đã sở hữu, hoặc từ chính phiên bản cũ của trang web mà bạn đang làm mới. Nếu không có dữ liệu về vấn đề này, bạn có thể dựa trên dữ liệu của một số nguồn khác, như là thông tin của phe đối thủ, hay là vùng đất mà trang web của bạn chuẩn bị hoạt động. Bạn cũng có thể dựa vào trực giác.</p>
+
+<p>Chẳng hạn, bạn chuẩn bị xây dựng một trang thương mại điện tử phục vụ khách hàng ở Bắc Mĩ. Trang web đó nên chạy ổn định trên mọi trình duyệt nổi tiếng cho máy tính cá nhân cũng như thiết bị di động (iOS, Android, Windows phone) — nên bao gồm cả Chrome (và Opera bởi nó dùng cùng engine với Chrome), Firefox, IE/Edge, và Safari. Trang web đó cũng nên có trải nghiệm truy cập chấp nhận được trên IE 8 và 9, và tuân thủ WCAG AA.</p>
+
+<p>Khi nắm được các nền tảng để kiểm thử, bạn nên dành thời gian kiểm tra lại các chức năng cũng như công nghệ bạn định dùng. Chẳng hạn, nếu chủ của trang thương mai điện tử đó muốn có 3D tour sử dụng WebGL cho từng sản phẩm trên trang chi tiết sản phẩm, họ buộc phải chấp nhận rằng tính năng này không thể hoạt động trên IE trước phiên bản 11. Bạn sẽ phải làm thêm phiên bản khác không có tính năng này để hỗ trợ người dùng dùng bản IE cũ hơn.</p>
+
+<p>Bạn nên soạn ra danh sách khoanh vùng sự cố tiềm tàng.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có tìm thấy thông tin về hỗ trợ tương thích trình duyệt đối với các công nghệ ngay trên trính trang này - MDN! Ngoài ra bạn cũng nên ghé qua <a href="http://caniuse.com/">caniuse.com</a>, để kiếm thêm thông tin chi tiết hữu ích.</p>
+</div>
+
+<p>Khi đã có đủ thông tin chi tiết rồi, bạn có thể chuyển sang phát triển trang web.</p>
+
+<h3 id="Phát_triển">Phát triển</h3>
+
+<p>Giớ đến pha phát triển trang web. Bạn nên chia nhỏ các phần khác nhau trong trang thành mô-đun, chẳng hạn, bạn nên chia nhỏ các vùng hiển thị trên trang thành - trang chủ, trang chi tiết sản phẩm, giỏ hàng, luồng thanh toán, vân vân. Sau đó bạn cũng có thể chia nhỏ hơn nữa - cài đặt đầu trang, cuối trang, chi tiết sản phẩm, vân vân.</p>
+
+<p>Có nhiều chiến lược phát triển trên trình duyệt chéo, chẳng hạn:</p>
+
+<ul>
+ <li>Đảm bảo mọi chức năng đều hoạt động được trên mọi trình duyệt đối tượng. Để đạt được điều này, bạn có thể sẽ phải viết nhiều dòng mã khác nhau để tái hiện các chức năng đó cho các trình duyệt khác nhau, hoặc dùng {{glossary("Polyfill")}} trên JavaScript hoặc công nghệ khác để hỗ trợ chúng, hoặc dùng thư viện có chức năng tự động hoá công cuộc đó (như Babel) tuỳ thuộc vào trình duyệt mà đối tượng mục tiêu của bạn sử dụng.</li>
+ <li>Chấp nhận rằng có một số thứ không thể hoạt động y hệt nhau trên mọi trình duyệt, và đưa ra giải pháp khác (chấp nhận được) cho trình duyệt không hỗ trợ mọi chức năng. Đôi khi ta không thể tránh khỏi điều này do hạn chế từ phía thiết bị — trải nghiệm thị giác trên màn ảnh rộng ở rạp chiếu phim không thể sánh được với chiếc điện thoại có kích thước màn 4 inch được, không kể cách bạn lập trình trang web của mình..</li>
+ <li>Chấp nhận rằng trang web của bạn sẽ không chạy được trên trình duyệt lâu đời, và bước tiếp. Điều này OK nếu khách hàng của bạn/ người dùng của bạn OK với điều đó.</li>
+</ul>
+
+<p>Thông thường quá trình phát triển của bạn sẽ bao gồm sự kết hợp của cả ba hướng tiếp cận phía trên. Điều quan trọng nhất trong pha này là bạn phải kiểm thử từng phần nhỏ trước khi tải nó lên - đừng để dành kiểm thử đến cuối!</p>
+
+<h3 id="Kiểm_thử_Khai_phá">Kiểm thử/ Khai phá</h3>
+
+<p>Sau mỗi pha phát triển, bạn sẽ cần kiểm thử chức năng mới của mình. Trước hết, bạn nên đảm bảo không có lỗi lớn nào trong mã nguồn cản trở sự hoạt động của chắc năng đó:</p>
+
+<ol>
+ <li>Kiểm thử nó với một vài trình duyệt ổn định nhất trên hệ thống của bạn, như là Firefox, Safari, Chrome, hay IE/Edge.</li>
+ <li>Thử tiếp cận trang của bạn theo cách thủ công hơn, chẳng hạn như chỉ dùng bàn phím, hoặc screen reader để xem liệu nó có thể điều hướng được hay không.</li>
+ <li>Kiểm thử trên thiết bị di động, như Android hoặc iOS.</li>
+</ol>
+
+<p>Tới đây, hãy sửa mọi lỗi lầm mà bạn phát hiện trong đoạn mã nguồn mới.</p>
+
+<p>Kế đến, bạn nên thử mở rộng danh sách trình duyệt cần kiểm thử hướng tới đối tượng mục tiêu của mình và tập trung phát hiện sự cố trình duyệt chéo (để biết thêm chi tiết, đọc trong bài tiếp theo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">xác định đối tượng trình duyệt được sử dụng</a>). Chẳng hạn:</p>
+
+<ul>
+ <li>Kiểm thử thay đổi mới nhất đó trên nhiều trình duyệt hiện đại cho dòng máy tính cá nhân nhất có thể — bao gồm Firefox, Chrome, Opera, IE, Edge, và Safari trên các hệ điều hành máy tính cá nhân (lý tưởng nhất là Mac, Windows, và Linux).</li>
+ <li>Kiểm thử trên các dòng điện thoại thông minh và máy tính bảng thông dụng (tức là iOS Safari trên iPhone/iPad, Chrome và Firefox trên iPhone/iPad/Android),</li>
+ <li>Kiểm thử trên cả các trình duyệt có trong danh sách đối tượng của bạn nữa.</li>
+</ul>
+
+<p>Cách chân tay nhất là tự tay kiểm thử mọi thứ (kéo thêm vài thành viên nữa nếu bạn làm việc trong nhóm). Nếu có thể, bạn nên kiểm thử trên thiết bị thật.</p>
+
+<p>Nếu bạn không có đủ tư liệu để kiểm thử tất cả các trình duyệt, hệ điều hành hay thiết bị phần cứng, bạn cũng có thể thử dùng bộ mô phỏng (mô phỏng một thiết bị bằng phần mềm trên máy tính cá nhân của mình) và máy ảo (phần mềm cho phép bạn mô phỏng hệ điều hành/ phần mềm khác trên máy tính cá nhân của mình). Đây là một trong những quyết định khá là phổ biến, đặc biệt trong một số tình huống - chẳng hạn, Windows không cho phép bạn cài nhiều phiên bản của hệ điều hành trên cùng một máy, vậy thì chỉ còn dựng máy ảo lên thôi.</p>
+
+<p>Ngoài cách đó ra, bạn có thể dùng nhóm người dùng - dùng một nhóm người nằm ngoài đội phát triển của bạn để kiểm thử trang web cho bạn. Nhóm người này có thể là bạn bè hoặc người thân trong gia đình, nhóm các đồng nghiệp khác, một lớp học ở các cơ sở giáo dục, hoặc một chuyên gia kiểm thử, bạn bỏ tiền ra để lấy được kết quả kiểm thử.</p>
+
+<p>Sau cùng, bạn có thể kiểm thử thông minh hơn bằng cách sử dụng công cụ kiểm toán hoặc tự đống hoá; đây là một lựa chọn đáng để lưu tâm khi dự án của bạn phình to lên, do kiểm thử bằng tay thực sự mất kha khá nhiều thì giờ. Bạn có thể tự cấu hình hệ thống kiểm thử tự động (<a href="http://www.seleniumhq.org/">Selenium</a> hiện đang là ứng dụng khá phổ biến phục vụ mục đích này) có thể kiểm thử hoạt động của trang bạn trên nhiều trình duyệt khác nhau, và:</p>
+
+<ul>
+ <li>kiểm tra xem nút bấm trên màn hình có trả về hành vi chuẩn hay không (chẳng hạn, nút bấm đăng nhập), hiển thị kết quả sau mỗi lần kiểm tra</li>
+ <li>chụp lại ảnh màn hình, cho phép bạn kiểm tra xem layout trang có đồng nhất trên mọi trình duyệt hay không.</li>
+</ul>
+
+<p>Nếu muốn, còn nhiều thứ để bạn lựa hơn. Có vài công cụ mất phí như là <a href="https://saucelabs.com/">Sauce Labs</a> và <a href="https://www.browserstack.com/">Browser Stack</a> giúp bạn đạt được mục đích của mình, mà không phải tốn thời gian cấu hình, nếu bạn sẵn sàng bỏ ra chút kinh phí vào công cuộc kiểm thử. Bạn cũng có thể cấu hình môi trường tự động kiểm thử cho mình, và chỉ cho phép kết hợp thay đổi của mình vào kho mã nguồn khi nó vượt qua được bài kiểm tra tương thích.</p>
+
+<h4 id="Kiểm_thử_trên_trình_duyệt_mới_ra_mắt">Kiểm thử trên trình duyệt mới ra mắt</h4>
+
+<p>Việc kiểm thử trên phiên bản mới ra mắt của trình duyệt thường là ý tưởng hay; xem trong đống link sau:</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
+ <li><a href="https://insider.windows.com/">Edge Insider Preview</a></li>
+ <li><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a></li>
+ <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></li>
+ <li><a href="http://www.opera.com/computer/beta">Opera Developer</a></li>
+</ul>
+
+<p>Bạn nên kiểm thử theo cách này nếu bạn dùng công nghệ mới tinh trong trang web của mình, và bạn muốn kiểm thử với phiên bản mới nhất, hoặc bạn muốn thử xem nhà phát triển của trình duyệt đã sửa cái lỗi bạn tìm thấy trên phiên bản đó hay không.</p>
+
+<h3 id="Sửa_lỗi_Lặp_lại">Sửa lỗi/ Lặp lại</h3>
+
+<p>Khi phát hiện được lỗi, bạn cần thử sửa nó.</p>
+
+<p>Trước hết phải thu hẹp vùng có thể gây lỗi. Ghi lại thật nhiều thông tin từ người báo lỗi cho bạn — nền tảng, thiết bị, trình duyệt, vân vân. Hãy thử lỗi đó với cấu hình tương tự (tức là cùng phiên bản trình duyệt trên nhiều nền tảng khác nhau, hoặc nhiều phiên bản trình duyệt trên cùng một nền tảng) và đánh giá vùng gây lỗi.</p>
+
+<p>Có thể đó không phải lỗi của bạn — nếu có lỗi trên trình duyệt, chỉ còn cách cầu mong nhà phát triển của trình duyệt đó mau chóng sửa lỗi. Lỗi đó cũng có thể đã được sửa rồi — chẳng hạn nếu có một lỗi tồn tại trên Firefox release 49, nhưng không còn gặp lại lỗi đó nữa trên Firefox Nightly (phiên bản 52), thì họ đã sửa nó rồi. Nếu nó vẫn chưa được sửa, bạn sẽ muốn báo lỗi (xem {{anch("Reporting bugs")}}, phía dưới).</p>
+
+<p>Nếu đó là lỗi của bạn, bạn phải sửa nó! Dò nguyên nhân gây lỗi cũng áp dụng chiến lược y như mọi lỗi khi phát triển web (nhắc lại, hãy đọc <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Gỡ lỗi HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Gỡ lỗi CSS</a>, và <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Sai ở đâu? Khắc phục sự cố JavaScript</a>). Khi đã xác định được nguyên nhân gây ra lỗi, bạn cần quyết dịnh xem sẽ xử lý thế nào để nó hoạt động được với các trình duyệt sinh ra lỗi này — bạn không thể cứ thể đổi thẳng mã nguồn, bởi điều này có thể khiến nó không chạy được trên các trình duyệt khác. Hướng tiếp cận chung lúc này là sao chép lại mã nguồn và sửa cũng như kiểm thử trên phiên bản mã nguồn đó.</p>
+
+<p>Khi đã sửa được lỗi, bạn nên lặp lại quy trình kiểm thử để đảm bảo chỗ bạn vừa sửa chạy OK, và không gây lỗi tới các phần khác hoặc trên các trình duyệt khác.</p>
+
+<h2 id="Báo_lỗi">Báo lỗi</h2>
+
+<p>Nhắc lại phía trên, nếu bạn phát hiện lỗi trên trình duyệt, bạn nên báo cáo chúng cho nhà phát triển biết:</p>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/">Firefox Bugzilla</a></li>
+ <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">EdgeHTML issue tracker</a></li>
+ <li><a href="https://bugs.webkit.org/">Safari</a></li>
+ <li><a href="https://bugs.chromium.org/p/chromium/issues/list">Chrome</a></li>
+ <li><a href="https://bugs.opera.com/wizard/desktop">Opera</a></li>
+</ul>
+
+<h2 id="Tóm_tắt">Tóm tắt</h2>
+
+<p>Bài viết này cung cấp cho bạn các lý thuyết quan trọng nhất về kiểm thử trình duyệt chéo. Với đống kiến thức này, giờ bạn đã sẵn sàng học tiếp các chiến lược Kiểm thử trình duyệt chéo.</p>
+
+<p>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+
+<h2 id="Trong_loạt_bài_này">Trong loạt bài này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Giới thiệu về kiểm thử trình duyệt chéo</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
+</ul>
diff --git a/files/vi/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/vi/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
new file mode 100644
index 0000000000..6fee4b39fa
--- /dev/null
+++ b/files/vi/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
@@ -0,0 +1,358 @@
+---
+title: Strategies for carrying out testing
+slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
+translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+
+<p class="summary">Bài viết này cung cấp khái quát về kiểm thử trình duyệt chéo, trả lời các câu hỏi như là "kiểm thử trình duyệt chéo là gì?", "các sự cố mà bạn sẽ thường gặp?", và "các hướng tiếp cận chính để kiểm thử, xác định và vá lỗi là gì?"</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Thành thạo ngôn ngữ <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, và <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>; biết chút về <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">lý thuyết kiểm thử trình duyệt chéo</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Hiểu được lý thuyết nâng cao về kiểm thử trình duyệt chéo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Có_nên_kiểm_thử_tất_tần_tật">Có nên kiểm thử tất tần tật?</h2>
+
+<p>Khi kiểm thử trình duyệt chéo, bạn cần lên một danh sách trình duyệt cần kiểm thử. Bạn sẽ không thể kiểm thử trên mọi trình duyệt và thiết bị mà người dùng sử dụng - bởi lẽ có vô vàn các loại trình duyệt và thiết bị, và phiên bản mới cũng như thiết bị mới được ra mắt liên tục.</p>
+
+<p>Thay vì thế, bạn nên cố gắng đảm bảo trang web của mình sẽ hoạt động trên các trình duyệt và thiết bị mục tiêu, và viết mã một cách phòng thủ để trang web của bạn đạt được sự tương thích mong muốn nhất.</p>
+
+<p>"Viết mã một cách phòng thủ" tức là dựng fallback thông minh để nếu có tính năng hoặc style nào đó không hoạt động trên trình duyệt này, trang web có thể dùng phương thức hoặc thuộc tính cấp thấp hơn để đạt được trải nghiệm người dùng chấp nhận được — chẳng hạn như các thông tin lõi vẫn truy cập được, mặc dù giao diện có thể không đẹp lắm.</p>
+
+<p>Mục đích của chúng ta là dựng biểu đồ thể hiện sự tương thích giữa các trình duyệt/ thiết bị trong lúc bạn kiểm thử. Bạn có thể làm nó phức tạp hay đơn giản tuỳ thích — chẳng hạn, bạn có thể đặt ra các cấp độ hỗ trợ khác nhau, như sau:</p>
+
+<ol>
+ <li>Cấp A: Trình duyệt hiện đại/ phổ biến — Có khả năng. Kiểm thử tất cả và cung cấp đầy đủ tính năng.</li>
+ <li>Cấp B: Trình duyệt cũ/ ít sử dụng — Không đủ khả năng. Kiểm thử, và cung cấp trải nghiệm cơ bản bao gồm truy cập được các thông tin và dịch vụ cốt lõi.</li>
+ <li>Cấp C: Trình duyệt hiếm gặp/ không biết — không kiểm thử, nhưng cho là có khả năng. Chạy được cả trang, chí ít là được với giải pháp dự phòng (fallback) đã được cài trong lúc viết mã nguồn một cách phòng thủ.</li>
+</ol>
+
+<p>Trong phần tiếp theo, ta sẽ dựng biểu đồ tương thích theo mẫu này.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Yahoo là đơn vị đầu tiên khiến phương pháp tiếp cận này nổi tiếng, với phương pháp <a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support">Graded browser Support</a>.</p>
+</div>
+
+<h3 id="Phán_đoán_có_cơ_sở">Phán đoán có cơ sở</h3>
+
+<p>Có thể gọi đây là "giả định", hoặc "linh cảm". Đây không phải hướng tiếp cận khoa học, chính xác, nhưng là một người có kinh nghiệm trong ngành ứng dụng web, bạn sẽ nắm được vài trình duyệt nên kiểm thử. Điều này có thể tạo thành nền tảng tốt cho biểu đồ tương thích.</p>
+
+<p>Chẳng hạn, nếu bạn sống ở Tây Âu hoặc Bắc Mĩ, bạn sẽ biết có khá nhiều người sử dụng máy bàn(desktop) và máy tính xách tay (laptop) chạy Windows hoặc Mac, với trình duyệt chính là Chrome, Firefox, Safari, IE, và Edge. Bạn nên kiểm thử trên phiên bản mới nhất của 3 trình duyệt đầu tiên, bởi chúng thường được cập nhật liên tục. Với Edge và IE, bạn nên kiểm thử vài phiên bản gần đây; gom tất cả đống trên lại ta sẽ được cấp A.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn chỉ cài đặt được duy nhất một phiên bản của IE hoặc Edge trên mỗi máy tính, bởi vậy bạn sẽ phải dùng đến máy ảo, hoặc áp dụng chiến lược kiểm thử khác nếu cần. Phần {{anch("Virtual machines")}} tiếp theo sẽ giải thích cặn kẽ hơn.</p>
+</div>
+
+<p>Kha khá nhiều người dùng iOS và Android, nên bạn cũng cần kiểm thử trên phiên bản mới nhất của iOS Safari, vài phiên bản gần đây của stock browser trên Android, và Chrome và Firefox cho iOS và Android. Nếu được, hãy kiểm thử trên cả điện thoại lẫn máy tính bảng (tablet), để đảm bảo thiết kế linh hoạt (responsive design) hoạt động OK.</p>
+
+<p>Bạn cũng nên biết rằng có nhiều người dùng IE 9. Trình duyệt này cũ và yếu đuối hơn, nên hãy xếp nó vào cấp B.</p>
+
+<p>Từ đây ta xây dựng được biểu đồ tương thích như sau:</p>
+
+<ol>
+ <li>Cấp A: Chrome và Firefox cho Windows/Mac, Safari cho Mac, Edge và IE cho Windows (hai phiên bản gần đây nhất của mỗi loại), iOS Safari cho iPhone/iPad, stock browser cho điện thoại/ máy tính bảng chạy Android (hai phiên bản gần đây nhất) on phone/tablet, Chrome và Firefox cho điện thoại/ máy tính bảng chạy Android (hai phiên bản gần nhất)</li>
+ <li>Cấp B: IE 9 cho Windows</li>
+ <li>Cấp C: n/a</li>
+</ol>
+
+<p>Nếu bạn sống ở vùng khác, hoặc đang xây dựng trang web để phục vụ vùng khác (như vùng lãnh thổ khác), thì trình duyệt phổ biến để kiểm thử sẽ khác đi ít nhiều.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: "CEO của công ty tao xài Blackberry, nên bọn tao phải làm web chạy mượt trên đó" cũng là một ý tưởng thuyết phục.</p>
+</div>
+
+<h3 id="Chỉ_số_tương_thích_trình_duyệt">Chỉ số tương thích trình duyệt</h3>
+
+<p>Một trong những tiêu chí để xem xét lựa chọn trình duyệt kiểm thử có thể đưa ra là chỉ số tương thích trình duyệt. Có nhiều trang cung cấp chỉ số này, chẳng hạn:</p>
+
+<ul>
+ <li><a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&amp;qpcustomd=0">Netmarketshare</a></li>
+ <li><a href="http://gs.statcounter.com/">Statcounter</a></li>
+</ul>
+
+<p>Cả hai trang đều lấy dữ liệu ở trung tâm Bắc Mĩ, không hoàn toàn chính xác, nhưng chúng có thể cho bạn biết chút ít về xu hướng hiện hành.</p>
+
+<p>Chẳng hạn, hãy vào <a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&amp;qpcustomd=0">Netmarketshare</a>. Như bạn có thể thấy, Opera được xếp trong danh sách ít nhưng vẫn có người sử dụng, ta nên xếp nó vào cấp C trong biểu đồ tương thích ở trên.</p>
+
+<p>IE8 cũng được xếp vào mục rất ít, nhưng nó cũ và không thể chạy nổi được mấy. Opera Mini cũng vậy, nhưng vẫn đủ khả năng thực thi mã nguồn JavaScript phức tạp trong lúc thời gian chạy, vân vân (xem <a href="https://dev.opera.com/articles/opera-mini-and-javascript/">Opera Mini and JavaScript</a> để biết thêm chi tiết). Ta cũng nên sắp nó vào cấp B.</p>
+
+<h3 id="Phân_tích">Phân tích</h3>
+
+<p>Nguồn dữ liệu chính xác hơn, nếu bạn có thể lấy được, thường tới từ các ứng dụng phân tích như <a href="https://www.google.com/analytics/">Google Analytics</a>. Đây là ứng dụng cung cấp cho bạn chỉ số chính xác về loại trình duyệt mà người dùng sử dụng để truy cập vào trang web của bạn. Tất nhiên, cách này chỉ áp dụng được khi bạn đã có sẵn một trang web đang hoạt động, nên hướng tiếp cận này sẽ không thích hợp với các trang web hoàn toàn mới.</p>
+
+<p>Nhưng lịch sử phân tích có thể cũng hữu dụng để tìm ra chỉ số tương thích cho một trang web mới hoàn toàn, hoặc cho một tính năng sắp sửa được thêm vào trang web đã tồn tại. Những dữ liệu này có độ chính xác cao hơn các chỉ số được tổng hợp toàn cầu như hai trang kể trên.</p>
+
+<p>Ngoài ra, bạn cũng có thể dùng các nền tảng phân tích dữ liệu mã nguồn mở như <a href="http://www.openwebanalytics.com">Open Web Analytics</a> và <a href="https://matomo.org">Matomo</a>. Để sử dụng được chúng, bạn phải tự dựng lên máy chủ của mình (self-host). </p>
+
+<h4 id="Thiết_lập_Google_analytics">Thiết lập Google analytics</h4>
+
+<ol>
+ <li>Trước hết, bạn cần có tài khoản Google. Dùng tài khoản này để đăng nhập vào <a href="https://www.google.com/analytics/">Google Analytics</a>.</li>
+ <li>Chọn tuỳ chọn web <a href="https://analytics.google.com/analytics/web/">Google Analytics</a>, và nhấn vào nút <em>Sign Up</em>.</li>
+ <li>Nhập chi tiết trang web/ ứng dụng của bạn trên trang đăng ký. Form nhập liệu tại đây khá trực quan; trường thông tin quan trọng nhất phải điền đúng là URL của trang Web. Hãy đảm bảo lấy đúng URL gốc.</li>
+ <li>Ngay khi đã nhập xong mọi thứ, nhấn nút <em>Get Tracking ID</em>, rồi chọn tiếp chấp nhận điều khoản dịch vụ.</li>
+ <li>Trang tiếp theo cung cấp cho bạn vài đoạn mã nguồn kèm theo chú giải. Với trang web đơn giản, bạn chỉ cần sao chép đoạn mã nguồn <em>Website tracking</em> và dán nó vào mã nguồn của mọi trang bạn muốn theo dõi bằng Google Analytics. Bạn có thể đặt nó ngay dưới thẻ <code>&lt;/body&gt;</code>, hoặc ở chỗ nào đó để tách biệt so với mã nguồn gốc trên ứng dụng của mình.</li>
+ <li>Tải những thay đổi trên lên kho mã nguồn phát triển của bạn, hoặc bất cứ nơi đâu tuỳ ý.</li>
+</ol>
+
+<p>Vậy là xong! Trang web của bạn giờ đã sẵn sàng để báo cáo dữ liệu phân tích rồi.</p>
+
+<h4 id="Nghiên_cứu_dữ_liệu_phân_tích">Nghiên cứu dữ liệu phân tích</h4>
+
+<p>Giờ hãy quay lại trang chủ của <a href="https://analytics.google.com/analytics/web">Analytics Web</a>, và bắt đầu theo dõi dữ liệu bạn vừa thu thập được trên trang Web của mình (tất nhiên bạn cần dành ra chút thời gian để thu thập dữ liệu.)</p>
+
+<p>Theo mặc định, bạn sẽ thấy một tab báo cáo như sau:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14081/analytics-reporting.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 700px;"></p>
+
+<p>Như bạn thấy đó, có hàng tá dữ liệu khi dùng Google Analytics — thông báo tuỳ chỉnh theo từng đề mục, vân vân — và ta không có nhiều thời gian để bàn luận về tất cả. <a href="https://support.google.com/analytics/answer/1008015">Getting started with Analytics</a> cung cấp vài chỉ dẫn hữu ích cho người mới khi tương tác với những báo cáo này.</p>
+
+<p>Bạn cũng nên xem xét các tuỳ chọn khác nhau ở phía bên trái, và lọc ra dữ liệu cần dùng. Chẳng hạn, bạn có thể tìm trình duyệt và hệ điều hành mà người dùng sử dụng bằng cách tích chọn <em>Audience &gt; Technology &gt; Browser &amp; OS</em> từ menu bên trái.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Khi sử dụng Google analytics, bạn cần cẩn trọng trước những dự đoán không rõ ý, chẳng hạn "Chúng ta không có người dùng trên Firefox Mobile" thường khiến bạn không hỗ trợ Firefox mobile nữa. Nhưng bạn sẽ không có người dùng nào trên Firefox Mobile nếu ngay từ đầu trang Web của bạn đã không hoạt động trên đó.</p>
+</div>
+
+<h3 id="Một_vài_đề_xuất_khác">Một vài đề xuất khác</h3>
+
+<p>Bạn cũng nên xem xét một vài khía cách khác. Bạn nên đưa khả năng tiếp cận như là yêu cầu kiểm thử cấp A (chúng tôi sẽ viết rõ hơn về những thứ bạn cần kểm thử trong bài "Xử lý sự cố tiếp cận thường gặp")</p>
+
+<p>Vả lại bạn cũng cần xem xét thêm các yếu tố môi trường. Nếu bạn viết ứng dụng cho mạng Intranet của một công ty nào đó, nhằm dựng biểu đồ thống kê đơn bán lẻ cho quản lý, và tất cả các quản lý đều được phát cho một chiếc điện thoại cài hệ điều hành Windows, lúc này bạn sẽ phải đưa IE vào danh mục hỗ trợ hàng đầu.</p>
+
+<h3 id="Biểu_đồ_tương_thích_bản_cuối">Biểu đồ tương thích bản cuối</h3>
+
+<p>Sau tất cả, biểu đồ tương thích của chúng ta sẽ có dạng như sau:</p>
+
+<ol>
+ <li>Cấp A: Chrome và Firefox cho Windows/Mac, Safari cho Mac, Edge và IE cho Windows (hai phiên bản gần đây nhất cho mỗi loại), iOS Safari cho iPhone/iPad, Android stock browser (hai phiên bản gần đây nhất) cho điện thoại/ máy tính bảng, Chrome và Firefox cho Android (hai phiên bản gần đây nhất) cho điện thoại/ máy tính bảng. Qua được kiểm thử khả năng tiếp cận thông thường.</li>
+ <li>Cấp B: IE 8 và 9 cho Windows, Opera Mini.</li>
+ <li>Cấp C: Opera, và một số trình duyệt hiện đại kém phổ biến khác.</li>
+</ol>
+
+<h2 id="Bạn_định_kiểm_thử_cái_gì">Bạn định kiểm thử cái gì?</h2>
+
+<p>Khi bạn muốn kiểm thử phần mã nguồn mới thêm vào, trước khi bắt đầu tiến hành, bạnn nên lập một danh sách yêu cầu kiểm thử mà buộc phải qua được thì mới được chấp nhận. Những yêu cầu này có thể thuộc chức năng hoặc thẩm mĩ - kết hợp hai yêu cầu này lại sẽ thành một chức năng khả dùng cho trang web của bạn.</p>
+
+<p>Hãy xem xét ví dụ sau (xem <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">mã nguồn</a>, và <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">bản chạy trực tiếp</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14083/sliding-box-demo.png" style="border-style: solid; border-width: 1px; display: block; height: 455px; margin: 0px auto; width: 700px;"></p>
+
+<p>Các hạng mục kiểm thử cho ví dụ này được trình bày như sau:</p>
+
+<p>Cấp A và B:</p>
+
+<ul>
+ <li>Các nút nên được kích hoạt bằng cơ chế kiểm soát chính của người dùng - bao gồm chuột, bàn phím và touch.</li>
+ <li>Các nút đảo chiều (toggle) nên ẩn/hiện hộp thoại thông tin.</li>
+ <li>Văn bản nên đọc được.</li>
+ <li>Người dùng khiếm thị khi dùng trình đọc màn hình (screenreader) nên tiếp cận được văn bản.</li>
+</ul>
+
+<p>Cấp A:</p>
+
+<ul>
+ <li>Hộp thoại văn bản nên ẩn/hiện mượt mà.</li>
+ <li>Nên có vùng chuyển màu (gradient) và bóng chữ (shadow) để tăng cường vẻ ngoài cho các khối.</li>
+</ul>
+
+<p>Nếu để ý, bạn sẽ thấy văn bản trong ví dụ không chạy được trên IE8 — sự cố này đã được liệt kê trong bảng tương thích của chúng ta, mà bạn sẽ phải làm theo, có lẽ bạn sẽ phải dùng thư viện nhận diện tính năng để cài đặt lại tính năng đó sao cho phù hợp với các trình duyệt không hỗ trợ CSS transition (xem Hiện thực bộ nhận diện tính năng ở bài viết sau).</p>
+
+<p>Chắc bạn cũng ddể ý rằng nút bấm không dùng được nếu chỉ sử dụng bàn phím - điều này cũng phải xem xét lại. Có lẽ ta nên dùng vài dòng lệnh JavaScript để cho phép bàn phím kiểm soát hoạt động của nút đảo chiều, hoặc dùng phương thức khác thay thế luôn?</p>
+
+<p>Các thông số kiểm thử này rất hữu dụng, vì:</p>
+
+<ul>
+ <li>Chúng cung cấp tập các bước để kiểm thử ứng dụng của bạn.</li>
+ <li>Chúng cũng có thể dễ dàng chuyển đổi thành tập các lệnh cho nhóm người dùng để kiểm thử (chẳng hạn "thử dùng chuột bật nút lên, và rồi thử dùng bàn phím...") — xem {{anch("User testing")}} phía dưới.</li>
+ <li>Chúng cũng có thể cung cấp nền tảng để viết ca kiểm thử tự động. Nếu biết mình muốn kiểm thử cái gì thì sẽ dễ viết các ca kiểm thử hơn cũng như nắm được điều kiện kiểm thử thành công (mời đọc Tự động hoá kiểm thử ở các bài viết sau).</li>
+</ul>
+
+<h2 id="Xây_dựng_phòng_thí_nghiệm_kiểm_thử">Xây dựng phòng thí nghiệm kiểm thử</h2>
+
+<p>Một trong các phương thức tiếp cận kiểm thử là tự kiểm thử bằng tay. Để làm được việc này, bạn sẽ phải kết hợp giữa kiểm thử trên một số thiết bị vật lý thực, và trên môi trường ảo hoá (dùng cả bộ giả lập cũng như máy ảo).</p>
+
+<h3 id="Thiết_bị_vật_lý">Thiết bị vật lý</h3>
+
+<p>Việc kiểm thử trên thiết bị thật chạy trình duyệt thường tốt hơn bao giờ hết, việc này cho ra kết quả chính xác nhất thoả mãn các hành vi cũng như trải nghiệm của người dùng. Để phục vụ một phòng thí nghiệm cỡ nhỏ, bạn sẽ cần những thiết bị sau đây:</p>
+
+<ul>
+ <li>Một máy tính Mac, bao gồm trình duyệt cần kiểm thử — có thể bao gồm Firefox, Chrome, Opera, và Safari.</li>
+ <li>Một máy tính cá nhân chạy Windows, bao gồm trình duyệt cần kiểm thử — có thể bao gồm Edge (hoặc IE), Chrome, Firefox, và Opera.</li>
+ <li>Điện thoại hoặc máy tính bảng tầm cao chạy Android kèm trình duyệt cần kiểm thử — có thể bao gồm Chrome, Firefox, và Opera Mini cho Android, cùng với trình duyệt dựng sẵn trên dành riêng cho Android.</li>
+ <li>Điện thoại hoặc máy tính bảng tầm cao chạy iOS kèm trình duyệt cần kiểm thử — có thể bao gồm iOS Safari, and Chrome, Firefox, và Opera Mini cho iOS.</li>
+</ul>
+
+<p>Nếu có thể thì bạn nên đầu tư thêm:</p>
+
+<ul>
+ <li>Máy tính cá nhân chạy Linux, nếu bạn cần kiểm thử các lỗi cho từng phiên bản trình duyệt trên Linux. Người dùng Linux thường dùng Firefox, Opera, và Chrome. Nếu chỉ có một máy tính, bạn có thể tìm cách cài đặt song song Linux và Windows trên hai phân vùng tách biệt. Nếu tiếp cận theo hướng này thì nên cài Ubuntu; đọc <a href="https://help.ubuntu.com/community/WindowsDualBoot">WindowsDualBoot</a> để biết thêm chi tiết.</li>
+ <li>Vài thiết bị di động tầm thấp để kiểm thử khả năng chạy hình hoạ trên vi xử lý yếu.</li>
+</ul>
+
+<p>Máy tính chính của bạn cũng có thể dùng làm chỗ cài đặt một số công cụ chuyên biệt, như công cụ kiểm toán khả năng tiếp cận, bộ đọc màn hình, và máy ảo/giả lập.</p>
+
+<p>Đối với các công ty lớn, phòng thí nghiệm của họ có nhiều loại thiết bị thuộc nhiều mẫu mã khác nhau, cho phép nhà phát triển tìm diệt lỗi trên các trình duyệt và thiết bị chuyên biệt. Các công ty nhỏ và các cá nhân thường không đủ vốn để đua theo nên họ thường sử dụng máy ảo, các bộ giả lập và các ứng dụng kiểm thử thương mại.</p>
+
+<p>Ta sẽ đi sơ qua từng lựa chọn này phía dưới.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>:  Some efforts have been made to create publically accessible device labs — see <a href="https://opendevicelab.com/">Open Device Labs</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Ta cũng phải xem xét khả năng tiếp cận - có khá nhiều công cụ hữu dụng mà bạn có thể cài đặt lên máy của mình phục vụ cho quá trình kiểm thử khả năng tiếp cận, nhưng ta sẽ bàn về chúng trong bài viết "Xử lý sự cố tiếp cận thường gặp", trong loạt bài này.</p>
+</div>
+
+<h3 id="Giả_lập">Giả lập</h3>
+
+<p>Giả lập là phần mềm chạy trong máy tính của bạn và giả lập một thiết bị nào đó, cho phép bạn thoải mái kiểm thử thay vì phải tìm chính xác phần cứng/ phần mềm tương ứng.</p>
+
+<p>Giả lập thường dùng để kiểm thử trạng thái của thiết bị. Chẳng hạn, nếu bạn muốn kiểm tra nhanh chiều dài và bề rộng của thiết bị có phù hợp với thiết kế linh hoạt (responsive design) của mình hay không, bạn có thể dùng <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> của Firefox. Safari cũng có chế độ tương tự, mà ta có thể dùng tới bằng cách vào <em>Safari &gt; Preferences</em>, và chọn <em>Show Develop menu</em>, rồi chọn <em>Develop &gt; Enter Responsive Design Mode</em>. Chrome cũng có chế độ tương tự: Device mode (xem <a href="https://developers.google.com/web/tools/chrome-devtools/device-mode/">Simulate Mobile Devices with Device Mode</a>). </p>
+
+<p>Bạn sẽ phải cài đặt vài bộ giả lập. Các trình duyệt/ thiết bị bạn sẽ thường muốn kiểm thử như sau:</p>
+
+<ul>
+ <li>Nền tảng lập trình ứng dụng android, <a href="https://developer.android.com/studio/">Android Studio IDE</a>, hơi nặng nếu chỉ dùng để kiểm thử trang web chạy trên Google Chrome hoặc trình duyệt Stock Android, nhưng nó có <a href="https://developer.android.com/studio/run/emulator.html">bộ giả lập</a> tương đối mạnh mẽ. Nếu bạn muốn dùng gì đấy nhẹ hơn, <a href="http://leapdroid.com/">LeapDroid</a> là lựa chọn tốt cho Windows, và <a href="http://www.andyroid.net/">Andy</a> thích hợp để chạy cho cả Windows và Mac.</li>
+ <li>Apple còn sản xuất ứng dụng tên là <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html">Simulator</a> chạy trên môi trường phát triển <a href="https://developer.apple.com/xcode/">XCode</a>, và giả lập iPad/iPhone/Apple Watch/Apple TV. Các máy giả lập đã bao gồm cả trình duyệt iOS Safari. Tuy nhiên, ứng dụng này chỉ chạy trên Mac.</li>
+</ul>
+
+<p>Bạn cũng có thể dùng bộ giả lập cho môi trường thiết bị di động khác như:</p>
+
+<ul>
+ <li><a href="https://developer.blackberry.com/develop/simulator/">Blackberry</a> (bộ giả lập cho Windows, Mac OSX và Linux).</li>
+ <li>Bạn có thể giả lập <a href="https://dev.opera.com/articles/installing-opera-mini-on-your-computer/">Opera Mini</a> trên chính nó để kiểm thử.</li>
+ <li>Hệ điều hành Windows Mobile cũng có bộ giả lập: xem <a href="https://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx">Windows Phone Emulator for Windows Phone 8</a> và <a href="https://msdn.microsoft.com/en-us/windows/uwp/debug-test-perf/test-with-the-emulator">Test with the Microsoft Emulator for Windows 10 Mobile</a> (các bộ giả lập này chỉ chạy trên Windows).</li>
+</ul>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Một số bộ giả lập đòi hỏi phải chạy máy ảo (xem bên dưới); thường sẽ có hướng dẫn đi kèm về cách cài đặt và sử dụng máy ảo để giả lập.</p>
+</div>
+
+<h3 id="Máy_ảo">Máy ảo</h3>
+
+<p>Máy ảo là ứng dụng chạy trên máy tính cá nhân và cho phép bạn chạy giả lập của toàn bộ hệ điều hành, mỗi máy ảo được ngăn cách trên chính ổ cứng ảo của nó (thường biểu diễn dưới dạng một tệp tin lớn trên ổ cứng của máy thật). Có khá nhiều ứng dụng chạy máy ảo nổi tiếng, như là <a href="www.parallels.com/">Parallels</a>, <a href="http://www.vmware.com/">VMWare</a>, và <a href="https://www.virtualbox.org/wiki/Downloads">Virtual Box</a>; cá nhân người viết bài thích Virtual Box hơn vì nó miễn phí.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn cần rất nhiều dung lượng ổ cứng để chạy máy ảo; mỗi hệ điều hành mà bạn giả lập lên đều ngốn khá nhiều bộ nhớ. Tất nhiên, bạn được chọn dung lượng ổ cứng cài đặt cho máy ảo; có thể chỉ giới hạn 10GB thôi, nhưng một số hệ điều hành đòi hỏi phải có ít nhất 50GB mới chạy ổn định được. Một trong những lựa chọn tối ưu cho hầu hết ứng dụng máy ảo là tạo ổ cứng <strong>cấp phát động</strong> tự tăng/giảm dung lượng khi cần.</p>
+</div>
+
+<p>Để dùng Virtual Box, bạn cần:</p>
+
+<ol>
+ <li>Kiếm bộ cài hoặc ảnh (tức là tệp ISO) chứa hệ điều hành bạn muốn giả lập. Virtual Box không tự cung cấp những tệp tin này; hầu hết các hệ điều hành, như Windows, là sản phẩm thương mại hoá nên không thể phân phối tự do.</li>
+ <li><a href="https://www.virtualbox.org/wiki/Downloads">Tải bộ cài đặt thích hợp</a> cho hệ điều hành trên máy thật và cài đặt nó.</li>
+ <li>Mở ứng dụng lên; giao diện hiện ra như hình: <img alt="" src="https://mdn.mozillademos.org/files/14089/virtualbox.png" style="display: block; height: 512px; margin: 0px auto; width: 700px;"></li>
+ <li>Để tạo máy ảo mới, nhấn nút <em>New</em> ở góc trên cùng bên trái.</li>
+ <li>Làm theo hướng dẫn và điền vào hộp thoại các thông tin như:
+  <ol>
+   <li>Tên cho máy ảo mới</li>
+   <li>Chọn hệ điều hành và phiên bản muốn cài đặt</li>
+   <li>Đặt giới hạn RAM (chúng tôi đè nghị 2048MB, hoặc 2GB)</li>
+   <li>Tạo ổ cứng ảo (giữ nguyên lựa chọn mặc định trong hộp thoại chứa <em>Create a virtual hard disk now</em>, <em>VDI (virtual disk image)</em>, và <em>Dynamically allocated</em>).</li>
+   <li>Chọn đường dẫn đến tệp tin và kích thước của ổ cứng ảo (chọn tên và nơi chứa dễ nhớ, nơi chứa nên có đủ không gian nhớ sao cho thích hợp với yêu cầu, ít nhất 50GB).</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Lúc này, virtual box sẽ hiện ra trên thanh công cụ bên trái của giao diện Virtual Box. Giờ bạn có thể nhấp đúp chuột vào virtual box — nó sẽ khởi động máy ảo lên, nhưng chưa có hệ điều hành đâu nhé. Bạn phải chọn ảnh/bộ cài của hệ điều hành và virtual box sẽ chạy từng bước cài đặt lên máy ảo, như thể đang cài đặt trên máy thật.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14085/virtualbox-installer.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="warning">
+<p><strong>Lưu ý</strong>: Bạn cần xác định rõ hệ điều hành bạn muốn cài lên máy ảo vào lúc này. Nếu bạn huỷ tiến trình vào lúc này, nó sẽ khiến máy ảo không dùng được, và bạn sẽ phải xoá máy ảo đi và tạo lại mới. Việc này tuy không ảnh hưởng gì nghiêm trọng nhưng gây ra khó chịu.</p>
+</div>
+
+<p>Sau khi tiến trình chạy xong, bạn sẽ một máy ảo chạy hệ điều hành trên máy thật.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14087/virtualbox-running.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Hãy dùng hệ điều hành ảo như thể dùng hệ điều hành thực - ví dụ, cài đặt trình duyệt bạn muốn kiểm thử vào, cài đặt phần mềm diệt vi-rut để bảo vệ nó.</p>
+
+<p>Có nhiều máy ảo cùng lúc cũng cực kỳ tiện, chẳng hạn bạn muốn kiểm thử Windows IE/Edge — trên Windows, bạn không thể cài đặt cùng lúc nhiều phiên bản của trình duyệt này, nên bạn sẽ phải dựng một bộ máy ảo để thử nghiệm từng chức năng trên các phiên bản khác nhau, như là:</p>
+
+<ul>
+ <li>Windows 10 với Edge 14</li>
+ <li>Windows 10 với Edge 13</li>
+ <li>Windows 8.1 với IE11</li>
+ <li>Windows 8 với IE10</li>
+ <li>Windows 7 với IE9</li>
+ <li>Windows XP với IE8</li>
+ <li>Windows XP với IE7</li>
+ <li>Windows XP với IE6</li>
+</ul>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Một ưu điểm nữa của máy ảo là ổ cứng ảo khá là độc lập. Nếu bạn làm việc trong một đội, bạn có thể tạo ra một ổ cứng ảo, rồi sao chép nó đi khắp nơi. Nếu hệ điều hành cài trên máy ảo là sản phẩm có giấy phép thì bạn phải đảm bảo cung cấp đầy đủ giấy phép cho từng máy ảo.</p>
+</div>
+
+<h3 id="Ứng_dụng_tự_động_và_thương_mại_hoá">Ứng dụng tự động và thương mại hoá</h3>
+
+<p>Như đã đề cập ở chương trước, bạn sẽ bớt lo ngại khi kiểm thử trình duyệt bằng cách dùng một số hệ thôgns tự động. Bạn có thể tự thiết lập chúng (một trong số những ứng dụng nổi tiếng nhất là <a href="http://www.seleniumhq.org/">Selenium</a>), tuy cũng tốn chút công sức, nhưng kết quả đổi lại rất đáng.</p>
+
+<p>Ngoài ra, bạn có thể dùng các ứng dụng thương mại hoá như <a href="https://saucelabs.com/">Sauce Labs</a>, <a href="https://www.browserstack.com/">Browser Stack</a> và <a href="https://www.lambdatest.com/">LambdaTest </a>sẽ thiết lập giúp bạn nếu bạn sẵn sàng chịu đầu tư để kiểm thử.</p>
+
+<p>Ta sẽ đi vào chi tiết cách dùng các công cụ này ở bài tương ứng.</p>
+
+<h2 id="Kiểm_thử_phía_người_dùng">Kiểm thử phía người dùng</h2>
+
+<p>Trước khi sang bài mới, ta sẽ tìm hiểu sơ qua về kiểm thử phía người dùng — đây có thể là lựa chọn tốt nếu bạn có một nhóm người dùng sẵn sàng kiểm thử tính năng mới cho mình. Việc lựa chọn người dùng tham gia kiểm thử hoàn toàn tuỳ theo ý bạn - có thể là một nhóm bạn, nhóm đồng nghiệp, hoặc nhóm tình nguyện viên có phí hoặc miễn phí, tuỳ theo lượng tiền bạn có thể chi trả.</p>
+
+<p>Thông thường bạn sẽ cho người dùng xem trang hoặc một đoạn chứa chức năng mới trên máy chủ phát triển, để thay đổi không tác động đến phiên bản ứng dụng chính của bạn. Bạn nên bắt họ kiểm thử theo từng bước và báo cáo lại kết quả họ nhận được. Sẽ tiện hơn nếu bạn có sẵn một tập các bước (đôi khi gọi là kịch bản) để kết quả kiểm thử gần hơn với cái bạn muốn kiểm thử. Ta vừa đề cập tới điều này ở mục {{anch("What are you going to test")}} phía trên. Chẳng hạn, các bước sau phù hợp với một người dùng có thị giác:</p>
+
+<ul>
+ <li>Nhấp chuột vào nút có dấu hỏi trên màn hình máy tính cá nhân của bạn vài lần. Tải lại trang.</li>
+ <li>Chọn và kích hoạt nút có dấu hỏi bằng bàn phím trên máy tính cá nhân của bạn vài lần.</li>
+ <li>Chạm vào nút có dấu hỏi vài lần trên thiết bị có màn hình cảm ứng của bạn.</li>
+ <li>Các nút công tắc sẽ làm hộp thoại thông tin ẩn/hiện. Nút đó có hoạt động hay không?</li>
+ <li>Nội dung văn bản có đọc được không?</li>
+ <li>Hộp thoại thông tin có ẩn hiện mượt mà không?</li>
+</ul>
+
+<p>Trong lúc kiểm thử, cũng nên làm (nếu điều kiện cho phép) các việc như:</p>
+
+<ul>
+ <li>Thiết lập hồ sơ trình duyệt riêng rẽ, tức là tắt bỏ mọi trình mở rộng của trình duyệt và các thứ tương tự, và chạy kiểm thử trên hồ sơ này (chẳng hạn <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">Use the Profile Manager to create and remove Firefox profiles</a> và <a href="https://support.google.com/chrome/answer/2364824">Share Chrome with others or add personas</a>).</li>
+ <li>Dùng chế độ riêng tư của trình duyệt, nếu được (như là <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">Private Browsing</a> trên Firefox, <a href="https://support.google.com/chrome/answer/95464">Incognito Mode</a> trên Chrome) để không lưu lại cookie hay bộ nhớ tạm.</li>
+</ul>
+
+<p>Việc thực hiện các bước trên nhằm đảm bảo sự "thuần khiết" cho trình duyệt, tức là không có bất cứ thứ gì ảnh hưởng tới kết quả của việc kiểm thử.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Nếu bạn có điều kiện về phần cứng, bạn nên thử chạy ứng dụng của mình trên các thiết bị di động tầm thấp — bởi vì khi ứng dụng càng phát triển, càng có nhiều tính năng và các hiệu ứng, thì khả năng ứng dụng bạn chạy chậm hơn trên các thiết bị này càng cao hơn, bởi vậy bạn cũng phải suy tính tới hiệu năng của ứng dụng nhiều hơn. Vả lại, nếu các tính năng của bạn chạy ổn trên thiết bị tầm thấp, thì trải nghiệm người dùng chắc chắn sẽ khá hơn trên các thiết bị cao cấp hơn.</p>
+</div>
+
+<div class="note">
+<p><strong>Ghí chú</strong>: Một số môi trường phát triển phía-máy-chủ cung cấp cơ chế thiết lập thay đổi cho một tập người dùng nhất định, đảm bảo tập người dùng đó có thể kiểm thử các tính năng mới mà không ảnh hưởng tới các máy chủ khác. Chẳng hạn như <a href="https://github.com/jsocol/django-waffle">Django Waffle Flags</a>.</p>
+</div>
+
+<h2 id="Tóm_lại">Tóm lại</h2>
+
+<p>Sau khi đọc bài viết này, giờ bạn đã nắm chắc ý tưởng để xác định danh sách khách hàng mục tiêu/ trình duyệt mục tiêu, và tiến hành kiểm thử chéo trên danh sách này sao cho hiệu quả.</p>
+
+<p>Next we'll turn our attention to the actual code issues your testing might uncover, starting with HTML and CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+
+<h2 id="Trong_loạt_bài_viết_này">Trong loạt bài viết này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Giới thiệu về kiểm thử trình duyệt chéo</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Chiến lược kiểm thử</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Xử lý sự cố HTML và CSS thường gặp</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Xử lý sự cố JavaScript thường gặp</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Xử lý sự cố tiếp cận thường gặp</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Hiện thực bộ nhận diện tính năng</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Tự động hoá kiểm thử</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Cấu hình môi trường kiểm thử tự động của riêng mình</a></li>
+</ul>
diff --git a/files/vi/learn/tools_and_testing/index.html b/files/vi/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..a032697166
--- /dev/null
+++ b/files/vi/learn/tools_and_testing/index.html
@@ -0,0 +1,48 @@
+---
+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 ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices.</p>
+
+<p>The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. 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>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</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 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, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p>
+
+<p>You need a solid foundation first.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt>Real world web development tools (TBD)</dt>
+ <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</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 identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to 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>