Flexbox

• Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows
• Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns.

Grid

• Grid is made for two-dimensional layout while Flexbox is for one. This means Flexbox can work on either row or columns at a time, but Grids can work on both.
• Grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex.

Bootstrap

• Bootstrap comes with a set of pre-styled responsive, mobile-first components that possess a definite UI kit.
• Websites created with Bootstraps are known for their responsiveness and flawless design, but the looks are generic and similar.

Tailwind CSS

• Tailwind offers predesigned widgets to build a site from scratch with fast UI development.
• Tailwind CSS uses a set of utility classes to create a neat UI with more flexibility and uniqueness.

The CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The HTML Semantics Tags

The core characteristic of a semantic element is that it clearly communicated its meaning to both the developer and the browser. These elements clearly define its content

HTML Semantic Tag Structure

• header: t defines a header for a web page.
• nav: It defines a container for navigation links.
• section: This defines a section in a web page.
• article: This element contains the main part, containing information about the web page.
• aside: The content is often placed as a sidebar in a document.
• footer: It defines a footer for a document or a section.