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

Basic HTML5, CSS and jQuery

หลักสูตร Basic HTML5, CSS and jQuery เป็นการอบรมสร้างเว็บตั้งแต่ศูนย์ด้วย HTML5 และ CSS ทั้ง Flexbox, Grid และ Responsive Design ต่อด้วย JavaScript เบื้องต้นและ jQuery 4 สำหรับเพิ่มลูกเล่นและเรียกข้อมูลด้วย Ajax เหมาะกับผู้เริ่มต้นและผู้ดูแลเว็บไซต์ขององค์กร จบแล้วสร้างเว็บของตัวเองและเผยแพร่ออนไลน์ได้

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

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

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

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

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

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

HTML และ CSS เป็นพื้นฐานของทุกหน้าเว็บ HTML5 ทำให้สร้างฟอร์ม ใส่เสียงและวิดีโอ และวางโครงสร้างหน้าเว็บได้โดยไม่ต้องพึ่งปลั๊กอินอย่าง Flash อีกต่อไป ส่วน CSS สมัยใหม่มี Flexbox, Grid และ Media Queries ที่ทำเว็บให้แสดงผลดีทุกขนาดจอ เมื่อเพิ่ม JavaScript และ jQuery เข้าไป หน้าเว็บก็โต้ตอบกับผู้ใช้ได้ ทั้งเมนู แท็บ สไลด์รูปภาพ และฟอร์มที่ส่งข้อมูลได้โดยไม่ต้องโหลดหน้าใหม่ ซึ่งยังเป็นแนวทางที่พบมากในเว็บไซต์และระบบขององค์กร

หลักสูตรนี้พาผู้เริ่มต้นสร้างเว็บตั้งแต่ศูนย์ เริ่มจากโครงสร้าง HTML5 และการตกแต่งด้วย CSS ไปจนถึง Responsive Design จากนั้นปูพื้น JavaScript สมัยใหม่และการจัดการ DOM แล้วจึงใช้ jQuery 4 และ jQuery UI เพิ่มลูกเล่นและเรียกข้อมูลด้วย Ajax พร้อมเทียบกับ JavaScript มาตรฐาน ผ่าน Lab ทุกหัวข้อและ Workshop เว็บไซต์ธุรกิจแบบ Responsive ที่เผยแพร่ออนไลน์ได้จริง (อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง ระดับ Beginner)

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

สร้างโครงสร้างหน้าเว็บด้วย HTML5 อย่างถูกหลัก Semantic และเข้าถึงได้
ตกแต่งและจัด Layout ด้วย CSS ทั้ง Flexbox และ Grid
ทำเว็บแบบ Responsive ที่แสดงผลดีทุกขนาดจอ
เขียน JavaScript พื้นฐานและจัดการ DOM กับ Event ได้
ใช้ jQuery 4 และ jQuery UI เพิ่มลูกเล่นและเรียกข้อมูลด้วย Ajax ได้
สร้างเว็บไซต์ของตัวเองให้ครบและเผยแพร่ออนไลน์ได้

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

ผู้เริ่มต้นที่ต้องการเรียนสร้างเว็บไซต์ตั้งแต่พื้นฐาน
ผู้ที่ต้องการสร้างหน้าเว็บที่โต้ตอบได้ด้วย JavaScript และ jQuery
นักไอทีหรือผู้ดูแลเว็บไซต์ขององค์กรที่ต้องแก้ไขหน้าเว็บเอง
IT Manager และ Developer สายอื่นที่ต้องการปูพื้นงาน Front-end

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

