Figma to HTML&CSS workshop

Module 1: บทนำ

• เข้าใจโครงสร้างการพัฒนาเว็บไซต์
• รู้จักโปรแกรม Figma

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

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

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: Bootstrap Scaffolding

• การติดตั้ง Bootstrap
• โครงสร้างไฟล์ Bootstrap
• Basic HTML Template
• Grid System
• Fluid Grid System

Module 6: การจัดรูปแบบต่างๆ ด้วย Bootstrap CSS

• Typography
• Code
• Tables
• Forms
• Buttons
• Images
• Icons

Module 7: Bootstrap Layout Components

• Dropdown Menus
• Navbar
• Breadcrumbs
• Pagination
• Labels
• Badges
• Typographic Elements
• Thumbnails
• Alerts
• Media Object

Module 8: Bootstrap JavaScript Plugins

• Transitions
• Modal
• Dropdown
• Alerts
• Buttons
• Collapse
• Carousel

Module 9: Figma to HTML&CSS Workshop

• Starter file
• การนำเข้ารูปภาพ
• การทำ Header
• การใส่ตัวอักษร
• การสร้างปุ่ม
• การกำหนดความกว้างของเว็บไซต์
• การกำหนดขนาดและสัดส่วน
• การกำหนดระยะห่าง
• การกำหนดตำแหน่ง
• การกำหนดเมนู
• การทำ Icon
• การกำหนดสี

Module 10: Deployment

• การนำเว็บไซต์ขึ้นใช้บน Server