AI Features
Log In
0% completed
All Lessons
Free Lessons (4)
✨Getting Started
Course Overview
Introduction to Bootstrap
Add Bootstrap to an HTML Page
Style the Interface
Container Classes
Containers at Various Resolutions
Chapter Overview
Quick Quiz
Challenge: Couple the Containers
Solution: Couple the Containers
Grid in Bootstrap 4
Rows and Columns
Creating a Grid
Utility Classes
Chapter Overview
Quick Quiz
Challenge: Link Line Puzzle
Solution: Link Line Puzzle
Components of Bootstrap 4
Introduction
Layout with Primary Components
Hero Section
Style the Layout
Chapter Overview
Quick Quiz
Challenge: The Shoeroom
Solution: The Shoeroom
Official Bootstrap Example
Album Layout
Improve the Layout
Chapter Overview
Quick Quiz
Challenge: Wallpaper Factory
Solution: Wallpaper Factory
Cloning CSS Theme
Track the Main CSS File
Copying the Main CSS File
Trim the Unused CSS
Update the Layout
Chapter Overview
Quick Quiz
Project
Creating an Online CV with HTML and CSS
Typography-Focused Layout
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
Chapter Overview
Quick Quiz
Challenge: Coffee Café
Solution: Coffee Café
Modularize Bootstrap Layouts
Introduction to Angular
How Angular Works
Component’s Class File
Structure of an Angular Application
Angular's App Folder Operation
Inspecting the App Folder
Angular 8 Layout Completed
Chapter Overview
Quick Quiz
Challenge: Coffee Café in Angular
Solution: Coffee Café in Angular
Project
Build a Music Player Application Using Angular
Optimizing Official Bootstrap's Incline Theme
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
Chapter Overview
Quick Quiz
Challenge: Styled Watch
Solution: Styled Watch
Airbnb Clone Layout in Bootstrap 4
Planning Our Layout’s Structure
Cards with Input Fields
Datepickers, Dropdowns, and Host Card
The Testimonials Section
Rebuilding the Traveling with Airbnb Section
Home page
Traveling and Footer Section
Chapter Overview
Challenge: Drone Store
Solution: Drone Store
Shopify Clone Layout in Bootstrap 4
The Navbar
Hero Section
Signup Form
Showcase Section
Support Section
Merchant and Signup Section
Footer Section
Chapter Overview
Challenge: Bakery Store
Solution: Bakery Store
Conclusion
What's Next?
Appendix
Register a New Account on GitHub
Track a Repository
Publish the Repository
Committing to the Repository
Home
Courses
Bootstrap 4 Layouts in Depth
Challenge: Link Line Puzzle
Make a layout that resembles a solved link line puzzle.
We'll cover the following...
Problem statement
Build the layout
Problem statement
...