HTML and CSS Question/Answer

What is the purpose of box-sizing: border-box in your project?

Box-sizing: border-box forces the browser to include an element's padding and border within its specified width and height. It stops elements from unexpectedly expanding when you add padding, making layout math predictable and preventing elements from breaking out of their containers.

How does grid-template-columns: 2fr 1fr work?

The CSS property grid-template-columns: 2fr 1fr; creates a two-column grid where the first column is twice as wide as the second.
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

What is the difference between semantic tags like <main> and <footer> versus normal tags?

Semantic tags (e.g., <main>, <footer>, <article>) and normal

tags both group elements, but semantic tags clearly describe their meaning to both the browser and the developer. tags are "dividers" with no inherent meaning, whereas semantic tags provide context about the content inside them.

Why is vh used instead of px?

vh (Viewport Height) is used instead of px (pixels) to create dynamic, responsive layouts. VW, and VH are mostly used for margins, padding, spacing, and widths/heights. To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.

Difference between padding and margin?

Padding is the space inside the border (between content and border), while margin is the space outside the border (between the element and its neighbors).

Difference between Grid and Flexbox?

CSS Grid and Flexbox are both CSS layout modules, but they are designed for fundamentally different tasks.

GRID LAYOUT:
CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.

FLEXBOX:
The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;.

What are self-closing tags?

Self-closing tags are HTML elements that only require a single tag because they cannot hold text or nested elements. It is also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and concise.

What is the purpose of the meta viewport tag?

This tells the browser to set the width of the viewport to the width of the device and to display the page at its original zoom level. The viewport value for the name attribute of a element gives hints about how the viewport should be sized. If specified, you define viewport-related behaviors using a content attribute in the element as a comma-separated list of one or more values.

References:
developer.mozilla - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
geeksforgeeks - https://www.geeksforgeeks.org/html/what-are-self-closing-tags-in-html/