Responsive Web Design

TOPIC

Responsive Web Design

HTML หรือ HyperText Markup Language เป็นภาษามาร์กอัปที่ใช้อธิบายโครงสร้างของเว็บเพจ โดยใช้ syntax หรือ สัญกรณ์พิเศษ เพื่อจัดระเบียบของเนื้อหาข้อมูลเกี่ยวกับหน้า Page ไปยัง browser องค์ประกอบมักจะมีแท็กเปิดและแท็กปิดที่ล้อมรอบ และ ให้ความหมายกับเนื้อหา ตัวอย่างเช่น มีตัวเลือกแท็กที่แตกต่างกันในการวางรอบข้อความเพื่อแสดงอันไหนเป็นย่อหน้าหรือรายการ.

Basic HTML and HTML5

Introduction to Basic HTML & HTML5

HTML (ภาษา Hypertext Markup) เป็นภาษา Markup มาตรฐานที่ใช้ในการสร้างโครงสร้างและเนื้อหาของหน้าเว็บไซต์ เป็นหัวใจสำคัญของทุกเว็บไซต์และเป็นโครงการพื้นฐานสำหรับนำเสนอข้อมูลบนอินเทอร์เน็ต HTML ช่วยให้นักพัฒนากำหนดองค์ประกอบต่างๆ ของหน้าเว็บไซต์ เช่น หัวเรื่อง เนื้อหา รูปภาพ ลิงค์ แบบฟอร์ม และอื่นๆ

Basic CSS

Introduction to Basic CSS

CSS (Cascading Style Sheets) เป็นเทคโนโลยีพื้นฐานที่ใช้ในการพัฒนาเว็บไซต์เพื่อควบคุมการนําเสนอและการจัดหน้าของเอกสาร HTML และ CSS เป็นภาษา Style Sheets ที่ช่วยให้นักพัฒนาสามารถปรับแต่งรูปแบบและการจัดรูปแบบหน้าเว็บให้มีความน่าสนใจและดึงดูดใจผู้ใช้

Applied Visual Design

Introduction to Applied Visual Design

Applied Visual Design เป็นสาขาที่รวมหลักการของการออกแบบเข้ากับการประยุกต์ใช้งาน เพื่อสร้างเนื้อหาทางการมองเห็นที่สวยงามและมีประสิทธิภาพ ซึ่งครอบคลุมหลายด้าน เช่น ตัวอักษร ทฤษฎีสี การจัดวางหน้า การใช้ภาพ และองค์ประกอบรวม เป้าหมายหลักของการออกแบบทางการมองเห็นเชิงประยุกต์ คือการสื่อสารข้อความ ความคิด หรือข้อมูลทางการมองเห็น ในรูปแบบที่ดึงดูดผู้ชม และเพิ่มความเข้าใจในเนื้อหา

Applied Accessibility

Introduction to Applied Accessibility

Applied Accessibility (การเข้าถึงเว็บ หรือ การออกแบบเพื่อความครอบคลุม) เป็นการสร้างเนื้อหาและเทคโนโลยีดิจิทัลที่สามารถใช้งานและเข้าถึงได้สําหรับบุคคลทุกคน โดยไม่คํานึงถึงความสามารถ และเป้าหมายของ applied accessibility คือการทําให้ทุกคน รวมถึงผู้พิการ สามารถรับรู้ เข้าถึง โต้ตอบ และเข้าใจเนื้อหาและสื่อดิจิทัลได้อย่างง่ายดายและมีประสิทธิภาพ

Responsive Web Design Principles

Introduction to Responsive Web Design Principles

Responsive Web Design (RWD) เป็นแนวคิดการออกแบบเว็บไซต์ที่มุ่งสร้างเว็บไซต์ที่สามารถปรับและตอบสนองต่ออุปกรณ์และขนาดหน้าจอของผู้ใช้ เพื่อให้ประสบการณ์การรับชมที่ดีที่สุดบนอุปกรณ์ต่างๆ ทั้ง desktops, laptops, tablets, และสมาร์ทโฟน หลักการสําคัญของการออกแบบเว็บไซต์แบบรับการตอบสนอง คือ การทําให้ layout และเนื้อหาปรับเปลี่ยนได้โดยอัตโนมัติตามขนาดและการวางแนวหน้าจอ ซึ่งช่วยให้ผู้ใช้งานทุกคนใช้งานได้สะดวกและอ่านได้ง่าย

CSS Flexbox

Introduction to CSS Flexbox

CSS Flexbox หรือ Flexible Box Layout เป็น module การจัดหน้าที่มีประสิทธิภาพ ซึ่งได้ถูกเพิ่มเข้ามาใน CSS3 เพื่อให้นักพัฒนาสามารถสร้างหน้าเว็บไซต์ที่ยืดหยุ่นและรองรับการตอบสนองได้ Flexbox ถูกออกแบบมาเพื่อทําให้การกระจายและจัดวางองค์ประกอบภายในคอนเทนเนอร์ง่ายขึ้น โดยไม่คํานึงถึงขนาดหรือเนื้อหาขององค์ประกอบ

CSS Grid

Introduction to CSS Grid

CSS Grid เป็น module สําหรับจัดหน้าที่เพิ่มเข้ามาใน CSS3 ซึ่งให้วิธีการสร้างหน้าเว็บไซต์ที่มีการจัดวางแบบตาราง 2 มิติอย่างยืดหยุ่นและมีประสิทธิภาพ แตกต่างจาก CSS Flexbox ที่เน้นการจัดวางองค์ประกอบในมิติเดียว (แถวหรือคอลัมน์) CSS Grid อนุญาตให้นักออกแบบและนักพัฒนากําหนดทั้งแถวและคอลัมน์ สามารถควบคุมตําแหน่งและขนาดขององค์ประกอบในตารางได้อย่างแม่นยํา

Responsive Web Design Projects

Responsive Web Design Projects

การฝึกปฏิบัติจริงที่ช่วยให้นักพัฒนาและนักออกแบบ สามารถนําหลักการออกแบบเว็บไซต์แบบรับการตอบสนองไปประยุกต์ใช้ เพื่อสร้างเว็บไซต์ที่ปรับเปลี่ยนและตอบสนองต่อขนาดหน้าจอและอุปกรณ์ที่แตกต่างกัน โปรเจ็กต์เหล่านี้ช่วยให้คุณได้ฝึกปฏิบัติการสร้างเลย์เอาต์แบบรับการตอบสนองจริง และทดสอบทักษะ HTML, CSS และ JavaScript