What is the purpose of box-sizing: border-box in your project?
The main use of box-sizing: border-box is to make the sizing of Web elements predictable and easy to manage.
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 their width when you add a padding or border to it.
It makes element 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 fr unit stands for a fractional unit, which represents a share of the available space within the grid container.
What is the difference between semantic tags like and versus normal tags?
Semantic tags and normal tags are both group the elements. but semantic tags clearly describe their meaning to both browser and 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 design.
1Px sets an unchangeable fixed size for contents, but 1vh represent exactly 1% of browser window height. this allows elements to automatically scale and adapt to any Screen size from mobile phones to massive desktop monitors.
Difference between padding and margin?
The primary difference between padding and margin is where the space is created relative to an element's border. According to the CSS Box model, padding is the space we create inside the border (between content and border), while margin is the space we create outside the border(between the element and its neighbors).
Difference between Grid and Flexbox?
CSS Grid and Flex are both CSS layout modules, but they are designed for fundamentally different purpose.
Flexbox: is for 1-dimensional layouts (either a Row or a Column). it handles sizing based on the content inside the items.
Grid: is for 2-dimensional layouts (Rows and Columns simultaneously) you can define Rows and Columns and you can place a element exactly in a particular cell. regardless of the HTML order.
What are self-closing tags?
Self-closing tags or void elements are HTML elements that only require a single tag because they cannot hold text or nested elements. they end with a forward slash in old HTML versions, but in modern HTML the slash is optional.
What is the purpose of the meta viewport tag?
The viewport is the user's visible area of a web page.
The viewport varies with the device (will be lot smaller on a mobile phone than on a computer screen).
We should include the following meta element in the head section of all our web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width = device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale = 1.0 part sets the initial zoom level when the page is first loaded by the browser.
Top comments (1)
Please add Reference links