Beginner HTML & CSS test (Beginner)

Sample questions

5 sample questions from the Beginner 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. You are designing a responsive layout using Flexbox and want to vertically center a group of buttons inside a container. Which of the following approaches would achieve this goal?

   1. Use justify-content: center on the flex items
   2. Use margin: auto on the flex container
   3. Use align-items: center on the flex container
   4. Use display: flex on the flex items

   Answer: C. Use align-items: center on the flex container

   To vertically align items in a flex container, the align-items property should be set to 'center'. This ensures that all flex items are centered along the cross-axis (vertical axis by default). The other options are incorrect because they either use the wrong property, apply it to the wrong element, or use a value that doesn't achieve vertical alignment.

2. A box has its width and height set to 200px and 150px, respectively. What does this represent in the box model?

   1. The width of the box is 200px, and the height is 150px.
   2. The width of the box is 200px, and the height is 150px, including padding and borders.
   3. The width of the box is 200px, and the height is 150px, excluding padding and borders.
   4. The width of the box is 200px, and the height is 150px, including only margins.

   Answer: A. The width of the box is 200px, and the height is 150px.

   The box model includes the content, padding, border, and margin. In this case, the width and height are defined directly on the element, so they represent the content dimensions. When comparing with alternatives like using padding or borders, the content dimensions remain unchanged unless explicitly set otherwise.

3. Which statement accurately describes the usage of the <header> element in Semantic HTML?

   1. The <header> element is used to define the footer section of a document.
   2. The <header> element is used to define the navigation section of a document.
   3. The <header> element is used to define the introductory content or a group of introductory content for a document or section.
   4. The <header> element is used to define the main content of a document.

   Answer: C. The <header> element is used to define the introductory content or a group of introductory content for a document or section.

   The <header> element is a semantic HTML element used to define the introductory content or a group of introductory content for a document or section. It is not related to performance or complexity internally, but rather to the structure and meaning of the content. Other elements like <h1> are used for headings, while <header> is a container for introductory content.

4. Which HTML attribute is used to enforce that a form input field must be filled out before the form can be submitted?

   1. validate
   2. must-fill
   3. required
   4. mandatory

   Answer: C. required

   The 'required' attribute is used in HTML forms to indicate that an input field must be filled out before the form can be submitted. It is a standard form validation attribute and does not require any additional JavaScript or CSS to function.

5. Which of the following statements correctly describes the <article> semantic HTML element?

   1. The <aside> element is used to define the main content of a document.
   2. The <section> element is used to define a standalone section of a document, such as a header or footer.
   3. The <div> element is a semantic element used to group related content together.
   4. The <article> element defines a self-contained composition in a document, such as a blog post or news story.

   Answer: D. The <article> element defines a self-contained composition in a document, such as a blog post or news story.

   The <article> element is used to define a self-contained composition that can be independently distributed or reused. This is different from <section>, which is used to group related content, and <div>, which is a generic container with no semantic meaning. The <aside> element is used for content that is tangentially related to the main content.