คอร์สเรียน HTML + CSS สำหรับพัฒนาหน้าเว็บสายงาน Front-end

บทนำ

• แนะนำคอร์สเรียน

  09:18 นาที

• แนะนำเทคโนโลยีของเว็บโดยพื้นฐาน

  04:42 นาที

ดาวน์โหลดโปรแกรม และการเตรียมความพร้อมก่อนเรียน

• ดาวน์โหลด Workshop

  00:45 นาที

• ดาวน์โหลด Cheat Sheet (สูตรโกง)

  01:45 นาที

• ดาวน์โหลดและติดตั้ง Visual Studio Code (VSCode)

  02:16 นาที

• Visual Studio Code: Live Server

  15:44 นาที

• Visual Studio Code: HTMLHint

  02:03 นาที

HTML5

• HTML Element - ส่วนประกอบและโครงสร้าง

  24:01 นาที

• HTML Head - ข้อมูลเพิ่มเติบ

  09:40 นาที

• HTML Formatting Text - การจัดข้อความ

  25:59 นาที

• HTML Entities - ข้อความพิเศษ

  04:50 นาที

• HTML Semantic Tag - แท็กพิเศษ

  05:59 นาที

• Workshop 1 - การจัดข้อความกับ HTML

  10:15 นาที

• Website - การทำเว็บไซต์และการทำลิงก์เชื่อมโยง

  12:00 นาที

• HTML Document Fragments - การทำลิงก์เชื่อมโยงกับส่วนประกอบภายในเว็บ

  09:00 นาที

• HTML Media - การแนบสื่อต่างๆลงหน้าเว็บ (รูปภาพ, วิดีโอ, เสียง)

  17:38 นาที

• HTML Iframe & Embed - แนวทางการแนบข้อมูลจากภายนอก เช่น Google Maps, YouTube

  10:46 นาที

• Workshop 2 - การทำหน้าเว็บหลายหน้า

  15:19 นาที

• HTML Table - การจัดเนื้อหาตาราง

  09:53 นาที

• Workshop 3 - การแสดงเนื้อหาแบบตาราง

  04:46 นาที

• Web Form - ทำความรู้จักกับการส่งข้อมูลผ่านแบบฟอร์มหน้าเว็บ

  10:57 นาที

• HTML Form (Submit) - วิธีการส่งข้อมูล

  22:05 นาที

• HTML Form (Types) - ประเภทของ Input ต่างๆ

  21:04 นาที

• HTML Form (Attributes) - คุณสมบัติพิเศษบน Input

  21:40 นาที

• HTML Form (Other) - การใช้แบบฟอร์มอื่นๆเพิ่มเติม

  12:11 นาที

• Workshop 4 - การทำ Shorten link ด้วยการใช้ API ของผู้อื่น

  08:12 นาที

CSS3

• CSS Structure - โครงสร้างหลัก

  13:49 นาที

• CSS Unit & Value - แนวทางการกำหนดค่าลงใน Property ต่างๆ

  14:22 นาที

• Workshop 5 - ทดลองปรับสีและรูปแบบบนหน้าเว็บ

  04:18 นาที

• CSS Framework - แนวทางการใช้ชุด CSS ของผู้อื่น

  25:42 นาที

• Workshop 6 - ทดลองใช้งาน Bootstrap CSS

  15:54 นาที

• CSS Selector - วิธีการเลือก HTML Element

  20:15 นาที

• CSS Combinator - การใช้ Selector แบบประสาน

  14:27 นาที

• CSS Inheritance - การสืบทอดเนื้อหา

  07:33 นาที

• Workshop 7 - การปรับ Dark Theme

  04:55 นาที

• CSS Pseudo - การใช้ Selector แบบกำหนดตามสถานะและตำแหน่ง

  32:38 นาที

• Workshop 8 - การปรับปรุง Dark Theme เพิ่มเติม

  06:09 นาที

• CSS Box Model - การกำหนดขนาด ขยายเนื้อหา ขอบ และ ระยะห่าง

  28:32 นาที

• CSS Background - การกำหนดพื้นหลัง

  17:39 นาที

• Workshop 9 - แก้ไขรูปภาพที่กว้างมากเกินไป

  02:57 นาที

• CSS Text & Font - การปรับรูปแบบข้อความต่างๆ

  34:01 นาที

• CSS em, rem - ทำความรู้จักกับหน่วยกำหนดขนาดฟอนต์พิเศษ

  08:51 นาที

• CSS Shadow - วิธีการกำหนดเงาให้กับ Element

  06:01 นาที

• Workshop 10 - สร้างเนื้อหาแบบ Card

  09:48 นาที

• CSS Display - การแสดงผลของเนื้อหาต่างๆ

  15:25 นาที

• Workshop 11 - การทำรอยต่อของ Card อื่นๆร่วมกัน

  02:47 นาที

• CSS Position - การกำหนดตำแหน่ง Element

  18:51 นาที

• เทคนิคเพิ่มเติมการใช้ CSS Position

  14:44 นาที

• Workshop 12 - เว็บไซต์ขาย Smartphone

  16:16 นาที

• CSS Float - การทำวัตถุลอยตัวในเนื้อหา

  03:54 นาที

• CSS Flexbox - การจัดเนื้อหาเสมือนตารางแบบ 2D

  29:51 นาที

• Workshop 13 - แก้ไขวิธีการแสดงผลหน้าเว็บขาย Smartphone

  01:41 นาที

• CSS Transform - การดัดแปลงเนื้อหา Element

  04:17 นาที

• CSS Transition - แสดงผลการเคลื่อนไหวของเนื้อหาตามที่ถูกเปลี่ยนแปลง

  09:54 นาที

• CSS Animation - การสร้างแอนิเมชั่นบนหน้าเว็บ

  07:07 นาที

• CSS Filter - การเพิ่ม Filter ให้กับเนื้อหา Element

  05:19 นาที

• CSS Variable - การกำหนดตัวแปรให้กับ CSS

  06:23 นาที

• Workshop 14 - หน้าเว็บพร้อมแอนิเมชั่นของพื้นหลัง

  14:08 นาที

บทเสริมเพิ่มเติม สำหรับการศึกษาต่อด้วยตนเอง

• Responsive Web Design - การทำหน้าเว็บตอบสนองกับทุกๆอุปกรณ์

  35:11 นาที

• Search Engine Optimization (SEO) - การทำให้หน้าเว็บติด Google ที่ดีกว่าเดิม

  16:25 นาที

• PageSpeed Insight (Lighthouse) - การตรวจสอบคุณภาพของเว็บที่เรามีอยู่

  06:48 นาที

• UX/UI - พื้นฐานสำหรับการสร้างเว็บให้สวยงาม และมอบประสบการณ์แก่ผู้ใช้งานที่ดี

  33:21 นาที

• Workshop 15 - บทส่งท้ายสำหรับการฝึกลอกหน้าเว็บของผู้อื่น

  48:18 นาที

• ทำความรู้จักกับ Server-side Rendering (SSR) & Single Page Application (SPA) เพื่อเป็นแนวทางการเรียนรู้ต่อ

  19:00 นาที

• Static Website Hosting - การใช้ Hosting Free กับ GitHub

  08:09 นาที

• บทส่งท้ายการเรียนรู้

  03:25 นาที