เขียน Responsive Website ด้วย Bootstrap 3 Web Design

Bootstrap 3 เป็น front end framework ในการออกแบบหน้าเว็บ คอร์สนี้จะทำให้ผู้เรียนเข้าใจภาพรวมของ framework นี้ รวมถึงการใช้งานส่วนประกอบต่างๆ ในการออกแบบเว็บไซต์ให้สวยงามได้อย่างง่ายดาย

ด้วย Bootstrap 3 จะทำให้การออกแบบเว็บครั้งเดียวสามารถใช้ได้กับอุปกรณ์ที่มีขนาดหน้าจอต่างกัน ตั้งแต่หน้าจอเล็กๆ อย่างอุปกรณ์มือถือ (Mobile Devices), ขนาดกลางอย่างแทบเบล็ต (Tablet) ไปจนถึงขนาดใหญ่เช่นหน้าจอ Desktop ซึ่งการออกแบบให้รองรับการทำงานกับอุปกรณ์ที่หลากหลายเช่นนี้เรียกว่า Responsive Design

ในช่วงต้นของคอร์ส ผู้สอนได้เพิ่มเติมเนื้อหาในส่วนของเครื่องมือที่ใช้ในการเขียนและทดสอบหน้าเว็บโดยที่ยังไม่ต้อง upload ขึ้นสู่ server หรือ web hosting แต่อย่างใด

หลังจากนั้นจะเป็นการปูพื้นฐานเกี่ยวกับ Grid System ซึ่งเป็นหัวใจสำคัญของการออกแบบให้เป็น Responsive, การใช้ Table, Form และ Input ในรูปแบบต่างๆ, Button ตามด้วย component ที่ทำให้เว็บดูหรูหราขึ้นอย่างเช่น Button Group, Input Group, Navigation Bar, Pagination, Progress Bar, Media Object ฯลฯ

คอร์สนี้ยังสอนเรื่องการใช้ Javascript เพื่อทำลูกเล่นต่างๆ ด้วย เช่น Modals, Dropdown, Tabs, Tooltips, Popovers, Alert, Collapse ไปจนถึงสิ่งที่ advance อย่าง Carousel

ยังไม่จบแค่นั้น คอร์สนี้ยังมี workshop ด้วยการสาธิตการใช้งานจริงด้วยวีดีโออีกเป็นเวลา 3 ชั่วโมงครึ่ง รวมเวลาแล้ว คอร์สนี้ยาวจุใจ คุ้มค่า ด้วยเวลารวมของวีดีโอทั้งหมดถึง 9 ชั่วโมงครึ่ง

Chapter 1 - Introductions

พื้นฐานสำหรับผู้เรียน ตัวอย่าง

พื้นฐานสำหรับผู้เรียน

3:31

ตัวอย่าง Workshop ทีจะได้เรียน ตัวอย่าง

ตัวอย่าง Workshop ทีจะได้เรียน

2:31

แนะนำ Bootstrap 3 CSS Framework

แนะนำ Bootstrap 3 CSS Framework

1:39

แนะนำ Responsive Website

แนะนำ Responsive Website

1:56

Chapter 2 - Tools and Setup

แนะนำเครื่องมือ

แนะนำเครื่องมือ

1:54

Ampps Server

Ampps Server

4:39

Sublime Text 3

Sublime Text 3

7:35

Google Chorme Canary

Google Chorme Canary

2:30

Live Reload

Live Reload

8:08

Bootstrap 3

Bootstrap 3

3:55

Jquery

Jquery

2:01

Chapter 3 - Getting Start

Create Bootstrap 3 Project

Create Bootstrap 3 Project

10:46

Chapter 4 - Bootstrap 3 - CSS

Introduction to CSS

Introduction to CSS

00:40

Container

Container

3:54

Row

Row

2:56

Grid System

Grid System

2:20

Grid System 2

Grid System 2

8:53

Typography

Typography

3:25

Typography 2

Typography 2

3:29

Tables

Tables

1:10

Table Basic

Table Basic

2:32

Table Striped

Table Striped

0:49

Table Bordered

Table Bordered

0:46

Table Hover

Table Hover

0:43

Table Condensed

Table Condensed

0:49

Table Contextual

Table Contextual

1:52

Table Responsive

Table Responsive

1:47

Forms

Forms

0:33

From Basic

From Basic

2:47

Form Inline

Form Inline

2:18

Form Checkbox

Form Checkbox

1:33

Form Radio Button

Form Radio Button

0:56

From Select

From Select

1:43

Form Column Sizing

Form Column Sizing

1:43

Buttons

Buttons

0:50

Button Default

Button Default

2:04

Button Sizing

Button Sizing

1:55

Button Tag

Button Tag

2:27

Images

Images

0:39

Image Responsive

Image Responsive

1:02

Img Rounded

Img Rounded

1:05

Img Circle

Img Circle

1:41

Img Thumbnail

Img Thumbnail

1:07

Helper Classes

Helper Classes

0:53

Helper Contextual Color

Helper Contextual Color

1:41

Helper Contextual Background

Helper Contextual Background

1:33

Helper Close Button

Helper Close Button

0:58

Helper Caret

Helper Caret

0:30

Helper Quick Float

Helper Quick Float

1:17

Helper Quick Float

Helper Quick Float

1:17

Helper Show Hide

Helper Show Hide

3:16

Responsive Utilities

Responsive Utilities

3:25

Chapter 5 - Bootstrap 3 - Components

Introduction to Components

Introduction to Components

0:39

