Layout and Menus - DIV and CSS layout, inline menus, responsive design concepts - One Line Questions
1.
When creating a dropdown menu that appears on hover, what CSS pseudo-class is typically used? —
:hover
2.
A common breakpoint in responsive design might be represented by a CSS media query like: —
@media screen and (max-width: 600px)
3.
When creating an inline menu, what is the typical parent element containing the menu items? —
<ul> or <ol>
4.
Which HTML element is crucial for responsive design, allowing the browser to set the page's dimensions and scaling? —
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
5.
Which HTML element is specifically designed for navigation links? —
<nav>
6.
To make a menu accessible on touch devices, what interaction might replace a simple `:hover` effect? —
A `click` event handler using JavaScript
7.
What does the term 'responsive design' refer to in web development? —
A design that adapts its layout to different screen sizes and devices
8.
In the context of responsive design, what is a 'breakpoint'? —
A specific screen width at which the CSS layout changes
9.
Which HTML structure is most semantically appropriate for a primary navigation menu? —
An unordered list (`<ul>`) containing list items (`<li>`) with anchor tags (`<a>`)
10.
How can you create an inline menu using HTML and CSS? —
By styling `<a>` elements within a `<ul>` or `<ol>` with `display: inline-block;` or `float: left;`
11.
In Flexbox, what does `justify-content: center;` do? —
Centers items horizontally along the main axis
12.
Which CSS property is used to control the visual presentation of elements within a `<div>` container? —
display
13.
What is the advantage of using CSS Grid over floats for complex page layouts? —
CSS Grid is simpler and requires less code for complex layouts
14.
What is a 'mobile-first' approach in responsive design? —
Designing for mobile devices first and then adding styles for larger screens
15.
In CSS Grid, what defines the structure of rows and columns? —
grid-template-rows and grid-template-columns
16.
Which CSS property is used to control the order of flex items visually, independent of their order in the HTML source? —
order
17.
Which CSS property allows flex items to wrap onto multiple lines if they don't fit on one line? —
flex-wrap
18.
Which of the following is NOT a valid value for `justify-content` in Flexbox? —
align-center
19.
Which CSS property is used to create a two-dimensional layout system for web pages, allowing for rows and columns? —
Grid
20.
Which CSS property is useful for creating flexible grids that automatically adjust column widths? —
display: grid
21.
Which CSS property is essential for creating layouts where items are aligned along a single axis, either horizontally or vertically? —
Flexbox
22.
What CSS layout model is specifically designed for arranging items in rows and columns, providing powerful control over alignment and distribution? —
Flexbox Layout
23.
What CSS property is used to define the gaps between grid rows and columns? —
grid-gap
24.
Which `display` value allows an element to behave like an inline element but maintain block-level properties like width and height? —
inline-block
25.
What is the purpose of the `rem` unit in CSS, especially in responsive design? —
It is relative to the root element's (`<html>`) font size
26.
What is the role of `box-sizing: border-box;` in responsive design? —
It makes padding and border included in the element's total width and height
27.
What does `overflow: hidden;` on a container element do? —
It hides any content that extends beyond the element's boundaries
28.
Which CSS property is the main axis for Flexbox layout? —
flex-direction
29.
In CSS, what does `display: block;` typically do to an element? —
Causes it to take up the full width available and start on a new line
30.
What CSS property is often used to remove default padding from `<ul>` and `<ol>` elements when creating navigation menus? —
padding: 0;
31.
What is a common issue when using `float` for layout and how is it addressed? —
Parent containers collapse; addressed with `clear: both;` or a clearfix hack
32.
If you want a navigation menu to be sticky (remain visible at the top as the user scrolls), what CSS property is commonly used? —
position: sticky;
33.
Which CSS unit is often recommended for font sizes in responsive design to allow users to adjust text size in browser settings? —
em or rem
34.
Which CSS unit is often preferred for fluid layouts in responsive design because it scales relative to the viewport size? —
vw (viewport width)
35.
What is the default value for `flex-direction`? —
row
36.
To create a horizontal navigation bar, what CSS approach is commonly applied to list items (`<li>`) within an unordered list (`<ul>`)? —
Set `float: left;` or `display: inline-block;` on `<li>`
37.
When styling a list-based inline menu, what is a common practice to remove default bullet points? —
Set `list-style-type: none;` on the `<ul>` or `<ol>`
38.
Consider a `<div>` with `width: 50%;`. In a responsive context, what happens when the viewport width decreases? —
The `div`'s width shrinks proportionally to 50% of the new, smaller viewport width
39.
What is the effect of `display: inline;` in CSS? —
The element flows with surrounding text and only takes up as much width as necessary
40.
What does `width: 100%;` on an element typically ensure in a responsive layout? —
The element will take up the full available width of its parent container
41.
When using `flex-wrap: wrap;`, what happens to items that don't fit on the main axis? —
They wrap onto the next line
42.
What is the primary benefit of using semantic HTML elements like `<nav>`? —
They improve accessibility and SEO by providing structural meaning
43.
What is the purpose of `align-items` in Flexbox? —
To control the alignment of flex items along the cross axis
44.
What is the primary purpose of the `<div>` element in HTML? —
To group other HTML elements for styling or scripting purposes
45.
What are CSS Media Queries primarily used for in responsive design? —
To apply different CSS rules based on device characteristics like screen width
46.
What is the primary goal of responsive design in terms of user experience? —
To ensure optimal viewing and interaction experience across a wide range of devices
47.
Consider a responsive layout where a sidebar and main content area are side-by-side on large screens but stack vertically on small screens. Which CSS technique is most suitable for this? —
Using CSS Grid or Flexbox with media queries
48.
In CSS Grid, how do you assign an item to a specific grid area? —
Using the `grid-area` property with a predefined area name
49.
Which CSS property controls the stacking order of positioned elements? —
z-index