---
title: เรียนรู้การพัฒนาเว็บ
slug: Learn
tags:
  - Beginner
  - CSS
  - HTML
  - Intro
  - Landing
  - NeedsTranslation
  - Web
  - สารบัญ
  - เรียนรู้
translation_of: Learn
---
<p>{{LearnSidebar}}</p>

<div class="summary">
<p>ยินดีต้อนรับสู่พื้นที่เรียนรู้ MDN จุดมุ่งหมายของบทความชุดนี้ คือการสร้างพื้นฐานที่จะทำให้ผู้เริ่มต้นสามารถเริ่มพัฒนาเว็บไซต์แบบง่ายได้</p>

<p>จุดมุ่งหมายของพื้นที่นี้ไม่ใช่การนำคุณจากการเป็น<em> "ผู้เริ่มต้น" </em>ไปสู่การเป็น<em>"ผู้เชี่ยวชาญ"</em> แต่จะเป็นการทำให้คุณสามารถเรียนรู้ ด้วยวิธีของคุณเองได้อย่างผ่อนคลายไม่ว่าจะเป็นการเรียนรู้จาก <a href="/th/">ส่วนที่เหลือของ MDN</a>หรือจากแหล่งข้อมูลระดับกลางถึงสูงอื่นๆที่จำเป็นต้องใช้ความรู้พื้นฐาน</p>

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

<div class="warning">
<p><strong>สำคัญ : </strong>เนื้อหาในพื้นที่การเรียนรู้จะถูกเพิ่มอยู่สม่ำเสมอ ถ้าคุณมีคำถามเกี่ยวกับหัวข้อ ที่ต้องการให้ครอบคุม หรือรู้สึกว่าขาดหาย กรุณาติดต่อพวกเราส่วน {{anch("ติดต่อเรา")}} ด้านล่าง</p>
</div>

<h2 id="จะเริ่มต้นที่ไหนดี">จะเริ่มต้นที่ไหนดี</h2>

<ul class="card-grid">
 <li><span>ผู้เริ่มต้น:</span>

  <p>หากคุณเป็นผู้เริ่มต้นอย่างแท้จริง พวกเราขอแนะนำ<a href="/th/docs/Learn/Getting_started_with_the_web">เริ่มต้นกับเว็บ</a> ซึ่งจะให้ข้อมูลเบื้องต้น เกี่ยวกับการพัฒนาเว็บ</p>
 </li>
 <li><span>คำถามเฉพาะ:</span>
  <p>ถ้าคุณมีคำถามเฉพาะเกี่ยวกับ การพัฒนาเว็บไซต์ในส่วน <a href="/th/docs/Learn/Common_questions">คำถามทั่วไป </a>ของพวกเราอาจมีบางสิ่งที่ช่วยตอบคุณได้</p>
 </li>
 <li><span>รู้เกินกว่าพื้นฐาน:</span>
  <p>ถ้าคุณรู้เกี่ยวกับพื้นฐานแล้วขึ้นตอนต่อไปสำหรับการเรียนรู้คือ {{glossary("HTML")}}  และ {{glossary("CSS")}} โดยสรุปแลัว ควรเริ่มต้นที่ <a href="/th/docs/Learn/HTML/Introduction_to_HTML">บทนำสู่ HTML </a>ของพวกเราแล้วไปเรียนรู้ต่อที่ <a href="/th/docs/Learn/CSS/Introduction_to_CSS">บทนำสู่ CSS</a></p>
 </li>
 <li><span>ย้ายไปสู่การเขียนสคริปต์:</span>
  <p>ถ้าคุณสามารถใช้งาน HTML และ CSS ได้อย่างคล่องแคล่วแล้ว หรือคุณสนใจแต่การเขียน<span class="Thai th-reading" lang="th">โค้ด </span>ขั้นตอนต่อไปคือ {{glossary("JavaScript")}} หรือการพัฒนาในฝัง Server เริ่มต้นด้วย <a href="/th/docs/Learn/JavaScript/First_steps">JavaScript ขั้นตอนแรก</a> และ <a href="/th/docs/Learn/Server-side/First_steps">Server-side ขั้นตอนแรก</a> ของพวกเร </p>
 </li>
