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 Videos (1d 5h 5m)
    • Course Introduction

      6:30
    • Bootstrap Tutorial - intro colors typography

      17:57
    • Bootstrap Tutorial -container

      6:29
    • Bootstrap Tutorial - screen size

      3:35
    • Bootstrap Tutorial - grid

      17:26
    • Bootstrap Tutorial - margin padding width

      10:08
    • Bootstrap Tutorial - bootstrap flex

      9:54
    • Only Bootstrap Project -Intro

      9:36
    • Only Bootstrap Project - Project Setup

      12:35
    • Download Bootstrap

      6:24
    • Only Bootstrap Project - Container

      9:41
    • Only Bootstrap Project - container fluid

      11:32
    • Only Bootstrap Project - first section

      18:42
    • Only Bootstrap Project - second section

      11:00
    • Only Bootstrap Project - first grid

      6:44
    • Only Bootstrap Project - second grid

      5:03
    • Only Bootstrap Project - sreen sizes

      9:23
    • Only Bootstrap Project - screen sizes continued

      4:50
    • Only Bootstrap Project - emmet crash course

      11:34
    • Only Bootstrap Project - header section

      10:44
    • Only Bootstrap Project - skills section

      19:22
    • Only Bootstrap Project -about section

      16:47
    • Only Bootstrap Project - projects section

      10:40
    • Only Bootstrap Project -team section

      15:39
    • Only Bootstrap Project -first carousel

      11:17
    • Only Bootstrap Project - filler section

      8:19
    • Only Bootstrap Project - blog section

      4:31
    • Only Bootstrap Project -contact

      23:12
    • Only Bootstrap Project -review section

      8:45
    • Only Bootstrap Project -progress section

      10:51
    • Only Bootstrap Project - pricing section

      10:18
    • Only Bootstrap Project -footer section

      11:56
    • Only Bootstrap Project -footer section

      13:26
    • Portfolio Project Intro

      1:40
    • Portfolio Project Setup

      10:57
    • Portfolio Project Banner Section

      9:00
    • Portfolio Project Skills Section

      7:19
    • Portfolio Project Filler Section

      3:33
    • Portfolio Project Photos Section

      4:20
    • Portfolio Project Footer Navbar Section

      14:46
    • App Landing Page Project Intro

      3:26
    • App Landing Page Project Setup

      10:57
    • App Landing Page Project Banner Section

      7:36
    • App Landing Page Project Skills Section

      5:00
    • App Landing Page Project Filler Section

      3:05
    • App Landing Page Project Team Section

      9:11
    • App Landing Page Project Background Image Section

      4:37
    • App Landing Page Project About Section

      4:47
    • App Landing Page Project Footer Navbar Section

      12:14
    • Full Bootstrap Project Intro

      2:54
    • Full Bootstrap Project Setup

      10:57
    • Full Bootstrap Project Banner Section

      11:47
    • Full Bootstrap Project Filler Section

      6:33
    • Full Bootstrap Project Skills Section

      7:38
    • Full Bootstrap Project Second Filler Section

      8:47
    • Full Bootstrap Project Projects Section

      6:19
    • Full Bootstrap Project Team Section

      11:25
    • Full Bootstrap Project Basic Cardst Section

      13:17
    • Full Bootstrap Project Background Photo Section

      7:47
    • Full Bootstrap Project Third Filler Section

      8:38
    • Full Bootstrap Project Banner Form Section

      13:41
    • Full Bootstrap Project About Photos Section

      11:18
    • Full Bootstrap Project Section

      11:17
    • Full Bootstrap Project Masonry Section

      11:21
    • Full Bootstrap Project Pricing Cards Section

      10:32
    • Full Bootstrap Project Skills Section

      9:53
    • Full Bootstrap Project Filler Section

      5:05
    • Full Bootstrap Project Projects Section

      4:57
    • Full Bootstrap Project About Section

      7:48
    • Full Bootstrap Project Progress-Bars Section

      13:21
    • Full Bootstrap Project Projects Section

      14:14
    • Full Bootstrap Project Flex Skills Section

      7:24
    • Full Bootstrap Project Checkboxes Section

      8:47
    • Full Bootstrap Project Background Icons Section

      12:46
    • Full Bootstrap Project Accordion Section

      11:40
    • Full Bootstrap Project Social-Background Section

      8:32
    • Full Bootstrap Project Bricks Section

      8:33
    • Full Bootstrap Project Dark Cards Section

      18:05
    • Full Bootstrap Project Card Icons Section

      5:02
    • Full Bootstrap Project Color Blocks Section

      9:24
    • Full Bootstrap Project Banner Photos Section

      12:23
    • Full Bootstrap Project Basic Carousel Section

      3:19
    • Music App Project Intro

      1:39
    • Music App Project Setup

      10:57
    • Music App Project Navbar Section

      18:40
    • Music App Project Top Section

      9:18
    • Music App Project Owl Section

      27:33
    • Music App Project Table Section

      8:45
    • Music App Project Second Owl Section

      2:36
    • Music App Project Second Page Section

      2:23
    • Base Theme Project Intro

      0:56
    • Base Theme Project Setup

      10:57
    • Base Theme Project Banner Section

      10:30
    • Base Theme Project Filler Section

      4:52
    • Base Theme Project Form Section

      7:41
    • Base Theme Project Interests Section

      8:40
    • Base Theme Project Portfolio Section

      20:33
    • Base Theme Project Download Section

      4:48
    • Base Theme Project Footer Section

      6:18
    • Social Theme Project Intro

      1:40
    • Social Theme Project Setup

      10:57
    • Social Theme Project Nav HTML Section

      9:59
    • Social Theme Project Nav CSS Section

      7:16
    • Social Theme Project Banner Section

      7:19
    • Social Theme Project Top HTML Section

      7:48
    • Social Theme Project Top CSS Section

      6:11
    • Social Theme Project Profile HTML Section

      12:52
    • Social Theme Project Profile CSS Section

      6:46
    • Social Theme Project Theme Links Section

      9:51
    • Social Theme Project Tags Section

      4:43
    • Social Theme Project Chat Section

      7:29
    • Social Theme Project Cards HTML Section

      10:04
    • Social Theme Project Cards CSS Section

      6:57
    • Admin Theme Project Intro

      1:20
    • Admin Theme Project Setup

      10:57
    • Admin Theme Project Navbar HTML Section

      19:15
    • Admin Theme Project Navbar CSS Section

      7:36
    • Admin Theme Project Sidebar Section

      7:46
    • Admin Theme Project Cards HTML Section

      7:04
    • Admin Theme Project Cards CSS Section

      4:55
    • Admin Theme Project Charts Section

      9:55
    • Facebook Theme Project Intro

      1:05
    • Facebook Theme Project Setup

      10:57
    • Facebook Theme Project Navbar Html Section

      13:29
    • Facebook Theme Project Navbar CSS Section

      9:26
    • Facebook Theme Project Sidebar Html Section

      8:43
    • Facebook Theme Project Sidebar CSS Section

      3:16
    • Facebook Theme Project Chat Section

      10:30
    • Facebook Theme Project Posts Html Section

      15:19
    • Facebook Theme Project Posts CSS Section

      3:52
    • Agency Theme Project Intro

      3:58
    • Agency Theme Project Setup

      10:57
    • Agency Theme Project Navbar HTML Section

      7:51
    • Agency Theme Project Navbar CSS Section

      7:17
    • Agency Theme Project Banner Html Section

      3:39
    • Agency Theme Project Banner Section Section

      5:18
    • Agency Theme Project Banner After Section

      2:50
    • Agency Theme Project Banner Icons Section

      6:07
    • Agency Theme Project Services Html Section

      6:31
    • Agency Theme Project Services CSS Section

      8:39
    • Agency Theme Project Contact FInal Section

      10:40
    • Agency Theme Project Work Html Section

      8:45
    • Agency Theme Project Work CSS Section

      4:42
    • Agency Theme Project Work Section

      8:59
    • Agency Theme Project About Us Html Section

      9:21
    • Agency Theme Project About Us CSS Section

      3:13
    • Agency Theme Project Projects Html Section

      5:01
    • Agency Theme Project Projects CSS Section

      7:18
    • Agency Theme Project Numbers Section

      11:10
    • Agency Theme Project Team Section

      8:35
    • Agency Theme Project Progress Section

      6:27
    • Agency Theme Project Pricing Html Section

      10:19
    • Agency Theme Project Pricing CSS Section

      9:11
    • Agency Theme Project Quotes Section

      8:35
    • Agency Theme Project Owl Section

      7:34
    • Agency Theme Project Footer Section

      6:46
    • Portfolio Project - intro

      10:51
    • Portfolio Project - setup

      11:17
    • Download bootstrap

      6:24
    • Portfolio Project - icon top

      9:23
    • Portfolio Project - navbar html

      12:53
    • Portfolio Project - navbar css

      16:47
    • Portfolio Project - navbar js functionality

      24:14
    • Portfolio Project - slider section

      27:28
    • Portfolio Project - skills section

      20:42
    • Portfolio Project - modal filler

      27:26
    • Portfolio Project - about progress

      19:31
    • Portfolio Project - projects html isotope

      22:42
    • Portfolio Project - projects css

      13:18
    • Portfolio Project - current project

      17:43
    • Portfolio Project - posts section

      15:25
    • Portfolio Project - contact form section

      14:12
    • Portfolio Project - values section

      13:19
    • Portfolio Project - reviews section

      18:19
    • Portfolio Project - team section

      20:34
    • Portfolio Project - numbers section

      5:59
    • 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

 

100

Students

--

Projects

  • --
  • 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