Basic Responsive Web Design

12 ชั่วโมง (3,900 บาท)
โปรโมชั่นลด 10% เหลือ 3,510 บาท (ไม่รวม Vat)
รายละเอียด: Course ID: wdc-01-23

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

วิดีโอแนะนำคอร์ส:

ดาวน์โหลดไฟล์รายละเอียดคอร์ส:

วัตถุประสงค์:

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

กลุ่มเป้าหมาย:

  • ผู้ที่เคยผ่านงานในการสร้างเว็บไซต์ด้วย CSS มาพอสมควร
  • Web Designer
  • Web Developer
  • ผู้ที่ต้องการเรียนรู้การทำงานและการออกแบบ Responsive Web Design เพื่อเพิ่มประสิทธิภาพในการทำงาน

ความรู้พื้นฐาน:

  • สามารถใช้ Internet เบื้องต้นได้
  • มีพื้นฐานการเขียนโปรแกรมด้วยภาษา HTML และ CSS เบื้องต้น

ระยะเวลาในการอบรม:

  • 12 ชั่วโมง

ราคาคอร์สอบรม:

  • 3900 บาท

วิทยากรผู้สอน:

คอร์สที่ควรอบรมก่อนหน้า:

คอร์สต่อเนื่องที่แนะนำ:

เนื้อหาการอบรม:

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

 

 

 

คำค้นหา:

responsive web web responsive design web responsive responsive web design สอน สอน responsive web design อบรม responsive web design เรียนการออกแบบ เรียน design course อบรม เรียนทําเว็บไซต์ ที่ไหนดี โปรแกรมอบรม อบรมเว็บไซต์ เขียน website อบรม web responsive เรียน web design theme web design เรียน graphic design คอร์สฝึกอบรม web design คอร์สสอน web design เรียนสร้างเว็บ responsive สอน web design หลักสูตรอบรม responsive web หลักสูตรการอบรม responsive web อบรมหลักสูตร responsive web หลักสูตรฝึกอบรม web design หลักสูตร training Responsive Web การออกแบบเว็บ Responsive Responsive web design เบื้องต้น responsive design การออกแบบเว็บรองรับมือถือ เรียน responsive web design อบรม responsive web design นอกสถานที่ อบรม responsive web design In-House

อัพเดทข้อมูลเมื่อ:

  • 2015-12-23 17:40:52

ขอบคุณสำหรับการลงทะเบียนค่ะ
ระบบส่งรายละเอียดเพิ่มเติมไปที่อีเมล์แล้วนะคะ
หากมีคำถามโทรสอบถามที่เบอร์ 02-933-0427 หรือ 088-807-9770 (ทุกวัน 8.00-18.00 น.)

เลือกรอบลงเรียน:
ชื่อ-สกุล:
อีเมล์:
โทรศัพท์:
จำนวนผู้เข้าอบรม:

Top

itgenius facebook fanpage
บริษัท ไอทีจีเนียส เอ็นจิเนียริ่ง จำกัด (IT Genius Engineering Co.,Ltd.)
CopyRight © 2013-2014 itgenius.co.th