The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.

Flexbox, gives you more flexibility while working on either element (row or column). HTML markup and CSS will be easy to manage in this type of scenario. GRID gives you more flexibility to move around the blocks irrespective of your HTML markup.

The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements.

The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:

• Content: This property is used to displays the text, images, etc, that can be sized using the width & height property.

• Padding: This property is used to create space around the element, inside any defined border

• Border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.

• Margin: This property is used to create space around the element ie., around the border area.

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table> , and <article> - Clearly defines its content.

In HTML there are some semantic elements that can be used to define different parts of a web page: