English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 11.5 Hours | 7.76 GB
Master the latest version of Bootstrap (4.1.1) and build 5 real world themes while learning HTML5 semantics & CSS3
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
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
- Learn semantic HTML5 & modern CSS3 techniques
- Learn to compile Sass in the easiest way possible using a GUI
Table of Contents
Intro Getting Started
1 Welcome To The Course
2 What Is Bootstrap Why Use It
3 Whats New In Bootstrap 4
4 Initial Environment Setup
5 Bootstrap Sandbox Setup
Typography Utilities
6 Section Introduction
7 Headings Basic Typography
8 Text Alignment Display
9 Floats Fixed Positions
10 Colors Background
11 Margin Padding Spacing
12 Sizing Borders
13 CSS Breakpoints
CSS Components
14 Section Intro
15 Buttons Button Groups
16 Navbar Navs
17 List Groups Badges
18 Forms Input
19 Input Groups
20 Alerts Progress Bars
21 Tables Pagination
22 Working With Cards
23 Media Objects
24 Jumbotron
Grid System Flexbox
25 Section Introduction
26 Grid System
27 Grid Alignment
28 Flexbox Classes
29 Auto Margin Wrap Ordering
JavaScript Widgets
30 Section Introduction
31 Carousel Slider
32 Collapse Accordion
33 Tooltips
34 Popovers
35 Modals
36 ScrollSpy Smooth Scolling
Simple Theme Boiler Plate Setup
37 Creating The Boiler
Project 1 – LoopLab Social Theme
38 Project Intro
39 Setup Navbar
40 Home Section Area
41 Explore Section Area
42 Create Share Section Areas
43 Footer Contact Modal Menu Smooth Scroll
Project 2 – Mizuxe Book Theme
44 Project Intro
45 Setting Up Sass With Koala
46 Custom Navbar Logo
47 Showcase Primary Color Change
48 Newsletter Boxes
49 About Section With Accordion
50 Authors Area
51 Contact Footer
Project 3 – Glozzom Multi Page Theme
52 Project Intro
53 Showcase With Carousel
54 Home Icons Heading Info Sections
55 Video Section With Autoplay Modal
56 Photo Gallery Newsletter
57 Page Header About Section
58 Icon Boxes Testimonial Slider
59 Services Page With FAQ Accordion
60 Blog Page With Cards
61 Contact Staff Sections
Project 4 – Blogen Admin UI
62 Project Intro
63 Navbar Main Header
64 Add Buttons Modals
65 Finishing The Dashboard
66 Resource Table Pages
67 Details Settings Pages
68 Profile Login Page
Project 5 – Portfoligrid
69 Project Intro
70 Main Header
71 Home Collapse Content
72 Resume Collapse Content
73 Work Collapse Content
74 Contact Collapse Content
Resolve the captcha to access the links!