พัฒนาเว็บไซต์ · WDC-01-01

Basic HTML+CSS

หลักสูตร Basic HTML+CSS เป็นการอบรมเขียนเว็บด้วย HTML และ CSS สำหรับผู้เริ่มต้นจากศูนย์ ตั้งแต่ Semantic HTML ฟอร์ม และ Box Model จนถึงจัด Layout ด้วย Flexbox, CSS Grid และทำเว็บ Responsive แบบ Mobile-first เหมาะกับผู้เริ่มต้น นักศึกษา และนักออกแบบ UI จบแล้วได้เว็บ Portfolio ของตัวเองที่เผยแพร่ออนไลน์

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 3,150 บาท / ท่าน 3,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

ทุกเว็บไซต์ที่เราเปิดดูในวันนี้ ไม่ว่าจะสร้างด้วยเครื่องมือหรือ Framework ใด สุดท้ายเบราว์เซอร์ก็แสดงผลออกมาเป็น HTML และ CSS ผู้ที่เข้าใจสองภาษานี้จึงแก้ไขหน้าเว็บ ปรับ Template หรือคุยงานกับทีมพัฒนาได้อย่างมั่นใจ แต่ผู้เริ่มต้นจำนวนมากมักเรียนจากตัวอย่างโค้ดรุ่นเก่าที่ยังจัดหน้าด้วยตาราง หรือได้หน้าเว็บที่ดูดีบนคอมพิวเตอร์แต่พังเมื่อเปิดบนมือถือ

