แจก 5 CSS Cheatsheets คู่มือติดบ้านสำหรับสายทำเว็บ

Peridot

สวัสดีครับเพื่อน ๆ ชาว Designil ทุกท่าน วันนี้ทีมงานของเราได้นำภาพ CSS Cheatsheets มาฝากกันเพียบเลย ไม่ว่าจะเป็นวิธีการเขียนกริด การเขียน HTML การจัดการฟอร์ม สี และอื่น ๆอีกเพียบ เรียกได้ว่าเป็นคู่มือที่ดีเยี่ยมสำหรับผู้เริ่มต้นใหม่ที่เพิ่งเริ่มต้นการหัดเขียน HTML, CSS กันเลยนะครับ

เรามาดูกันเลยครับว่าจะมีหัวข้ออะไรกันบ้าง

รวม 5 CSS Cheatsheets คุณภาพเยี่ยม คู่มือประจำบ้าน

1. วิธีเขียน HTML สำหรับ Input

สำหรับมือใหม่ที่เพิ่งหัดเขียน Input อาจจะยังมองไม่เห็นภาพเลยนะครับว่า HTML จะมีแท็กอะไรให้เราใช้งานได้บ้าง ต้องบอกเลยว่าภาพด้านล่างนี้มีมาให้ครบ แถมมีภาพประกอบสวย ๆ อีก เซฟเก็บติดเครื่องกันได้เลย

วิธีเขียน HTML Input css cheatsheets
วิธีเขียน HTML Input

2. รวม CSS Units

การเขียน CSS Units เป็นส่วนที่สำคัญท้ังสำหรับ Designer & Developer แต่เราจะเลือกหน่วยอะไรที่จะทำให้งานของเรานั้นออกมาครบถ้วนสมบูรณ์ และตอบโจทย์รองรับกับทุกหน้าจอ

ในภาพด้านล่างนี้จะสอนวิธีการเลือกหน่วยในการเขียนแบบละเอียดสำหรับเพื่อน ๆ มือใหม่ทุกท่าน เรามาดูกันเลยครับว่าจะมีตัวอย่างอะไรบ้าง

  • Px
  • Rem
  • Em
  • %
  • VW
  • VH
  • Vmin
  • Vmax
  • Ch
  • in
  • pc
  • pt
  • cm
  • mm
Css Units Cheatsheet
Css Units Cheatsheet

3. วิธีเขียน CSS Selector

การเลือก Selector เป็นอะไรที่สำคัญมาก ๆ เรียกว่าเป็น Fundamental พื้นฐานของการเขียน CSS กันเลย ดังนั้นการเลือกวิธีการเขียนที่ถูกต้อง จะช่วยให้เราประหยัดบรรทัดของโค้ด และช่วยให้เราประหยัดเวลาได้อย่างดีเยี่ยมเลยครับ ลดปัญหาเรื่องของการขยายระบบของเราในอนาคตได้ด้วย

ในภาพด้านล่างนี้จะมีหัวข้อ เช่น

  • Universal Selector
  • Type Selector
  • Class Selector
  • ID Selector
  • Attribute Selector
  • Grouping Selector
  • Compound Selector
Css Selectors Cheatsheet
Css Selectors Cheatsheet

4. วิธีเขียน CSS Flexbox

การเขียน Flexbox เป็นส่วนของการเขียน CSS ในเรื่องของ Box-model ช่วยในการจัดการกล่องและส่วนประกอบบนหน้าจอ การเลือกตัวแสดงผลให้ถูกต้องนั้นเป็นสิ่งที่สำคัญมากในการเขียน ดังนั้นถ้าเราเข้าใจพื้นฐานแล้ว การจัดการกล่องบนหน้าจอก็จะทำได้อย่างราบรื่นมากยิ่งขึ้นเลยครับ ที่สำคัญอย่าลืมเรียนรู้เรื่องของ Grid ในข้อที่ 5 เพื่อมาเสริมพลังของการจัดการกล่องบนหน้าจอของเราให้ดีขึ้นด้วยนะครับ

Css Flexbox Cheatsheets bg
Css Flexbox Cheatsheet bg

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
CSS Grid Cheatsheets Light
CSS Grid Cheatsheet Light

บทความที่เกี่ยวข้อง

วิธีออกแบบ Inclusive disabled button ออกแบบให้เข้าถึงได้ ↗

มาทำความรู้จักกับ ARIA และการออกแบบปุ่ม disabled button ให้เข้าถึงได้ ออกแบบให้เกิดความ inclusive ใช้งานได้กับคนทุกแบบเลยครับ

HTML คือ? สอนเขียน HTML สำหรับมือใหม่แบบละเอียด

มาอ่านบทความสอน HTML กันตั้งแต่พื้นฐานสำหรับมือใหม่กันครับ ละเอียดมากๆ พร้อมแนะนำคอร์สเรียนสำหรับฝึกฝนฝีมือเพียบ

แนะนำ 8 คอร์สออนไลน์เรียนเขียนแอพ Mobile development ครบทุกแบบ ↗

แนะนำ 8 คอร์สออนไลน์ภาษาอังกฤษ มาหัดเขียนแอพ Mobile development ทั้ง Native และ Cross-platform กันครับ

Peridot

Peridot

รวมบทความรีวิวและความคิดเห็นของทีมงาน Designil แบ่งปันเนื้อหาที่เข้าใจง่ายเป็นประจำทุกสัปดาห์
บทความทั้งหมด

Leave a Reply

Your email address will not be published.

Related posts