Basic Responsive Web Design

Basic Responsive Web Design

หลักสูตร สำหรับผู้ที่จะเรียนรู้หลักการออกแบบบนหน้าจอขนาดต่าง ๆ และนำไปประยุกต์สร้างเว็บด้วยแนวคิดและหลักการของ Responsive Web Design ที่ช่วยตอบสนองการแสดงผลเว็บไซต์ได้ดี และมีประสิทธิภาพสำหรับอุปกรณ์สื่อสาร เช่น Desktop, มือถือ, Tablet  และยังได้เรียนรู้หลักการออกแบบและพัฒนาเว็บไซต์ในอนาคตอีกด้วย

สาขากรุงเทพฯ (ลาดพร้าว)
  • ยังไม่มีรอบเปิดอบรม (ลงชื่อจองไว้ได้)
  • เพื่อให้ผู้สนใจได้เข้าใจหลักการทำงานของ Responsive Web Design
  • เพื่อให้ผู้เข้าร่วมอบรมมีความรู้และความเข้าใจขั้นตอนของ Responsive บนอุปกรณ์ต่างๆ
  • เพื่อให้ผู้เข้าร่วมอบรมสามารถประยุกต์เทคนิคต่างๆ บนอุปกรณ์พกพาได้
  • ผู้ที่เคยผ่านงานในการสร้างเว็บไซต์ด้วย CSS มาพอสมควร
  • Web Designer
  • Web Developer
  • ผู้ที่ต้องการเรียนรู้การทำงานและการออกแบบ Responsive Web Design เพื่อเพิ่มประสิทธิภาพในการทำงาน
  • สามารถใช้ Internet เบื้องต้นได้
  • มีพื้นฐานการเขียนโปรแกรมด้วยภาษา HTML และ CSS เบื้องต้น
  • 12 ชั่วโมง
  • ราคาปกติ 3,900 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 3,510 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

Introduction

1. CSS Review

CSS: The presentation of the web page

  • What is CSS3?
  • Who is responsible for CSS3?
  • Why should I be writing CSS3?
  • When was CSS3 created?

CSS frameworks, libraries, and preprocessors

  • What is a CSS library?
  • What is a CSS framework?
  • What is a CSS preprocessor?

CSS Syntax

CSS Selectors

  • Definitions
  • Selector types

Optimizing Selectors

  • Optimizing CSS

2. Introduction to Responsive Web Design (RWD)

What is responsive web design?

  • Responsive web design vs. responsive web layout
  • Responsive layout vs. adaptive layout

Why should I use Responsive Web Design?

How does RWD compare with other responsive strategies?

  • Server-Side Device Detection (SSDD)
  • Responsive Web Design with Server Side Components (RESS)

Who is responsible for RWD?

When should I use RWD?

How do I implement RWD?

Fundamental techniques of RWD

  • Feature detection
  • The viewport element
  • Responsive layouts
  • Media queries
  • Responsive images
  • Responsive tables

Overview of RWD techniques

  • HTML solutions
  • CSS solutions
  • JavaScript solutions

Responsive vs. Adaptive vs. RESS

  • Liquid layout example
  • Responsive design examples
  • Adaptive design examples
  • RESS design example

Pros and Cons of Responsive Design Techniques

3. Responsive Web Design Fundamentals

Feature Detection

The viewport and the media query

The CSS box model and the CSS reset

Understanding feature detection

  • Using the Modernizr library
  • What is Modernizr?

Understanding the viewport

  • What is the viewport?
  • Viewport properties
  • Viewport meta element example code
  • How is the pixel width of the viewport measured?

Understanding the media attribute and media types

  • Where do I specify a media type?
  • Recognized media types

Understanding media queries

  • What is a media query?
  • Media query syntax
  • Where can I write media queries?
  • Media queries and the cascade
  • Media query features
  • Demo: Understanding the media query

Understanding the CSS box model and CSS resets

  • What is the CSS box model
  • The CSS reset

4. Responsive Layout Techniques

Fixed layout

  • CSS fixed or absolute units of measurement
  • Fixed layout pros and cons

Liquid (or fluid) layout

  • CSS relative units of measurement
  • Liquid layout pros and cons

Elastic layout

  • What is an elastic layout?
  • How is an elastic layout created?

Adaptive Layout

Flex-box layout

  • What is a flex-box?
  • The flex layout model
  • The flex-box properties
  • Creating a responsive flex-box layout
  • Creating a flex-box layout

Grid Layout

  • What is grid layout?
  • The grid layout model
  • Exercise: Creating a grid layout
  • Challenge: Building a grid layout

Multi-Column Layout

  • What is a CSS multi-column?
  • The column properties
  • Column-related design issues
  • Demo: Column demo files
  • Building a container for multi-column layout

Using Responsive Frameworks

  • Twitter Bootstrap

5. Responsive Typography

Introduction

What is responsive typography?

Font-sizing options

  • Units of measurement: fixed units of measurement
  • Units of measurement: relative units of measurement
  • Absolute vs. relative units of measurement

6. Responsive Images

What are responsive images?

  • Responsive image example
  • Issues surrounding responsive images

Basic image terminology

  • Screen resolution
  • Pixel density
  • CSS pixel or density independent pixel (DIP)
  • CSS pixel ratio
  • Device pixel ratio
  • Asset size
  • Asset resolution
  • Foreground image
  • Background image

Responsive image techniques

  • Introduction
  • HTML techniques
  • CSS techniques
  • JavaScript techniques
  • Server-side techniques

HTML techniques

  • Introduction
  • picture element
  • srcset attribute

CSS techniques

  • Introduction
  • Responsive techniques
  • Adaptive techniques

JavaScript techniques

  • Introduction
  • PictureFill.js: an HTML element polyfill
  • HiSRC: a jQuery plug-in

Other techniques

  • Server-side techniques

No Images!

  • Alternatives to downloading images

7. Responsive tables

  • Hiding table data
  • Manipulating the table
  • Morphing the table
  • Scrolling the table data

8. Introduction to CSS3

CSS3 Backgrounds and Shadows

CSS3 Transforms

  • CSS3 2D transforms
  • CSS3 3D transforms
  • CSS Transforms properties and methods

CSS3 Transitions

  • What is a CSS transition?
  • How do I execute a transition?

CSS3 Animations

  • CSS3 animation code

Conclusion

 

 

 

26/01/2023 09:35:13