The common difference between CSS Grid and Flexbox is that flexbox was designed for layout in one dimension - either a row or a column. And grid was designed for two-dimensional layout - rows and columns at the same time.
The main purpose of using media queries is that it's allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
CSS Box Model is a module of CSS. that's working on the rectangular boxes — by calculate their padding and margin that are generated for elements.
The Semantic tag in HTML is a meaningfull tags. means it's clearly describe their meaning in a human and machine-readable way.
Examples of Non-Semanthic HTML tags:
< div id="nav" >< /div >
< div class="header">< /div >
Examples of Semanthic HTML tags:
< nav id="nav" >< /nav >
< header class="header">< /header >