Bootstrap 4 Beta Ultimate 11 Projects Course | John Smilga | Skillshare

Bootstrap 4 Beta Ultimate 11 Projects Course

John Smilga

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
177 Lessons (1d 5h 5m)
    • 1. Course Introduction

      6:30
    • 2. Bootstrap Tutorial - intro colors typography

      17:57
    • 3. Bootstrap Tutorial -container

      6:29
    • 4. Bootstrap Tutorial - screen size

      3:35
    • 5. Bootstrap Tutorial - grid

      17:26
    • 6. Bootstrap Tutorial - margin padding width

      10:08
    • 7. Bootstrap Tutorial - bootstrap flex

      9:54
    • 8. Only Bootstrap Project -Intro

      9:36
    • 9. Only Bootstrap Project - Project Setup

      12:35
    • 10. Download Bootstrap

      6:24
    • 11. Only Bootstrap Project - Container

      9:41
    • 12. Only Bootstrap Project - container fluid

      11:32
    • 13. Only Bootstrap Project - first section

      18:42
    • 14. Only Bootstrap Project - second section

      11:00
    • 15. Only Bootstrap Project - first grid

      6:44
    • 16. Only Bootstrap Project - second grid

      5:03
    • 17. Only Bootstrap Project - sreen sizes

      9:23
    • 18. Only Bootstrap Project - screen sizes continued

      4:50
    • 19. Only Bootstrap Project - emmet crash course

      11:34
    • 20. Only Bootstrap Project - header section

      10:44
    • 21. Only Bootstrap Project - skills section

      19:22
    • 22. Only Bootstrap Project -about section

      16:47
    • 23. Only Bootstrap Project - projects section

      10:40
    • 24. Only Bootstrap Project -team section

      15:39
    • 25. Only Bootstrap Project -first carousel

      11:17
    • 26. Only Bootstrap Project - filler section

      8:19
    • 27. Only Bootstrap Project - blog section

      4:31
    • 28. Only Bootstrap Project -contact

      23:12
    • 29. Only Bootstrap Project -review section

      8:45
    • 30. Only Bootstrap Project -progress section

      10:51
    • 31. Only Bootstrap Project - pricing section

      10:18
    • 32. Only Bootstrap Project -footer section

      11:56
    • 33. Only Bootstrap Project -footer section

      13:26
    • 34. Portfolio Project Intro

      1:40
    • 35. Portfolio Project Setup

      10:57
    • 36. Portfolio Project Banner Section

      9:00
    • 37. Portfolio Project Skills Section

      7:19
    • 38. Portfolio Project Filler Section

      3:33
    • 39. Portfolio Project Photos Section

      4:20
    • 40. Portfolio Project Footer Navbar Section

      14:46
    • 41. App Landing Page Project Intro

      3:26
    • 42. App Landing Page Project Setup

      10:57
    • 43. App Landing Page Project Banner Section

      7:36
    • 44. App Landing Page Project Skills Section

      5:00
    • 45. App Landing Page Project Filler Section

      3:05
    • 46. App Landing Page Project Team Section

      9:11
    • 47. App Landing Page Project Background Image Section

      4:37
    • 48. App Landing Page Project About Section

      4:47
    • 49. App Landing Page Project Footer Navbar Section

      12:14
    • 50. Full Bootstrap Project Intro

      2:54
    • 51. Full Bootstrap Project Setup

      10:57
    • 52. Full Bootstrap Project Banner Section

      11:47
    • 53. Full Bootstrap Project Filler Section

      6:33
    • 54. Full Bootstrap Project Skills Section

      7:38
    • 55. Full Bootstrap Project Second Filler Section

      8:47
    • 56. Full Bootstrap Project Projects Section

      6:19
    • 57. Full Bootstrap Project Team Section

      11:25
    • 58. Full Bootstrap Project Basic Cardst Section

      13:17
    • 59. Full Bootstrap Project Background Photo Section

      7:47
    • 60. Full Bootstrap Project Third Filler Section

      8:38
    • 61. Full Bootstrap Project Banner Form Section

      13:41
    • 62. Full Bootstrap Project About Photos Section

      11:18
    • 63. Full Bootstrap Project Section

      11:17
    • 64. Full Bootstrap Project Masonry Section

      11:21
    • 65. Full Bootstrap Project Pricing Cards Section

      10:32
    • 66. Full Bootstrap Project Skills Section

      9:53
    • 67. Full Bootstrap Project Filler Section

      5:05
    • 68. Full Bootstrap Project Projects Section

      4:57
    • 69. Full Bootstrap Project About Section

      7:48
    • 70. Full Bootstrap Project Progress-Bars Section

      13:21
    • 71. Full Bootstrap Project Projects Section

      14:14
    • 72. Full Bootstrap Project Flex Skills Section

      7:24
    • 73. Full Bootstrap Project Checkboxes Section

      8:47
    • 74. Full Bootstrap Project Background Icons Section

      12:46
    • 75. Full Bootstrap Project Accordion Section

      11:40
    • 76. Full Bootstrap Project Social-Background Section

      8:32
    • 77. Full Bootstrap Project Bricks Section

      8:33
    • 78. Full Bootstrap Project Dark Cards Section

      18:05
    • 79. Full Bootstrap Project Card Icons Section

      5:02
    • 80. Full Bootstrap Project Color Blocks Section

      9:24
    • 81. Full Bootstrap Project Banner Photos Section

      12:23
    • 82. Full Bootstrap Project Basic Carousel Section

      3:19
    • 83. Music App Project Intro

      1:39
    • 84. Music App Project Setup

      10:57
    • 85. Music App Project Navbar Section

      18:40
    • 86. Music App Project Top Section

      9:18
    • 87. Music App Project Owl Section

      27:33
    • 88. Music App Project Table Section

      8:45
    • 89. Music App Project Second Owl Section

      2:36
    • 90. Music App Project Second Page Section

      2:23
    • 91. Base Theme Project Intro

      0:56
    • 92. Base Theme Project Setup

      10:57
    • 93. Base Theme Project Banner Section

      10:30
    • 94. Base Theme Project Filler Section

      4:52
    • 95. Base Theme Project Form Section

      7:41
    • 96. Base Theme Project Interests Section

      8:40
    • 97. Base Theme Project Portfolio Section

      20:33
    • 98. Base Theme Project Download Section

      4:48
    • 99. Base Theme Project Footer Section

      6:18
    • 100. Social Theme Project Intro

      1:40
    • 101. Social Theme Project Setup

      10:57
    • 102. Social Theme Project Nav HTML Section

      9:59
    • 103. Social Theme Project Nav CSS Section

      7:16
    • 104. Social Theme Project Banner Section

      7:19
    • 105. Social Theme Project Top HTML Section

      7:48
    • 106. Social Theme Project Top CSS Section

      6:11
    • 107. Social Theme Project Profile HTML Section

      12:52
    • 108. Social Theme Project Profile CSS Section

      6:46
    • 109. Social Theme Project Theme Links Section

      9:51
    • 110. Social Theme Project Tags Section

      4:43
    • 111. Social Theme Project Chat Section

      7:29
    • 112. Social Theme Project Cards HTML Section

      10:04
    • 113. Social Theme Project Cards CSS Section

      6:57
    • 114. Admin Theme Project Intro

      1:20
    • 115. Admin Theme Project Setup

      10:57
    • 116. Admin Theme Project Navbar HTML Section

      19:15
    • 117. Admin Theme Project Navbar CSS Section

      7:36
    • 118. Admin Theme Project Sidebar Section

      7:46
    • 119. Admin Theme Project Cards HTML Section

      7:04
    • 120. Admin Theme Project Cards CSS Section

      4:55
    • 121. Admin Theme Project Charts Section

      9:55
    • 122. Facebook Theme Project Intro

      1:05
    • 123. Facebook Theme Project Setup

      10:57
    • 124. Facebook Theme Project Navbar Html Section

      13:29
    • 125. Facebook Theme Project Navbar CSS Section

      9:26
    • 126. Facebook Theme Project Sidebar Html Section

      8:43
    • 127. Facebook Theme Project Sidebar CSS Section

      3:16
    • 128. Facebook Theme Project Chat Section

      10:30
    • 129. Facebook Theme Project Posts Html Section

      15:19
    • 130. Facebook Theme Project Posts CSS Section

      3:52
    • 131. Agency Theme Project Intro

      3:58
    • 132. Agency Theme Project Setup

      10:57
    • 133. Agency Theme Project Navbar HTML Section

      7:51
    • 134. Agency Theme Project Navbar CSS Section

      7:17
    • 135. Agency Theme Project Banner Html Section

      3:39
    • 136. Agency Theme Project Banner Section Section

      5:18
    • 137. Agency Theme Project Banner After Section

      2:50
    • 138. Agency Theme Project Banner Icons Section

      6:07
    • 139. Agency Theme Project Services Html Section

      6:31
    • 140. Agency Theme Project Services CSS Section

      8:39
    • 141. Agency Theme Project Contact FInal Section

      10:40
    • 142. Agency Theme Project Work Html Section

      8:45
    • 143. Agency Theme Project Work CSS Section

      4:42
    • 144. Agency Theme Project Work Section

      8:59
    • 145. Agency Theme Project About Us Html Section

      9:21
    • 146. Agency Theme Project About Us CSS Section

      3:13
    • 147. Agency Theme Project Projects Html Section

      5:01
    • 148. Agency Theme Project Projects CSS Section

      7:18
    • 149. Agency Theme Project Numbers Section

      11:10
    • 150. Agency Theme Project Team Section

      8:35
    • 151. Agency Theme Project Progress Section

      6:27
    • 152. Agency Theme Project Pricing Html Section

      10:19
    • 153. Agency Theme Project Pricing CSS Section

      9:11
    • 154. Agency Theme Project Quotes Section

      8:35
    • 155. Agency Theme Project Owl Section

      7:34
    • 156. Agency Theme Project Footer Section

      6:46
    • 157. Portfolio Project - intro

      10:51
    • 158. Portfolio Project - setup

      11:17
    • 159. Download bootstrap

      6:24
    • 160. Portfolio Project - icon top

      9:23
    • 161. Portfolio Project - navbar html

      12:53
    • 162. Portfolio Project - navbar css

      16:47
    • 163. Portfolio Project - navbar js functionality

      24:14
    • 164. Portfolio Project - slider section

      27:28
    • 165. Portfolio Project - skills section

      20:42
    • 166. Portfolio Project - modal filler

      27:26
    • 167. Portfolio Project - about progress

      19:31
    • 168. Portfolio Project - projects html isotope

      22:42
    • 169. Portfolio Project - projects css

      13:18
    • 170. Portfolio Project - current project

      17:43
    • 171. Portfolio Project - posts section

      15:25
    • 172. Portfolio Project - contact form section

      14:12
    • 173. Portfolio Project - values section

      13:19
    • 174. Portfolio Project - reviews section

      18:19
    • 175. Portfolio Project - team section

      20:34
    • 176. Portfolio Project - numbers section

      5:59
    • 177. Portfolio Project - footer form

      22:14

