Step of Creating Header Section
1. Start With HTML
We are using FlexBox for making responsive headers. So, we need to write code according to desktop and mobile devices.
Flexbox is the collection of items in a row and column layout.
We are taking two div header and header items. We are using flexbox on header items. And we are taking background colour on header div. In a header item, we have header left and header right item.
2. Design With CSS
We can apply flexbox on header items. And there are required flex properties on many items.
Media Queries is the way of making a responsive design on multiple devices. And we can change every HTML element in any devices size.
FlexBox Common Properties
- gap: 1rem;
There we are also using media queries properties for making responsive on multiple devices. It is used to change elements in any devices size. The main fundamental of making responsive design is only using flexbox.