[ไลฟ์สดสอนทำเว็บครั้งที่ 3] พื้นฐาน HTML และ CSS

วันอาทิตย์ที่ 8 กันยายน เวลา 16:00 – 1700 น. ทีมงาน SeedThemes ได้สอนทำเว็บโดยไลฟ์สดผ่านเฟซบุ๊ก เพจ SeedThemes นะครับ

ประเด็นของเนื้อหาที่จะพูดครั้งนี้

1. เครื่องมือและไฟล์ที่ใช้สอน

สำหรับการสอน เราจะแนะนำให้ลงโปรแกรมตามนี้ แต่หากใครเริ่มคล่องแล้ว จะใช้ตัวอื่นๆ ก็ไม่มีปัญหานะครับ

Text Editor

แนะนำให้ใช้ VSCode นะครับ เพราะฟรี และมีตัวเสริมหลายอย่างที่ทำให้ทำงานสะดวกขึ้น สามารถดูแบบละเอียดที่ ไลฟ์ครั้งแรก ได้ครับ

แนะนำให้ลงตัวเสริม (Extension) ดังนี้ครับ

  1. Easy Compile ช่วยแปลงไฟล์ SCSS ให้เป็น CSS ทำให้เราเขียน SCSS ได้ง่ายขึ้น
  2. Prettier – Code formatter ช่วยจัดระเบียบโค้ด HTML, CSS และ JS ให้ แค่กด Save โค้ดก็สวยเลย
  3. Live Server ใช้แสดงผล HTML ที่เขียนขึ้น และ refresh อัตโนมัติ

Browser

แนะนำให้ใช้ Chrome เพราะเราจะใช้เครื่องมือที่เรียกว่า Developer Tools กันนะครับ

Project Files

ให้โหลดไฟล์เริ่มต้นจาก Github.com/SeedThemes/basic-html ซึ่งใช้ประกอบการสอนครั้งนี้นะครับ มีโครงสร้างโฟลเดอร์ดังนี้

  1. start – สำหรับเป็นโครงเริ่มต้นเพื่อเรียนรู้ เราจะค่อยๆ ลองเพิ่มโค้ดและดูผลลัพธ์
  2. workshop – เป็นไฟล์เริ่มต้นที่มี html/css/js ไว้บ้างแล้ว ให้เริ่มปรับตามดีไซน์ที่กำหนดไว้ได้เลย
  3. result – เป็นเฉลยของ Workshop ในข้อ 2. นะครับ

ไฟล์โค้ด HTML/CSS/JS เป็น Open Source และ แจกฟรีด้วยสัญญาอนุญาตแบบ MIT License สามารถนำไปดัดแปลงใช้งานเชิงพาณิชย์ได้เลยนะครับ แต่ไฟล์รูป เราซื้อจาก ShutterStock ดังนั้นจะไม่มีสิทธิแจกครับ หากนำไปใช้งานต้องเปลี่ยนเป็นรูปอื่นนะครับ

2. พื้นฐาน HTML

  1. โครงสร้างหน้าเว็บ HTML
  2. ไวยากรณ์ – การเปิดปิดคำสั่งต่างๆ
  3. Tag และ Attribute
  4. Tag พื้นฐาน – h1, h2, h3, p, img, a, span, strong, b, em, i, ul, ol, li, table, form, input (แนะนำ ตัวสร้างข้อความโดย Designil)
  5. ID และ Class
  6. อักขระพิเศษ HTML character entity references
  7. ทดลองตัดเว็บจากดีไซน์ ใส่เฉพาะ HTML

3. พื้นฐาน CSS

  1. วิธีเรียกใช้คำสั่ง CSS 3 แบบ
    1. Inline
    2. Internal
    3. External
  2. การปรับค่า CSS ให้เท่ากันทุก Browser • CSS Reset / Reboot
  3. รู้จัก Padding และ Margin
  4. หน่วยที่ควรรู้จัก • px, %, em, vw, vh
  5. การตรวจสอบ Browser ที่รองรับแต่ละ Tag – Can I use
  6. ค่าสีแบบ RGB, RGBA ลองดู Coolors หรือเลือกสีจาก VSCode
  7. การไล่เฉดสี Gradient ลองดู uiGradients, ใช้เครื่องมือ CSS Gradient
  8. การระบุชิ้นส่วน (Selector) ซึ่งคือ ID และ Class
  9. การเพิ่มความเจาะจง (CSS Specificity) ใครเจาะจงกว่า ก็ชนะไป
  10. รู้จัก !important (แต่ไม่ควรใช้)
  11. คลาสเทียม (Pseudo-class) เช่น :hover, :first-child, :nth-of-type
  12. ชิ้นส่วนเทียม (Pseudo-element) เช่น ::before, ::after, ::first-letter (โดยหลักการจะใช้ :: นำหน้า แต่ในทางปฏิบัติ Browser ก็อ่าน : ได้เช่นกัน)
  13. การแสดงผลบนหน้าจอขนาดต่างๆ – Media Query

4. แนะนำ SCSS สั้นๆ

ปรับโค้ดที่เขียนแบบ CSS มาเป็นแบบ SCSS เช่น ทดลองสร้างการนำเสนอบทความ แบบ Card และแบบ List

5. การตั้งชื่อให้เข้าใจง่าย

แนวทางที่นิยม จะมี 2 แบบที่นิยมคือ

  1. BEM ใส่ชื่อคลาสต่อกันไปยาวๆ คลาสเดียว ความหมายดี ประสิทธิภาพเยี่ยม แต่โค้ดไม่สวย
  2. 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

Sample Design – Desktop
Sample Design – Mobile

หมายเหตุ: คำถามผ่านเฟซบุคอาจมีการตกหล่น แนะนำให้ติดต่อผ่าน อินบ๊อกซ์ หรือ เว็บบอร์ด นะครับ

Copyright © 2016-2019. All rights reserved.