</ul>

<div class="note">
<p><strong>หมายเหตุ</strong>: <a href="/th/docs/Glossary">อภิธานศัพท์</a> ของเราจะช่วยให้คำจำกัดความของคำศัพท์ต่างๆ</p>
</div>

<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p>

<h2 id="เนื้อหาที่ครอบคลุม">เนื้อหาที่ครอบคลุม</h2>

<p>นี่คือเนื้อหาที่เราครอบคลุมในพื้นที่เรียนรู้ MDN</p>

<dl>
 <dt><a href="/en-US/Learn/Getting_started_with_the_web">เริ่มต้นกับเว็บ</a></dt>
 <dd>Provides a practical introduction to web development for complete beginners.</dd>
 <dt><a href="/th/docs/Learn/HTML">HTML — โครงสร้างของเว็บ</a></dt>
 <dd>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.</dd>
 <dt><a href="/th/docs/Learn/CSS">CSS — ตกแต่งเว็บ</a></dt>
 <dd>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.</dd>
 <dt><a href="/th/docs/Learn/JavaScript">JavaScript — การเขียนสคริปต์แบบไดนามิกด้านไคลเอนต์ </a></dt>
 <dd>JavaScript is the scripting language used to add dynamic functionality to web pages. This topic teaches all the essentials needed to become comfortable with writing and understanding JavaScript.</dd>
 <dt><a href="/th/docs/Learn/Accessibility">การเข้าถึง — ทำให้ทุกคนสามารถใช้เว็บไซต์ได้</a></dt>
 <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.</dd>
 <dt><a href="/th/docs/Learn/Performance">ประสิทธิภาพ — การทำให้เว็บไซต์เร็วและมีการตอบสนอง</a></dt>
 <dd>Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.</dd>
 <dt><a href="/th/docs/Learn/Tools_and_testing">เครื่องมือและการทดสอบ</a></dt>
 <dd>This topic covers the tools developers use to facilitate their work, such as cross browser testing tools.</dd>
 <dt><a href="/th/docs/Learn/Server-side">การเขียนโปรแกรมเว็บไซต์ฝั่งเซอร์เวอร์</a></dt>
 <dd>Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials showing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd>
</dl>

<h2 id="รับโค้ดตัวอย่างของเรา">รับโค้ดตัวอย่างของเรา</h2>

<p>โค้ดตัวอย่างที่คุณจะเจอในพื้นที่เรียนรู้นั้น<a href="https://github.com/mdn/learning-area/">มีอยู่บน GitHub ทั้งหมด</a> หากคุณต้องการที่จะ คัดลอกมันลงบนคอมพิวเตอร์ของคุณ วิธีที่ง่ายที่สุดคือการดาวน์โหลด<a href="https://github.com/mdn/learning-area/archive/master.zip">ไฟล์ ZIP จากมาสเตอร์ branch ล่าสุด</a></p>

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

