Bootstrap 4 From Scratch With 5 Projects

Video Description

Master the latest version of Bootstrap (4.0.0 Beta) and build 5 real-world themes while learning HTML5 semantics & CSS3

About This Video

  • Very easy to follow.
  • This course was created for the beta version of Bootstrap but its applicable for the latest version.

In Detail

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! The author has 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. We will use the Starter pack to create 5 real-world themes including:

LoopLap - A social UI Theme

Mizuxe - A Book/Product Showcase Theme

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

Publisher Resources

Download Example Code

Table of Contents

  1. Chapter 1 : Intro & Getting Started
    1. Welcome To the Course 00:04:48
    2. What Is Bootstrap & Why Use It? 00:07:21
    3. What's New In Bootstrap 4? 00:05:23
    4. Initial Environment Setup 00:08:58
    5. Bootstrap Sandbox Setup 00:05:50
  2. Chapter 2 : Typography & Utilities
    1. Section Introduction 00:02:29
    2. Headings & Basic Typography 00:09:14
    3. Text Alignment & Display 00:09:24
    4. Floats & Fixed Positions 00:06:15
    5. Colors & Background 00:09:08
    6. Margin & Padding Spacing 00:10:28
    7. Sizing & Borders 00:06:53
    8. CSS Breakpoints 00:05:26
  3. Chapter 3 : CSS Components
    1. Section Intro 00:02:19
    2. Buttons & Button Groups 00:14:48
    3. Navbar & Navs 00:21:22
    4. List Groups & Badges 00:08:46
    5. Forms & Input 00:13:13
    6. Input Groups 00:08:09
    7. Alerts & Progress Bars 00:09:39
    8. Tables & Pagination 00:09:48
    9. Working with Cards 00:21:16
    10. Media Objects 00:07:55
    11. Jumbotron 00:04:17
  4. Chapter 4 : Grid System & Flexbox
    1. Section Introduction 00:02:10
    2. Grid System 00:16:56
    3. Grid Alignment 00:06:02
    4. Flexbox Classes 00:09:18
    5. Auto Margin, Wrap & Ordering 00:03:40
  5. Chapter 5 : JavaScript Widgets
    1. Section Introduction 00:01:32
    2. Carousel Slider 00:16:11
    3. Collapse & Accordion 00:07:18
    4. Tooltips 00:08:40
    5. Popovers 00:06:38
    6. Modals 00:06:56
    7. ScrollSpy & Smooth Scolling 00:07:34
  6. Chapter 6 : Simple Theme Boiler Plate Setup
    1. Creating the Boiler 00:06:13
  7. Chapter 7 : Project 1 - LoopLab Social Theme
    1. Project Intro 00:02:43
    2. Setup & Navbar 00:07:19
    3. Home Section Area 00:18:51
    4. Explore Section Area 00:09:37
    5. Create & Share Section Areas 00:07:37
    6. Footer, Contact Modal & Responsiveness 00:10:25
  8. Chapter 8 : Project 2 - Mizuxe Book Theme
    1. Project Intro 00:02:47
    2. Setting Up Sass with Koala 00:10:55
    3. Custom Navbar & Logo 00:09:34
    4. Showcase & Primary Color Change 00:06:40
    5. Newsletter & Boxes 00:14:20
    6. About Section with Accordion 00:07:13
    7. Authors Area 00:09:39
    8. Contact & Footer 00:11:27
  9. Chapter 9 : Project 3 - Glozzom Multi Page Them
    1. Project Intro 00:03:20
    2. Showcase with Carousel 00:20:08
    3. Home Icons, Heading & Info Sections 00:11:31
    4. Video Section with Autoplay Modal 00:08:57
    5. Photo Gallery & Newsletter 00:13:15
    6. Page Header & About Section 00:10:42
    7. Icon Boxes & Testimonial Slider 00:10:22
    8. Services Page with FAQ Accordion 00:13:33
    9. Blog Page with Cards 00:09:54
    10. Contact & Staff Sections 00:12:58
  10. Chapter 10 : Project 4 - Glozzom Multi Page Theme
    1. Project Intro 00:03:54
    2. Navbar & Main Header 00:10:20
    3. Add Buttons & Modals 00:15:41
    4. Finishing the Dashboard 00:12:06
    5. Resource Table Pages 00:12:16
    6. Details & Settings Pages 00:11:40
    7. Profile & Login Page 00:12:35
  11. Chapter 11 : Project 5 – Portfoligrid
    1. Project Intro 00:02:13
    2. Main Header 00:17:21
    3. Home Collapse Content 00:06:08
    4. Resume Collapse Content 00:07:18
    5. Work Collapse Content 00:08:16
    6. Contact Collapse Content 00:05:57

Product Information

  • Title: Bootstrap 4 From Scratch With 5 Projects
  • Author(s): Brad Traversy
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789535457