Staff Pick

Build Beautiful Websites Faster and Easier Using Bootstrap 4

Andrew Whitworth, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
114 Videos (9h 45m)
    • Course Trailer

      1:14
    • Setup - VS Code/Text Editor

      4:02
    • Setup - Course Files

      4:39
    • Setup - Window Size Tool

      2:02
    • Setup - File Comparisons

      2:29
    • Intro to Bootstrap Playgrounds

      4:22
    • Containers

      4:25
    • Grid - Part 1

      0:51
    • Grid - Part 2

      8:59
    • Grid - Part 3

      7:33
    • Grid Breakpoints - Part 1

      5:38
    • Grid Breakpoints - Part 2

      4:50
    • Grid Breakpoints - Part 3

      7:27
    • Display - Part 1

      5:13
    • Display - Part 2

      7:07
    • Flex - Part 1

      6:53
    • Flex - Part 2

      4:38
    • Flex - Part 3

      10:17
    • Flex - Part 4

      6:41
    • Flex - Part 5

      3:01
    • Flex - Part 6

      4:04
    • Flex - Part 7

      4:37
    • Flex - Part 8

      2:12
    • Typography

      6:33
    • Text Utilities

      5:50
    • Code Styling

      3:40
    • Colors

      6:13
    • Spacing - Part 1

      7:05
    • Spacing - Part 2

      5:51
    • Spacing - Part 3

      4:34
    • Sizing

      5:08
    • Images

      5:02
    • Figures

      2:37
    • Borders

      6:47
    • Tables

      8:54
    • Vertical Align

      1:59
    • Float

      1:35
    • Clearfix

      2:28
    • Screenreaders

      3:05
    • Media Objects

      5:30
    • Alerts

      4:05
    • Badges

      4:03
    • Breadcrumbs

      3:43
    • Buttons - Part 1

      3:12
    • Buttons - Part 2

      5:23
    • Button Group

      4:16
    • Dropdowns - Part 1

      6:04
    • Dropdowns - Part 2

      5:30
    • Dropdowns - Part 3

      2:00
    • Cards - Part 1

      4:35
    • Cards - Part 2

      4:16
    • Cards - Part 3

      4:38
    • Cards - Part 4

      6:05
    • Forms - Part 1

      4:25
    • Forms - Part 2

      5:54
    • Forms - Part 3

      3:19
    • Input Groups

      7:14
    • Navs

      7:10
    • Navbars - Part 1

      7:51
    • Navbars - Part 2

      3:03
    • Position

      3:01
    • Pagination

      3:40
    • Progress Bars

      4:44
    • Carousels

      4:16
    • Collapse

      7:46
    • Tooltips

      1:59
    • Popovers

      3:50
    • Modals

      6:39
    • Scrollspy

      9:35
    • Bootstrap Playgrounds Wrap-up

      0:57
    • Project 1 - Overview

      1:41
    • Project 1 - Overiew v2

      1:41
    • Project 1 - Step 1

      3:40
    • Project 1 - Step 2

      4:25
    • Project 1 - Step 3

      4:43
    • Project 1 - Step 4

      4:33
    • Project 1 - Step 5

      3:23
    • Project 1 - Step 6

      3:16
    • Project 1 - Step 7

      9:42
    • Project 1 - Step 8

      6:02
    • Project 2 - Overview

      1:34
    • Project 2 - Step 1

      7:41
    • Project 2 - Step 2

      6:41
    • Project 2 - Step 3 - Part 1

      3:53
    • Project 2 - Step 3 - Part 2

      4:34
    • Project 2 - Step 4

      5:39
    • Project 2 - Step 5

      7:25
    • Project 2 - Step 6

      6:40
    • Project 2 - Step 7

      4:27
    • Project 3 - Bullseye Overview

      1:54
    • Project 3 - Template - Step 1

      5:32
    • Project 3 - Template - Step 2

      4:22
    • Project 3 - Template - Step 3

      7:06
    • Project 3 - Template - Step 4

      6:55
    • Project 3 - Homepage - Step 1

      6:52
    • Project 3 - Homepage - Step 2

      4:15
    • Project 3 - Homepage - Step 3

      9:41
    • Project 3 - Homepage - Step 4

      7:42
    • Project 3 - Homepage - Step 5

      0:53
    • Project 3 - About Page

      3:13
    • Project 3 - Careers Page

      6:25
    • Project 3 - Contact Page

      9:28
    • Project 3 - Franchising Page

      6:39
    • Project 3 - Locations Page - Part 1

      9:52
    • Project 3 - Locations Page - Part 2

      5:15
    • Project 3 - Rewards Page

      5:34
    • Project 3 - Menu Page - Part 1

      10:48
    • Project 3 - Menu Page - Part 2

      4:26
    • Project 3 - Menu Page - Part 3

      4:59
    • Project 3 - Menu Page - Part 4

      11:22
    • Project 3 - Menu Page - Part 5

      1:33
    • Project 3 - Menu Page - Part 6

      4:51
    • Project 3 - Menu Page - Part 7

      7:19
    • Project 3 - Menu Page - Part 8

      7:30

About This Class

**Take this class for free with Skillshare's offer of 2 free months! https://skl.sh/2Gmm85A**

Building beautiful websites can be difficult because you always have to start from scratch. However, with a toolkit or framework like Bootstrap you don't have to start from scratch each time. You simply decide what you want to build, turn on some classes or options and you are ready to go. 

For this course I have built a custom site called the Bootstrap Playgrounds. Here you can quickly and easily learn how to use Bootstrap (version 4.0.0). After you learn Bootstrap you will build a restaurant themed website or a project of your choosing. Check out the project section for more details.

602c7a53

5 of 5 students recommendSee All

I belong to other similar sites, but this is the first class of its type that I actually learned from. Overall, the quality of the course is very high. That said, there are a few videos missing from the course. However, the teachings leading up to the missing videos gave me the confidence to carry on with the lessons and resolve the issues myself. Plus, the project you work on not only gives you knowledge and experience in using Bootstrap but when completed, it is a great reference that you can use to reinforce what you have learned. All-in-all I would highly recommend this class if you are struggling to learn Bootstrap like I was.
Really great course, explain everything I need and also so nice way to learn it. Bootstrap Playgrounds adorable platform to learn Bootstrap! Thank you Andrew!
Alexandra Yasny

UI/UX Designer & Developer

233

Students

--

Projects

Andrew Whitworth

Full Stack Web Developer