Bootstrap 4 From Scratch With 5 Projects
4.9 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
766 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 4 From Scratch With 5 Projects to your Wishlist.

Add to Wishlist

Bootstrap 4 From Scratch With 5 Projects

Master Bootstrap 4 and build 5 real world themes while learning HTML5 semantics, CSS3 and Sass
4.9 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
766 students enrolled
Created by Brad Traversy
Last updated 8/2017
English
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 10.5 hours on-demand video
  • 60 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn and create amazing high quality Bootstrap 4 themes and UIs from scratch
  • Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment
  • Create a professional workflow & dev server to build from source and compile Sass
  • Learn semantic HTML5 & modern CSS3 techniques
View Curriculum
Requirements
  • You should have basic knowledge of HTML & CSS
  • You do NOT need to know any Bootstrap 3
Description

This course will literally take you from knowing nothing about Bootstrap 3 or 4 to learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the custom workflow and start the projects. Everything is completely modular!

Custom Bootstrap Sandbox

I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Bootstrap 4 offers including helpers/utilities, components, widgets, flexbox and more.

Bootstrap Starter Pack

Once you get through the sandbox, we will setup the starter pack which I also created for this course. This will give us a real development workflow to compile Bootstrap 4 from source and compile Sass. It will even give us a dev server with autoload. This is what we will use for the 5 projects

5 Real Projects/Themes

We will use the Starter pack to create 5 real world themes including

  1. LoopLap - A social UI Theme
  2. Mizuxe - A Book/Product Showcase Theme
  3. Blogen - A blog admin area UI
  4. Glozzom - A multi page theme with a carousel and some 3rd party scripts
  5. Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget
Who is the target audience?
  • Anyone that wants to learn & master Bootstrap 4 and build real world themes
Students Who Viewed This Course Also Viewed
Curriculum For This Course
74 Lectures
10:18:02
+
Intro & Getting Started
5 Lectures 25:07

In this intro video we will talk about what you can expect from this course. We will also talk about the Bootstrap 4 projects included

Preview 04:45


What's New In Bootstrap 4?
05:08

Initial Environment Setup
06:08

In this video we will setup the custom Bootstrap Sandbox UI that I have created. This sandbox will be used in the next few sections to learn about utilities, components, grids, widgets, etc. Make sure you follow along and unzip the files to your machine

Preview 05:24
+
Typography & Utilities
8 Lectures 40:42



Floats & Fixed Positions
06:18

Colors & Background
04:53

Margin & Padding Spacing
07:31

Height & Width Sizing
02:46

CSS Breakpoints
03:06
+
CSS Components
10 Lectures 01:36:52


Navbar & Navs
18:39

List Groups & Badges
09:42

Forms & Input
12:02

Input Groups
06:05

Alerts & Progress Bars
07:04

Tables & Pagination
05:28

Working With Cards
15:09

Media Objects
05:20
+
Grid System & Flexbox
5 Lectures 30:07
Section Introduction
01:15

Grid System
10:52

Grid Alignment
05:08

Flexbox Classes
09:10

Auto Margin, Wrap & Ordering
03:42
+
JavaScript Widgets
6 Lectures 48:34
Section Introduction
01:52

Carousel Slider
14:54

Collapse & Accordion
05:51

Tooltips
09:34

Popovers
09:21

Modals
07:02
+
Bootstrap Starter Pack Setup
4 Lectures 35:17
Section Introduction
03:10

Install NPM Dependencies
05:00

Creating The Gulpfile.js
15:53

Completing The Starter Pack
11:14
+
Project 1 - LoopLab Social Theme
6 Lectures 52:45
Project Intro
01:15

Setup & Navbar
11:26

Home Section Area
15:32

Explore Section Area
08:07

Create & Share Section Areas
07:47

Footer, Contact Modal & Responsiveness
08:38
+
Project 2 - Mizuxe Book Theme
7 Lectures 01:00:05
Project Intro
01:28

Custom Navbar & Logo
10:01

Showcase & Primary Color Change
11:11

Newsletter & Boxes
07:45

About Section With Accordion
09:21

Authors Area
10:59

Contact & Footer
09:20
+
Project 3 - Blogen Admin UI
7 Lectures 01:13:33
Project Intro
01:52

Navbar & Main Header
12:26

Add Buttons & Modals
15:25

Finishing The Dashboard
10:40

Resource Table Pages
11:08

Details & Settings Pages
10:48

Profile & Login Page
11:14
+
Project 4 - Glozzom Multi Page Theme
10 Lectures 01:50:16
Project Intro
02:05

Navbar & Carousel
16:59

Home Icons Area
08:12

Home Heading & Info Section
10:14

Video Section With Autoplay Modal
10:34

Photo Gallery & Newsletter
13:45

Page Header & About Section
09:40

Icon Boxes & Testimonial Slider
13:03

Services Page
17:50

Blog Page With Cards
07:54
1 More Section
About the Instructor
Brad Traversy
4.7 Average rating
629 Reviews
2,163 Students
2 Courses
Full Stack Web Developer & Programmer

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.