It seems that your browser is not supported by our application.

Challenge: Couple the Containers

Solution: Couple the Containers

Grid in Bootstrap 4

7 Lessons

Work your way through creating responsive Bootstrap 4 layouts using grid, utility classes, and contextual elements.

Challenge: Link Line Puzzle

Solution: Link Line Puzzle

Components of Bootstrap 4

8 Lessons

Enhance your skills in using Bootstrap 4 components to create responsive, interactive web layouts.

Introduction

Layout with Primary Components

Challenge: The Shoeroom

Solution: The Shoeroom

Official Bootstrap Example

6 Lessons

Take a closer look at customizing Bootstrap 4 layouts through practical examples and challenges.

Challenge: Wallpaper Factory

Solution: Wallpaper Factory

Cloning CSS Theme

6 Lessons

Tackle copying and optimizing CSS, updating layouts, and mastering DevTools for efficient design.

Track the Main CSS File

Copying the Main CSS File

Typography-Focused Layout

15 Lessons

Build on typography-focused layouts in Bootstrap 4 with SCSS, Koala app, and Google Fonts.

Working with SCSS

Compiling SCSS with the Koala App

The Mockup and the Starter Layout

Navigation Bar

Update the Navbar

Embed Fonts into the Layout

Structure the Layout

Style the Layout

Adding Images and Text

Polishing Up Our Layout

Improving the Typography

Structure of an Angular Application

Challenge: Coffee Café

Solution: Coffee Café

Modularize Bootstrap Layouts

11 Lessons

Try out building modular Bootstrap layouts with Angular for improved efficiency and speed.

Introduction to Angular

How Angular Works

Component’s Class File

Angular's App Folder Operation

Inspecting the App Folder

Angular 8 Layout Completed

Challenge: Coffee Café in Angular

Solution: Coffee Café in Angular

Optimizing Official Bootstrap's Incline Theme

9 Lessons

Walk through optimizing Bootstrap's Incline theme to enhance web layouts and interactivity.

Building the Landing Page

Adding a Background Image

An Image is Worth a Thousand Words

Adding the Carousel Example's Main Element

Upgrade the Layout

Planning Our Layout’s Structure

Challenge: Styled Watch

Solution: Styled Watch

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.

Cards with Input Fields

Datepickers, Dropdowns, and Host Card

The Testimonials Section

Rebuilding the Traveling with Airbnb Section

Home page

Traveling and Footer Section

Merchant and Signup Section

Challenge: Drone Store

Solution: Drone Store

11.

Shopify Clone Layout in Bootstrap 4

10 Lessons

Grasp the fundamentals of creating a Shopify clone layout using Bootstrap 4's components.

Footer Section

Committing to the Repository

Challenge: Bakery Store

Solution: Bakery Store

12.

Conclusion

1 Lessons

Reflect on the skills to create dynamic, responsive web layouts using Bootstrap 4.

What's Next?

13.

Appendix

4 Lessons

Follow the process of registering, tracking, publishing, and committing changes to a GitHub repository.

Track a Repository

Publish the Repository

Course Author

Ajdin Imsirovic

Trusted by 2.6 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

beginner

20 hours

Course

The Complete Beginner’s Guide to CSS

Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

beginner

4 hours 55 mins

Course

The Complete Guide to jQuery

Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

beginner

6 hours

Web Development: Unraveling HTML, CSS, and JavaScript

20 hour

The Complete Beginner’s Guide to CSS

4 hour 55 min

The Complete Guide to jQuery

6 hour

Related Courses and Skill Paths

Course

Mastering Angular Reactive Forms

The course is completely focused on practical scenarios and real-life project challenges that will teach step-by-step how to fully master Angular forms.

beginner

6 hours

Course

Angular: Designing and Architecting Web Applications

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

beginner

20 hours

Course

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

beginner

16 hours 40 mins

Mastering Angular Reactive Forms

6 hour

Angular: Designing and Architecting Web Applications

20 hour