Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน)
รายละเอียด Course ID: wdc-01-01
ในยุคปัจจุบันที่เว็บแอปพลิเคชัน (Web Apps), SPA (Single Page Applications) และเว็บที่ตอบสนองต่ออุปกรณ์หลายประเภท (Responsive Design) มีบทบาทสำคัญมากขึ้น การเขียน HTML และ CSS ไม่ได้เป็นเพียงแค่การสร้างหน้าเว็บติดรูปภาพข้อความธรรมดา แต่ต้องทำให้เว็บโหลดไว เข้ากับอุปกรณ์ทุกขนาด ปลอดภัย และมีประสิทธิภาพสูง
หลักสูตรนี้สอนการออกแบบเว็บไซต์ด้วยภาษา HTML และ CSS สำหรับผู้เริ่มต้น ที่ยังไม่มีความรู้มาก่อนเลย สามารถเริ่มต้นเรียนรู้ได้จากคอร์สนี้ โดยลักษณะการสอนจะเป็นการเรียนรู้ทฤษฎี ควบคู่ไปกับการฝึกปฎิบัติทำ Workshop ที่น่าสนใจเพื่อให้ผู้เรียนสามารถทำความเข้าใจได้ดียิ่งขึ้น
รอบการเปิดอบรม
วิดีโอแนะนำคอร์ส
ไฟล์รายละเอียดคอร์ส
- Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน) (Course outline PDF)
- โปรไฟล์ของบริษัทไอทีจีเนียส เอ็นจิเนียริ่ง (โปรไฟล์ไอทีจีเนียส PDF)
วัตถุประสงค์
- เข้าใจโครงสร้างของ HTML semantic elements และใช้งานได้อย่างเหมาะสม
- เข้าใจแนวคิดของ responsive design / mobile-first design และวิธีใช้ media queries
- รู้จักและใช้งาน CSS modern layout techniques ได้แก่ Flexbox, CSS Grid
- รู้จักการใช้ CSS preprocessors (เช่น Sass) เบื้องต้น
- เรียนรู้การจัดการ images / fonts / icons ให้มีประสิทธิภาพ (เช่น optimization, lazy loading)
- เรียนรู้การใช้ browser dev tools เพื่อตรวจสอบ โค้ด debug และปรับปรุง performance
- มีผลงานเว็บไซต์ตัวอย่างที่สร้างโดยใช้ HTML / CSS / tools ที่เรียนมา
กลุ่มเป้าหมาย
- ผู้ที่สนใจเรียนรู้การออกแบบและพัฒนาเว็บไซต์ตั้งแต่ต้น
- นักเรียน/นักศึกษา ที่ต้องการทำโครงงานหรือประกาศนียบัตรเกี่ยวกับเว็บดีไซน์
- นักกราฟิก หรือ UI/UX Designer ที่ต้องการเข้าใจพื้นฐาน HTML/CSS เพื่อสื่อสารกับนักพัฒนาได้ดีขึ้น
- บุคคลที่เคยเขียน HTML/CSS แบบพื้นฐานแล้ว แต่ยังไม่เคยใช้เครื่องมือ/เทคนิคสมัยใหม่เช่น Responsive, Flexbox, Grid
ความรู้พื้นฐาน
- ใช้งานคอมพิวเตอร์และระบบปฏิบัติการเบื้องต้นได้
- เข้าใจพื้นฐานของการใช้เว็บเบราเซอร์, อินเทอร์เน็ต
- มีคอมพิวเตอร์ที่ติดตั้งโปรแกรม Editor ได้ (เช่น VS Code)
- (ถ้าเป็นไปได้) มีทักษะเบื้องต้นของ command line / terminal จะเป็นประโยชน์
ระยะเวลาในการอบรม
- 12 ชั่วโมง
ราคาคอร์สอบรม
- ราคาปกติ 3,500 บาท / คน
- โปรโมชั่นลด 10% เหลือ 3,150 บาท / คน
- ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
- ขอใบเสนอราคา
วิทยากรผู้สอน
อาจารย์สามิตร โกยมคอร์สต่อเนื่องที่แนะนำ
Basic HTML5 and CSS3 (คอร์ส html 5 และ css 3 พื้นฐาน)เนื้อหาการอบรม
วันที่ 1 — HTML + CSS Basics & Responsive Design ( 6 ชม.)
Section 1: เตรียมเครื่องมือ & แนวคิดพื้นฐาน
- ติดตั้งและตั้งค่า VS Code + Extensions (Prettier, Live Server, GitLens)
- รู้จักเทคโนโลยีการออกแบบเว็บไซต์
- ตัวอย่างเว็บไซต์ที่ออกแบบตามมาตรฐาน
- แนวทางการออกแบบเว็บไซต์สมัยใหม่
- Workflow สมัยใหม่: Live Server, โครงสร้างโฟลเดอร์, การเขียนโค้ดมาตรฐาน
Section 2: พื้นฐาน HTML Semantic & Accessibility
- รู้จักโครงสร้างของภาษา HTML
- Syntax พื้นฐานของ HTML
- การจัดการกับข้อความและภาพบนหน้าเว็บเพจ
- การใช้ตารางในภาษา HTML
- การสร้างแบบฟอร์มรับข้อมูล
- Workshop การสร้างหน้าเว็บไซต์ด้วย HTML
Section 3: พื้นฐาน CSS Basics
- แนะนำเว็บไซต์ที่ออกแบบด้วย CSS
- Tag พื้นฐานในการเขียน CSS
- รู้จักโครงสร้างในการเขียน CSS
- Box Model
- CSS กับการรูปภาพ
- การวาง navigation menu ด้วย CSS
- การวาง layout เว็บไซต์ด้วย CSS
- Workshop การออกแบบเว็บไซต์ด้วย CSS
วันที่ 2 — Modern Layout + Responsive Design (6 ชั่วโมง)
Section 4: การออกแบบเว็บ Responsive Principles รองรับ Mobile
- Mobile-first design, Media Queries, Breakpoints
- CSS Grid: grid-template, placement, auto-fit, auto-fill
- Flexbox Concepts: container vs items, alignment, justify, wrap
- ออกแบบ Landing Page ให้ responsive รองรับมือถือ + tablet
Section 5: Styling & Visual Design
- Typography, Web Fonts (Google Fonts), SVG Icons
- Colors & Contrast (WCAG standard)
- CSS Transitions & Animations (hover, fade-in, slide)
- Workshop: เพิ่ม Dark/Light mode และ animation ให้เว็บ
Section 6: การทำงานกับ Assets Optimization และการเผยแพร่ผลงาน (Deployment)
- รูปภาพ: WebP, responsive images, lazy loading
- ใช้ Chrome DevTools & Lighthouse Audit
- Deploy เว็บไปยัง GitHub Pages / Netlify
- Workshop: Optimize + Deploy เว็บจริงของผู้เรียน
ผลลัพธ์ที่ผู้เรียนจะได้รับ (Result):
- เข้าใจ HTML + CSS พร้อม Responsive Design
- ใช้ Flexbox และ Grid ทำ Layout ที่ซับซ้อนได้
- รู้จักการ optimize เว็บไซต์ให้เร็วและรองรับทุกอุปกรณ์
- มีผลงานเว็บจริง พร้อม deploy ออนไลน์เป็น portfolio
ตัวอย่าง WORKSHOP การออกแบบโครงสร้างเว็บไซต์ด้วย CSS
