Responsive Web Design

Icon แล็ปท็อปและโทรศัพท์มือถือ

..ในการออกแบบ Responsive Web Design Certification นี้ คุณจะได้เรียนรู้โค้ดภาษาที่นักพัฒนาใช้ในการสร้างหน้าเว็บ: HTML (Hypertext Markup Language) สำหรับการออกแบบเนื้อหา และ CSS (Cascading Style Sheets) สำหรับการออกแบบหน้าเว็บไซต์

ก่อนอื่น คุณจะต้องสร้างแอปรูปถ่ายแมวเพื่อเรียนรู้พื้นฐานของ HTML และ CSS ต่อมา คุณจะได้เรียนรู้เทคนิคสมัยใหม่ เช่น ตัวแปรของ CSS โดยการสร้าง Penguin และแนวทางที่ดีที่สุดสำหรับการสร้างเว็บฟอร์ม

โดยท้ายที่สุดแล้ว คุณจะได้เรียนรู้วิธีสร้างหน้าเว็บที่ตอบสนองต่อขนาดหน้าจอต่างๆ โดยการสร้างการ์ด Twitter ด้วย Flexbox และรูปแบบบล็อกที่ซับซ้อนด้วย CSS Grid

โน้ต : การใช้เบราเซอร์เอ็กซ์เทนชันต่างๆ เช่น บล็อคโฆษณา, การใช้งานดาร์กโหมด อาจจะไปติดขัดในช่วงการทดสอบบ้างอย่าง ถ้าคุณเจอปัญหาเหล่านี้ พวกเราแนะนำให้คุณปิดการใช้งานเบราเซอร์เอ็กซ์เทนชันต่างๆ ขณะที่ทำการเรียนอยู่

Courses

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

ในหลักสูตรนี้ คุณจะต้องสร้างแอปภาพถ่ายแมว เพื่อเรียนรู้องค์ประกอบของ HTML ที่พบบ่อยที่สุด ซึ่งเป็นส่วนประกอบสำคัญของหน้าเว็บได้

CSS หรือ Cascading Style Sheets ทำหน้าที่บอกเบราว์เซอร์ ถึงวิธีการแสดงข้อความและเนื้อหาอื่น ๆ ที่คุณเขียนในภาษา HTML และด้วยภาษา CSS คุณสามารถควบคุมสี แบบอักษร ขนาด ระยะห่าง และองค์ประกอบของ HTML อื่น ๆ อีกมากมาย

ถึงตอนนี้แล้ว คุณจะต้องอธิบายโครงสร้างของแอปรูปถ่ายแมวของคุณ โดยกำหนดสไตล์ด้วยภาษา CSS

การออกแบบภาพ (Visual design) เป็นการผสมผสานระหว่างการออกแบบตัวอักษร ทฤษฎีสี กราฟิก แอนิเมชั่น เค้าโครงหน้า และอื่นๆ เพื่อช่วยนำเสนอข้อความที่เป็นเอกลักษณ์ของคุณ

ในหลักสูตรนี้ คุณจะได้เรียนรู้วิธีใช้องค์ประกอบต่างๆ ของการออกแบบภาพกับหน้าเว็บของคุณ

ในการพัฒนาเว็บไซต์ การเข้าถึง (accessibility) จะอ้างอิงถึงเนื้อหาเว็บไซต์และ UI (user interface)ที่จะช่วยให้สามารถเข้าใจ นำทางและโต้ตอบกับผู้ใช้ในวงกว้างได้ รวมถึงผู้ที่มีความบกพร่องทางการมองเห็น การได้ยิน การเคลื่อนไหว หรือการรับรู้

ในหลักสูตรนี้ คุณจะได้เรียนรู้แนวทางในการปฏิบัติที่ดีที่สุดสำหรับการสร้างหน้าเว็บที่ทำให้ทุกคนสามารถเข้าถึงได้

มีอุปกรณ์มากมายที่ช่วยให้เข้าถึงเว็บได้ สามารถมาได้ทั้งแบบรูปทรงและขนาดต่างๆ ซึ่งการออกแบบเว็บให้ตอบสนอง ตามอุปกรณ์ คือ แนวทางปฏิบัติของการออกแบบเว็บไซต์ที่ดี ค่อนข้างยืดหยุ่นและสามารถตอบสนองต่อขนาดหน้าจอ การวางแนว และความละเอียดต่างๆ ได้

ในหลักสูตรนี้ คุณจะได้เรียนรู้วิธีใช้ CSS เพื่อทำให้หน้าเว็บของคุณดูดี ไม่ว่าจะดูบนอุปกรณ์ใดก็ตาม

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

ในหลักสูตรนี้ คุณจะได้เรียนรู้พื้นฐานการวางเลย์เอาท์แบบ Flexbox และแบบไดนามิก จากการสร้างการ์ด Twitter

CSS grid คือมาตรฐานใหม่ที่ช่วยให้ง่ายต่อการสร้างเลย์เอาท์ที่ตอบสนองแบบซับซ้อนได้ ทำงานได้โดยเปลี่ยนองค์ประกอบของ HTML ให้เป็น grid และให้วางองค์ประกอบย่อยไว้ที่ภายในเลย์เอาท์

ในหลักสูตรนี้ คุณจะได้เรียนรู้พื้นฐานของ CSS grid โดยการสร้างเลย์เอาท์ที่ซับซ้อนแบบต่างๆ รวมถึงบล็อก(Blog)ด้วย

ถึงเวลาที่จะนำทักษะที่คุณเรียนรู้ไปใช้งานแล้ว การทำงานในโปรเจคนี้ คุณจะต้องใช้ทักษะ หลักการ และแนวคิดทั้งหมดที่คุณได้เรียนรู้มาใน: HTML, CSS, การออกแบบภาพ, การช่วยสำหรับการเข้าถึง(Accessibility) และเรื่องอื่นๆ .

การทำโปรเจคเขียนเว็บทั้ง 5 โปรเจคด้านล่างนี้ ได้สำเร็จ จะได้รับประกาศนียบัตรด้านการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ (Responsive Web Design)

ดู Certificate อื่นๆ ของเราดังต่อไปนี้ (แนะนำว่าควรทำตามลำดับ)