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

This is share svg แชร์หลักสูตรนี้

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

หลักสูตรที่เกี่ยวข้องในหมวดหมู่ Web Design

Wordpress Theme Baby to Ninja

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

4500 ฿

1

สร้างหลักสูตรของคุณ

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

สร้างหลักสูตร