ใช้งานคอมพิวเตอร์ อินเทอร์เน็ต และเบราว์เซอร์ได้คล่อง
เข้าใจหลักการติดตั้งและถอนการติดตั้งโปรแกรมพื้นฐาน
ไม่จำเป็นต้องมีพื้นฐาน HTML, CSS หรือ JavaScript มาก่อน

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic HTML 5 + CSS 3 and jQuery และเปลี่ยนชื่อเป็น Basic HTML5, CSS and jQuery อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab ทุกหัวข้อ ระดับ Beginner ผู้เรียนจะได้สร้างหน้าเว็บด้วย HTML5 ตกแต่งและจัด Layout ด้วย CSS, Flexbox และ Grid ทำเว็บ Responsive แบบ Mobile-first ปูพื้น JavaScript สมัยใหม่และการจัดการ DOM แล้วใช้ jQuery 4 กับ jQuery UI เพิ่มลูกเล่นและเรียกข้อมูลด้วย Ajax ปิดท้ายด้วย Workshop เว็บไซต์ธุรกิจที่เผยแพร่ออนไลน์ได้จริง พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 โครงสร้างหน้าเว็บด้วย HTML5

Section 1: Lab: เริ่มต้นเว็บและเตรียมเครื่องมือ

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

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

Heading, ย่อหน้า, รายการ และการเน้นข้อความอย่างมีความหมาย
ลิงก์ภายใน ลิงก์ภายนอก และลิงก์ไปยังส่วนต่าง ๆ ของหน้า
รูปภาพพร้อม alt, figure และ figcaption
ตารางสำหรับแสดงข้อมูล
Lab: หน้าเกี่ยวกับเราและหน้าสินค้าพร้อมรูปภาพ

Section 3: Lab: ฟอร์ม HTML5

form, label และการจับคู่ label กับช่องกรอก
input แบบ text, email, tel, number, date และ password
select, textarea, checkbox, radio และ button
ตรวจข้อมูลด้วย required, pattern, min และ max
Lab: ฟอร์มติดต่อและฟอร์มสมัครสมาชิก

Section 4: Lab: สื่อและองค์ประกอบโต้ตอบของ HTML

video และ audio พร้อม controls และ poster
คำบรรยายด้วย track และไฟล์ WebVTT
ฝังวิดีโอ YouTube และแผนที่ด้วย iframe
details กับ summary และ dialog เบื้องต้น
Lab: หน้าแนะนำบริษัทพร้อมวิดีโอและแผนที่

Day 2 ตกแต่งและจัด Layout ด้วย CSS

Section 5: เริ่มต้น CSS

วิธีใส่ CSS และการแยกเป็นไฟล์
Selector พื้นฐาน, Class, ID และ Pseudo-class อย่าง :hover
Cascade, Specificity และ Inheritance
สี หน่วย px, rem, % และตัวแปร CSS
Lab: ตกแต่งหน้าแรกด้วยสีและตัวแปร CSS

Section 6: Box Model และ Typography

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

Section 7: Lab: Layout ด้วย Flexbox

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

Section 8: Lab: Layout ด้วย CSS Grid

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

Day 3 Responsive, Effect และ JavaScript เบื้องต้น

Section 9: Responsive แบบ Mobile-first

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

Section 10: Lab: Effect และ Animation ด้วย CSS

มุมโค้ง เงา และ Gradient แบบ linear และ radial
Transition สำหรับปุ่มและการ์ด
Transform: translate, scale และ rotate
Animation ด้วย @keyframes และ prefers-reduced-motion
Lab: Hero Section และปุ่มที่เคลื่อนไหวอย่างนุ่มนวล

Section 11: Workshop: เว็บ Responsive ทั้งเว็บ

วางโครงหลายหน้าให้ใช้ Style ร่วมกัน
เมนูมือถือแบบเปิดปิดด้วย details หรือ popover
Dark Mode ด้วย prefers-color-scheme
ทดสอบหลายขนาดจอด้วย Device Mode
Workshop: เว็บไซต์ธุรกิจแบบ Responsive ส่วน HTML และ CSS

Section 12: Lab: เริ่มต้น JavaScript สมัยใหม่

ใส่ JavaScript ในหน้าเว็บและใช้ Console
let, const, ชนิดข้อมูล และ Template Literal
เงื่อนไข ลูป และฟังก์ชันแบบ Arrow Function
Array และ Object เบื้องต้น
Lab: โปรแกรมคำนวณราคาสินค้าพร้อมส่วนลด

