Learning Path: Frontend Web Development with Bootstrap 4
3.8 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Frontend Web Development with Bootstrap 4 to your Wishlist.

Add to Wishlist

Learning Path: Frontend Web Development with Bootstrap 4

Build responsive web and mobile applications with Bootstrap 4
3.8 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Created by Packt Publishing
Last updated 7/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
  • Basic HTML and CSS knowledge is required. Having basic knowledge of Bootstrap will be beneficial.

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.

Who is the target audience?
  • This Learning Path is for developers who want to learn new and advanced features of Bootstrap 4 to build fully-featured responsive applications.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
51 Lectures
Learning Bootstrap 4
26 Lectures 04:07:13

What will the course be about and what will you be learning?

Preview 06:26

What are some of the new features and key differences between Bootstrap 3 and 4?

Bootstrap 4 New Features

How are we going to set up our development environment and what tools will we use?

Setup and Tools

What are CSS limitations and pitfalls?

Preview 06:04

How to use SaSS in our first project?

Setting Up Your First SaSS Project

What are SaSS variables and how to do basic nesting?

Variables and Nesting

What are and how we can use different SaSS options such as mixins, extends, and partials?

Mixins, Extends, and Partials

How to use Bootstrap 4 and SaSS together?

Preview 06:47

How to get started with using Bootstrap 4?
Adding an Example Starter Page

How to get started with custom Bootstrap 4 development?
Creating Our First Bootstrap

How can we use our own CSS/SaSS code to override default Bootstrap 4 styling?
Adding Personality with Overrides

What is the Bootstrap grid system?
Preview 03:11

How to get started with the Bootstrap 4 grid system?

Using the Grid Layout

How to create complex layouts with Bootstrap 4 grid?
Adding Nested Grids and Complex Layouts

How to create a responsive website with Bootstrap 4 grid system?
Going Mobile with the Bootstrap Grid

How to get started with Bootstrap forms?

Preview 14:32

How to create a sign in page for our project?
Creating Our Sign-In Page

How to build table layouts using Bootstrap?

Bootstrap and Tables

How to create a pricing page for our project?
Creating Our Pricing Page

How to use Bootstrap 4 modals?
Preview 13:20

How to use Bootstrap 4 popovers and tooltips?

Popovers and Tooltips

How to use Bootstrap 4 carousels?

How to use Bootstrap 4 dropdowns?


How to publish our project and use code management tools?
Preview 10:43

How to become a better developer?

Bootstrap Best Practices

What to learn next after the course?
Where to Go from Here?
Bootstrap 4 Projects
25 Lectures 02:26:36

This video provides an overview of the entire course.

Preview 02:08

Users may have no prior knowledge to Bootstrap and thus may not understand the basic concepts of this framework and what it adds.
What Is Bootstrap?

This video seeks to inform the users on various new features of Bootstrap 4, of which they may have no prior knowledge. The introduction of these features will help the user understand where these components will become useful in the forthcoming projects.
Broad Overview of New Features of Bootstrap 4

Users unfamiliar with Bootstrap won't know how to get started with the framework. This video will help lay the base for downloading and setting up Bootstrap ready for our projects.

Installing Bootstrap 4

In order to navigate throughout the social media platform, we require a main menu and main heading to display the corresponding section.
Preview 08:01

Bootstrap’s grid system can be quite complex. Users deep-diving into Bootstrap won't understand how it works and the required syntax. Using the grid system in the context of a project will help understand how to accurately use it.

Utilizing the Bootstrap Grid System

We need a way to display our data that is both modular and can be customized to multiple datasets.
Building the Foundation Blocks of Our Content

Our social platform has no place to input or view any social statuses and content. Adding a status submit input and various content blocks will solve this.

Social Feed Content

User messages don’t have a place within the current UI. We need a way to display various message data that the user may have.

Preview 07:03

We need to be able to view the profile page with appropriate emphasis on the individual user we are viewing. We need to create a customizable header for a profile page.
Building the Profile Page

We require a method to display mixed media types within the profile page. Using a masonry grid system will help display this content.
Completing the Profile Page

We need to display both the login and registration forms/information on the same screen, but only show what the user needs to see.

Preview 03:58

Many users can access the web page; we need a way to authenticate who they are.

Login Screen

The user may not have an account already and thus will need a form to register.

Registration Screen

Some user inputs are quite clear on its requirements or what it will do if pressed and so on.
Alerts, Tooltips, and Popovers

Being new to Bootstrap, its component structure, its dependencies, and methods in which you build, users may face many issues that could troubleshoot if they knew how.

Preview 05:37

Having established a core understanding of Bootstrap, users will need a quick reference to some of the best practices to align their newly found skills.

Best Practices

We need to display the content for the music library in meaningful ways through content alignment and hierarchy.

Preview 03:55

A lot of user interactivity needs to be covered in the header. We need a way to display this with minimal room and maximize the ease of use when accessing these controls.

The information required to be displayed with each song (song name, album, duration, and date) requires an efficient and compact way to be displayed to the end user.
Table List View

The user will be able to navigate and manipulate the state of the song whilst viewing the song’s progress.

Progress Bars and Song Navigation

Written content can be minified by a usual icon as a visual language to provide context and display actions to the end user. We must keep in mind screen readers and accessible devices.

Adding Icons

Users may require to customize and extend Bootstrap in various different ways.
Preview 06:48

Sometimes, there is a need to extend Bootstrap with further capabilities beyond what is provided.
Third-Party Integrations

Without a high level of understanding, users are unable to Build Bootstrap UI without documentation or instructions.

About the Instructor
Packt Publishing
3.9 Average rating
7,282 Reviews
52,111 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.