CSS basics

Create the below layouts using CodePen or another development environment you prefer. Make sure your example can be shared, to make it possible for the owner to verify.

💡 Pay attention to semantic HTML

Step 1 - Layout

Layout 1

Create this responsive layout using CSS and HTML

┌─────────────────────────────────────────────────────────┐                ┌───────────────────┐
│┌───────────────────────────────────────────────────────┐│                │┌─────────────────┐│
││┌───┐                    ┌───┐                    ┌───┐││                ││┌───┐ ┌───┐ ┌───┐││
│││Box│                    │Box│                    │Box│││                │││Box│ │Box│ │Box│││
││└───┘                    └───┘                    └───┘││                ││└───┘ └───┘ └───┘││
│└───────────────────────────────────────────────────────┘│                │└─────────────────┘│
│┌────────┐ ┌────────────────────────────────────────────┐│                │┌─────────────────┐│
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││      Main       ││
││        │ │                                            ││                ││                 ││
││        │ │                                            ││◀──Responsive──▶││                 ││
││Sidebar │ │                                            ││                ││                 ││
││ 300px  │ │                    Main                    ││                ││                 ││
││        │ │                                            ││                │└─────────────────┘│
││        │ │                                            ││                │┌─────────────────┐│
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││     Sidebar     ││
││        │ │                                            ││                ││                 ││
││        │ │                                            ││                ││                 ││
│└────────┘ └────────────────────────────────────────────┘│                │└─────────────────┘│
└─────────────────────────────────────────────────────────┘                └───────────────────┘

Tips:

• Box items can be empty divs with a background color as placeholders.
• Note the fixed width of the Sidebar.

Layout 2

Duplicate Layout 1, and add a fix width Sidebar Right

┌─────────────────────────────────────────────────────────┐                ┌───────────────────┐
│┌───────────────────────────────────────────────────────┐│                │┌─────────────────┐│
││┌───┐                    ┌───┐                    ┌───┐││                ││┌───┐ ┌───┐ ┌───┐││
│││Box│                    │Box│                    │Box│││                │││Box│ │Box│ │Box│││
││└───┘                    └───┘                    └───┘││                ││└───┘ └───┘ └───┘││
│└───────────────────────────────────────────────────────┘│                │└─────────────────┘│
│┌────────┐ ┌──────────────────────────────────┐┌────────┐│                │┌─────────────────┐│
││        │ │                                  ││        ││                ││                 ││
││        │ │                                  ││        ││                ││     Sidebar     ││
││        │ │                                  ││        ││                ││      Left       ││
││        │ │                                  ││        ││                ││                 ││
││        │ │                                  ││        ││                │└─────────────────┘│
││        │ │                                  ││        ││◀──Responsive──▶│┌─────────────────┐│
││Sidebar │ │                                  ││Sidebar ││                ││                 ││
││  Left  │ │               Main               ││ Right  ││                ││      Main       ││
││ 300px  │ │                                  ││ 300px  ││                ││                 ││
││        │ │                                  ││        ││                │└─────────────────┘│
││        │ │                                  ││        ││                │┌─────────────────┐│
││        │ │                                  ││        ││                ││                 ││
││        │ │                                  ││        ││                ││     Sidebar     ││
││        │ │                                  ││        ││                ││      Right      ││
││        │ │                                  ││        ││                ││                 ││
│└────────┘ └──────────────────────────────────┘└────────┘│                │└─────────────────┘│
└─────────────────────────────────────────────────────────┘                └───────────────────┘

Tips:

• Note, the re-flowing in mobile.

Layout 3

Duplicate Layout 2, and add a Sticky Footer:

┌─────────────────────────────────────────────────────────┐                ┌───────────────────┐
│┌───────────────────────────────────────────────────────┐│                │┌─────────────────┐│
││┌───┐                    ┌───┐                    ┌───┐││                ││┌───┐ ┌───┐ ┌───┐││
│││Box│                    │Box│                    │Box│││                │││Box│ │Box│ │Box│││
││└───┘                    └───┘                    └───┘││                ││└───┘ └───┘ └───┘││
│└───────────────────────────────────────────────────────┘│                │└─────────────────┘│
│┌────────┐ ┌──────────────────────────────────┐┌────────┐│                │┌─────────────────┐│
││        │ │                                  ││        ││                ││     Sidebar     ││
││        │ │                                  ││        ││                ││      Left       ││
││        │ │                                  ││        ││                │└─────────────────┘│
││        │ │                                  ││        ││                │┌─────────────────┐│
││Sidebar │ │                                  ││Sidebar ││                ││                 ││
││  Left  │ │               Main               ││ Right  ││◀──Responsive──▶││      Main       ││
││ 300px  │ │                                  ││ 300px  ││                ││                 ││
││        │ │                                  ││        ││                ││                 ││
││        │ │                                  ││        ││                │└─────────────────┘│
││        │ │                                  ││        ││                │┌─────────────────┐│
││        │ │                                  ││        ││                ││     Sidebar     ││
││        │ │                                  ││        ││                ││      Right      ││
│└────────┘ └──────────────────────────────────┘└────────┘│                │└─────────────────┘│
│┌───────────────────────────────────────────────────────┐│                │┌─────────────────┐│
││                     Sticky Footer                     ││                ││  Sticky Footer  ││
│└───────────────────────────────────────────────────────┘│                │└─────────────────┘│
└─────────────────────────────────────────────────────────┘                └───────────────────┘

Tips:

• A sticky footer means even if there is not enough content in the Main container the footer is sticky to the bottom of the screen. When there is a lot of content in the Main container then the footer is pushed down with it.