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

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

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 ชั่วโมงครึ่ง

comments powered by Disqus.

1,500 บาท

ลงทะเบียนเรียน

ข้อมูลหลักสูตร

ลงทะเบียน 7
เพิ่มเมื่อ 28 ม.ค. 2015
ปรับปรุงเมื่อ 28 ม.ค. 2015
หมวดหมู่ Web Design

ข้อมูลผู้บรรยาย

Thapwaris Chinsirirathkul

สมาชิกเมื่อ: 25 ก.พ. 2014 19:49:37

ดูรายละเอียด ส่งข้อความ

คอร์สเรียนที่น่าสนใจในหมวดหมู่ Web Design

Wordpress Theme Baby to Ninja

34 บทเรียน 6 ชั่วโมง 47 นาที

ในหัวข้อนี้ผมจะมาเสนอหลักสูตรสอนเขียน WordPress Theme ในขั้น Advanced ครับ แต่อย่าพึ่งตกใจไปครับ ถึง...

4,500 บาท

ลงทะเบียน

สร้างเว็บไซต์ด้วย DREAMWEAVER CC สไตล์ BOOTSTRAP3

6 บทเรียน 0 ชั่วโมง 38 นาที

684

สร้างเว็บไซต์ด้วย DREAMWEAVER CC สไตล์ BOOTSTRAP3

ฟรี!

ลงทะเบียน

สร้างคอร์สเรียนของคุณ

เรามี 45 คอร์สเรียน เพิ่มคอร์สเรียนของคุณเพิ่อรับรายได้แบบไม่จำกัด และเผยแพร่องค์ความรู้ของคุณกับคอร์สการเรียนรู้ออนไลน์ที่ทุกๆ คนสามารถเข้าถึงได้ทุกที่ทุกเวลา

สร้างคอร์สเรียน

สังคมนักพัฒนาซอฟต์แวร์

117 M.9 Nongmueng Subdistrict, Muangsamsib District, Ubonratchathani Province 34140

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

Chapter 1 - Introductions

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

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

แนะนำ Bootstrap 3 CSS Framework

แนะนำ Responsive Website

Chapter 2 - Tools and Setup

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

Ampps Server

Sublime Text 3

Google Chorme Canary

Live Reload

Bootstrap 3

Jquery

Chapter 3 - Getting Start

Create Bootstrap 3 Project

Chapter 4 - Bootstrap 3 - CSS

Introduction to CSS

Container

Row

Grid System

Grid System 2

Typography

Typography 2

Tables

Table Basic

Table Striped

Table Bordered

Table Hover

Table Condensed

Table Contextual

Table Responsive

Forms

From Basic

Form Inline

Form Checkbox

Form Radio Button

From Select

Form Column Sizing

Buttons

Button Default

Button Sizing

Button Tag

Images

Image Responsive

Img Rounded

Img Circle

Img Thumbnail

Helper Classes

Helper Contextual Color

Helper Contextual Background

Helper Close Button

Helper Caret

Helper Quick Float

Helper Quick Float

Helper Show Hide

Responsive Utilities

Chapter 5 - Bootstrap 3 - Components

Introduction to Components

Glyphicon

Dropdown

Button Group

ButtonGroup Basic

ButtonGroup Toolbar

ButtonGroup Group Size

ButtonGroup Group Vertical

ButtonGroup Group Justified

Button Dropdown

Button Dropdown Single

Button Dropdown Split

Button Dropdown Dropup

Input Group

Input Group Basic

Input Group Sizing

Input Group Button with Dropdown

Input Group Segmented

Navs

Navs Tabs

Navs Pills and Stack

Navs Justified