Bootstrap 3 for Beginner to Professional
คอร์สออนไลน์ Bootstrap 3 สำหรับผู้เริ่มต้น มือใหม่ ไปจนถึงขั้น Advanced สำหรับคนที่เชี่ยวชาญแล้ว เรียนออนไลน์ สะดวก เนื้อหาจุใจ 9 ชั่วโมงครึ่ง
ไม่ว่าท่านจะเป็นมือใหม่หรือนักพัฒนาเว็บที่คล่องแคล่ว
คอร์ส Bootstrap 3 ที่ยาวจุใจ 9 ชั่วโมงครึ่งนี้
จะทำให้ท่าน ‘ทะลุปรุโปร่ง’ กับ Framework นี้
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 ชั่วโมงครึ่ง
เนื้อหาหลักสูตร
| ข้อตกลงเกี่ยวกับลิขสิทธิ์และการใช้งาน | 00:00:00 | ||
| หัวข้อ 1 - Introduction | |||
| 1. ภาพรวมภายในคอร์ส | FREE | 00:04:00 | |
| 2. พื้นฐานสำหรับผู้เรียน | FREE | 00:04:00 | |
| 3. ตัวอย่าง Workshop ที่จะได้เรียน | FREE | 00:03:00 | |
| 4. แนะนำ Bootstrap 3 CSS Framework | FREE | 00:02:00 | |
| 5. แนะนำ Responsive Website | FREE | 00:02:00 | |
| หัวข้อ 2 - Tools and Setup | |||
| 6. แนะนำเครื่องมือ | FREE | 00:02:00 | |
| 7. Ampps Server | 00:05:00 | ||
| 8. Sublime Text 3 | 00:08:00 | ||
| 9. Google Chrome Canary | 00:03:00 | ||
| 10. Live Reload | 00:04:00 | ||
| 11. Bootstrap 3 | 00:04:00 | ||
| 12. jQuery | 00:03:00 | ||
| หัวข้อ 3 - Getting Start | |||
| 13. Create Bootstrap 3 Project | 00:11:00 | ||
| หัวข้อ 4 - Bootstrap 3 - CSS | |||
| 14. Introduction to CSS | FREE | 00:01:00 | |
| 15. Container | 00:04:00 | ||
| 16. Row | 00:03:00 | ||
| 17. Grid System | 00:03:00 | ||
| 18. Grid System 2 | 00:09:00 | ||
| 19. Typography | 00:04:00 | ||
| 20. Typography 2 | 00:04:00 | ||
| 21. Tables | 00:02:00 | ||
| 22. Table Basic | 00:03:00 | ||
| 23. Table Striped | 00:01:00 | ||
| 24. Table Bordered | 00:01:00 | ||
| 25. Table Hover | 00:01:00 | ||
| 26. Table Condensed | 00:01:00 | ||
| 27. Table Contextual | 00:02:00 | ||
| 28. Table Responsive | 00:02:00 | ||
| 29. Forms | 00:01:00 | ||
| 30. Form Basic | 00:03:00 | ||
| 31. Form Inline | 00:03:00 | ||
| 32. Form Checkbox | 00:02:00 | ||
| 33. Form Radio Button | 00:01:00 | ||
| 34. Form Select | 00:02:00 | ||
| 35. Form Column Sizing | 00:02:00 | ||
| 36. Buttons | 00:01:00 | ||
| 37. Button Default | 00:03:00 | ||
| 38. Button Sizing | 00:02:00 | ||
| 39. Button Tag | 00:03:00 | ||
| 40. Images | 00:01:00 | ||
| 41. Image Responsive | 00:02:00 | ||
| 42. Img Rounded | 00:02:00 | ||
| 43. Img Circle | 00:02:00 | ||
| 44. Img Thumbnail | 00:02:00 | ||
| 45. Helper Classes | 00:01:00 | ||
| 46. Helper Contextual Color | 00:02:00 | ||
| 47. Helper Contextual Background | 00:02:00 | ||
| 48. Helper Close Button | 00:01:00 | ||
| 49. Helper Caret | 00:01:00 | ||
| 50. Helper Quick Float | 00:02:00 | ||
| 51. Helper Show Hide | 00:04:00 | ||
| 52. Responsive Utilities | 00:04:00 | ||
| หัวข้อ 5 - Bootstrap 3 - Components | |||
| 53. Introduction to Components | FREE | 00:01:00 | |
| 54. Glyphicon | 00:02:00 | ||
| 55. Dropdown | 00:06:00 | ||
| 56. Button Group | 00:01:00 | ||
| 57. ButtonGroup Basic | 00:03:00 | ||
| 58. ButtonGroup Toolbar | 00:02:00 | ||
| 59. ButtonGroup Group Size | 00:02:00 | ||
| 60. ButtonGroup Group Vertical | 00:01:00 | ||
| 61. ButtonGroup Group Justified | 00:01:00 | ||
| 62. Button Dropdown | 00:01:00 | ||
| 63. Button Dropdown Single | 00:03:00 | ||
| 64. Button Dropdown Split | 00:04:00 | ||
| 65. Button Dropdown Dropup | 00:01:00 | ||
| 66. Input Group | 00:01:00 | ||
| 67. Input Group Basic | 00:03:00 | ||
| 68. Input Group Sizing | 00:01:00 | ||
| 69. Input Group Button with Dropdown | 00:06:00 | ||
| 70. Input Group Segmented | 00:02:00 | ||
| 71. Navs | 00:01:00 | ||
| 72. Navs Tabs | 00:02:00 | ||
| 73. Navs Pills and Stack | 00:01:00 | ||
| 74. Navs Justified | 00:02:00 | ||
| 75. Navs Tabs and Dropdown | 00:03:00 | ||
| 76. Navs Pills and Dropdown | 00:01:00 | ||
| 77. Navbar | 00:02:00 | ||
| 78. Navbar Default and Inverse | 00:08:00 | ||
| 79. Navbar Brand Text and Images | 00:03:00 | ||
| 80. Navbar Form and Button | 00:04:00 | ||
| 81. Navbar Fixed Top and Bottom | 00:03:00 | ||
| 82. Navbar Static Top | 00:02:00 | ||
| 83. Breadcrumbs | 00:02:00 | ||
| 84. Paginations | 00:01:00 | ||
| 85. Pagination Default | 00:03:00 | ||
| 86. Pagination Pager | 00:02:00 | ||
| 87. Labels | 00:03:00 | ||
| 88. Badges | 00:04:00 | ||
| 89. Jumbotron | 00:04:00 | ||
| 90. Thumbnails | 00:01:00 | ||
| 91. Thumbnail Default | 00:02:00 | ||
| 92. Thumbnail Custom Content | 00:05:00 | ||
| 93. Alerts | 00:01:00 | ||
| 94. Alert Default | 00:03:00 | ||
| 95. Alert Dismisables | 00:03:00 | ||
| 96. Alert Link | 00:02:00 | ||
| 97. Progress bars | 00:01:00 | ||
| 98. Progress Bars Basic | 00:03:00 | ||
| 99. Progress Bars Label | 00:02:00 | ||
| 100. Progress Bars Contextual | 00:02:00 | ||
| 101. Progress Bars Striped | 00:01:00 | ||
| 102. Progress Bars Animate | 00:01:00 | ||
| 103. Progress Bars Stacked | 00:02:00 | ||
| 104. Media Object | 00:01:00 | ||
| 105. Media Object Default | 00:04:00 | ||
| 106. Media Object Alignment | 00:02:00 | ||
| 107. Media Object Media List | 00:04:00 | ||
| 108. List Group | 00:01:00 | ||
| 109. List Group Default | 00:04:00 | ||
| 110. List Group Badges | 00:02:00 | ||
| 111. List Group Linked | 00:02:00 | ||
| 112. List Group Content Classes | 00:02:00 | ||
| 113. List Group Custom Content | 00:03:00 | ||
| 114. Panels | 00:01:00 | ||
| 115. Panels Default | 00:05:00 | ||
| 116. Panels Contextual | 00:02:00 | ||
| 117. Panels Tables | 00:04:00 | ||
| 118. Panels List group | 00:03:00 | ||
| 119. Responsive Embed | 00:04:00 | ||
| 120. Wells | 00:03:00 | ||
| หัวข้อ 6 - Bootstrap 3 - Javascript | |||
| 121. JavaScripts | FREE | 00:01:00 | |
| 122. JavaScript Bootstrap Overviews | 00:02:00 | ||
| 123. Data Attributes and JavaScript API | 00:02:00 | ||
| 124. Modals | 00:10:00 | ||
| 125. Dropdown | 00:01:00 | ||
| 126. Scrollspy | 00:10:00 | ||
| 127. Tabs | 00:05:00 | ||
| 128. Tooltips | 00:05:00 | ||
| 129. Popovers | 00:07:00 | ||
| 130. Alerts | 00:04:00 | ||
| 131. Buttons | 00:01:00 | ||
| 132. Button Stateful | 00:05:00 | ||
| 133. Button Checkbox | 00:03:00 | ||
| 134. Button Radio | 00:02:00 | ||
| 135. Collapse | 00:12:00 | ||
| 136. Carousel | 00:13:00 | ||
| หัวข้อ 7 - Bootstrap 3 - Customize | |||
| 137. การใช้งานในส่วน Customize | 00:17:00 | ||
| หัวข้อ 8 - Workshop Responsive Web Design | |||
| 138. แนวคิด | 00:07:00 | ||
| 139. การออกแบบโครงร่าง | 00:03:00 | ||
| 140. เริ่มสร้างโปรเจ็ค | 00:15:00 | ||
| 141. เริ่มการเขียนเนื้อหา | 01:07:00 | ||
| 142. แนะนำการทำงานของ Media Query | 00:13:00 | ||
| 143. การออกแบบสำหรับหน้าจอขนาดเล็ก | 00:43:00 | ||
| 144. การออกแบบสำหรับหน้าจอขนาดกลาง | 00:08:00 | ||
| 145. การออกแบบสำหรับหน้าจอขนาดใหญ่ | 00:25:00 | ||
| 146. เก็บรายละเอียด | 00:48:00 | ||
| หัวข้อ 9 - Conclusion | |||
| 147. สรุป | 00:02:00 | ||
ความเห็น
