วันอาทิตย์ที่ 8 กันยายน เวลา 16:00 – 1700 น. ทีมงาน SeedThemes ได้สอนทำเว็บโดยไลฟ์สดผ่านเฟซบุ๊ก เพจ SeedThemes นะครับ
ประเด็นของเนื้อหาที่จะพูดครั้งนี้
1. เครื่องมือและไฟล์ที่ใช้สอน
สำหรับการสอน เราจะแนะนำให้ลงโปรแกรมตามนี้ แต่หากใครเริ่มคล่องแล้ว จะใช้ตัวอื่นๆ ก็ไม่มีปัญหานะครับ
Text Editor
แนะนำให้ใช้ VSCode นะครับ เพราะฟรี และมีตัวเสริมหลายอย่างที่ทำให้ทำงานสะดวกขึ้น สามารถดูแบบละเอียดที่ ไลฟ์ครั้งแรก ได้ครับ
แนะนำให้ลงตัวเสริม (Extension) ดังนี้ครับ
- Easy Compile ช่วยแปลงไฟล์ SCSS ให้เป็น CSS ทำให้เราเขียน SCSS ได้ง่ายขึ้น
- Prettier – Code formatter ช่วยจัดระเบียบโค้ด HTML, CSS และ JS ให้ แค่กด Save โค้ดก็สวยเลย
- Live Server ใช้แสดงผล HTML ที่เขียนขึ้น และ refresh อัตโนมัติ
Browser
แนะนำให้ใช้ Chrome เพราะเราจะใช้เครื่องมือที่เรียกว่า Developer Tools กันนะครับ
Project Files
ให้โหลดไฟล์เริ่มต้นจาก Github.com/SeedThemes/basic-html ซึ่งใช้ประกอบการสอนครั้งนี้นะครับ มีโครงสร้างโฟลเดอร์ดังนี้
- start – สำหรับเป็นโครงเริ่มต้นเพื่อเรียนรู้ เราจะค่อยๆ ลองเพิ่มโค้ดและดูผลลัพธ์
- workshop – เป็นไฟล์เริ่มต้นที่มี html/css/js ไว้บ้างแล้ว ให้เริ่มปรับตามดีไซน์ที่กำหนดไว้ได้เลย
- result – เป็นเฉลยของ Workshop ในข้อ 2. นะครับ
ไฟล์โค้ด HTML/CSS/JS เป็น Open Source และ แจกฟรีด้วยสัญญาอนุญาตแบบ MIT License สามารถนำไปดัดแปลงใช้งานเชิงพาณิชย์ได้เลยนะครับ แต่ไฟล์รูป เราซื้อจาก ShutterStock ดังนั้นจะไม่มีสิทธิแจกครับ หากนำไปใช้งานต้องเปลี่ยนเป็นรูปอื่นนะครับ
2. พื้นฐาน HTML
- โครงสร้างหน้าเว็บ HTML
- ไวยากรณ์ – การเปิดปิดคำสั่งต่างๆ
- Tag และ Attribute
- Tag พื้นฐาน – h1, h2, h3, p, img, a, span, strong, b, em, i, ul, ol, li, table, form, input (แนะนำ ตัวสร้างข้อความโดย Designil)
- ID และ Class
- อักขระพิเศษ HTML character entity references
- ทดลองตัดเว็บจากดีไซน์ ใส่เฉพาะ HTML
3. พื้นฐาน CSS
- วิธีเรียกใช้คำสั่ง CSS 3 แบบ
- Inline
- Internal
- External
- การปรับค่า CSS ให้เท่ากันทุก Browser • CSS Reset / Reboot
- รู้จัก Padding และ Margin
- หน่วยที่ควรรู้จัก • px, %, em, vw, vh
- การตรวจสอบ Browser ที่รองรับแต่ละ Tag – Can I use
- ค่าสีแบบ RGB, RGBA ลองดู Coolors หรือเลือกสีจาก VSCode
- การไล่เฉดสี Gradient ลองดู uiGradients, ใช้เครื่องมือ CSS Gradient
- การระบุชิ้นส่วน (Selector) ซึ่งคือ ID และ Class
- การเพิ่มความเจาะจง (CSS Specificity) ใครเจาะจงกว่า ก็ชนะไป
- รู้จัก !important (แต่ไม่ควรใช้)
- คลาสเทียม (Pseudo-class) เช่น :hover, :first-child, :nth-of-type
- ชิ้นส่วนเทียม (Pseudo-element) เช่น ::before, ::after, ::first-letter (โดยหลักการจะใช้ :: นำหน้า แต่ในทางปฏิบัติ Browser ก็อ่าน : ได้เช่นกัน)
- การแสดงผลบนหน้าจอขนาดต่างๆ – Media Query
4. แนะนำ SCSS สั้นๆ
ปรับโค้ดที่เขียนแบบ CSS มาเป็นแบบ SCSS เช่น ทดลองสร้างการนำเสนอบทความ แบบ Card และแบบ List
5. การตั้งชื่อให้เข้าใจง่าย
แนวทางที่นิยม จะมี 2 แบบที่นิยมคือ
- BEM ใส่ชื่อคลาสต่อกันไปยาวๆ คลาสเดียว ความหมายดี ประสิทธิภาพเยี่ยม แต่โค้ดไม่สวย
- RSCSS (ลิงก์ภาษาไทย) ใส่คลาสหลัก กับคลาสรองมาประกอบกัน โค้ดสวย เข้าใจง่าย ขอแนะนำแนวทางนี้
คลาสหลัก – Component
ใส่อย่างน้อย 2 คำ คั่นด้วยเครื่องหมายลบ เช่น .content-item, .entry-title, .sec-title
คลาสย่อย – Element
คลาสที่อยู่ในคลาสหลัก เช่น .pic, .info เราจะไม่ประกาศตรงๆ เพราะเดี๋ยวซ้ำซ้อน จำไม่ได้ว่าประกาศไว้ที่ไหน ให้ประกาศผ่านคลาสหลัก เช่น .content-item .info
ข้อดีของการใช้คลาสย่อยในคลาสหลักเท่านั้น คือเราจะได้ไม่ต้องตั้งชื่อใหม่ๆ เยอะๆ ใช้ชื่อเดิมซ้ำได้เลย เพราะรู้ว่าจะไม่กระทบกันอยู่แล้ว
เช่น .content-item .info จะไม่กระทบกับ .account-login .info
คลาสเสริม – Variant
ขึ้นต้นด้วยเครื่องหมายลบ เช่น -card, -list เพื่อเอาไว้ขยายคลาสหลัก เหมือนใส่พารามิเตอร์เพิ่มในคำสั่ง
คลาสฉุกเฉิน – Helper
เอาไว้ใส่เพิ่ม โดยไม่สนใจคลาสอื่น มีจุดประสงค์ของตัวเอง ให้ขึ้นต้นด้วยขีดล่าง เช่น _mobile, _desktop
6. การจัดวางด้วย Absolute และ Relative
ลองใส่ปุ่ม Play หรือ Badge ในบทความ
7. แนะนำ Transition และ Transform
ลองเพิ่ม Effect ให้ content-item ซูมรูปภาพเมื่อ :hover
8. แนะนำ Flex และ Grid
คำแนะนำแบบสั้น – หากเนื้อหาเรามีแถวเดียว ใช้ Flex จะยืดหยุ่นกว่า แต่ถ้าแสดงหลายแถว (เช่นรูปแบบแค็ตตาล็อก) ใช้ Grid จะง่ายกว่า
9. Developer Tools
ทดลองใช้งานเครื่องมือ Developer Tools ทำการเปลี่ยนค่า CSS ของชิ้นส่วนต่างๆ (Inspect Element)
10. Workshop
ทดลองตัดเว็บจากดีไซน์ ทั้ง HTML/CSS/JS
BONUS
ถ้าหากสอนทัน จะอธิบาย Vanilla JS เพิ่มอีกนิด และทำปุ่มกดเพื่อแสดงเมนูที่ซ่อนอยู่
การบ้าน
ทดลองตัด HTML/CSS จากดีไซน์ที่กำหนดให้ สามารถดูเฉลยได้ที่ Result
