O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

9781789535457You 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:

9781789535457LoopLap - A social UI Theme

9781789535457Mizuxe - A Book/Product Showcase Theme

9781789535457Blogen - A blog admin area UI

9781789535457Glozzom - A multi-page theme with a carousel and some 3rd party scripts

9781789535457Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget

Table of Contents

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