Day 4 DOM, Event และ jQuery 4

Section 13: Lab: DOM และ Event ด้วย JavaScript มาตรฐาน

เลือก Element ด้วย querySelector
แก้ข้อความและ Style ด้วย textContent และ classList
addEventListener และ Event ของฟอร์ม
สร้างและลบ Element
Lab: รายการสิ่งที่ต้องทำที่เพิ่มและลบได้

Section 14: jQuery 4 ในยุคปัจจุบัน

jQuery คืออะไร และเมื่อใดยังเหมาะจะใช้
สิ่งที่เปลี่ยนใน jQuery 4: API ที่ถูกตัดและเบราว์เซอร์ที่รองรับ
โหลด jQuery จาก CDN และเขียนโค้ดใน $(function)
Selector และ Filter ของ jQuery
เทียบคำสั่ง jQuery กับ JavaScript มาตรฐาน

Section 15: Lab: จัดการ DOM และ Event ด้วย jQuery

Traversing ด้วย .find(), .parent() และ .siblings()
แก้เนื้อหาด้วย .text(), .html() และ .val()
จัดการ Class และ Style ด้วย .addClass() และ .css()
ผูก Event ด้วย .on() และ Event Delegation
Lab: ตารางสินค้าที่กรองและไฮไลต์แถวได้

Section 16: Lab: Effect และ Animation ด้วย jQuery

.fadeIn(), .slideToggle() และ .animate()
ใช้ .toggleClass() คู่กับ CSS Transition
Accordion และแท็บด้วย jQuery
Image Slider แบบเลื่อนอัตโนมัติ
Lab: ส่วน FAQ แท็บบริการ และสไลด์รูปผลงาน

Day 5 ฟอร์ม Ajax, jQuery UI และเผยแพร่เว็บ

Section 17: Lab: ฟอร์มและ Ajax ด้วย jQuery

อ่านค่าฟอร์มด้วย .val() และ .serialize()
ตรวจข้อมูลก่อนส่งและแสดงข้อความแจ้งเตือน
ข้อมูล JSON และเรียก API ด้วย $.ajax และ $.getJSON
เทียบกับ fetch และ async/await ของ JavaScript มาตรฐาน
Lab: แสดงรายการสินค้าจากไฟล์ JSON

Section 18: Lab: jQuery UI 1.14 และ Plugin

ติดตั้ง jQuery UI ที่รองรับ jQuery 4
Datepicker, Dialog, Tabs และ Autocomplete
เลือก Plugin ที่ยังดูแลอยู่และตรวจกับ jQuery Migrate
ระวัง XSS เมื่อแทรกข้อมูลผู้ใช้ด้วย .html()
Lab: ฟอร์มจองบริการพร้อม Datepicker และ Dialog ยืนยัน

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

ตรวจ Performance และ Accessibility ด้วย Lighthouse
ลดขนาดรูปด้วย WebP หรือ AVIF และ loading="lazy"
Git เบื้องต้นและเผยแพร่ด้วย GitHub Pages หรือ Netlify
ใช้ AI Assistant ช่วยอธิบายโค้ดและตรวจผลด้วยตัวเอง
Lab: นำเว็บขึ้นออนไลน์

Section 20: Workshop: เว็บไซต์ธุรกิจพร้อมลูกเล่น jQuery

เพิ่มเมนู แท็บ สไลด์ และฟอร์มจองให้เว็บจาก Workshop เดิม
แสดงข้อมูลบริการจาก JSON ด้วย Ajax
ตรวจการแสดงผลทุกขนาดจอและแก้ปัญหาที่พบ
เผยแพร่เวอร์ชันสุดท้าย
นำเสนอผลงานและแนวทางเรียนต่อ

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

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

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

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

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

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

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

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

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

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

เริ่มใช้ jQuery ในหน้าเว็บต้องทำอย่างไร