About This Class

Bootstrap 4 is latest version of the most popular mobile development framework.In this course we will be learning Bootstrap 4 by creating various projects.If you want to build websites quickly Bootstrap 4  is for you!!!!

All Project Intros are available for preview.

1.Project Nr.1 - Long website using only Bootstrap 4 classes for styling with very minimal css .

2.Project Nr.2 - Simple Portfolio Project. Working with Bootstrap 4 to create portfolio with some CSS.

3.Project Nr.3 - App Website Project. Creating App Landing Page with Bootstrap 4 .

4.Project Nr.4 - Very long website were we will be creating over 30 various sections that you could add to your website. Implementing Bootstrap 4  and CSS Full Throttle!!!!!!

5. Project Nr.5 - Music App Project. Creating mockup music app with Bootstrap 4  and CSS. Also working with our first Jquery plugin. Owl Carousel

6. Project Nr 6 - Bootstrap Base Theme. Creating neat Bootstrap 4  base theme with CSS and Jquery plugin magnific pop-up for gallery purposes.

7. Project Nr 7 - Social Media Theme. Creating Social Media Theme with Bootstrap 4  and LOTS AND LOTS OF CSS.

8. Project Nr 8 - Admin Theme. Creating mockup admin page using Bootstrap 4  and jquery plugins.

9. Project Nr 9 - Facebook Theme. Recreating Facebook Front End with Bootstrap 4 .

10. PROJECT NR 10 -  PUTTING IT ALL TOGETHER BY CREATING LONG MULTIPURPOSE BOOTSTRAP 4  PAGE USING ALL THE KNOWLEDGE OF BOOTSTRAP 4 , CSS, JQUERY,JQUERY PLUGINS. 

11.Project NR 11. Building Portfolio Website

 

171

Students

1

Project

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Report class