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

คำอธิบายคอร์สเรียน

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

สิ่งที่คุณจะได้เรียนรู้

  • มีชีทเป็นกระดาษสูตรโกง ช่วยสรุปหลังผู้เรียน เรียนจบไปแล้วแต่อาจจะลืมรูปแบบคำสั่งต่างๆได้
  • มีแบบทดสอบ สำหรับการรับใบประกาศนียบัตรที่ออกให้โดยทาง SkillLane
  • ได้เห็นวิธีการปฎิบัติจริง ที่ทำให้รู้จักคีย์ลัดต่างๆ และเทคนิคเสริมมากมายที่จะทำให้เราทำงานได้เร็วและง่ายขึ้น
  • มีการเปิดวิธีการอ่านเอกสารผ่านออนไลน์ให้ดูโดยเฉพาะที่เว็บไซต์ MDN เพื่อหัดอ่านเอกสารต่อด้วยตนเองได้
  • มี Workshop ให้ฝึกทำเป็นระยะ พร้อมเฉลยต่างๆ
  • สอนการวาง Layout โดยพื้นฐานทั้งหมดอย่างครอบคลุม รวมทั้งการทำ Responsive Web Design
  • แนะนำการทำเว็บไซต์ให้มีประสิทธิภาพ ด้วยการใช้เครื่องมือ PageSpeed (Lighthouse)
  • แนะนำการทำ SEO โดยพื้นฐาน และแนะนำข้อแตกต่างของ SPA, SSR ที่จะส่งผลต่อ SEO ต่างๆ
  • แนะนำเรื่อง UX/UI โดยพื้นฐาน สำหรับการต่อยอดเพื่อการเรียนรู้ด้วยตนเองต่างๆ
  • แนะนำการใช้ GitHub Pages เพื่อทำ Webpage อย่างง่ายและฟรีในการใช้งานจริง

ประโยชน์ที่คุณจะได้รับ

  • การเรียนภาษา HTML5 และ CSS3 จะทำให้เราสามารถสร้าง Webpage อย่างง่ายด้วยตนเองได้
  • เป็นความรู้ระดับเริ่มต้นที่ต้องมีกันทุกคน สำหรับสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ ก่อนที่จะสามารถสร้าง Web Application เต็มรูปแบบในอนาคตได้ ที่จะต้องเรียนรู้เครื่องมืออื่นๆอีก
  • คนที่เป็น Back-end Web Development จะสามารถเริ่มต้นเข้าสู่สายงาน Full-stack Web Development ได้โดยการเรียนรู้สิ่งนี้เป็นสิ่งแรก
  • คุณรู้หรือไม่ว่า: เทคโนโลยีการพัฒนาเว็บในปัจจุบัน ยังสามารถทำเป็น Desktop Application หรือ Mobile Application ได้อีกด้วย โดยการใช้ Framework ต่างๆที่มีหรือใช้ PWA ช่วยเหลือ ซึ่งผมจะมีการแนะนำไว้ในคอร์สเรียนต่อๆไป
  • คุณรู้หรือไม่ว่า: ภาษา HTML, CSS ถูกจัดว่าเป็นภาษายอดนิยมอันดับสองประจำปี 2022 โดยอ้างอิงจาก survey.stackoverflow.co
  • ปัจจุบัน Application ส่วนใหญ่จะอยู่ในรูปแบบ Website โดยส่วนใหญ่ เพราะไม่จำเป็นต้องติดตั้งลงเครื่อง สามารถทำงานได้หลายอย่างมาก เราก็สามารถเข้าถึงผ่าน Web Browser ทำให้ลูกค้าใหม่ไม่จำเป็นต้องเปลืองพื้นที่การติดตั้งลงในเครื่องของตัวเอง
  • ถึงแม้ Web Application จะยังมีข้อจำกัดอยู่บ้าง แต่ส่วนใหญ่จะครอบคลุมกับงานโดยทั่วไปอย่างครบถ้วน และสมัยนี้ Web Browser สามารถขออนุญาตการเข้าถึงอุปกรณ์ต่างๆได้อีกด้วย เช่น การสื่อสารกับกล้อง การสื่อสารกับสถานที่อยู่ปัจจุบัน การติดต่อกับโปรแกรมในเครื่องที่มีอยู่แล้ว เป็นต้น

ทักษะที่ผู้เรียนจะต้องมีก่อนเรียนคอร์สเรียนนี้

  • มีความรู้ทั่วไปในระดับประถมต้น
  • เข้าใจวิธีการใช้งานอุปกรณ์ต่างๆทางคอมพิวเตอร์โดยพื้นฐาน
  • สามารถใช้งานอินเทอร์เน็ตโดยทั่วไปได้

เหมาะสำหรับ

  • นักเรียนระดับประถม
  • นักเรียนระดับมัธยม
  • นักศึกษาที่กำลังศึกษาในสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ
  • ผู้ที่สนใจในสายงาน Web Development
  • ผู้ที่สนใจในสายงาน Front-end Web Development
  • ผู้ที่สนใจในสายงาน Full-stack Web Development

เนื้อหาที่มีทั้งหมด

บทนำ

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

    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 นาที

รีวิวจากผู้เรียน (ทั้งหมด 63 รีวิว คะแนนเฉลี่ย 5.0)

BoBo C.

good

⭐⭐⭐⭐⭐

พรประภา บุ.

