initial commit

4 files changed, 311 insertions, 0 deletions

diff --git a/files/vi/web/guide/api/index.html b/files/vi/web/guide/api/index.html
new file mode 100644
index 0000000000..b27f6a95d9
--- /dev/null
+++ b/files/vi/web/guide/api/index.html
@@ -0,0 +1,23 @@
+---
+title: Hướng dẫn Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Hướng dẫn
+  - Landing
+translation_of: Web/Guide/API
+---
+<p><span class="tlid-translation translation" lang="vi"><span title="">Web bao gồm một loạt các API có thể được sử dụng từ JavaScript để xây dựng các ứng dụng ngày càng mạnh hơn và có khả năng hơn, chạy trên web, cục bộ hoặc thông qua công nghệ như</span></span> <a href="https://nodejs.org/">Node.js</a>, <span class="tlid-translation translation" lang="vi"><span title="">trên máy chủ.</span> <span title="">Trên trang này, bạn sẽ tìm thấy một danh sách đầy đủ tất cả các API được cung cấp bởi công nghệ web đầy đủ.</span></span></p>
+
+<h2 id="Web_APIs_từ_A_tới_Z">Web APIs từ A tới Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (<span class="tlid-translation translation" lang="vi"><span title="">một chỉ mục của tất cả các interface bao gồm tất cả các API này</span></span> )</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/vi/web/guide/css/getting_started/index.html b/files/vi/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..2d395bee37
--- /dev/null
+++ b/files/vi/web/guide/css/getting_started/index.html
@@ -0,0 +1,43 @@
+---
+title: Getting started with CSS
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Needs
+  - NeedsBeginnerUpdate
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+  - Web
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p>
+<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p>
+<nav class="fancyTOC">
+ <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav>
+<h2 id="What_you_need_to_get_started">What you need to get started</h2>
+<ul>
+ <li>A text editor</li>
+ <li>A modern browser</li>
+ <li>Some experience working with a text editor and browser</li>
+</ul>
+<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p>
+<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p>
+<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2>
+<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p>
+<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3>
+<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p>
+<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p>
+<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p>
+<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3>
+<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p>
+<ol>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li>
+</ol>
diff --git a/files/vi/web/guide/html/html5/index.html b/files/vi/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..0900e23811
--- /dev/null
+++ b/files/vi/web/guide/html/html5/index.html
@@ -0,0 +1,173 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p class="summary">HTML5 là phiên bản mới nhất của HTML. Hai phiên bản này khá khác nhau. HTML5 là phiên bản mới về ngôn ngữ, thuộc tính và công nghệ mới cho phép xây dựng các trang web, ứng dụng đa dạng và mạnh mẽ hơn. Hai bản này thường được gọi là HTML5.</p>
+
+<p class="summary">HTML5 được thiết kế để có thể sử dụng trên tất cả cá nhà phát triển web mở, trang này liên kết với nhiều tài nguyeenn công nghệ HTML5, phân thành nhiều nhóm dựa vào từng chức năng.</p>
+
+<p class="summary"></p>
+
+<p class="summary"></p>
+
+<ul>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<ul>
+ <li><em>Ngữ nghĩa:</em> cho phép mô tả chính xác nội dung.</li>
+ <li><em>Kết nối: </em>cho phép giao tiếp với máy chủ theo nhiều cách.</li>
+ <li><em>Ngoại tuyến và lưu trữ: </em>cho phép các trang web lưu trữ dữ liệu ở máy khách hàng và hoạt động ngoại tuyến hiệu quả hơn.</li>
+ <li><em>Đa phương tiện:</em> tạo video và âm thanh trong web mở.</li>
+ <li><em>Hiệu ứng và đồ họa 2D/3D: </em>cho phép phạm vi trình bày đa dạng hơn.</li>
+ <li><em>Hiệu suất và tích hợp:</em> tối ưu hóa tốc độ và phần cứng.</li>
+ <li><em>Truy cập thiết bị: </em>cho phép sử dụng các thiết bị đầu vào và ra khác nhau.</li>
+ <li><em>Chủ đề:</em> cho phép viết các chủ đề phức tạp.</li>
+</ul>
+
+<h2 id="Ý_nghĩa" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Ý nghĩa</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></p>
+
+<p>A look at the new outlining and sectioning elements in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
+ <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">Forms improvements</a></dt>
+ <dd>A look at the <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">constraint validation API</a>, several new attributes, new values for the {{HTMLElement("input")}} attribute {{htmlattrxref("type", "input")}} and the new {{HTMLElement("output")}} element.</dd>
+ <dt>New semantic elements</dt>
+ <dd>Beside sections, media and forms elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the number of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd>
+ <dt>Improvement in {{HTMLElement("iframe")}}</dt>
+ <dd>Using the {{htmlattrxref("sandbox", "iframe")}} and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>Allows directly embedding mathematical formulas.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt>
+ <dd>This article introduces how to indicate to the browser that you are using HTML5 in your web design or web application.</dd>
+ <dt><a href="https://websitesetup.org/html5-cheat-sheet/">Downloadable HTML5 Guide</a></dt>
+ <dd>A quick guide to HTML5, including the common HTML tags as well as the new HTML5 tags. Downloadable in PDF and PNG formats.</dd>
+ <dt><a href="https://www.wpkube.com/html5-cheat-sheet/">HTML5 Cheat Sheet</a> </dt>
+ <dd>A handy HTML 5 cheat sheet for beginners who want to master HTML 5, its elements, event attributes and compatibility.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt>
+ <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd>
+</dl>
+
+<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
+ <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+</dl>
+
+<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; storage</h2>
+
+<p><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></p>
+
+<dl>
+ <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt>
+ <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
+ <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+
+<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
+ <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt>Track and WebVTT</dt>
+ <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd>
+</dl>
+
+<h2 id="2D3D_graphics_AND_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">2D/3D graphics AND effects</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt>
+ <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code>&lt;canvas&gt;</code> elements</a></dt>
+ <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Performance_and_Integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance and Integration</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt>
+ <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>JIT-compiling JavaScript engines</dt>
+ <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt>
+ <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
+ <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
+ <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
+ <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
+ <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
+ <dd>Allows control of animations rendering to obtain optimal performance.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
+</dl>
+
+<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Device access</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
+ <dd>Handlers to react to events created by a user pressing touch screens.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
+ <dd>Let browsers locate the position of the user using geolocation.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
+ <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd>
+</dl>
+
+<h2 id="StylIng" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">StylIng</h2>
+
+<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p>
+
+<dl>
+ <dt>New background styling features</dt>
+ <dd>It is now possible to put shadows on elements using {{cssxref("box-shadow")}}, <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a>, and CSS {{cssxref("filter")}}s. You can learn more about these by reading <a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a>.</dd>
+ <dt>More fancy borders</dt>
+ <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
+ <dt>Animating your style</dt>
+ <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
+ <dt>Typography improvement</dt>
+ <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
+ <dt>New presentational layouts</dt>
+ <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/vi/web/guide/index.html b/files/vi/web/guide/index.html
new file mode 100644
index 0000000000..00f533cf85
--- /dev/null
+++ b/files/vi/web/guide/index.html
@@ -0,0 +1,72 @@
+---
+title: Web developer guide
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Các bài dưới đây cung cấp những thông tin cần thiết nhằm giúp bạn tận dụng các công nghệ và API cụ thể.</strong></p>
+
+<div>
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML">HTML Learning Area</a></dt>
+ <dd><strong>HyperText Markup Language (HTML)</strong> là ngôn ngữ nền tảng của gần như toàn bộ các thành phần trong một trang Web. Hầu hết mọi thứ hiển thị trên màn hình của bạn đều được định dạng bởi HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS Learning Area</a></dt>
+ <dd class="landingPageList">Cascading Style Sheets (CSS) là một ngôn ngữ quy định cách trình bày, được dùng để định ra các quy tắc thể hiện một tài liệu HTML.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery">Audio and video delivery</a></dt>
+ <dd>Video và audio có thể được cung cấp trên môi trường web thông qua một số cách, từ các file media tĩnh đến adaptive live streams. Bài này là một khởi điểm cho việc tìm hiểu về các phương thức cung cấp khác nhau cho web based media và sự tương thích với các trình duyệt thông dụng.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation">Audio and video manipulation</a></dt>
+ <dd>Sự tuyệt vời của web đó là chúng ta có thể tổ hợp các công nghệ khác nhau để tạo nên một dạng mới. Chẳng hạn như kết hợp các công nghệ Canvas,  <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> để thay đổi audio và video. Bài này cung cấp các tham khảo để giải thích những gì mà bạn cần để làm điều đó.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></dt>
+ <dd class="landingPageList">Events liên hệ đến 2 vấn đề: nó là một design pattern sử dụng cho việc handling các sự kiện bất đồng bộ xảy ra đối với 1 web page; và nó là tên gọi chung, đặc tính của các sự kiện bất ngờ khác nhau xảy ra.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd>AJAX là một khái niệm xác định một nhóm các công nghệ cho phép tạo ra các ứng dụng web động nhanh nhạy cho giao diện người dùng mà không phải tải lại nguyên trang. Nó hỗ trợ các ứng dụng xử lý nhanh và hiệu quả hơn khi thực hiện tác vụ. </dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt>
+ <dd class="landingPageList">Các trang Web và ứng dụng hiện đại thường cần hiển thị đồ hoạ với sự tinh tế riêng biệt.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt>
+ <dd class="landingPageList">Danh sách những Web API và phương thức hoạt động của chúng.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript là ngôn ngữ lập trình thông dịch cực kỳ mạnh mẽ, được dùng để khởi tạo các ứng dụng cho trang Web.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations a character encodings</a></dt>
+ <dd class="landingPageList">Trình duyệt xử lý văn bản dưới dạng Unicode. Tuy nhiên, trong quá trình truyền dữ liệu đến trình duyệt, các ký tự được biểu diễn dưới dạng bytes (mã hóa ký tự).  Đặc tả HTML khuyến nghị việc sử dụng phương thức mã hóa UTF-8 (có thể biểu diễn được tất cả ký tự Unicode), bất kể hình thức khai báo mã hóa nào được yêu cầu.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt>
+ <dd class="landingPageList">Bài này cung cấp một cái nhìn tổng quát về một vài công nghệ chính được sử dụng để thiết kế web sites có thể hoạt động tốt trên các thiết bị di động. Xem thêm tại <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"> </dt>
+ <dt><a href="https://developer.mozilla.org/en-US/Apps/Progressive#Core_PWA_guides">Progressive web apps</a></dt>
+ <dd>Progressive web apps (PWAs) sử dụng các web APIs tiên tiến cùng với chiến lược phát triển lũy tiến để tạo nên một web application đa nền tảng. Các apps này hoạt động được trên mọi thiết bị và cung cấp các tính năng đem lại trải nghiệm của một native app. Các bài hướng dẫn này sẽ cung cấp cho bạn các kiến thức cần thiết về PWAs.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt>
+ <dd>Khi xây dựng web apps và site hiện nay, điều quan trọng đó là làm sao để chúng hoạt động một cách nhanh nhất và hiệu quả nhất. Chính điều này đem lại cho chúng khả năng hoạt động hiệu quả trên cả các thiết bị desktop với cấu hình mạnh mẽ và các thiết bị handheld với cấu hình yếu.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt>
+ <dd>Nền tảng web cung cấp các phương thức cho việc parsing và serializing XML, mỗi phương thức với các điểm mạnh và yếu khác nhau.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd>WOFF là một kiểu file cho font chữ được cung cấp miễn phí cho bất kỳ ai có nhu cầu sử dụng cho web.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData objects</a></dt>
+ <dd>FormData giúp cho việc tạo nên tổ hợp các key/value để gửi thông qua XMLHttpRequest. Mục đích ban đầu của nó là gửi dữ liệu form, nhưng nó cũng có thể hoạt động 1 cách độc lập với form để gửi các dữ liệu khác nhau. Cách thức truyền nhận tương tự như khi một form với type "multipart/form-data" thực thi method <code>submit()</code> .</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_input_methods">User input and controls</a></dt>
+ <dd>Input người dùng web hiện nay không chỉ đơn giản là chuột và bàn phím mà còn có các phương thức khác, chẳng hạn touchscreen. Bài này cung cấp các recommendations cho việc quản lý input người dùng và hiện thực việc điều khiển đối với web apps, cùng với các FAQs, ví dụ thực tế và đường dẫn đến các thông tin khác nếu bạn cần tìm hiểu chi tiết thêm về các công nghệ bên dưới.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Glossary">Glossary</a></dt>
+ <dd>Định nghĩa các khái niệm kỹ thuật liên quan đến Web và Internet.</dd>
+</dl>
+</div>
+</div>
+</div>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>