Interview
HTML & CSS Quiz
Test your HTML & CSS knowledge with this comprehensive self-assessment covering layouts, selectors, semantics, and advanced styles.
1. Learning Objectives
This self-assessment will test your HTML and CSS knowledge. By the end of this quiz, you will be able to evaluate your understanding of:
- HTML5 semantic tagging and structures.
- Specificity calculations and selector cascading rules.
- Flexbox and Grid layout configurations.
- Advanced transitions, keyframes, and transformations.
- CSS functions and values (`clamp()`, `calc()`, `min()`, `max()`).
2. Overview
Choose the best answer for each question. Review the explanations under the solutions to check your answers and understand the concepts in detail.
3. Self-Assessment Questions
Q1: Which HTML5 element should be used to wrap independent, self-contained articles or syndicated content items?
A) <section>
B) <aside>
C) <article>
D) <div>
Answer: C
The <article> element is designed for self-contained, independent content blocks (like blog posts or news items) that can be distributed or reused independently.
Q2: What is the specificity score calculation for the selector: div.card #btn:hover?
A) 0, 1, 2, 1
B) 0, 1, 1, 2
C) 0, 2, 1, 1
D) 0, 0, 2, 2
Answer: A
Specificity breakdown:
- 1 ID selector (#btn): 0,1,0,0
- 2 class/pseudo-classes (.card and :hover): 0,0,2,0
- 1 element selector (div): 0,0,0,1
Combining these yields a specificity score of 0,1,2,1.
Q3: How does box-sizing: border-box change width calculations in the CSS Box Model?
A) Margins are included inside the width calculation.
B) Padding and borders are subtracted from the content area, keeping the element's outer width fixed.
C) Element sizing is ignored in favor of parent values.
D) It doubles padding to prevent page layout breaks.
Answer: B
Under box-sizing: border-box, the element's declared width includes content, padding, and borders. Padding and borders are subtracted from the content area rather than added to the outer dimensions.
Q4: Which CSS Grid property allows you to create columns that wrap automatically without using media queries?
A) grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
B) grid-auto-flow: dense;
C) grid-template-columns: 1fr 1fr 1fr;
D) grid-template-rows: repeat(3, 1fr);
Answer: A
Using repeat(auto-fit, minmax(min, max)) configures the grid to calculate columns dynamically based on screen width, wrapping cards automatically without media queries.
Q5: Which transition configuration performs best and is GPU-accelerated?
A) transition: width 0.3s ease;
B) transition: top 0.3s ease;
C) transition: transform 0.3s ease;
D) transition: all 0.3s ease;
Answer: C
Transitioning transform and opacity properties is GPU-accelerated and occurs during the composite rendering stage, bypassing layout reflows and repaints.
4. Summary & Next Steps
Review the answers to identify topics you need to practice.
- Next, proceed to **Cheatsheet** for a quick reference guide to HTML and CSS code snippets.