Bootstrap: Web App Development with Bootstrap 4: 2-in-1
- 3 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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
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
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
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
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
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.
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.
- Frontend developers with no prior knowledge of Bootstrap and individuals who want to develop awesomely responsive pages will benefit from this video tutorial.