Glyphicon

Glyphicon

1:52

Dropdown

Dropdown

5:42

Button Group

Button Group

0:56

ButtonGroup Basic

ButtonGroup Basic

2:08

ButtonGroup Toolbar

ButtonGroup Toolbar

1:12

ButtonGroup Group Size

ButtonGroup Group Size

1:11

ButtonGroup Group Vertical

ButtonGroup Group Vertical

0:40

ButtonGroup Group Justified

ButtonGroup Group Justified

0:55

Button Dropdown

Button Dropdown

0:35

Button Dropdown Single

Button Dropdown Single

2:36

Button Dropdown Split

Button Dropdown Split

3:49

Button Dropdown Dropup

Button Dropdown Dropup

0:58

Input Group

Input Group

0:38

Input Group Basic

Input Group Basic

2:17

Input Group Sizing

Input Group Sizing

0:59

Input Group Button with Dropdown

Input Group Button with Dropdown

5:06

Input Group Segmented

Input Group Segmented

1:06

Navs

Navs

0:26

Navs Tabs

Navs Tabs

1:26

Navs Pills and Stack

Navs Pills and Stack

0:57

Navs Justified

Navs Justified

1:10

Navs Tabs and Dropdown

Navs Tabs and Dropdown

2:23

Navs Pills and Dropdown

Navs Pills and Dropdown

0:34

Navbar

Navbar

1:07

Navbar Default and Inverse

Navbar Default and Inverse

7:09

Navbar Brand Text amd Images

Navbar Brand Text amd Images

2:09

Navbar Form and Button

Navbar Form and Button

3:43

Navbar Fixed Top and Buttom

Navbar Fixed Top and Buttom

2:54

Navbar Static Top

Navbar Static Top

1:22

Breadcrumbs

Breadcrumbs

1:55

Paginations

Paginations

0:38

Pagination Default

Pagination Default

2:53

Pagination Pager

Pagination Pager

1:25

Lables

Lables

2:21

Badges

Badges

3:19

Jumbotron

Jumbotron

3:21

Thumbnails

Thumbnails

0:32

Thumbnail Default

Thumbnail Default

1:23

Thumbnail Custom Content

Thumbnail Custom Content

4:25

Alerts

Alerts

0:40

Alert Default

Alert Default

2:39

Alert Dismisables

Alert Dismisables

2:31

Alert Link

Alert Link

1:24

Progress bars

Progress bars

0:41

Progress Bars Basic

Progress Bars Basic

2:52

Progress Bars Label

Progress Bars Label

1:16

Progress Bars Contextual

Progress Bars Contextual

1:15

Progress Bars Striped

Progress Bars Striped

0:54

Progress Bars Animate

Progress Bars Animate

0:44

Progress Bars Stacked

Progress Bars Stacked

1:26

Media Object

Media Object

0:38

Media Object Default

Media Object Default

3:02

Media Object Alignment

Media Object Alignment

1:38

Media Object Media List

Media Object Media List

3:46

List Group

List Group

0:38

List Group Default

List Group Default

3:08

List Group Badges

List Group Badges

1:17

List Group Linked

List Group Linked

1:35

List Group Content Classes

List Group Content Classes

1:43

List Group Custom Content

List Group Custom Content

2:19

Panels

Panels

0:28

Panels Default

Panels Default

4:26

Panels Contextual

Panels Contextual

1:39

Panels Tables

Panels Tables

3:50

Panels List group

Panels List group

2:59

Responsive Embed

Responsive Embed

3:45

Wells

Wells

2:02

Dropdown

Dropdown

0:46

Chapter 6 - Bootstrap 3 - JavaScript

122- JavaScript - Dropdown.mp4

JavaScripts

1:00

JavaScript Bootstrap Overviews

JavaScript Bootstrap Overviews

1:12

Data Attributes and JavaScript API

Data Attributes and JavaScript API

1:47

Modals

Modals

9:36

Scrollspy

Scrollspy

9:57

Tabs

Tabs

4:50

Tooltips

Tooltips

4:23

Popovers

Popovers

6:11

Alerts

Alerts

3:37

Buttons

Buttons

0:44

Button Stateful

Button Stateful

4:11

Button Checkbox

Button Checkbox

2:28

Button Radio

Button Radio

1:27

Collapse

Collapse

11:18

Carousel

Carousel

12:09

Chapter 7 - Bootstrap 3 - Customize

การใช้งานในส่วน Customize

การใช้งานในส่วน Customize

16:23

Chapter 8 - Workshop - Responsive Webdesign

แนวคิด

แนวคิด

6:40

การออกแบบโครงร่าง

การออกแบบโครงร่าง

2:33

เริ่มสร้างโปรเจ็ค

เริ่มสร้างโปรเจ็ค

12:42

เริ่มการเขียนเนื้อหา

เริ่มการเขียนเนื้อหา

1:06:22

แนะนำการทำงานของ Media Query

แนะนำการทำงานของ Media Query

12:23

การออบแบบสำหรับหน้าจอขนาดเล็ก

การออบแบบสำหรับหน้าจอขนาดเล็ก

42:46

การออกแบบสำหรับหน้าจอขนาดกลาง

การออกแบบสำหรับหน้าจอขนาดกลาง

7:39

การออกแบบสำหรับหน้าจอขนาดใหญ่

การออกแบบสำหรับหน้าจอขนาดใหญ่

24:58

เก็บรายละเอียด

เก็บรายละเอียด

47:10

End - Conclusion

สรุป

สรุป

1:38