Bootstrap 4 From Scratch With 5 Projects (2018)

Posted By: ParRus

Date: 19 Oct 2018 16:11:03

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 simple boiler theme 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.

5 Real Projects/Themes

We will create 5 real world themes including. These projects are completely open source and you are free to use them anywhere.

LoopLap - A social UI Theme
Mizuxe - A Book/Product Showcase Theme (Sass Project)
Blogen - A blog admin area UI
Glozzom - A multi page theme with a carousel and some 3rd party scripts
Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget

Content

Intro & Getting Started:

Welcome To The Course 04:47
What Is Bootstrap & Why Use It? 07:20
What's New In Bootstrap 4? 05:23
Initial Environment Setup 08:58
Bootstrap Sandbox Setup 05:50
–

Typography & Utilities:

Section Introduction 02:28
Headings & Basic Typography 09:14
Text Alignment & Display 09:23
Floats & Fixed Positions 06:15
Colors & Background 09:08
Margin & Padding Spacing 10:28
Sizing & Borders 06:53
CSS Breakpoints 05:26
–

CSS Components:

Section Intro 02:18
Buttons & Button Groups 14:48
Navbar & Navs 21:21
List Groups & Badges 08:45
Forms & Input 13:12
Input Groups 08:09
Alerts & Progress Bars 09:39
Tables & Pagination 09:47
Working With Cards 21:16
Media Objects 07:54
Jumbotron 04:17
–

Grid System & Flexbox:

Section Introduction 02:09
Grid System 16:56
Grid Alignment 06:01
Flexbox Classes 09:18
Auto Margin, Wrap & Ordering 03:40
–

JavaScript Widgets:

Section Introduction 01:31
Carousel Slider 16:10
Collapse & Accordion 07:17
Tooltips 08:39
Popovers 06:38
Modals 06:56
ScrollSpy & Smooth Scolling 07:34
–

Simple Theme Boiler Plate Setup:

Creating The Boiler 06:13
–

Project 1 - LoopLab Social Theme:

Project Intro 02:42
Setup & Navbar 07:18
Home Section Area 18:51
Explore Section Area 09:37
Create & Share Section Areas 07:36
Footer, Contact Modal & Menu Smooth Scroll 10:24
–

Project 2 - Mizuxe Book Theme:

Project Intro 02:46
Setting Up Sass With Koala 10:55
Custom Navbar & Logo 09:34
Showcase & Primary Color Change 06:40
Newsletter & Boxes 14:20
About Section With Accordion 07:12
Authors Area 09:39
Contact & Footer 11:27
–

Project 3 - Glozzom Multi Page Theme:

Project Intro 03:20
Showcase With Carousel 20:07
Home Icons, Heading & Info Sections 11:30
Video Section With Autoplay Modal 08:57
Photo Gallery & Newsletter 13:15
Page Header & About Section 10:42
Icon Boxes & Testimonial Slider 10:21
Services Page With FAQ Accordion 13:32
Blog Page With Cards 09:54
Contact & Staff Sections 12:57
–

Project 4 - Blogen Admin UI:

Project Intro 03:53
Navbar & Main Header 10:20
Add Buttons & Modals 15:41
Finishing The Dashboard 12:06
Resource Table Pages 12:16
Details & Settings Pages 11:39
Profile & Login Page 12:35
-

Project 5 - Portfoligrid:

Project Intro 02:13
Main Header 17:20
Home Collapse Content 06:07
Resume Collapse Content 07:18
Work Collapse Content 08:15
Contact Collapse Content 05:56

also You can watch my other last: Programming-posts

Screenshots

Exclusive eLearning Videos ParRus-blog ← add to bookmarks