---
title: Front-end web developer
slug: Learn/Front-end_web_developer
tags:
  - CSS
  - HTML
  - JavaScript
translation_of: Learn/Front-end_web_developer
---
<p>{{learnsidebar}}</p>

<p>ยินดีต้อนรับสู่เส้นทางการเรียนรู้สำหรับนักพัฒนาเว็บส่วนหน้าของเรา!</p>

<p>ที่นี่เรามีหลักสูตรโครงสร้างที่จะสอนทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเป็นนักพัฒนาเว็บส่วนหน้า เพียงทำงานผ่านแต่ละส่วนเรียนรู้ทักษะใหม่ ๆ (หรือปรับปรุงทักษะที่มีอยู่) ตามที่คุณไป แต่ละส่วนมีแบบฝึกหัดและการประเมินผลเพื่อทดสอบความเข้าใจของคุณก่อนที่จะก้าวไปข้างหน้า</p>

<h2 id="วิชาที่ครอบคลุม">วิชาที่ครอบคลุม</h2>

<p>วิชาที่ครอบคลุมคือ:</p>

<ul>
 <li>การตั้งค่าพื้นฐานและการเรียนรู้วิธีการเรียนรู้</li>
 <li>มาตรฐานเว็บและแนวปฏิบัติที่ดีที่สุด (เช่นความสามารถในการเข้าถึงและความเข้ากันได้ของเบราว์เซอร์ข้าม)</li>
 <li>HTML ภาษาที่ให้โครงสร้างเนื้อหาเว็บและความหมาย</li>
 <li>CSS ภาษาที่ใช้ในการจัดรูปแบบหน้าเว็บ</li>
 <li>JavaScript ซึ่งเป็นภาษาสคริปต์ที่ใช้ในการสร้างการทำงานแบบไดนามิกบนเว็บ</li>
 <li>เครื่องมือที่ใช้เพื่ออำนวยความสะดวกในการพัฒนาเว็บฝั่งไคลเอ็นต์ที่ทันสมัย</li>
</ul>

<p>You can work through sections in order, but each one is also self-contained. For example, if you already know HTML, you can skip ahead to the CSS section.</p>

<h2 id="ข้อกำหนดเบื้องต้น">ข้อกำหนดเบื้องต้น</h2>

<p>คุณไม่จำเป็นที่ต้องมีความรู้มาก่อนที่จะเรียนหลักสูตรนี้ เพียงแค่คุณมี ความตั้งใจที่จะเรียนรู้ คอมพิวเตอร์ที่สามารถใช้งานเบราว์เซอร์และสามารถเชื่อมต่ออินเทอร์เน็ตได้</p>

<p>หากคุณไม่แน่ใจว่าการพัฒนาเว็บไซต์นี้หเฝฝเหมาะกับคุณหรือไม่ และหากคุณต้องการคำแนะนำอย่างละเอียดก่อนเรียนหลักสูตรนี้, ให้เริ่มทดลองใช้งาน <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> </p>

<h2 id="Getting_help">Getting help</h2>

<p>We have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working.</p>

<p>Don't panic. We all get stuck, whether we are beginner or professional web developers. The <a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> article provides you with a series of tips for looking up information and helping yourself. If you are still stuck, feel free to post a question on our <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a>.</p>

<p>Let's get started. Good luck!</p>

<h2 id="The_learning_pathway">The learning pathway</h2>

<h3 id="Getting_started">Getting started</h3>

<p>Time to complete: 1.5–2 hours</p>

<h4 id="Prerequisites">Prerequisites</h4>

<p>Nothing except basic computer literacy.</p>

<h4 id="How_will_I_know_Im_ready_to_move_on">How will I know I'm ready to move on?</h4>

<p>There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.</p>

<h4 id="Guides">Guides</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> — basic tool setup (15 min read)</li>
 <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Background on the web and web standards</a> (45 min read)</li>
 <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> (45 min read)</li>
</ul>

<h3 id="Semantics_and_structure_with_HTML">Semantics and structure with HTML</h3>

<p>Time to complete: 35–50 hours</p>

<h4 id="Prerequisites_2">Prerequisites</h4>

<p>Nothing except basic computer literacy, and a basic web development environment.</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">Modules</h4>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (15–20 hour read/exercises)</li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> (15–20 hour read/exercises)</li>
 <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a> (5–10 hour read/exercises)</li>
</ul>

<h3 id="Styling_and_layout_with_CSS">Styling and layout with CSS</h3>

<p>Time to complete: 90–120 hours</p>

<h4 id="Prerequisites_3">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_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_2">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_4">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_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_3">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_5">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_5">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/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_6">Prerequisites</h4>

<p>เป็นความคิดที่ดีที่จะรู้จัก HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้ เทคนิคและแนวปฏิบัติที่ดีที่สุดหลายเรื่องมีหลายเทคโนโลยี</p>

<h4 id="ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป">ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?</h4>

<p>การประเมินผลในแต่ละโมดูลถูกออกแบบมาเพื่อทดสอบความรู้ของคุณในเรื่อง การดำเนินการประเมินให้เสร็จสมบูรณ์เป็นการยืนยันว่าคุณพร้อมที่จะไปยังโมดูลถัดไป</p>

<h4 id="โมดูล">โมดูล</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">การทดสอบข้ามเบราว์เซอร์</a> (อ่าน / แบบฝึกหัด 25-30 ชั่วโมง)</li>
 <li><a href="/en-US/docs/Learn/Accessibility">การช่วยสำหรับการเข้าถึง</a> (อ่าน / แบบฝึกหัด 20-25 ชั่วโมง)</li>
</ul>

<h3 id="เครื่องมือที่ทันสมัย">เครื่องมือที่ทันสมัย</h3>

<p>ระยะเวลาดำเนินการ: 55–90 ชั่วโมง</p>

<h4 id="ข้อกำหนดเบื้องต้น_2">ข้อกำหนดเบื้องต้น</h4>

<p>เป็นความคิดที่ดีที่จะรู้ HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้เนื่องจากเครื่องมือที่กล่าวถึงทำงานร่วมกับเทคโนโลยีเหล่านี้มากมาย</p>

<h4 id="ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป_2">ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?</h4>

<p>ไม่มีบทความการประเมินเฉพาะในชุดของโมดูลนี้ แบบฝึกหัดกรณีศึกษาในตอนท้ายของโมดูลที่สองและสามเตรียมความพร้อมสำหรับการเข้าใจความจำเป็นของเครื่องมือที่ทันสมัย</p>

<h4 id="โมดูล_2">โมดูล</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git และ GitHub</a> (อ่าน 5 ชั่วโมง)</li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">ทำความเข้าใจกับเครื่องมือการพัฒนาเว็บฝั่งไคลเอ็นต์</a> (อ่าน 20–25 ชั่วโมง)</li>
 <li>
  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">ทำความเข้าใจกับเฟรมเวิร์ก JavaScript ฝั่งไคลเอ็นต์</a> (อ่าน / ฝึกซ้อม 30-60 ชั่วโมง)</p>
 </li>
</ul>