เริ่มจากใส่ไฟล์ jQuery 4 ด้วยแท็ก script จากไฟล์ในโปรเจกต์หรือจาก CDN โดยวางไว้ก่อนสคริปต์ของเราเอง จากนั้นเขียนโค้ดไว้ใน $(function(){ ... }) เพื่อให้ทำงานหลังโหลดหน้าเสร็จ แล้วเลือก element ด้วย selector แบบเดียวกับ CSS เช่น $('#menu') หรือ $('.item') และเรียกเมธอดต่อได้ทันที เช่น hide, addClass หรือ css ถ้านำโค้ดเก่ามาใช้กับ jQuery 4 ควรเปิด jQuery Migrate ระหว่างพัฒนาเพื่อดูคำเตือน API ที่ถูกตัด

เขียน Event เช่น click และ hover ด้วย jQuery อย่างไร

ใช้เมธอด on ผูกฟังก์ชันกับเหตุการณ์ เช่น $('#btn').on('click', function(){ ... }) สำหรับเมาส์เข้าและออกใช้ mouseenter และ mouseleave ผ่าน on แทนรูปย่อแบบเดิม ข้อดีของ on คือผูกหลายเหตุการณ์พร้อมกันได้ และทำ Event Delegation ให้ element ที่เพิ่มเข้ามาภายหลังทำงานได้ด้วย เช่น $('#list').on('click', 'li', handler) ส่วน JavaScript มาตรฐานทำแบบเดียวกันได้ด้วย addEventListener

Linear Gradient กับ Radial Gradient ใน CSS ต่างกันอย่างไร

linear-gradient ไล่สีตามแนวเส้นตรง กำหนดทิศทางได้ด้วยคำอย่าง to right หรือมุมเช่น 45deg เหมาะกับพื้นหลังแถบและปุ่ม ส่วน radial-gradient ไล่สีจากจุดศูนย์กลางออกไปเป็นวงกลมหรือวงรี กำหนดรูปทรงและตำแหน่งศูนย์กลางได้ เหมาะกับเอฟเฟกต์แสงหรือจุดเด่น ทั้งสองแบบใช้กับ background-image กำหนดจุดหยุดสีได้หลายจุด และใช้ได้ในทุกเบราว์เซอร์ปัจจุบันโดยไม่ต้องใส่ Prefix แบบเดิม

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

เหมาะกับผู้เริ่มต้นที่ต้องการเรียนสร้างเว็บตั้งแต่พื้นฐาน ผู้ที่อยากทำหน้าเว็บที่โต้ตอบได้ด้วย JavaScript และ jQuery นักไอทีหรือผู้ดูแลเว็บไซต์ขององค์กร และ Developer สายอื่นที่ต้องการปูพื้นงาน Front-end ไม่จำเป็นต้องมีพื้นฐาน HTML, CSS หรือ JavaScript มาก่อน ขอเพียงใช้คอมพิวเตอร์ อินเทอร์เน็ต และเบราว์เซอร์ได้คล่อง และติดตั้งโปรแกรมพื้นฐานได้

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

สร้างหน้าเว็บด้วย HTML5 อย่างถูกหลัก ทั้งข้อความ รูปภาพ ฟอร์ม เสียงและวิดีโอ ตกแต่งและจัด Layout ด้วย CSS, Flexbox และ Grid ทำเว็บ Responsive ที่แสดงผลดีทุกขนาดจอ เขียน JavaScript พื้นฐานและจัดการ DOM ใช้ jQuery 4 และ jQuery UI ทำเมนู แท็บ สไลด์ และฟอร์มที่เรียกข้อมูลด้วย Ajax และเผยแพร่เว็บไซต์ของตัวเองออนไลน์ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Basic HTML5, CSS and jQuery ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกแก้ไขหน้าเว็บไซต์ขององค์กร หรือปรับหน้าเว็บที่ยังใช้ jQuery รุ่นเก่าให้ทำงานกับ jQuery 4 ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449