คอร์สเรียน 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 นาที
รีวิวจากผู้เรียน (ทั้งหมด 35 รีวิว คะแนนเฉลี่ย 4.9)
BoBo C.
good
⭐⭐⭐⭐⭐
สรวิศ ก.
คุ้มค่ากับความรู้ที่ได้มากครับ ที่สำคัญมี ชีทสรุปให้ด้วย ไว้ทวนความจำ ได้เป็นอย่างดี ครับ
⭐⭐⭐⭐⭐
NIWAT T.
เนื้อหาครบ อธิบายดี เหมาะสำหรับ ผู้เริ่มต้น ครับ แนะนำครับ
⭐⭐⭐⭐⭐
Pawit M.
เนื้อหาครอบคลุมแทบหมด ลองไปกด F12 เว็บอื่นดูสามารถอ่านโค้ดเข้าใจ 90%
⭐⭐⭐⭐⭐
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.
⭐⭐⭐⭐⭐
จิรายุส แ.
⭐⭐⭐⭐⭐