Hello, Guest Login

Beginner ~10 min

HTML & CSS Intermediate Skills Assessment

This intermediate assessment evaluates practical HTML and CSS skills used to build responsive, accessible, and maintainable web pages. Topics include semantic HTML, forms, specificity, layout (Flexbox/Grid), responsive techniques, accessibility basics, and common real-world styling patterns. Ideal for learners who know the basics and want to validate job-ready front-end fundamentals.

Progress: 0/40

Beginner � ~10 min

Q1. Which HTML element is best for a site's primary navigation links?

Select one answer � 1 pt

Q2. Which attribute is required for an <img> for accessibility?

Select one answer � 1 pt

srcset loading alt title

Q3. What does the 'rel="noopener"' value help prevent on target="_blank" links?

Select one answer � 1 pt

Tabnabbing/window.opener access CORS errors Slow page loads Broken links

Q4. Which tag is most appropriate for self-contained content like a blog post preview?

Select one answer � 1 pt

Q5. Which input type provides built-in email validation in many browsers?

Select one answer � 1 pt

text search email url

Q6. In a form, what does the 'name' attribute primarily do?

Select one answer � 1 pt

Links label to input Makes input required Defines the submitted field key Sets the placeholder text

Q7. Which attribute links a <label> to an <input> for better usability?

Select one answer � 1 pt

role aria-label for (matching the input id) name

Q8. What does the 'required' attribute do?

Select one answer � 1 pt

Sets a default value Disables the field Makes the field read-only Prevents submission if empty

Q9. Which is the correct way to reference a CSS file?

Select one answer � 1 pt

Q10. Which CSS selector has the highest specificity?

Select one answer � 1 pt

Inline style (style="...") .title #cardTitle .card .title

Q11. In specificity, which beats a class selector?

Select one answer � 1 pt

Element selector Pseudo-element Universal selector ID selector

Q12. What does 'box-sizing: border-box' do?

Select one answer � 1 pt

Disables borders Removes padding Adds border to the outside of width Includes padding/border in width/height

Q13. What is the default display value of a <div>?

Select one answer � 1 pt

inline-block block flex inline

Q14. Which CSS property controls space outside an element?

Select one answer � 1 pt

outline margin padding gap

Q15. Which property controls space inside an element between content and border?

Select one answer � 1 pt

gap padding margin border-spacing

Q16. What does 'inherit' mean in CSS?

Select one answer � 1 pt

Reset to initial Ignore the rule Use browser default Copy the parent's computed value

Q17. Which unit is relative to the root font size?

Select one answer � 1 pt

em rem % vh

Q18. Which unit is relative to the element's current font size?

Select one answer � 1 pt

em vw rem px

Q19. What does 'min-height: 100vh' do?

Select one answer � 1 pt

At least viewport height Matches content height only Always equals 100px At most viewport height

Q20. Which CSS property creates rounded corners?

Select one answer � 1 pt

corner-radius border-radius border-style outline-radius

Q21. What does 'display: flex' primarily do?

Select one answer � 1 pt

Disables wrapping Centers everything automatically Creates a flex formatting context Makes text bold

Q22. In Flexbox, which property controls the main axis direction?

Select one answer � 1 pt

align-items justify-content flex-direction flex-wrap

Q23. In Flexbox, which property aligns items along the main axis?

Select one answer � 1 pt

align-content justify-content place-items align-items

Q24. In Flexbox, which property aligns items along the cross axis?

Select one answer � 1 pt

justify-items justify-content align-items gap

Q25. Which Flexbox property allows items to wrap to a new line?

Select one answer � 1 pt

align-items: wrap flex-wrap: wrap display: wrap flex-flow: nowrap

Q26. What does 'gap' do in Flexbox/Grid?

Select one answer � 1 pt

Adds border space Adds padding to container Centers items Sets spacing between items

Q27. Which CSS layout is best for two-dimensional control (rows AND columns)?

Select one answer � 1 pt

Grid Float layout Flexbox Inline-block

Q28. Which property defines grid columns?

Select one answer � 1 pt

grid-column-gap grid-template-columns grid-columns grid-auto-flow

Q29. What does 'repeat(3, 1fr)' mean in CSS Grid?

Select one answer � 1 pt

3 equal-width columns 3 columns fixed at 1rem 3 rows of 1fr 3 columns of 1px

Q30. Which media query targets screens 768px and wider?

Select one answer � 1 pt

@media (min-width: 768px) @media (max-width: 768px) @media (min-device-width: 0) @media (width: 768px)

Q31. What is a common mobile-first approach?

Select one answer � 1 pt

Start with desktop, then remove rules Base small-screen styles, add min-width breakpoints Use only max-width queries Avoid media queries entirely

Q32. Which HTML element is best for the page's unique main content?

Select one answer � 1 pt

Q33. What does aria-label do?

Select one answer � 1 pt

Adds tooltip text Changes tab order Forces keyboard focus Provides an accessible name

Q34. Which is best practice for keyboard accessibility?

Select one answer � 1 pt

Use divs for buttons Disable tabbing Remove focus outlines Ensure controls are keyboard operable

Q35. What does :focus-visible help with?

Select one answer � 1 pt

Always hides focus Improves focus styling for keyboard users Sets hover color Makes elements clickable

Q36. Which CSS property is commonly used to create smooth transitions?

Select one answer � 1 pt

filter transition animation-delay transform

Q37. What does 'position: relative' do by itself?

Select one answer � 1 pt

Pins element to viewport Centers element Creates a positioning context for absolute children Removes element from flow

Q38. An absolutely positioned element is positioned relative to:

Select one answer � 1 pt

Its next sibling Nearest positioned ancestor The viewport always The document always

Q39. Which property controls stacking order when elements overlap?

Select one answer � 1 pt

layer z-index stack order

Q40. Which is best for setting a responsive image that doesn’t overflow its container?

Select one answer � 1 pt

display: inline; width: auto; width: 120% max-width: 100%; height: auto; height: 100%

Cancel