This course provides detailed guidance of the web layout design process using the Bootstrap 4 framework.
You’ll begin with an in-depth overview of layout design using Bootstrap 4 framework. Then, you’ll learn to build layouts using the Bootstrap grid, utilizing the Bootstrap rows and responsive columns. Next, you’ll use Bootstrap components like breadcrumb, carousel, card, and jumbotron as well as copy features from one layout and use them in another. Then, you’ll customize a layout with the help of CSS preprocessors using the Koala app. After this, you’ll modularize the layout building process using Angular. You’ll then create Airbnb and Shopify layouts using the knowledge and experience gained in the course.
By the end of this course, you’ll become an expert in creating web layouts using Bootstrap 4 and know about best practices in layout designing.
This course provides detailed guidance of the web layout design process using the Bootstrap 4 framework.
You’ll begin with an i...Show More
WHAT YOU'LL LEARN
A working knowledge of creating web layouts using Bootstrap 4 framework
Familiarity with Bootstrap grids and Bootstrap components, including breadcrumb, carousel, card, and jumbotron
The ability to modularize the layouts using the Angular framework
Hands-on experience of creating layout clones of popular websites like Airbnb and Shopify
A working knowledge of creating web layouts using Bootstrap 4 framework
Show more
Content
2.
Introduction to Bootstrap
8 Lessons
Look at Bootstrap's foundational layout elements like container classes and styling utilities.
3.
Grid in Bootstrap 4
7 Lessons
Work your way through creating responsive Bootstrap 4 layouts using grid, utility classes, and contextual elements.
4.
Components of Bootstrap 4
8 Lessons
Enhance your skills in using Bootstrap 4 components to create responsive, interactive web layouts.
5.
Official Bootstrap Example
6 Lessons
Take a closer look at customizing Bootstrap 4 layouts through practical examples and challenges.
6.
Cloning CSS Theme
6 Lessons
Tackle copying and optimizing CSS, updating layouts, and mastering DevTools for efficient design.
7.
Typography-Focused Layout
15 Lessons
Build on typography-focused layouts in Bootstrap 4 with SCSS, Koala app, and Google Fonts.
8.
Modularize Bootstrap Layouts
11 Lessons
Try out building modular Bootstrap layouts with Angular for improved efficiency and speed.
9.
Optimizing Official Bootstrap's Incline Theme
9 Lessons
Walk through optimizing Bootstrap's Incline theme to enhance web layouts and interactivity.
10.
Airbnb Clone Layout in Bootstrap 4
10 Lessons
Work your way through creating an Airbnb clone layout with Bootstrap 4, emphasizing cards, forms, and responsive design.
11.
Shopify Clone Layout in Bootstrap 4
10 Lessons
Grasp the fundamentals of creating a Shopify clone layout using Bootstrap 4's components.
13.
Appendix
4 Lessons
Follow the process of registering, tracking, publishing, and committing changes to a GitHub repository.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Course Author:
Developed by MAANG Engineers
Trusted by 2.8 million developers working at companies
"These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"
Anthony Walker
@_webarchitect_
"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"
Evan Dunbar
ML Engineer
"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."
Software Developer
Carlos Matias La Borde
"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"
Souvik Kundu
Front-end Developer
"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."
Vinay Krishnaiah
Software Developer
Hands-on Learning Powered by AI
See how Educative uses AI to make your learning more immersive than ever before.
AI Prompt
Code Feedback
Explain with AI
AI Code Mentor
Free Resources
