Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน)
Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน) is a 12-hour training course by IT Genius Institute. สอนการออกแบบเว็บไซต์ด้วยภาษา HTML และ CSS สำหรับผู้เริ่มต้น ที่ยังไม่มีความรู้มาก่อนเลย สามารถเริ่มต้นเรียนรู้ได้จากคอร์สนี้…
Training schedule
No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.
Objectives
- เข้าใจโครงสร้างของ 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 ที่เรียนมา
Who this course is for
- ผู้ที่สนใจเรียนรู้การออกแบบและพัฒนาเว็บไซต์ตั้งแต่ต้น
- นักเรียน/นักศึกษา ที่ต้องการทำโครงงานหรือประกาศนียบัตรเกี่ยวกับเว็บดีไซน์
- นักกราฟิก หรือ UI/UX Designer ที่ต้องการเข้าใจพื้นฐาน HTML/CSS เพื่อสื่อสารกับนักพัฒนาได้ดีขึ้น
- บุคคลที่เคยเขียน HTML/CSS แบบพื้นฐานแล้ว แต่ยังไม่เคยใช้เครื่องมือ/เทคนิคสมัยใหม่เช่น Responsive, Flexbox, Grid
Prerequisites
- ใช้งานคอมพิวเตอร์และระบบปฏิบัติการเบื้องต้นได้
- เข้าใจพื้นฐานของการใช้เว็บเบราเซอร์, อินเทอร์เน็ต
- มีคอมพิวเตอร์ที่ติดตั้งโปรแกรม Editor ได้ (เช่น VS Code)
- (ถ้าเป็นไปได้) มีทักษะเบื้องต้นของ command line / terminal จะเป็นประโยชน์
Curriculum
วันที่ 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
Frequently asked questions
Who is Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน) for, and what background is needed?
Built for ผู้ที่สนใจเรียนรู้การออกแบบและพัฒนาเว็บไซต์ตั้งแต่ต้น · นักเรียน/นักศึกษา ที่ต้องการทำโครงงานหรือประกาศนียบัตรเกี่ยวกับเว็บดีไซน์ · นักกราฟิก หรือ UI/UX Designer ที่ต้องการเข้าใจพื้นฐาน HTML/CSS เพื่อสื่อสารกับนักพัฒนาได้ดีขึ้น Background you should have: ใช้งานคอมพิวเตอร์และระบบปฏิบัติการเบื้องต้นได้ · เข้าใจพื้นฐานของการใช้เว็บเบราเซอร์, อินเทอร์เน็ต Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.
How much does Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน) cost and how long does it run?
THB 3,500. The course runs 12 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.
Do I get a certificate?
Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.
Where does the training take place, and is there an online option?
You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.
What if I fall behind or miss a session — can I retake it?
Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.
How do I enrol, or request a quotation for my company?
Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.
Instructors
Run this course for your whole team
We run this course in-house, tailored to your stack.
Corporate training quote