การออกแบบเว็บไซต์ตามมาตรฐาน Refactoring UI

Module 1: บทนำ

• เข้าใจโครงสร้างการพัฒนาเว็บไซต์
• แนะนำแนวทางการพัฒนาเว็บไซต์สมัยใหม่
• ความหมายของ Refactoring UI

Module 2: การเตรียมความพร้อมและติดตั้งเครื่องมือ

• ติดตั้งเครื่องมือสำหรับพัฒนาบนระบบปฏิบัติการ Windows และ Mac
• ปรับแต่งเครื่องมือให้พร้อมกับการพัฒนาเว็บแอพพลิเคชั่น

Module 3: พื้นฐานภาษา HTML

• Introduction to HTML
• Terminology and HTML
• Common HTML Text Tags
• Demonstration : HTML Text Tags
• Common HTML Media Tags
• Demonstrating : Media Tags
• HTML Attributes
• Demonstration : HTML Attributes

Module 4: พื้นฐานภาษา CSS

• CSS Basics
• Linking HTML to CSS
• Demonstration : CSS and Linking to HTML
• Different CSS Selectors
• Demonstration : CSS Selectors
• CSS Knowledge

Module 5: Layout and Spacing

• Start with Refactoring UI
• Establish a spacing
• Display aspect ratio
• Grid
• Relative scale
• Ambiguous spacing

Module 6: Designing Text

• Establish a type scale
• Fonts
• Length
• Center
• Proportional
• Color link
• Letter-spacing

Module 7: Working with Color

• HEX for HSL
• Colors
• Shades
• Lightness
• Greys scale
• Accessible

Module 8: Creating Depth

• Light source
• Shadows
• Depth designs

Module 9: Working with Images

• Photos
• Contrast
• Intended size
• Protect content

Module 10: Finish up

• Defaults
• Color with accent borders
• Backgrounds
• Empty states