course

Bootstrap 5: Layout basics

4 students
Course updated 25 July 2023
Course Bootstrap 5: Layout basics
$49 per month
for all Hexlet's courses
Sign up
  • In-browser editor for exercises
  • Permanent access to theory
  • Asynchronous learning

Included in the course

10 lessons (video or text)
7 exercises in the IDE
23 quizzes
Assistance in Discussions on the website
Access to other courses of the our platform

What you'll learn

  • Use a 12-column grid mechanism
  • Work with text and tables using Bootstrap's features
  • Use standard components
  • Apply the built-in utilities when creating a template
  • Create your components

Description

This course focuses on Bootstrap 5, one of the most popular frameworks for layout designers. Its versatility allows you to create complex layouts quickly. Built-in adaptability and accessibility mechanisms remove a lot of coders' problems. This course explains how Bootstrap works: mesh, adaptivity, and utilities. You'll learn how to create your components using Bootstrap's built-in mechanisms.

Course program

Estimated time: 9 hours
  • 1

    Introduction

    Getting to know the Bootstrap framework and exploring the course outline
  • 2

    Why Bootstrap

    Learning about the areas of use of Bootstrap and its pros and cons
  • 3

    Bootstrap installation

    Learning about the different ways to add Bootstrap to a page and the tools to do so

    quiz

  • 4

    Grid

    Introducing the concept of grids and container types in Bootstrap

    quiz

    exercise

  • 5

    Adaptability

    Learning about the principles of adaptability in Bootstrap

    quiz

    exercise

  • 6

    Working with texts

    Exploring options for working with text, RFS, and the default project fonts in Bootstrap

    quiz

    exercise

  • 7

    Tables

    Learning how to work with tables and table accessibility using Bootstrap's features

    quiz

  • 8

    Components

    Learning about Bootstrap components and how they work

    quiz

    exercise

  • 9

    Creating a custom component

    Develop a custom quote component using Bootstrap features

    exercise

  • 10

    Utilities

    Learning to work with utilities and create custom utilities using standard Bootstrap 5 tools

    quiz

    exercise

  • 11

    Do it yourself

    Some additional tasks to help you consolidate the theory you've learned
  • 12

    Additional resources

    Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.

#
Challenge
completion rate

Recommended program

profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
new
Developing web applications with Django
10 months
from scratch
under development
Start at any time