คุณนครสอนง่ายและละเอียดมากพอ สำหรับคนที่เริ่มจาก 0 แนะนำเรียนกับคุณนครค่ะ ไม่ทิ้งคนที่เรียนด้วยเลย ติดตรงไหน มีคำถาม สงสัยตรงไหนมีการแนะนำให้ตลอด ไม่กั๊กความรู้เลยค่ะไม่มีพื้นฐานก็ยังเข้าใจได้ง่าย ให้ 5ดาว เลยนะคะ

⭐⭐⭐⭐⭐

สรวิศ ก.

คุ้มค่ากับความรู้ที่ได้มากครับ ที่สำคัญมี ชีทสรุปให้ด้วย ไว้ทวนความจำ ได้เป็นอย่างดี ครับ

⭐⭐⭐⭐⭐

ภูดิตถ์ สุ.

สอนดีครับๆ

⭐⭐⭐⭐⭐

Panudech U.

สอนดีมากๆๆ ครับ เข้าใจง่าย

⭐⭐⭐⭐⭐

Kunasin J.

สอนเข้าใจง่าย ละเอียด เรียนเพื่อนำไปเขียนเว็บไซร์ ดูเหมือนยาก แต่ไม่ได้ยากมาก นั่งเรียนมา3วันแล้วครับ ยังไม่จบHTML เลย 55555

⭐⭐⭐⭐⭐

Chula S.

สอนเข้าใจง่ายดีครับ

⭐⭐⭐⭐⭐

Chawalit S.

อธิบายได้ละเอียดดี

⭐⭐⭐⭐⭐

อาทิตย์ ว.

เข้าใจขึ้นเยอะเลยครับ

⭐⭐⭐⭐⭐

NIWAT T.

เนื้อหาครบ อธิบายดี เหมาะสำหรับ ผู้เริ่มต้น ครับ แนะนำครับ

⭐⭐⭐⭐⭐

Pawit M.

เนื้อหาครอบคลุมแทบหมด ลองไปกด F12 เว็บอื่นดูสามารถอ่านโค้ดเข้าใจ 90%

⭐⭐⭐⭐⭐

Thanate D.

⭐⭐⭐⭐⭐

Theeraphat C.

⭐⭐⭐⭐⭐

ธวัชชัย สุ.

⭐⭐⭐⭐⭐

Rattanachat S.

⭐⭐⭐⭐⭐

supawit w.

⭐⭐⭐⭐⭐

Ritthikrai K.

⭐⭐⭐⭐⭐

กนกกฤษฏิ์ กั.

⭐⭐⭐⭐⭐

Saranyu R.

⭐⭐⭐⭐⭐

Najatupat J.

⭐⭐⭐⭐⭐

นงลักษณ์ คุ.

⭐⭐⭐⭐⭐

Wutthinun B.

⭐⭐⭐⭐⭐

วิทยา ฯ.

⭐⭐⭐⭐⭐

ดนุ ค.

⭐⭐⭐⭐⭐

พรพิทักษ์ ศ.

⭐⭐⭐⭐⭐

Sonsit P.

⭐⭐⭐⭐⭐

thanaphon s.

⭐⭐⭐⭐⭐

SANGAD K.

⭐⭐⭐⭐⭐

พันธกานต์ พ.

⭐⭐⭐⭐⭐

บุษกร ก.

⭐⭐⭐⭐⭐

Chayakorn A.

⭐⭐⭐⭐⭐

Foo F.

⭐⭐⭐⭐⭐

Ratchanon T.

⭐⭐⭐⭐⭐

Thanakit C.

⭐⭐⭐⭐

Nookky N.

⭐⭐⭐⭐⭐

สุชาติ ส.

⭐⭐⭐⭐⭐

Thanatchayakorn K.

⭐⭐⭐⭐⭐

Hi H.

⭐⭐⭐⭐⭐

Supansa P.

⭐⭐⭐⭐⭐

Pranisa S.

⭐⭐⭐⭐⭐

Anuwat P.

⭐⭐⭐⭐

Somsupa P.

⭐⭐⭐⭐⭐

TuDz S.

⭐⭐⭐⭐⭐

Thayakorn M.

⭐⭐⭐⭐⭐

Wee B.

⭐⭐⭐⭐⭐

Kanathip S.

⭐⭐⭐⭐⭐

ธีรภัทร น.

⭐⭐⭐⭐⭐

visut c.

⭐⭐⭐⭐⭐

McFc P.

⭐⭐⭐⭐⭐

นุ่มฟู c.

⭐⭐⭐⭐⭐

Panuwat K.

⭐⭐⭐⭐⭐

Panya P.

⭐⭐⭐⭐⭐

นายดลรอฮีม พ.

⭐⭐⭐⭐⭐

Adul T.

⭐⭐⭐⭐⭐

นาย เ.

⭐⭐⭐⭐⭐

So U.

⭐⭐⭐⭐⭐

Nakhunkhun A.

⭐⭐⭐⭐⭐

เด่นภูมิ น.

⭐⭐⭐⭐⭐

ธนเสฏฐ์ น.

⭐⭐⭐⭐⭐

Pongsapak N.

⭐⭐⭐⭐⭐

Latte A.

⭐⭐⭐⭐⭐

kittipon b.

⭐⭐⭐⭐⭐

จิรายุส แ.

⭐⭐⭐⭐⭐
คลิกเพื่อดูคอร์สเรียนอื่นๆทั้งหมด