Take this
course

Software Development / Web Development

Building a Responsive Application with Bootstrap

Create stunning web pages with intricate designs for mobiles and the web using Bootstrap

Description

About This Video

  • Combine Bootstrap with third-party plugins and external code to create your own personalized themes and templates instead of using one from the web
  • Create advanced web page designs that are mobile-friendly using applied tools and best practices
  • Implement Bootstrap 4’s newest components and migrate your existing project to the current version.


In Detail

Bootstrap discards the myth of ""the creative type” and enforces the belief that even you are capable of design. It is easy to learn, open source, customizable, and coupled with an incredible support from the community; in short it is truly worth your time! This course walks you through the fascinating arena of web development, giving you a grid-based framework that’s easy to work on and saves the time that goes into CSS framework development.


You will see how to create a ""PACKT CMS’ application, which will have a custom CMS layout with amazing real-time features. This will enable PACKT to create new courses, and users to view all the data in an advanced table format and get a dashboard overview of all the courses, views, subscriptions, and so on.


We'll start with a dedicated video that explains the intricacies of the different components in our application, including hacks and gotchas to master bootstrap code. We will spice up our application by using Bootstrap JavaScript plugins such as modals, tooltips, popovers, alerts, and tabs. We will also use third-party JavaScript plugins for various elements you’ll be relying on day to day.


You'll find out how to migrate your existing application to Bootstrap 4 seamlessly. You'll add the newly introduced components from Bootstrap 4 in your current application and see what’s changed from Bootstrap 3. This course takes you from zero to hero, leaving you with the know-how required to build your own real-world project.

Full details

Curriculum

  • Getting Started with Bootstrap
    The Course Overview
    This video will offer an overview of the course.
    4:01
    Setting Up Our Project
    This video will show how to configure your project properly. • Download a custom version of bootstrap • Create the proper folder and file structure • We include Bootstrap files in our project and create a boilerplate HTML
    8:41
    Creating a Login Page
    This video will show how to create our first page—the login page. • Create a custom container for your page • Create your page and form elements in HTML • Transform your form using Bootstrap
    8:37
    Working with Forms in Bootstrap
    This will show how to use Bootstrap forms. • Use various Bootstrap form layouts • Use Bootstrap form helper classes • Mix Bootstrap form layouts and Bootstrap grid layouts
    8:49
    Designing Efficient Forms
    This video will show how to use forms and Bootstrap forms to provide a better user and form experience. • Learn some bad form practices • Learn how to make your form better and more efficient • Get some suggestions for developing good UI for forms
    8:52
  • Layout Basics
    Building Layouts with Bootstrap
    This video will show you the different Bootstrap grid systems. It will also show you how to build a Bootstrap layout using some tricks and tips. • Create a simple grid from Bootstrap and make it responsive for mobiles and tablets • We add a background color to our page and use container fluid so that the rows and columns use 100% of the screen space • We build layouts with Bootstrap for our page using some interesting tricks and tips
    9:08
    Custom Layouts and Bootstrap
    This video will show you how to use the custom width layouts with Bootstrap and how to hack the Bootstrap grid. • Create two new selectors and apply padding on both the left and the right. Use max width in a custom container class to make it responsive. • Learn responsive design through the example of a web page with the sidebar area and content area • Use popular jQuery and JavaScript plugins with Bootstrap layouts
    9:47
    Creating a Dashboard Page
    In this video, we will be creating our dashboard page using the techniques learned so far. • We create a custom layout for our CMS interface • We use different Bootstrap components covered in earlier sections in our CMS • We create a responsive base for our layout
    8:48
  • Working with Tables
    Creating Our First Table View
    This video will show you to create your first basic table layout for CMS and how to transform it using Bootstrap. • Learn how to integrate tables in custom layouts • Add a class “table” to the table and see the magic of Bootstrap unfold • Learn how to use Bootstrap styles and add interesting functionalities to the table
    9:39
    Tables and Bootstrap
    This video will teach you how to use classes to change the look and feel of a table. We will add pagination and make our page responsive. • Change the look and feel of the tables by tweaking Bootstrap classes • Add responsiveness to your tables • Learn how to the use the Pagination component
    7:12
    Advanced Tables
    The video will show you how to use DataTables and how to apply it to the existing table and customize it. • Learn how to use DataTables plugin with Bootstrap tables • Learn how to customize the default DataTables options
    13:27
  • Working with JS and Responsive design
    Working with Bootstrap JS plugins
    Bootstrap has over a dozen custom JS plugins and this video shows you how to bring Bootstrap component’s to life using them. • Learn how to use the most popular Bootstrap JS plugins • Hack the plugins to get more use out of them • Learn how to customize the look and feel of the plugins
    15:22
    Most Popular Third-party JS plugins
    This video covers the gems and must-have plugins that can make you site a joy to use. • Discover the newly introduced third party plugins • Use the custom JS plugins in our application • Learn to customize the look and feel of the plugins
    21:06
    Making Our App More Responsive
    Bootstrap is the most popular framework for developing responsive applications and this video shows just that. • Learn how to use Bootstrap for responsive design • Learn how to write your own responsive code • Optimize the responsive experience for your application
    13:55
  • Migrating to Bootstrap 4
    Difference between Bootstrap 3 and Bootstrap 4
    This video gives you the basics of Bootstrap 4 and sets you up for migration. • Learn what’s new in Bootstrap 4 • See the main differences between the two versions • Learn how to use Bootstrap 4 for production ready applications
    6:51
    Migrating Our App to Bootstrap 4
    This video shows you how to upgrade from Bootstrap version 3 to version 4, emphasizing on major changes • Migrate your current app from Bootstrap 3 to Bootstrap 4 • Tweak the HTML and CSS structure of your application to avoid breaking existing code • Learn how to run your application in Bootstrap 4
    18:19
    Using New Bootstrap 4 Components
    This videos covers the newly introduced components and how they are replaced in the application • Learn the newly introduced features in Bootstrap 4 Components • Learn how to use the Card Component in your application • Know the various layouts for card components
    9:29
    Final Steps
    This video summarizes the section as a whole and gives you a bag of important resources that will aid your further study in Bootstrap 4 • Check the useful developer tools and bookmark all the important resources discussed in the video for further study. • See some best practices that can be useful in your future experiences with Bootstrap
    8:31

Skills

  • Bootstrap
  • Responsive Web Design

Similar Courses

More Courses by this Instructor