Explore

Front-End Web UI Frameworks and Tools: Bootstrap 4

Approx. 31 hours to complete

Save Course

Go to Course

Course Summary

Bootstrap 4 is a popular CSS framework used for building responsive and mobile-first websites. This course will teach you how to use Bootstrap 4 to create modern and stylish web designs.

Key Learning Points

Learn how to use the latest version of Bootstrap to create responsive web designs
Discover the best practices for building mobile-first websites
Explore the components and utilities that make Bootstrap 4 a powerful web development tool

Job Positions & Salaries of people who have taken this course might have

Front-End Developer
- USA: $75,000 - $115,000
- India: ₹5,00,000 - ₹15,00,000
- Spain: €25,000 - €40,000
Web Designer
- USA: $45,000 - $85,000
- India: ₹2,50,000 - ₹10,00,000
- Spain: €20,000 - €35,000
UI/UX Designer
- USA: $70,000 - $120,000
- India: ₹6,00,000 - ₹20,00,000
- Spain: €30,000 - €45,000

Learning Outcomes

Build responsive and mobile-first web designs using Bootstrap 4
Understand the best practices for developing web designs
Create stylish and modern web designs using Bootstrap 4 components and utilities

Prerequisites or good to have knowledge before taking this course

Basic knowledge of HTML and CSS
Access to a text editor and web browser

Course Difficulty Level

Beginner

Course Format

Online
Self-paced
Video lectures
Hands-on exercises

Similar Courses

CSS Grid Fundamentals
JavaScript and JQuery Essentials
HTML, CSS, and JavaScript for Web Developers

Related Education Paths

Notable People in This Field

Brad Traversy
Kevin Powell

Related Books

Description

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp.

At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Outline

Front-end Web UI Frameworks Overview: Bootstrap
Front-End Web UI Frameworks and Tools: Bootstrap 4: Course Overview
How to Use the Learning Resources
What is Full-Stack Web Development?
Exercise (Video): Setting up Git
Exercise (Video): Basic Git Commands
Exercise (Video): Online Git Repositories
Node.js and NPM
Exercise (Video): Setting up Node.js and NPM
Exercise (Video): Basics of Node.js and NPM
Front-end Web UI Frameworks
Introduction to Bootstrap
Exercise (Video): Getting Started with Bootstrap
Responsive Design
Bootstrap Grid System
Exercise (Video): Responsive Design and Bootstrap Grid System Part 1
Exercise (Video): Responsive Design and Bootstrap Grid System Part 2
Assignment 1 Requirements (Video)
Welcome to Front-End Web UI Frameworks and Tools: Bootstrap 4: Additional Resources
Full Stack Web Development: The Big Picture: Objectives and Outcomes
Full Stack Web Development: Additional Resources
Setting up Your Development Environment: Git and Node: Objectives and Outcomes
Setting up your Development Environment
Exercise (Instructions): Setting up Git
Exercise (Instructions): Basic Git Commands
Exercise (Instructions): Online Git Repositories
Exercise (Instructions): Setting up Node.js and NPM
Exercise (Instructions): Basics of Node.js and NPM
Setting up your Development Environment: Git and Node: Additional Resources
Introduction to Bootstrap: Objectives and Outcomes
Exercise (Instructions): Getting Started with Bootstrap
Introduction to Bootstrap: Additional Resources
Responsive Design and Bootstrap Grid System: Objectives and Outcomes
Exercise (Instructions): Responsive Design and Bootstrap Grid System Part 1
Exercise (Instructions): Responsive Design and Bootstrap Grid System Part 2
Responsive Design and Bootstrap Grid System: Additional Resources
Assignment 1 Resources
Ideation: Objectives and Outcomes
Ideation Report Template
Ideation: Additional Resources

Bootstrap CSS Components
Navigation and Navigation Bar
Exercise (Video): Navbar and Breadcrumbs
Icon Fonts
Exercise (Video): Icon Fonts
User Input
Exercise (Video): Buttons
Exercise (Video): Forms
Bootstrap Tables and Cards
Exercise (Video): Displaying Content: Tables and Cards
Images and Media
Exercise (Video): Images and Media
Alerting Users
Exercise (Video): Alerting Users
Assignment 2: Bootstrap CSS Components
Navigation and Navigation Bar: Objectives and Outcomes
Exercise (Instructions): Navbar and Breadcrumbs
Exercise (Instructions): Icon Fonts
Navigation and Navigation Bar: Additional Resources
User Input: Buttons and Forms: Objectives and Outcomes
Exercise (Instructions): Buttons
Exercise (Instructions): Forms
User Input: Additional Resources
Displaying Content: Tables and Cards: Objectives and Outcomes
Exercise (Instructions): Displaying Content: Tables and Cards
Displaying Content: Additional Resources
Images and Media: Objectives and Outcomes
Exercise (Instructions): Images and Media
Images and Media: Additional Resources
Alerting Users: Objectives and Outcomes
Exercise (Instructions): Alerting Users
Alerting Users: Additional Resources
Assignment 2: Resources
UI Design and Prototyping: Objectives and Outcomes
UI Design and Prototyping Report Template
UI Design and Prototyping: Additional Resources