หลักสูตรนี้เริ่มจากศูนย์และพาสร้างเว็บไซต์จริงหนึ่งเว็บตั้งแต่ไฟล์แรกจนเผยแพร่ออนไลน์ เริ่มจากเตรียม VS Code เขียนโครงสร้างหน้าเว็บด้วย Semantic HTML ใส่ข้อความ รูปภาพ ลิงก์ ตาราง และฟอร์ม จากนั้นตกแต่งด้วย CSS ตั้งแต่ Selector, Box Model และ Typography จัด Layout ด้วย Flexbox และ CSS Grid ทำให้รองรับมือถือแบบ Mobile-first ด้วย Media Queries ตรวจคุณภาพด้วย Chrome DevTools และ Lighthouse แล้วปิดท้ายด้วยการสร้างเว็บ Portfolio ของตัวเองและเผยแพร่ขึ้น GitHub Pages (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เข้าใจการทำงานของเว็บไซต์ และบทบาทของ HTML, CSS และ JavaScript
เขียนโครงสร้างหน้าเว็บด้วย Semantic HTML ที่อ่านง่ายและเข้าถึงได้
ใส่ข้อความ รูปภาพ ลิงก์ ตาราง และฟอร์มรับข้อมูลได้อย่างถูกต้อง
ใช้ Selector, Cascade, Box Model และ Typography ตกแต่งหน้าเว็บได้
จัด Layout ด้วย Flexbox และ CSS Grid ได้คล่อง
ทำเว็บ Responsive แบบ Mobile-first ด้วย Media Queries
ตรวจหน้าเว็บด้วย DevTools และ Lighthouse แล้วเผยแพร่ขึ้น GitHub Pages ได้

หลักสูตรนี้เหมาะสำหรับ

ผู้เริ่มต้นที่ไม่เคยเขียนเว็บมาก่อนและอยากสร้างเว็บไซต์ของตัวเอง
นักเรียน นักศึกษา ที่ต้องทำเว็บไซต์ในงานหรือโครงงาน
นักออกแบบ UI/UX และ Graphic Designer ที่อยากเข้าใจว่างานออกแบบกลายเป็นหน้าเว็บอย่างไร
ผู้ดูแลเว็บไซต์ องค์กร หรือแอดมินเพจ ที่ต้องแก้ไขเนื้อหาหรือ Template บ่อย
ผู้ที่วางแผนจะเรียน JavaScript, PHP หรือ Framework ต่อและต้องการพื้นฐานที่ถูกต้อง

พื้นฐานของผู้เข้าอบรม

ใช้งานคอมพิวเตอร์ จัดการไฟล์และโฟลเดอร์ และใช้เว็บเบราว์เซอร์ได้
ไม่จำเป็นต้องมีพื้นฐานการเขียนโปรแกรมมาก่อน
โน้ตบุ๊กที่ติดตั้ง VS Code และเบราว์เซอร์รุ่นล่าสุด เช่น Chrome, Edge หรือ Firefox ได้
มีบัญชี GitHub ของตนเอง (สมัครได้ฟรี) สำหรับหัวข้อเผยแพร่เว็บ

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic HTML+CSS รุ่นเดิม อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab โดยสร้างเว็บ Portfolio ของผู้เรียนเองชุดเดียวตลอดหลักสูตร ระดับ Beginner เริ่มได้โดยไม่ต้องมีพื้นฐานการเขียนโปรแกรม ฉบับนี้ตัดหัวข้อ Sass ออก ใช้ตัวแปร CSS

ที่เบราว์เซอร์รองรับในตัวแทน และเพิ่มการตรวจคุณภาพด้วย Lighthouse กับการเผยแพร่ขึ้น GitHub Pages หลักสูตรนี้เน้นพื้นฐานสำหรับผู้เริ่มต้น ต่างจากหลักสูตร HTML5 and Modern CSS ที่ต่อยอดไปยังฟอร์มพร้อม Validation, เสียงและวิดีโอ, Dialog, Popover, Container Queries และ Animation ผู้เรียนได้ Lab Guide ไฟล์ตั้งต้นและโค้ดเฉลยครบทุก Lab กลับไปใช้งานต่อ

Day 1 โครงสร้างหน้าเว็บด้วย HTML และพื้นฐาน CSS

Section 1: Lab: เตรียมเครื่องมือและโครงสร้าง HTML

เว็บทำงานอย่างไร: เบราว์เซอร์ เซิร์ฟเวอร์ URL และบทบาทของ HTML, CSS, JavaScript
ติดตั้ง VS Code พร้อม Live Server และ Prettier และวางโครงสร้างโฟลเดอร์ของเว็บ
Syntax ของ HTML และโครงสร้างเอกสาร: doctype, lang, meta charset และ viewport
Heading และ Semantic Elements: header, nav, main, section, article และ footer
Lab: วางโครงหน้าเว็บ Portfolio ด้วย Semantic HTML

Section 2: ข้อความ รูปภาพ ลิงก์ และตาราง

ย่อหน้า รายการ และการเน้นข้อความอย่างมีความหมาย
ลิงก์ภายในเว็บ ลิงก์ภายนอก และลิงก์ไปยังส่วนต่าง ๆ ของหน้า
รูปภาพพร้อม alt และ figure กับ figcaption
ตารางสำหรับแสดงข้อมูล (ไม่ใช้จัด Layout)
Lab: หน้า About และหน้าผลงานพร้อมรูปภาพ

Section 3: Lab: ฟอร์มรับข้อมูลเบื้องต้น

form, label และการจับคู่ label กับช่องกรอก
input แบบ text, email, tel และ password
select, textarea, checkbox, radio และ button
required และ placeholder ที่ใช้อย่างเหมาะสม
Lab: หน้าติดต่อเราพร้อมฟอร์มที่ใช้งานง่าย

Section 4: เริ่มต้น CSS: Selector และ Cascade

วิธีใส่ CSS และเหตุผลที่ควรแยกเป็นไฟล์
Selector พื้นฐาน: Element, Class, ID และ Descendant
Cascade, Specificity และ Inheritance
สี หน่วยวัด px, rem, % และ vw
ใช้ DevTools ตรวจและทดลองแก้ CSS สด

Section 5: Box Model และ Typography

Box Model: content, padding, border และ margin
box-sizing: border-box และ display แบบต่าง ๆ
ใช้ Google Fonts กับข้อความภาษาไทยและอังกฤษ
ขนาดตัวอักษร ระยะบรรทัด และความกว้างบรรทัดที่อ่านสบาย
Lab: ตกแต่งหน้าบทความให้อ่านง่าย

Day 2 Layout, Responsive และการเผยแพร่เว็บ

Section 6: Lab: จัด Layout ด้วย Flexbox

Flex Container และ Flex Item
จัดตำแหน่งด้วย justify-content และ align-items
gap, flex-wrap และการแบ่งพื้นที่ด้วย flex
Lab: Navigation Bar และแถวการ์ดด้วย Flexbox

Section 7: Lab: จัด Layout ด้วย CSS Grid

grid-template-columns, หน่วย fr และ gap
repeat(), auto-fit และ minmax() สำหรับ Grid ที่ยืดหยุ่น
grid-template-areas วางโครงทั้งหน้า
เลือกใช้ Flexbox หรือ Grid ให้เหมาะกับงาน
Lab: แกลเลอรีผลงานและ Layout ทั้งหน้า

Section 8: Responsive แบบ Mobile-first

แนวคิด Mobile-first และ meta viewport
Media Queries และการเลือก Breakpoint จากเนื้อหา
ขนาดตัวอักษรแบบยืดหยุ่นด้วย clamp()
รูปภาพ Responsive ด้วย max-width, srcset และ picture
Lab: ปรับเว็บให้แสดงผลดีทั้งมือถือ แท็บเล็ต และจอใหญ่

Section 9: ตกแต่งและเพิ่ม Interaction เบื้องต้น

ตัวแปร CSS (Custom Properties) สำหรับสีและระยะห่าง
สถานะ hover และ focus ที่ใช้งานด้วยคีย์บอร์ดได้
Transition เบื้องต้นสำหรับปุ่มและการ์ด
Dark Mode ด้วย prefers-color-scheme และสีที่ Contrast ผ่านเกณฑ์
Lab: ทำ Theme สีและสถานะปุ่มให้ทั้งเว็บ

Section 10: Workshop: ตรวจคุณภาพและเผยแพร่เว็บ Portfolio

ทดสอบหลายขนาดจอด้วย Device Mode และตรวจด้วย Lighthouse
ลดขนาดรูปด้วย WebP หรือ AVIF และ loading="lazy"
Git เบื้องต้นและเผยแพร่เว็บด้วย GitHub Pages หรือ Netlify
ใช้ AI Assistant ช่วยอธิบายโค้ด พร้อมตรวจผลด้วยตัวเองทุกครั้ง
Workshop: สร้างเว็บ Portfolio ของตัวเองให้ครบ เผยแพร่ออนไลน์ และนำเสนอผลงาน

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Flexbox กับ CSS Grid ต่างกันอย่างไร ควรใช้ตอนไหน

Flexbox เหมาะกับการจัดของเรียงในแนวเดียว เช่น เมนู แถวปุ่ม หรือแถวการ์ด ส่วน CSS Grid เหมาะกับการวางโครงสองมิติทั้งแถวและคอลัมน์ เช่น Layout ทั้งหน้าหรือแกลเลอรีรูปภาพ ในงานจริงมักใช้ทั้งสองแบบร่วมกัน โดยใช้ Grid วางโครงใหญ่และใช้ Flexbox จัดของภายในแต่ละส่วน ในหลักสูตรจะได้ลองทำทั้งสองแบบกับเว็บเดียวกันเพื่อเห็นความต่างชัดเจน

ทำเว็บให้รองรับมือถือแบบ Mobile-first มีขั้นตอนอย่างไร

เริ่มจากใส่ meta viewport แล้วเขียน CSS สำหรับจอเล็กเป็นค่าเริ่มต้น ใช้ Layout ที่ยืดหยุ่นด้วย Flexbox หรือ Grid ใช้หน่วยแบบสัมพัทธ์อย่าง rem และ % จากนั้นเพิ่ม Media Queries เมื่อเนื้อหาเริ่มดูไม่ดีบนจอที่ใหญ่ขึ้น และทำรูปภาพให้ย่อขยายตามจอด้วย max-width, srcset หรือ picture สุดท้ายทดสอบด้วย Device Mode ใน DevTools และบนมือถือจริง

Semantic HTML คืออะไร ทำไมควรใช้

Semantic HTML คือการเลือกแท็กที่บอกความหมายของเนื้อหา เช่น header, nav, main, article และ footer แทนการใช้ div ทุกจุด ช่วยให้โปรแกรมอ่านหน้าจอและผู้ใช้คีย์บอร์ดเข้าใจโครงสร้างหน้าเว็บ ช่วยให้ Search Engine อ่านเนื้อหาได้ถูกต้อง และทำให้โค้ดอ่านง่ายและดูแลต่อได้ง่ายขึ้น

หลักสูตร Basic HTML+CSS เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้เริ่มต้นที่ไม่เคยเขียนเว็บมาก่อน นักเรียน นักศึกษา นักออกแบบ UI/UX และผู้ดูแลเว็บไซต์ที่ต้องแก้ไขหน้าเว็บเอง ไม่จำเป็นต้องมีพื้นฐานการเขียนโปรแกรม ขอเพียงใช้คอมพิวเตอร์ จัดการไฟล์ และใช้เว็บเบราว์เซอร์ได้ พร้อมโน้ตบุ๊กที่ติดตั้ง VS Code ได้

เรียนจบหลักสูตร Basic HTML+CSS แล้วทำอะไรได้บ้าง

ผู้เรียนจะสร้างหน้าเว็บด้วย Semantic HTML ตกแต่งด้วย CSS จัด Layout ด้วย Flexbox และ CSS Grid ทำเว็บให้รองรับมือถือ ตรวจคุณภาพด้วย Lighthouse และเผยแพร่เว็บขึ้น GitHub Pages ได้เอง โดยมีเว็บ Portfolio ของตัวเองเป็นผลงาน และพร้อมต่อยอดไปเรียน HTML5 and Modern CSS, JavaScript หรือ Tailwind CSS

เรียน Basic HTML+CSS ต้องใช้โปรแกรมอะไรบ้าง

ใช้ VS Code พร้อม Extension Live Server และ Prettier เว็บเบราว์เซอร์ Chrome หรือ Edge ที่มี DevTools และ Lighthouse ในตัว และบัญชี GitHub สำหรับเผยแพร่เว็บ เครื่องมือทั้งหมดใช้ได้ฟรี และจะมีขั้นตอนติดตั้งให้ในวันแรก