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