Bootstrap: Web App Development with Bootstrap 4: 2-in-1
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13 students enrolled

Bootstrap: Web App Development with Bootstrap 4: 2-in-1

Start building responsive web applications with Bootstrap 4
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13 students enrolled
Created by Packt Publishing
Last updated 5/2018
English
English [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop an app like Twitter
  • Design a layout in CSS from scratch
  • Design the look and feel of an application
  • Mock Reddit’s response from a file
  • Explore the Client Server process
  • Look into AJAX calls
Course content
Expand all 36 lectures 03:08:12
+ Developing Web Application Using Bootstrap 4
19 lectures 01:35:47

This video will give you an overview about the course.

Preview 02:24

In this video, we are going to first create the code structure for our web application and then add the navigation bar.

  • Add the search input
  • Add the menu options
  • Add tweet button 
Understanding Web Applications
07:12

In this video, we will customize the navigation bar, add some tweaks, and fix viewport issues.

  • Setup custom theme
  • Fix the list navigation bar
  • Add badges 
Customizing Navigation Bar
03:26

In this video, we are going to fix the 3 issues that are present in the navigation bar.

  • Fix the Tweet button
  • Fix the color of the collapse hamburger button
  • Customize the collapsed navigation bar using Bootstrap helpers 
Fixing Issues
03:13

In this video, we are going to create and add cards to our web applications.

  • Create cards
  • Add cards
  • Change the list style
Cards
07:03

In this video, we are going to implement the main content in the middle of the page. This content will hold the feeds while allowing new tweets.

  • Create a nice and friendly feed
  • Add pagination
  • Create the right-hand-side content 
Implementing the Main Content
07:04

Now we will create some components that interact with the user. To start this, we will introduce alerts, which are very common components of every web app.

  • Replace ol.breadcrumb with .alert
  • Create dismissible alerts
  • Customize alerts 
Preview 03:04

Progress bars are very useful in web applications in cases where, you need to wait for an action to be sent to the server while maintaining a feedback for the user that something is being done in the background. In this video, we will create a progress bar.

  • Create another alert that contains a progress bar
  • Apply stripe marks to the progress bar
  • Animate the progress bar 
Progress Bar
03:20

In this video, we will move ahead and build a setting page for our web application.

  • Create another one named settings.html and update the link at the navigation bar
  • Add some content
  • Use pills and add tabs content 
Settings Page
06:55

User content helps reach the audience. So we will be creating user info tab, in this video. In the form, we will have three inputs (name, username, and e-mail) followed by a button to save the changes.

  • Use the .form-horizontal class to make each form input next its label
  • Fill the right column of the web app
  • Add labels and badges 
User Info Tab
06:00

JavaScript plugins. They all come together when we download the framework, and all of them are ready for use when the bootstrap.js file is loaded in HTML. In this video, we will learn about them

Preview 03:14

Modal is a customizable and responsive popup

  • Add modal header and body
  • Create custom modal
Modals
05:43

We will use tooltips for the buttons present in every tweet and add a popover show more information that does not fit in a simple tooltip component.

  • Just add the markup in bold to the tweets in the middle column
  • Add tooltip
  • Add the popover Bootstrap event 
Tooltip and Popover
06:58

The affix plugin aims to toggle the position of an element between fixed and relative, emulating the effect of position.

  • Apply the sticky effect the left #profile element
  • Create some piece of JavaScript code using the events triggered for the plugin. 
Affix
02:57

To finish the web application example, we just need to create another modal when we click on the Messages link at the navigation bar.

  • Create the modal for the Tweet button
  • Create a new button 
Finishing the Web App
03:02

In this video, we will build the navigation bar one last time.

  • Create a <nav> element and inside it, create a .container-fluid and a .row:
  • Create the dashboard title and a refresh button
  • Add navigation search 
Preview 08:55

In this video, we must fill the main content using a fluid layout.

  • Create a single .row and two columns
  • Fill #side-menu with content
  • Add collapse plugin 
Main Fluid Content
06:16

In this video, we will create a set of cards almost similar to the cards made in the web application demo, along with the use of some external plugins for chart generation.

  • Create some common CSS in our main content
  • Round the charts
  • Create a quick statistical card 
Filling the Main Content
06:28

Overloading is another cool feature from these plugins is that they provide animations for charts, making the final result very user friendly. We will be looking at it in this video.

  • Create a <div> to keep the loading
  • Create an overlay element that will appear at the top of all elements 
Overhead Loading
02:33
+ Building a Reddit Clone with Twitter Bootstrap
17 lectures 01:32:25

This video gives an overview of the entire course.

The Course Overview
01:37

In this video we will look at the basics of application

  • Discuss about the application
  • Look at a quiz application
  • Look at the tools required
What We Are Going to Build?
03:34

In this video, we will understand how client-server works

  • Look at the difference between client and server
  • Look at some terminologies
  • Look at client server architecture 
Understanding Client Server Process
07:33

In this video, we will explain how to create mock web page.

  • Take the Reddit JSON
  • Save to the file
  • Store the JSON as mock response in the client side code and show it to the user
Mocking Reddit Response from File
06:59

We have mock data. In this video, we will understand how to show that data to the user.

  • Understand the structure of the JSON data
  • Identify the key elements the user wants to see
  • Write code to automate the process and attach the content to the DOM
Rendering List of Reddits in Home Page
03:53

This video gives an overview of AJAX calls.

  • Understand why we need AJAX
  • How AJAX works
  • Why one should care about AJAX
What Are AJAX Calls?
04:36

In this video, we will write a common script to do the AJAX calls.

  • Understand XHR objects
  • Explain the types of HTTP calls – GET, POST
  • Write a util to make a GET http request in plain JavaScript
Writing a Common util for AJAX Calls
08:03

In this video, we will use our GET API to get real data.

  • Fire GET request to Reddit API
  • Parse the response
  • Bind the response to the UI
Fetching Real Reddit data
07:16

In this video, we will see what exactly promises are.

  • What is promises and why do we need them
  • Understand promises with an example
  • Use fetch promise in chrome browser
Introduction to Promises (ES6)
09:26

In this video, we will understand layouts in web world.

  • See a real world example
  • Understand the definition of layout
  • How to achieve layout that works across all screen devices
Designing Layout in CSS from Scratch
03:38

In this video, we will understand Twitter Bootstrap.

  • Why to use a library
  • See the benefits of using Twitter Bootstrap
  • Use Bootstrap across all devices
Introduction to Twitter Bootstrap
04:52

In this video, we will make it responsive.

  • Understand the grid system and how it works
  • Walkthrough on column and row in bootstrap
  • Apply the col-md and col-xs for our project
Applying the Grid System to Our Reddit Clone
08:53

In this video, we will understand how we make sure our webpage works in all screen devices.

  • Understand the tools in our chrome dev console
  • Use different mobile screen devices
  • Create a new mobile config
Testing the UI across Devices in Chrome Dev Tools
03:07

In this we will lookback on events.

  • What and why about events
  • Explore scroll events
  • How do we handle events
Revisiting Events
02:55

In this video, we will explain how to fetch data when user scrolls down.

  • Understand innerHeight
  • Understand scrollY
  • Understand offsetHeight
Understanding Properties Required for Scroll Events
05:12

In this video, we will make a generic scrolling logic for fetch.

  • Understand Onscroll event
  • Use our properties for getting bottom scroll
  • Put it in action
Abstracting Out the Scrolling Logic
07:15

In this video, we will explain why MVC.

  • Understand Model
  • Understand Controller
  • Understand View
General Introduction to MVC Architecture
03:36
Requirements
  • Programming experience of HTML, CSS, and JavaScript is required
Description

Description

Creating responsive and mobile friendly web applications has become much easier with the new Bootstrap 4 mobile first grid system. It is popular as a front-end framework that offers a wide set of tools from page grids to components that render a web application, all in the best possible way for any device.

This comprehensive 2-in-1 course is step-by-step guide, closely focuses on developing interesting web applications in the most practical way. Learn Bootstraps components and elements, and customize them for your own project. Speed up front-end development and prototyping through real-life examples. Explore the essentials of building up a Reddit home page.

Contents and Overview

This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Developing Web Application Using Bootstrap 4, covers everything you need to know to start building responsive web applications with Bootstrap 4. This course will teach you various examples showing you how to create interesting web applications resembling Twitter using Bootstrap and how to master frontend frameworks. You’ll even use JavaScript plugins in the web application example. The second course, Building a Reddit Clone with Twitter Bootstrap, covers how to design the look and feel of the application and building a Reddit home page. In this course you’ll be introduced to the language itself by building a simple Reddit clone. You’ll learn to use Bootstrap to design your application’s layout, but focus more on JavaScript. Throughout the course, you’ll fetch the Reddit APIs via AJAX calls and show them in the UI using Twitter projects.

By the end of this course, you’ll be able to build responsive web application that looks like Twitter and a dashboard.

About the Authors

  • Silvio Moreto is a developer with more than 7 years' experience with frontend technologies and has created many websites and web applications using the Bootstrap framework. From simple pages to complex ones, he has always used the Bootstrap framework. Silvio is also the creator of the bootstrap-select plugin, this plugin (very popular among the community) replaces a selected element with a Bootstrap button drop-down element. Silvio foresaw that a plugin like this one was missing in the original framework, and could be useful for the community. So he created the plugin, and the community helps him maintain it. Besides this, he is very active in the open-source community, participating in some open-source repository and issue communities, such as Stack Overflow. Also, he finished third in the worldwide Django Dash 2013 challenge.
  • Anto Aravinth is a software engineer with a good knowledge in the development of web applications, primarily in JavaScript and Java/Grails. He is passionate about groovy, Java, Js, and React. He loves to work at startups. He can speak in terms of functional concepts such as closure, currying, and Monads. He is mostly into web development using Java and front-end technologies. He is an open source contributor to ReactJs, Groovy, and Selenium. He has authored Beginning Functional Programming in JavaScript. He was a technical reviewer for React Quickly.

Who this course is for:
  • Frontend developers with no prior knowledge of Bootstrap and individuals who want to develop awesomely responsive pages will benefit from this video tutorial.
  • Emerging web developers who has experience of building static web pages using HTML and CSS, then this video course will guide you to add JavaScript to make your website interactive and dynamic.