In Flexbox, the flex-________ property allows an item to grow or shrink to fit the space available in the flex container.
- sizing
- growshrink
- flexsize
- basis
The correct option is 4. The flex-basis property in Flexbox allows an item to specify its initial size and can grow or shrink to fit the available space in the flex container.
How does the proper use of the 'alt' attribute in HTML improve accessibility in web design?
- alt="Description of the image"
- aria-label="Image description"
- data-alt="Image"
- title="Image"
The 'alt' attribute in HTML is vital for accessibility as it provides alternative text for images. Screen readers use this text to describe images to users with visual impairments. Using descriptive and accurate 'alt' text ensures that all users, including those using assistive technologies, can understand the content.
The CSS methodology ________ focuses on the modularity of CSS by breaking down styles into smaller, reusable parts.
- BEM
- ITCSS
- OOCSS
- SMACSS
BEM (Block Element Modifier) is a methodology that focuses on modularity in CSS, breaking down styles into smaller, reusable parts.
A major challenge in cross-browser testing is ensuring that the layout and functionality remain consistent, especially in ________ browsers.
- Mobile
- Legacy
- Modern
- Text-only
The correct option is Legacy. Cross-browser testing is challenging, especially in legacy browsers, as they may not support modern CSS features, leading to inconsistent layouts and functionality.
SVG images can be manipulated using CSS if they are included in the HTML as a/an ________ tag.
The correct answer is
When trying to create a tooltip widget that appears above an element when hovered, which property and value pair is crucial to ensure that the tooltip does not affect the layout of surrounding elements when it is positioned?
- position: absolute, z-index: 1;
- display: none;
- visibility: hidden;
- opacity: 0;
The crucial property-value pair is position: absolute, z-index: 1;. This positions the tooltip absolutely, and the z-index ensures it appears above other elements. The other options either hide the tooltip completely or affect the layout of surrounding elements.
In Tailwind CSS, how does the approach of "utility-first" differ from traditional CSS frameworks like Bootstrap?
- Utilizes a large set of single-purpose utility classes that directly apply styles in the HTML, promoting flexibility and customization.
- Uses predefined components and a fixed set of class names for styling, limiting customization.
- Tailwind and Bootstrap follow the same "utility-first" approach.
- Tailwind only supports utility classes for typography, not for layout and spacing.
Tailwind CSS embraces a "utility-first" approach, offering a vast set of single-purpose utility classes that can be applied directly in the HTML. This approach provides flexibility and allows developers to customize styles efficiently. In contrast, traditional frameworks like Bootstrap rely on predefined components with fixed class names, which can limit customization options.
Bootstrap and Tailwind are examples of what kind of tools in web development?
- CSS preprocessors
- Front-end frameworks
- JavaScript frameworks
- Server-side scripting tools
Bootstrap and Tailwind are popular front-end frameworks that provide pre-designed components and styles, simplifying the development of responsive and visually appealing web interfaces.
To ensure text remains visible during webfont load, font-display: _________; should be used.
- swap
- fallback
- optional
- block
The correct option is 'a) swap'. Using font-display: swap; ensures that the text is displayed immediately with a system font while the custom font is loading. This helps maintain a good user experience.
You are optimizing a website for international audiences with diverse visual capabilities. Which CSS approach is most effective in ensuring that the website remains usable and accessible across different regions and user needs?
- Ignoring accessibility features and enhancements
- Implementing responsive design and media queries
- Restricting the use of alternative text for images
- Using fixed-width layouts and pixel-based font sizes
The most effective CSS approach for optimizing a website for international audiences with diverse visual capabilities is implementing responsive design and media queries. This allows the website to adapt to various screen sizes and resolutions, ensuring a consistent and accessible user experience across different regions and devices. Avoiding fixed-width layouts and incorporating accessibility features are essential for inclusivity.