เขียน 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
  • Video

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

  • ตัวอย่าง Workshop ทีจะได้เรียน
  • 2:31
  • Video

แนะนำ Bootstrap 3 CSS Framework

  • แนะนำ Bootstrap 3 CSS Framework
  • 1:39
  • Video

แนะนำ Responsive Website

  • แนะนำ Responsive Website
  • 1:56
  • Video

Chapter 2 - Tools and Setup

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

  • แนะนำเครื่องมือ
  • 1:54
  • Video

Ampps Server

  • Ampps Server
  • 4:39
  • Video

Sublime Text 3

  • Sublime Text 3
  • 7:35
  • Video

Google Chorme Canary

  • Google Chorme Canary
  • 2:30
  • Video

Live Reload

  • Live Reload
  • 8:08
  • Video

Bootstrap 3

  • Bootstrap 3
  • 3:55
  • Video

Jquery

  • Jquery
  • 2:01
  • Video

Chapter 3 - Getting Start

Create Bootstrap 3 Project

  • Create Bootstrap 3 Project
  • 10:46
  • Video

Chapter 4 - Bootstrap 3 - CSS

Introduction to CSS

  • Introduction to CSS
  • 00:40
  • Video

Container

  • Container
  • 3:54
  • Video

Row

  • Row
  • 2:56
  • Video

Grid System

  • Grid System
  • 2:20
  • Video

Grid System 2

  • Grid System 2
  • 8:53
  • Video

Typography

  • Typography
  • 3:25
  • Video

Typography 2

  • Typography 2
  • 3:29
  • Video

Tables

  • Tables
  • 1:10
  • Video

Table Basic

  • Table Basic
  • 2:32
  • Video

Table Striped

  • Table Striped
  • 0:49
  • Video

Table Bordered

  • Table Bordered
  • 0:46
  • Video

Table Hover

  • Table Hover
  • 0:43
  • Video

Table Condensed

  • Table Condensed
  • 0:49
  • Video

Table Contextual

  • Table Contextual
  • 1:52
  • Video

Table Responsive

  • Table Responsive
  • 1:47
  • Video

Forms

  • Forms
  • 0:33
  • Video

From Basic

  • From Basic
  • 2:47
  • Video

Form Inline

  • Form Inline
  • 2:18
  • Video

Form Checkbox

  • Form Checkbox
  • 1:33
  • Video

Form Radio Button

  • Form Radio Button
  • 0:56
  • Video

From Select

  • From Select
  • 1:43
  • Video

Form Column Sizing

  • Form Column Sizing
  • 1:43
  • Video

Buttons

  • Buttons
  • 0:50
  • Video

Button Default

  • Button Default
  • 2:04
  • Video

Button Sizing

  • Button Sizing
  • 1:55
  • Video

Button Tag

  • Button Tag
  • 2:27
  • Video

Images

  • Images
  • 0:39
  • Video

Image Responsive

  • Image Responsive
  • 1:02
  • Video

Img Rounded

  • Img Rounded
  • 1:05
  • Video

Img Circle

  • Img Circle
  • 1:41
  • Video

Img Thumbnail

  • Img Thumbnail
  • 1:07
  • Video

Helper Classes

  • Helper Classes
  • 0:53
  • Video

Helper Contextual Color

  • Helper Contextual Color
  • 1:41
  • Video

Helper Contextual Background

  • Helper Contextual Background
  • 1:33
  • Video

Helper Close Button

  • Helper Close Button
  • 0:58
  • Video

Helper Caret

  • Helper Caret
  • 0:30
  • Video

Helper Quick Float

  • Helper Quick Float
  • 1:17
  • Video

Helper Quick Float

  • Helper Quick Float
  • 1:17
  • Video

Helper Show Hide

  • Helper Show Hide
  • 3:16
  • Video

Responsive Utilities

  • Responsive Utilities
  • 3:25
  • Video

Chapter 5 - Bootstrap 3 - Components

Introduction to Components

  • Introduction to Components
  • 0:39
  • Video

Glyphicon

  • Glyphicon
  • 1:52
  • Video

Dropdown

  • Dropdown
  • 5:42
  • Video

Button Group

  • Button Group
  • 0:56
  • Video

ButtonGroup Basic

  • ButtonGroup Basic
  • 2:08
  • Video

ButtonGroup Toolbar

  • ButtonGroup Toolbar
  • 1:12
  • Video

ButtonGroup Group Size

  • ButtonGroup Group Size
  • 1:11
  • Video

ButtonGroup Group Vertical

  • ButtonGroup Group Vertical
  • 0:40
  • Video

ButtonGroup Group Justified

  • ButtonGroup Group Justified
  • 0:55
  • Video

Button Dropdown

  • Button Dropdown
  • 0:35
  • Video

Button Dropdown Single

  • Button Dropdown Single
  • 2:36
  • Video

Button Dropdown Split

  • Button Dropdown Split
  • 3:49
  • Video

Button Dropdown Dropup

  • Button Dropdown Dropup
  • 0:58
  • Video

Input Group

  • Input Group
  • 0:38
  • Video

Input Group Basic

  • Input Group Basic
  • 2:17
  • Video

Input Group Sizing

  • Input Group Sizing
  • 0:59
  • Video

Input Group Button with Dropdown

  • Input Group Button with Dropdown
  • 5:06
  • Video

Input Group Segmented

  • Input Group Segmented
  • 1:06
  • Video

Navs

  • Navs
  • 0:26
  • Video

Navs Tabs

  • Navs Tabs
  • 1:26
  • Video

Navs Pills and Stack

  • Navs Pills and Stack
  • 0:57
  • Video

Navs Justified

  • Navs Justified
  • 1:10
  • Video

