ครั้งที่ 1 Introduction to Responsive Web Design

•  เรียนรู้หลักการออกแบบ Responsive Web Design ที่ดีและมีประสิทธิภาพ
•  ตัวอย่างของ Responsive Web Design และการแสดงผลบน Device ต่างๆ
•  ทบทวนโครงสร้าง HTML พื้นฐาน
• ทบทวนวิธีการเรียก CSS Selector ต่างๆ และตกแต่ง HTML เบี้องต้น

ครั้งที่ 2 Standard Web Layout with CSS

•  รู้จัก Inline Element, Block Element และ Inline-Block Element
•  เรียนรู้การเปลี่ยนแปลง Display ของ Element
• Box Model(Width, Height, Padding, Border, Margin)
• การกำหนด Box Sizing และ Overflow

ครั้งที่ 3 Convert Fixed to Fluid Layout

• เรียนรู้การใช้หน่วยต่าง ๆ เช่น px, pt, em, % เป็นต้น
• เปรียบเทียบความแตกต่างของหน่วย Absolute และ Relative
• ฝึกการแปลงหน่วยโดยใช้สูตรคำนวณเพื่อเปลี่ยน Fixed layout เป็น Fluid layout
• ทดลองปรับหน้าเว็บทีละส่วนจาก Fixed layout ให้เป็นแบบ Fluid layout

ครั้งที่ 4 Media Queries

• เรียนรู้ Media queries
• นำ Media queries มาประยุกต์ใช้กับ Fluid layout
• ทดสอบการแสดงผลของเว็บผ่าน Device simulator (Web service)
• แก้ปัญหาการแสดงผลบน Mobile Browser

ครั้งที่ 5 Advanced Layout Technique

• เปลี่ยนแนวคิดการพิมพ์หน้าเว็บไซต์โดยใช้ @media print
• เรียนรู้การจัด CSS Position ตั้งแต่ Static, Fixed, Absolute และ Relative
• พื้นฐานการใช้ JavaScript เลือกสั่งงาน HTML และ CSS

ครั้งที่ 6 Post Test and Evaluation

• ทดสอบทำแบบฝึกหัด
• วิเคราะห์และประเมินผล
• ศึกษาแนวคิดและระบบการทำงานจากเว็บต่าง ๆ