Learning Path: Bootstrap: The Complete Guide to Bootstrap 4
0.0 (0 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.
3 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Bootstrap: The Complete Guide to Bootstrap 4 to your Wishlist.

Add to Wishlist

Learning Path: Bootstrap: The Complete Guide to Bootstrap 4

Take your web development skills to the next level by building powerful and responsive websites with Bootstrap 4
0.0 (0 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.
3 students enrolled
Created by Packt Publishing
Last updated 8/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build dynamic website interfaces with new features in Bootstrap and SASS
  • Explore the new features in Bootstrap 4 and modify your tools to develop web pages
  • Delve into the best practices for dealing with your web designs
  • Build mobile responsive web applications using Bootstraps flexible grid system
  • See how to use Bootstrap 4 to develop multi-page websites
  • Master styling, navigation, and alerts, and responsive queries
  • Build highly customizable web interfaces
  • Bring your web pages to life using Bootstrap jQuery plugins
View Curriculum
Requirements
  • Basic knowledge of HTML and CSS
  • Basic knowledge of JavaScript
  • No prior knowledge of Bootstrap
Description

Quite often when building various web applications, you will face the need to build beautiful and responsive websites in a small time frame. Bootstrap 4 helps alleviate the pain by defining sophisticated and refined user inputs and web components ready for your use. If you want to learn how to quickly get your projects up to speed with the most popular front-end framework, then go for this Learning Path.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

The highlights of this Learning Path are:

  • Explore the new features available in Bootstrap and SASS
  • Craft refined and complex web applications that adapt to various user and browser requirements
  • Polish your applications and make them available online

Let’s get on this exciting web development journey together! This Learning Path starts with introducing you to both Bootstrap and Bootstrap 4. You will be learn how to get started building dynamic website interfaces with new features available in Bootstrap and SASS. Use SASS to write all of your stylings, organize your website into mobile responsive grids, and write advanced components using the Cards feature.

Moving ahead, you will go work on various projects that include building out the structure and design of a social media platform, comprehensive login and registration forms, and finally a music library application. Each project will provide you with a chance to use some of the new Bootstrap 4 components in the greater context of the Bootstrap framework.

By the end of this Learning Path, you will have a thorough understanding of the Bootstrap framework, and be able to build highly customizable and optimized websites.

About the Author:

We have combined the best works of the following esteemed authors to ensure that your learning journey is smooth:

Vedran Cindrić has been a frontend developer for around 15 years now and has been using Bootstrap exclusively for the last 4 years. He has run a web development company called "Flip. hr" for 5 years now, and he has worked on a lot of interesting projects for clients all around the world. He has also written some articles on Bootstrap.

Aaron Vanston is a frontend developer and product specialist based in Melbourne, Australia, specializing in usability and user experience design on the web. He 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.

Laurence Svekis is a highly experienced web developer with over 18 years of web development experience. He has worked on various large and small projects, and has been an instructor for several Bootstrap projects on a number of platforms, reaching a large number of students and professionals. His web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP, and MySQL. Laurence is passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Who is the target audience?
  • This Learning Path is for developers who want to gain expertise in creating real-world responsive websites with Bootstrap. You need to be familiar with the basics of HTML, CSS, and JavaScript.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
107 Lectures
12:54:16
+
Learning Bootstrap
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
07:43

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

Setup and Tools
14:01

What are CSS limitations and pitfalls?

Preview 06:04

How to use SaSS in our first project?

Setting Up Your First SaSS Project
08:46

What are SaSS variables and how to do basic nesting?

Variables and Nesting
09:40

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

Mixins, Extends, and Partials
08:19

How to use Bootstrap 4 and SaSS together?

Preview 06:47

How to get started with using Bootstrap 4?

Adding an Example Starter Page
05:48

How to get started with custom Bootstrap 4 development?

Creating Our First Bootstrap
09:48

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

Adding Personality with Overrides
14:14

What is the Bootstrap grid system?

Preview 03:11

How to get started with the Bootstrap 4 grid system?

Using the Grid Layout
07:00

How to create complex layouts with Bootstrap 4 grid?

Adding Nested Grids and Complex Layouts
09:38

How to create a responsive website with Bootstrap 4 grid system?

Going Mobile with the Bootstrap Grid
13:11

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
07:48

How to build table layouts using Bootstrap?

Bootstrap and Tables
09:19

How to create a pricing page for our project?

Creating Our Pricing Page
08:30

How to use Bootstrap 4 modals?

Preview 13:20

How to use Bootstrap 4 popovers and tooltips?

Popovers and Tooltips
12:45

How to use Bootstrap 4 carousels?

Carousels
12:16

How to use Bootstrap 4 dropdowns?

Dropdowns
09:23

How to publish our project and use code management tools?

Preview 10:43

How to become a better developer?

Bootstrap Best Practices
08:26

What to learn next after the course?

Where to Go from Here?
09:35

Test Your Knowledge
5 questions
+
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?
03:45

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
04:56

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
06:32

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

Building Our Header and Navigation
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
06:03

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
07:19

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
09:33

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.

Message View
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
05:15

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

Creating Tabbed Content
09:49

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

Login Screen
03:58

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
05:21

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

Registration Screen
05:02

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

Alerts, Tooltips, and Popovers
06:54

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.

Troubleshooting
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
06:05

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

Building the Layout
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.

Navigation
06:09

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
04:48

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
04:10

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
05:15

Users may require to customize and extend Bootstrap in various different ways.

Variable File
06:48

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

Third-Party Integrations
06:37

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

Documentation
05:33

Test Your Knowledge
5 questions
+
Mastering Bootstrap 4
56 Lectures 06:20:27

This video provides an overview of the entire course.

Preview 07:26

Source online for Bootstrap source files

Getting Bootstrap – Download - CDN
06:59

Using Bootstrap within your web applications

Adding Bootstrap to Web Projects
07:07

Find out more about using Bootstrap benefits of Bootstrap

What is Bootstrap?
06:42

Basics of how Bootstrap works.

Bootstrap Containers
05:51

How to work more efficiently to build websites quickly

Creating a Bootstrap Template
05:36

Positioning of content making it respond to different size screens.

The Grid System
08:37

Focus on columns and why it's important to understand how they work.

Bootstrap Columns and Rows
10:27

How to quickly style headings and highlight visible content within your web project

Bootstrap Jumbotron
04:22

Going beyond HTML with Bootstrap typography, making typically styling easy with Bootstrap.

Bootstrap Typography
12:17

Alignment of text and text options

Text Styles
09:45

New Bootstrap 4 component for grouping content together

Bootstrap Cards
10:31

Visual images and what can be down with bootstrap

Bootstrap Images
06:27

In this video we are going to look at the class Nav

Bootstrap Nav
06:28

How to use Bootstrap classes to make buttons

Bootstrap Buttons
05:02

more advanced options for Bootstrap buttons

Bootstrap Button Grouping
06:51

How to make your text appear and get presented within your web application.

Bootstrap Alignments and Styling
05:20

Making website design easy and quick with Bootstrap

Bootstrap Other Components
08:33

In this section we are going to go have a look at Glyphicons and Font Awesome

Glyphicons and Font Awesome
05:52

In this video we are going to learn about Bootstrap Alerts

Bootstrap Alerts
05:40

In this lesson we are going to revisit Pagination in Bootstrap

Bootstrap Pagination
04:36

In this video we are going to look at the class Nav

Bootstrap Nav
09:43

In this video we are going to look at what we can do with Bootstrap Navbars

Bootstrap Navbars
07:28

In this video we are going to look at Responsive Media Queries

Responsive Media Queries
07:57

In this section we are going to introduce you to form elements and form classes

Forms working with Field
06:37

In this video we are going to learn about Bootstrap Forms and how we can use them

Bootstrap Forms
16:31

In this lesson we are going to look at Bootstrap Responsive Utilities

Bootstrap Responsive Utilities
04:14

In this section we are going to highlight some of the top resources online.

Useful Web Resources for Better Building
09:43

In this lesson we are going to look at Bootstrap Template resources

Bootstrap Template Resource
03:45

To help create maintainable code, the SOLID principles of software design can be used as a tool to help ensure our codebase stays in a testable and robust state.

Bootstrap Templates
03:51

What jQuery is and how to get it into web projects for dynamic capability.

Setting up jQuery
05:16

Where to get jQuery and how to bring it into your projects

CDN and what can be done with jQuery
10:33

Simple jQuery functional elements

Bootstrap ToolTips
05:55

Learn how to effectively create popup messages with Bootstrap Modals

Bootstrap 4 Modal
08:06

Create image carousels with classes and attributes

Bootstrap 4 Carousel
08:29

Bootstrap 4 Carousel options
04:13

Bootstrap and adding active classes to current screen locations.

Bootstrap 4 ScrollSpy
05:16

Learn about getting started to build a website with Bootstrap

Planning Design Website Concept
03:02

Starting off to create a website

Creating Template and Container
03:03

How to get started with your web project before you have the assets

Add Placeholder Content and Sections
04:11

How to add navigation to your website

Create Navbar
06:24

Why content area planning is important and how to do it

Create the Content Area
08:58

Website review process to fine tune your site

Update and Tweak Layout
04:55

Web resources that you can use to supplement Bootstrap

Add custom Styling and Fonts
10:31

Web users are expecting more, they are looking for dynamic capabilities within website.

Create Functionality Using JQuery
06:55

Steps and resources for starting a web project

Planning Design Website Concept
06:22

Starting with a template and building a website from scratch

Creating Template and Container
04:56

Design your website without assets ready

Adding placeholder Content and Sections
05:01

Using navigation bars design patterns for web users

Creating Navbar
05:32

how to prepare for content

Creating the Content Area
06:53

Use Bootstrap to style amazing contact forms

Creating Contact Form
07:09

Create visually styled content using Bootstrap

Creating Portfolio page
06:51

Prepare your website and check it for tweaks and updates

Updating and Tweak Layout
02:57

Customize your website to look the way you want

Adding Custom Styling and Fonts
03:48

Do more with your website make it dynamic and interactive

Creating Functionality Using JQuery
07:46

What Bootstrap can do to make it easy to add cool stuff to your website

Adding in Bootstrap jQuery Components
07:07

Test Your Knowledge
5 questions
About the Instructor
Packt Publishing
3.9 Average rating
7,196 Reviews
51,513 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.