Learning Path: Frontend Web Development With Bootstrap 4

Build responsive web and mobile applications with Bootstrap 4

What you'll learn

Learn to build dynamic website interfaces with new features in Bootstrap and SASS

Learn to incorporate custom fonts, font awesome icons, and chrome developer tools for your applications

Learn to structure your pages using Bootstrap grid system

Understand how to use card interface to recreate interfaces

Understand how to configure and get started with your own customized version of Bootstrap

Work with modular and customized blocks of content called “cards” to display various text and images

Design responsive and accessible tables, and create a refined and accessible user experience

Explore third-party integration to extend Bootstrap's component and visual structure through icons to complex form validation

Requirements

Basic HTML and CSS knowledge is required. Having basic knowledge of Bootstrap will be beneficial.

Description

Are you are a web developer who wants to build enterprise-level websites, web, and mobile applications efficiently with Bootstrap 4? If yes, this Learning Path is for you.
Bootstrap is a free and open-source front-end web framework for designing websites, web, and mobile applications. It is a combination of HTML, CSS, and JavaScript code designed to build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.
Sass Instead of LESS. Brand New Bootstrap Cards. New Reboot Module. Opt-in Flexbox Support.
With regard to Bootstrap, we have the above-mentioned features to our advantage.
This Learning Path starts with introducing the new features of Bootstrap 4 and its installation. Then, you will be introduced to Sass and will learn to set up your first Sass project. Also, you will be building an application called Neighborhood, which enables others to discover local businesses in a location. While building this application, you will use Sass to write all of your stylings, organizing your website into mobile responsive grids, and writing advanced components using the cards feature. Moving ahead, you will learn to create larger projects. These projects include building out the structure and design of a social media platform, comprehensive login and registration forms, and finally a music library application.
By the end of this Learning Path, you will have a strong understanding of the new features of Bootstrap 4 with hands-on experience of working with larger projects.
About the Authors Vedran Cindrić has been a front-end developer for around 15 years now and has been using Bootstrap exclusively for the last 4 years. He has worked on a lot of interesting projects for clients all around the world. He really enjoys writing great code, optimizing websites, and creating awesome responsive experiences.
Aaron Vanston is a front-end developer and product specialist based in Melbourne, Australia, specializing in usability and user experience design on the web. Aaron has a multidisciplinary background ranging from digital marketing to web application development. He is currently exploring his passion for web development through his own web development studio and start-ups/ web development teams within Melbourne. In the past, Aaron has developed a range of tutorials based on design and web development including various Bootstrap written tutorials.

Overview

Section 1: Learning Bootstrap 4

Lecture 1 The Course Overview

Lecture 2 Bootstrap 4 New Features

Lecture 3 Setup and Tools

Lecture 4 Limitations of CSS

Lecture 5 Setting Up Your First SaSS Project

Lecture 6 Variables and Nesting

Lecture 7 Mixins, Extends, and Partials

Lecture 8 Setting Up Bootstrap with SaSS

Lecture 9 Adding an Example Starter Page

Lecture 10 Creating Our First Bootstrap

Lecture 11 Adding Personality with Overrides

Lecture 12 Grids – A Conceptual Overview

Lecture 13 Using the Grid Layout

Lecture 14 Adding Nested Grids and Complex Layouts

Lecture 15 Going Mobile with the Bootstrap Grid

Lecture 16 Bootstrap Forms

Lecture 17 Creating Our Sign-In Page

Lecture 18 Bootstrap and Tables

Lecture 19 Creating Our Pricing Page

Lecture 20 Modals

Lecture 21 Popovers and Tooltips

Lecture 22 Carousels

Lecture 23 Dropdowns

Lecture 24 Publishing Your Page

Lecture 25 Bootstrap Best Practices

Lecture 26 Where to Go from Here?

Section 2: Bootstrap 4 Projects

Lecture 27 The Course Overview

Lecture 28 What Is Bootstrap?

Lecture 29 Broad Overview of New Features of Bootstrap 4

Lecture 30 Installing Bootstrap 4

Lecture 31 Building Our Header and Navigation

Lecture 32 Utilizing the Bootstrap Grid System

Lecture 33 Building the Foundation Blocks of Our Content

Lecture 34 Social Feed Content

Lecture 35 Message View

Lecture 36 Building the Profile Page

Lecture 37 Completing the Profile Page

Lecture 38 Creating Tabbed Content

Lecture 39 Login Screen

Lecture 40 Registration Screen

Lecture 41 Alerts, Tooltips, and Popovers

Lecture 42 Troubleshooting

Lecture 43 Best Practices

Lecture 44 Building the Layout

Lecture 45 Navigation

Lecture 46 Table List View

Lecture 47 Progress Bars and Song Navigation

Lecture 48 Adding Icons

Lecture 49 Variable File

Lecture 50 Third-Party Integrations

Lecture 51 Documentation

This Learning Path is for developers who want to learn new and advanced features of Bootstrap 4 to build fully-featured responsive applications.