Styling tools

Question 1

Which is more responsive, Grid or Flex?

Answer 1

Neither is strictly “more responsive” — it depends on your layout needs. For most responsive web designs, using them together is the best approach.

Flexbox shines in linear, simpler layouts and components where content flows in one direction.

Grid is generally better for complex, multi-axis layouts that need to adapt precisely on different screen sizes.

Question 2

What are the most popular UI frameworks?

Answer 2

1. Bootstrap
2. Tailwind CSS
3. Material-UI (MUI)
4. Ant Design
5. Semantic UI

Question 3

Name common CSS selectors that use the div tag and their purpose.

Answer 3

1. Type Selector: e.g. div {}. Selects all <div> elements on the page.
2. Class Selector: eg div.container {}. Selects <div> elements with a specific class.
3. ID Selector: e.g. div#header {}. Selects the single <div> with a specific id.
4. Descendant Selector: e.g. div p {}. Selects all <p> tags that are descendants of any <div>.
5. Child Selector: e.g. div > p {}. Selects <p> elements that are immediate children of a <div>.
6. Adjacent Sibling Selector: e.g. div + p {}. Selects the first <p> element directly after a <div>.
7. General Sibling Selector: e.g. div ~ p {}. Selects all <p> siblings after a <div>, not necessarily immediate.
8. Attribute Selector: e.g. div[class^=”box-“] {}. Selects <div>s based on attribute patterns (e.g., class names starting with “box-“).
9. Pseudo-class Selector: div:hover {}. Applies styles to <div> when user interacts (e.g., hover, focus).