DEV Community

Raja B
Raja B

Posted on

Question And Answer

#css #webdev #frontend #beginners

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

1. Purpose of box-sizing: border-box

box-sizing: border-box means: when you set width or height, that size already includes
padding and border.
So if you say width: 300px, the total box (content + padding + border) will be 300px, not bigger. This makes layouts easier and avoids unexpected overflow.

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

2. How grid-template-columns: 2fr 1fr works

In CSS Grid, fr means “fraction of available space”.

grid-template-columns: 2fr 1fr creates 2 columns:

  • First column = 2 parts

  • Second column = 1 part
    Total = 3 parts → first gets 2/3 of the width, second gets 1/3.

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

3. Semantic tags (<main>, <footer>) vs <div>

  • <div>: no meaning, just a generic box. You use it only for layout/styling.

  • Semantic tags like <main>, <header>, <footer>, <nav>: names show what that section is

Search engines, screen readers, and other tools understand your page structure better.
So the browser looks almost the same, but semantic tags improve accessibility, SEO, and code readability.

Why is vh used instead of px?

4. Why use vh instead of px

  • px = fixed size, does not change with screen.

  • vh = “viewport height”. 1vh = 1% of browser window height.

If you write height: 100vh, the element will always match the screen height, so it’s good for full‑screen sections and responsive designs.

Difference between padding and margin?

5. Difference between padding and margin

  • Padding: space inside the element, between content and border. Makes the content “breathe” inside the box.

  • Margin: space outside the element, between this element and other elements.

Shortcut:

  • Padding = “inner space”

  • Margin = “outer space”

Difference between Grid and Flexbox?

6. Difference between Grid and Flexbox

  • Flexbox: one-dimensional → you mainly control layout in one direction (row or column). Great for navbars, buttons in a row, etc.

  • Grid: two-dimensional → you control rows and columns together. Great for full page layouts, dashboards, card grids, etc.

What are self-closing tags?

7. What are self‑closing tags

Self-closing tags are elements that do not have content inside and traditionally don’t need a separate closing tag. Examples:

<img>, <br>, <hr>, <input>, <meta>, <link>.
In HTML5 you usually write them as <img src="..."> (no need for </img>).

What is the purpose of the meta viewport tag?

8. Purpose of the meta viewport tag

Typical code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser on mobile:

  • Page width = device screen width

  • Start at normal zoom (no auto zoom‑out)

  • So the page becomes mobile-friendly and responsive.

Reference:
perplexity.ai

Top comments (0)