<ol>
 <li><a href="https://git-scm.com/downloads">ติดตั้ง Git</a> บนเครื่องของคุณ นี่คือซอฟต์แวร์สำหรับควบคุมการปรับปรุงแก้ไขที่ GitHub ใช้เป็นฐานในการทำงาน</li>
 <li><a href="https://github.com/join">สร้างบัญชี GitHub</a></li>
 <li>เมื่อสร้างบัญชีเสร็จแล้ว ลงชื่อเข้าใช้ที่ <a href="https://github.com">github.com</a> ด้วยชื่อผู้ใช้และรหัสผ่านของคุณ</li>
 <li>เปิดคอมมานด์พรอมต์ (วินโดวส์) หรือเทอร์มินัล (<a href="https://help.ubuntu.com/community/UsingTheTerminal">ลีนุกซ์</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">แมคโอเอส</a>) บนคอมพิวเตอร์ของคุณ</li>
 <li>การคัดลอกรีพอซิทรีของพื้นที่เรียนรู้นี้สู่โฟลเดอร์ชื่อ <code>learning-area</code> ณ ตำแหน่งปัจจุบันที่คอมมานด์พรอมต์หรือเทอร์มินัลกำลังชี้อยู่ สามารถทำได้ด้วยคำสั่งต่อไปนี้:
  <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">git</span> clone https://github.com/mdn/learning-area</code></pre>
 </li>
 <li>ตอนนี้คุณสามารถเข้าสู่ไดเรกทอรี และหาไฟล์ที่คุณต้องการ (สามารถทำได้โดยการใช้ Finder/File Explorer หรือ <a href="https://en.wikipedia.org/wiki/Cd_(command)">คำสั่ง cd</a>)</li>
</ol>

<p>คุณสามารถอัปเดต <code>learning-area</code> รีพอซิทรีที่มีการเปลี่ยนแปลงในมาสเตอร์บน GitHub ด้วยขั้นตอนต่อไปนี้:</p>

<ol>
 <li>ในคอมมานด์พรอมต์หรือเทอร์มินัลของคุณ ให้เข้าไปข้างในไดเรกทอรี <code>learning-area</code>  โดยใช้ <code>cd</code> ยกตัวอย่างเช่น หากคุณกำลังอยู่ในไดเรกทอรีแม่ ให้ใช้คำสั่ง:

  <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">cd</span> learning-area</code></pre>
 </li>
 <li>อัปเดตรีพอซิทรีด้วยคำสั่งต่อไปนี้:
  <pre class="brush: bash line-numbers language-bash"><code class="language-bash"><span class="function token">git</span> pull</code></pre>
 </li>
</ol>

<h2 id="ติดต่อเรา_2"><a id="ติดต่อเรา" name="ติดต่อเรา">ติดต่อเรา</a></h2>

<p> ถ้าคุณต้องการติดต่อพวกเราเกี่ยวกับบางสิ่ง ทางเลือกที่ดีที่สุดคือ ทิ้งข้อความที่ <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse thread</a> หรือ <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a> ของพวกเรา เราต้องการทราบข้อมูลจากคุณเกี่ยวกับสิ่งที่ คุณคิดว่าผิดพลาดหรือขาดหายไปในเว็บไซต์ ขอหัวข้อการเรียนรู้ใหม่ ขอความช่วยเหลือใน รายการที่คุณไม่เข้าใจ หรือคำถามหรือข้อสงสัยอื่น ๆ</p>

<p>ถ้าคุณสนใจช่วยพัฒนาปรับปรุงเนื้อหา ดูที่ <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">how you can help</a> และรับการติดต่อ พวกเราดีใจมากที่จะได้ติดต่อกับคุณ ไม่ว่าคุณจะเป็นผู้เรียน คุณครู ผู้มีประสบการณ์ด้านการพัฒนาเว็บไซต์ หรือใครสักคนที่สนใจช่วยปรับปรุง ประสบการณ์การเรียนรู้นี้</p>

<article class="approved">
<div class="boxed translate-rendered text-content">
<h2 id="ดูเพิ่ม">ดูเพิ่ม</h2>

<dl>
 <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt>
 <dd>Our newsletter for web developers, which is a great resource for all levels of experience.</dd>
 <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
 <dd>A great series of videos explaining web fundamentals, aimed at complete beginners to web development. Created by <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>A great interactive site for learning programming languages from scratch.</dd>
 <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
 <dd>Basic coding theory with a gamified learning process. Mainly focused on beginners.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
 <dd>Free and open courses for learning tech skills, with mentorship and project-based learning</dd>
 <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
 <dd>Interactive site with tutorials and projects to learn web development.</dd>
 <dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt>
 <dd>A framework for entry-level web literacy &amp; 21st Century skills, which also provides access to teaching activities sorted by category.</dd>
 <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
 <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd>
 <dt><a href="https://edabit.com/">Edabit</a></dt>
 <dd>Hundreds of free interactive coding challenges in various languages.</dd>
</dl>
</div>
</article>