Bootstrap Javascript Components
Bootstrap JavaScript Components
Tabs, Pills and Tabbed Navigation
Exercise (Video): Tabs
Collapse and Accordion
Exercise (Video): Accordion
Tooltips, Popovers and Modals
Exercise (Video): Tooltips and Modals
Carousel
Exercise (Video): Carousel
Assignment 3: Bootstrap JavaScript Components
Bootstrap JavaScript Components: Objectives and Outcomes
Bootstrap JavaScript Components: Additional Resources
Tabs and Tabbed Navigation: Objectives and Outcomes
Exercise (Instructions): Tabs
Tabs and Tabbed Navigation: Additional Resources
Hide and Seek: Objectives and Outcomes
Exercise (Instructions): Accordion
Hide and Seek: Additional Resources
Revealing Content: Objectives and Outcomes
Exercise (Instructions): Tooltips and Modals
Revealing Content: Additional Resources
Carousel: Objectives and Outcomes
Exercise (Instructions): Carousel
Carousel: Additional Resources
Assignment 3: Resources

Web Tools
Bootstrap and JQuery
Exercise (Video): Bootstrap and JQuery
Exercise (Video): More Bootstrap and JQuery
CSS Preprocessors: Less and Sass
Exercise (Video): Less
Exercise (Video): Scss
Assignment 4: Bootstrap, JQuery and Sass
Building and Deployment
NPM Scripts
Exercise (Video): NPM Scripts Part 1
Exercise (Video): NPM Scripts Part 2
Task Runners
Exercise (Video): Grunt Part 1
Exercise (Video): Grunt Part 2
Exercise (Video): Gulp Part 1
Exercise (Video): Gulp Part 2
Front-End Web UI Frameworks: Bootstrap 4: Conclusions
Bootstrap and JQuery: Objectives and Outcomes
Exercise (Instructions): Bootstrap and JQuery
Exercise (Instructions): More Bootstrap and JQuery
Bootstrap and JQuery: Additional Resources
CSS Preprocessors: Objectives and Outcomes
Exercise (Instructions): Less
Exercise (Instructions): Scss
CSS Preprocessors: Additional Resources
Assignment 4: Additional Resources
Building and Deployment: Objectives and Outcomes
Exercise (Instructions): NPM Scripts Part 1
Exercise (Instructions): NPM Scripts Part 2
Building and Deployment: NPM Scripts: Additional Resources
Building and Deployment: Task Runners
Exercise (Instructions): Grunt Part 1
Exercise (Instructions): Grunt Part 2
Exercise (Instructions): Gulp Part 1
Exercise (Instructions): Gulp Part 2
Building and Deployment: Task Runners: Additional Resources
Front-End Web UI Frameworks and Tools: Bootstrap 4: Conclusions
Project Implementation: Objectives and Outcomes
Final Report Template

Summary of User Reviews

This course on Bootstrap 4 has received positive reviews from users, with many praising its comprehensive and practical approach. The course covers all the necessary topics to create responsive and visually appealing websites using Bootstrap 4. One key aspect that many users thought was good is the hands-on approach taken by the instructors, which enables learners to apply their new knowledge to real-world projects.

Pros from User Reviews

Comprehensive and practical approach to learning Bootstrap 4
Hands-on approach helps learners apply new knowledge to real-world projects
Clear explanations and examples make the course easy to follow
Great for beginners and those with some web development experience
Course materials are well-organized and easy to navigate

Cons from User Reviews

Some users felt that certain sections could have been more in-depth
A few users experienced technical issues with the course platform
A handful of users found the pace of the course to be too slow
The quizzes and assessments could be more challenging
No certificate of completion offered for the free version of the course

Recommended for you

Build an app with ASPNET Core and Angular from scratch

A practical example of how to build an application with ASP. NET Core API (. Net 5. 0) and Angular 10 from start to finish...

Save Course

Learn Bootstrap By Building Projects - Includes Bootstrap 4

Master Responsive Web Development Using Bootstrap 3 and Bootstrap 4 While Building Real Life projects It is easy to learn and super powerful....

Save Course

Angular 11 Masterclass with TypeScript, Firebase, & Material

Master and build reactive Single Page Applications(SPA) from scratch using Angular (formerly "Angular 2" or "AngularJS") ______________________________________________________________________________________________________________________________ As the course progresses, you'll get familiar with:...

Save Course

Front-End JavaScript Frameworks: Angular

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 6. x). This course will use Typescript for developing Angular application....

Save Course