Intermediate HTML & CSS test (Intermediate)

Sample questions

5 sample questions from the Intermediate HTML & CSS test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. How are CSS custom properties defined and accessed in CSS?

   1. Custom properties are defined with the # prefix and accessed using the get() function.
   2. Custom properties are defined in a separate CSS file and accessed using the import() function.
   3. The CSS custom property is defined using the -- prefix, and its value can be accessed using the var() function.
   4. Custom properties are defined using the @custom-property keyword and accessed with the custom() function.

   Answer: C. The CSS custom property is defined using the -- prefix, and its value can be accessed using the var() function.

   CSS custom properties are defined with the -- prefix and accessed with var(). They provide a way to store reusable values and make styles more maintainable. Other options may describe incorrect syntax or usage.

2. A screen reader user is unable to understand the purpose of an icon in a web application. How should this issue be resolved?

   1. Use the title attribute on the icon element for screen reader support.
   2. Wrap the icon in a button element and rely on default keyboard navigation.
   3. Apply a CSS class to the icon for styling purposes only.
   4. Add the aria-label attribute to the icon element with a descriptive text.

   Answer: D. Add the aria-label attribute to the icon element with a descriptive text.

   To ensure accessibility for screen readers, icons should have an aria-label attribute that describes their purpose. This allows users who rely on assistive technologies to understand the function or meaning of the icon. Other options are incorrect because they do not address the specific issue of providing a label for icons.

3. Which of the following CSS Grid techniques allows for a responsive layout where the number of columns adjusts automatically based on available space, with each column having a minimum and maximum width?

   1. Grid template columns shorthand
   2. Grid auto-fit and minmax usage
   3. Grid line numbering
   4. Grid row alignment

   Answer: B. Grid auto-fit and minmax usage

   The 'grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))' syntax is used to create a responsive grid layout that automatically adjusts the number of columns based on available space, ensuring each column is at least 200px wide and can grow to fill the remaining space. This is a common use case for 'grid auto-fit' and 'minmax' in CSS Grid.

4. You are designing a responsive layout using CSS Grid and need to align multiple rows of content evenly along the vertical axis, with the first row at the top and the last row at the bottom, leaving space between them. Which CSS property and value would you use to achieve this?

   1. align-content: space-between;
   2. justify-content: flex-start;
   3. align-items: center;
   4. grid-template-rows: auto;

   Answer: A. align-content: space-between;

   The align-content property is used to align grid items along the row axis (vertical direction) in a grid container. When set to 'space-between', it distributes the grid items evenly along the row axis, with the first item aligned to the start and the last item aligned to the end. This is a realistic use case for aligning content in a grid layout.

5. Which ARIA attribute is used to provide a label for a button when the button does not have visible text, such as an icon?

   1. aria-label
   2. aria-describedby
   3. aria-hidden
   4. aria-labelledby

   Answer: A. aria-label

   The aria-label attribute is used to provide a label for buttons when the button does not have visible text. It is particularly useful for icons or other non-text content that serve as buttons. Other attributes like aria-labelledby or aria-describedby are used for different purposes, and aria-label is the correct choice for directly labeling a button.