CSS (Intermediate) Skills Certification Test

- The assessment has a time limit.
- Do not use search engines or seek assistance from others.
- Once you've submitted an answer, you can go back.
- You may exit the test, but the timer will continue running.
- You have 1 attempts per assessment every 30 days.

Skills Being Assessed:

This certification test will examine your proficiency in a variety of intermediate CSS concepts, including:

• Advanced Selectors & Combinators: Mastery of attribute selectors, pseudo-classes (e.g., :focus-within, :nth-of-type()), pseudo-elements (e.g., ::before, ::after), and understanding selector specificity.
• Modern Layout Techniques:
  • Flexbox: In-depth knowledge of flex container and item properties, including alignment, sizing (flex-grow), and ordering.
  • CSS Grid: Comprehensive understanding of grid containers, item placement, track sizing (including the fr unit and minmax()), and the gap property.
  • Multi-column Layouts: Using properties like column-count.
• Responsive Design & Conditional CSS:
  • Advanced Media Queries (e.g., prefers-color-scheme).
  • Container Queries: Applying styles based on container dimensions.
  • Feature Queries (@supports).
• CSS Custom Properties (Variables): Defining, using, and understanding the scope of CSS variables.
• Units, Values, and Functions: Proficient use of relative units (rem, vw, ch), calc(), and color functions like rgba() and hsl().
• Transforms, Transitions, and Animations: Creating 2D/3D transformations, smooth transitions between states, and defining @keyframes for animations.
• Performance Optimization Techniques: Understanding properties like will-change, contain, content-visibility, and the purpose of CSS sprites.
• Advanced Visual Effects:
  • Color Gradients (linear-gradient).
  • Blending Modes (mix-blend-mode).
  • Filters (filter, backdrop-filter).
  • Clipping and Masking (clip-path, mask-image).
  • Controlling object fitting (object-fit).
• Stacking Contexts & Rendering: Understanding how position, z-index, and properties like isolation create and manage stacking contexts, and concepts like hardware acceleration.
• Logical Properties & Writing Modes: Using logical properties (e.g., block-size, inset) for layout.
• Advanced Typography: Properties like hyphens, text-overflow, hanging-punctuation, font-variant-numeric.
• Interactivity & Scroll Control: Managing pointer-events, user-select, scroll-snap properties, overscroll-behavior, and touch-action.
• CSS Tooling & Ecosystem: Conceptual understanding of CSS preprocessors (SASS, LESS) and the role of CSS Normalizers.
• Cascade Layers (@layer): Understanding how to manage the CSS cascade with layers.

What to Review Before You Start:

To ensure you're well-prepared, we recommend you thoroughly review:

• Flexbox and Grid: Beyond basic usage, focus on alignment, sizing, and how items interact within these layout models.
• Responsive Strategies: Deep dive into Media Queries (especially preference queries) and the newer Container Queries.
• CSS Variables and calc(): Practice their use for dynamic and maintainable stylesheets.
• Performance Properties: Understand how contain, will-change, and content-visibility can impact browser rendering.
• Selectors & Specificity: Ensure you can confidently select any element and predict how conflicting styles will be resolved, including the role of @layer.
• Transforms and Transitions: Review the syntax and common use cases for creating dynamic UIs.
• Stacking Contexts: Understand what creates a stacking context and how it influences rendering order.
• Modern CSS Features: Familiarize yourself with clip-path, mask-image, backdrop-filter, logical properties, and scroll snapping.
• Color manipulation: Be comfortable with rgba(), hsl(), gradients, and blend modes.

This test will challenge your ability to apply these concepts to solve common and complex styling problems. Good luck!