Navs Tabs and Dropdown

  • Navs Tabs and Dropdown
  • 2:23
  • Video

Navs Pills and Dropdown

  • Navs Pills and Dropdown
  • 0:34
  • Video

Navbar

  • Navbar
  • 1:07
  • Video

Navbar Default and Inverse

  • Navbar Default and Inverse
  • 7:09
  • Video

Navbar Brand Text amd Images

  • Navbar Brand Text amd Images
  • 2:09
  • Video

Navbar Form and Button

  • Navbar Form and Button
  • 3:43
  • Video

Navbar Fixed Top and Buttom

  • Navbar Fixed Top and Buttom
  • 2:54
  • Video

Navbar Static Top

  • Navbar Static Top
  • 1:22
  • Video

Breadcrumbs

  • Breadcrumbs
  • 1:55
  • Video

Paginations

  • Paginations
  • 0:38
  • Video

Pagination Default

  • Pagination Default
  • 2:53
  • Video

Pagination Pager

  • Pagination Pager
  • 1:25
  • Video

Lables

  • Lables
  • 2:21
  • Video

Badges

  • Badges
  • 3:19
  • Video

Jumbotron

  • Jumbotron
  • 3:21
  • Video

Thumbnails

  • Thumbnails
  • 0:32
  • Video

Thumbnail Default

  • Thumbnail Default
  • 1:23
  • Video

Thumbnail Custom Content

  • Thumbnail Custom Content
  • 4:25
  • Video

Alerts

  • Alerts
  • 0:40
  • Video

Alert Default

  • Alert Default
  • 2:39
  • Video

Alert Dismisables

  • Alert Dismisables
  • 2:31
  • Video

Alert Link

  • Alert Link
  • 1:24
  • Video

Progress bars

  • Progress bars
  • 0:41
  • Video

Progress Bars Basic

  • Progress Bars Basic
  • 2:52
  • Video

Progress Bars Label

  • Progress Bars Label
  • 1:16
  • Video

Progress Bars Contextual

  • Progress Bars Contextual
  • 1:15
  • Video

Progress Bars Striped

  • Progress Bars Striped
  • 0:54
  • Video

Progress Bars Animate

  • Progress Bars Animate
  • 0:44
  • Video

Progress Bars Stacked

  • Progress Bars Stacked
  • 1:26
  • Video

Media Object

  • Media Object
  • 0:38
  • Video

Media Object Default

  • Media Object Default
  • 3:02
  • Video

Media Object Alignment

  • Media Object Alignment
  • 1:38
  • Video

Media Object Media List

  • Media Object Media List
  • 3:46
  • Video

List Group

  • List Group
  • 0:38
  • Video

List Group Default

  • List Group Default
  • 3:08
  • Video

List Group Badges

  • List Group Badges
  • 1:17
  • Video

List Group Linked

  • List Group Linked
  • 1:35
  • Video

List Group Content Classes

  • List Group Content Classes
  • 1:43
  • Video

List Group Custom Content

  • List Group Custom Content
  • 2:19
  • Video

Panels

  • Panels
  • 0:28
  • Video

Panels Default

  • Panels Default
  • 4:26
  • Video

Panels Contextual

  • Panels Contextual
  • 1:39
  • Video

Panels Tables

  • Panels Tables
  • 3:50
  • Video

Panels List group

  • Panels List group
  • 2:59
  • Video

Responsive Embed

  • Responsive Embed
  • 3:45
  • Video

Wells

  • Wells
  • 2:02
  • Video

Dropdown

  • Dropdown
  • 0:46
  • Video

Chapter 6 - Bootstrap 3 - JavaScript

122- JavaScript - Dropdown.mp4

  • JavaScripts
  • 1:00
  • Video

JavaScript Bootstrap Overviews

  • JavaScript Bootstrap Overviews
  • 1:12
  • Video

Data Attributes and JavaScript API

  • Data Attributes and JavaScript API
  • 1:47
  • Video

Modals

  • Modals
  • 9:36
  • Video

Scrollspy

  • Scrollspy
  • 9:57
  • Video

Tabs

  • Tabs
  • 4:50
  • Video

Tooltips

  • Tooltips
  • 4:23
  • Video

Popovers

  • Popovers
  • 6:11
  • Video

Alerts

  • Alerts
  • 3:37
  • Video

Buttons

  • Buttons
  • 0:44
  • Video

Button Stateful

  • Button Stateful
  • 4:11
  • Video

Button Checkbox

  • Button Checkbox
  • 2:28
  • Video

Button Radio

  • Button Radio
  • 1:27
  • Video

Collapse

  • Collapse
  • 11:18
  • Video

Carousel

  • Carousel
  • 12:09
  • Video

Chapter 7 - Bootstrap 3 - Customize

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

  • การใช้งานในส่วน Customize
  • 16:23
  • Video

Chapter 8 - Workshop - Responsive Webdesign

แนวคิด

  • แนวคิด
  • 6:40
  • Video

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

  • การออกแบบโครงร่าง
  • 2:33
  • Video

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

  • เริ่มสร้างโปรเจ็ค
  • 12:42
  • Video

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

  • เริ่มการเขียนเนื้อหา
  • 1:06:22
  • Video

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

  • แนะนำการทำงานของ Media Query
  • 12:23
  • Video

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

  • การออบแบบสำหรับหน้าจอขนาดเล็ก
  • 42:46
  • Video

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

  • การออกแบบสำหรับหน้าจอขนาดกลาง
  • 7:39
  • Video

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

  • การออกแบบสำหรับหน้าจอขนาดใหญ่
  • 24:58
  • Video

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

  • เก็บรายละเอียด
  • 47:10
  • Video

End - Conclusion

สรุป

  • สรุป
  • 1:38
  • Video