สวัสดีครับเพื่อน ๆ ชาว Designil ทุกท่าน วันนี้ทีมงานของเราได้นำภาพ CSS Cheatsheets มาฝากกันเพียบเลย ไม่ว่าจะเป็นวิธีการเขียนกริด การเขียน HTML การจัดการฟอร์ม สี และอื่น ๆอีกเพียบ เรียกได้ว่าเป็นคู่มือที่ดีเยี่ยมสำหรับผู้เริ่มต้นใหม่ที่เพิ่งเริ่มต้นการหัดเขียน HTML, CSS กันเลยนะครับ
เรามาดูกันเลยครับว่าจะมีหัวข้ออะไรกันบ้าง
รวม 5 CSS Cheatsheets คุณภาพเยี่ยม คู่มือประจำบ้าน
1. วิธีเขียน HTML สำหรับ Input
สำหรับมือใหม่ที่เพิ่งหัดเขียน Input อาจจะยังมองไม่เห็นภาพเลยนะครับว่า HTML จะมีแท็กอะไรให้เราใช้งานได้บ้าง ต้องบอกเลยว่าภาพด้านล่างนี้มีมาให้ครบ แถมมีภาพประกอบสวย ๆ อีก เซฟเก็บติดเครื่องกันได้เลย
2. รวม CSS Units
การเขียน CSS Units เป็นส่วนที่สำคัญท้ังสำหรับ Designer & Developer แต่เราจะเลือกหน่วยอะไรที่จะทำให้งานของเรานั้นออกมาครบถ้วนสมบูรณ์ และตอบโจทย์รองรับกับทุกหน้าจอ
ในภาพด้านล่างนี้จะสอนวิธีการเลือกหน่วยในการเขียนแบบละเอียดสำหรับเพื่อน ๆ มือใหม่ทุกท่าน เรามาดูกันเลยครับว่าจะมีตัวอย่างอะไรบ้าง
- Px
- Rem
- Em
- %
- VW
- VH
- Vmin
- Vmax
- Ch
- in
- pc
- pt
- cm
- mm
3. วิธีเขียน CSS Selector
การเลือก Selector เป็นอะไรที่สำคัญมาก ๆ เรียกว่าเป็น Fundamental พื้นฐานของการเขียน CSS กันเลย ดังนั้นการเลือกวิธีการเขียนที่ถูกต้อง จะช่วยให้เราประหยัดบรรทัดของโค้ด และช่วยให้เราประหยัดเวลาได้อย่างดีเยี่ยมเลยครับ ลดปัญหาเรื่องของการขยายระบบของเราในอนาคตได้ด้วย
ในภาพด้านล่างนี้จะมีหัวข้อ เช่น
- Universal Selector
- Type Selector
- Class Selector
- ID Selector
- Attribute Selector
- Grouping Selector
- Compound Selector
4. วิธีเขียน CSS Flexbox
การเขียน Flexbox เป็นส่วนของการเขียน CSS ในเรื่องของ Box-model ช่วยในการจัดการกล่องและส่วนประกอบบนหน้าจอ การเลือกตัวแสดงผลให้ถูกต้องนั้นเป็นสิ่งที่สำคัญมากในการเขียน ดังนั้นถ้าเราเข้าใจพื้นฐานแล้ว การจัดการกล่องบนหน้าจอก็จะทำได้อย่างราบรื่นมากยิ่งขึ้นเลยครับ ที่สำคัญอย่าลืมเรียนรู้เรื่องของ Grid ในข้อที่ 5 เพื่อมาเสริมพลังของการจัดการกล่องบนหน้าจอของเราให้ดีขึ้นด้วยนะครับ
5. วิธีเขียน CSS Grid
ในการเขียน Grid สมัยใหม่จะมีเรื่องของ CSS Grid มาเกี่ยวข้อง ต้องบอกเลยว่าใครที่เพิ่งเริ่มต้นเรียนรู้ ภาพนี้ตอบโจทย์ครบทุกหัวข้อเลยครับ เพราะท่านจะได้เรียนเรื่องการจัดกล่องบนหน้าจอด้วยวิธีการดังต่อไปนี้
- Display
- Grid-Template
- Grid-Gap
- Justify-Content
- Align-Content
- Grid-auto-flow
- justify-items
- align-items
กริดสำหรับจัดการตัว children หรือตัวลูกที่อยู่ด้านใน
- grid-row
- grid-column
- justify-self
- align-self
บทความที่เกี่ยวข้อง
มาทำความรู้จักกับ ARIA และการออกแบบปุ่ม disabled button ให้เข้าถึงได้ ออกแบบให้เกิดความ inclusive ใช้งานได้กับคนทุกแบบเลยครับ
HTML คือ? สอนเขียน HTML สำหรับมือใหม่แบบละเอียด ↗
มาอ่านบทความสอน HTML กันตั้งแต่พื้นฐานสำหรับมือใหม่กันครับ ละเอียดมากๆ พร้อมแนะนำคอร์สเรียนสำหรับฝึกฝนฝีมือเพียบ
แนะนำ 8 คอร์สออนไลน์เรียนเขียนแอพ Mobile development ครบทุกแบบ ↗
แนะนำ 8 คอร์สออนไลน์ภาษาอังกฤษ มาหัดเขียนแอพ Mobile development ทั้ง Native และ Cross-platform กันครับ
