Skip to Content
HTML and CSS Intermediate: Layouts That Don't Fall Apart on Phones
Intermediate
0 likes
Courses
HTML and CSS Intermediate: Layouts That Don't Fall Apart on Phones

Final Check: HTML and CSS Intermediate

Fifteen scenario questions across the whole course. If you get twelve or more right, you're ready for HTML and CSS Advanced.

15 min HTML and CSSWeb Development Intermediate
Prev Next
Fullscreen Share
Course content

Sign in to save your progress.

Course Home
1. Flexbox is primarily for…
Replacing HTML tables for tabular data. Server-side rendering. One-dimensional layout (a row or a column).
2. Grid is a better default when…
You style font colour. You only centre a single button. You need rows and columns controlled together (page frames).
3. gap on a flex container…
Adds padding inside each item. Adds space between flex items. Creates a media query.
4. Mobile-first media queries typically use…
JavaScript resize listeners instead of CSS. Only max-device-width with every phone listed. min-width.
5. A breakpoint should be chosen by…
The CEO's laptop width. Always copying 768 and 1024. Watching where the layout breaks as you resize.
6. max-width: 100%; height: auto on images…
Lets images shrink with the column without distorting. Forces a 16:9 crop. Lazy-loads the file.
7. Custom properties inherit, which means…
Variables cannot be overridden. A --token set on a parent can affect children using var(--token). They only work in inline styles.
8. :focus-visible is useful because…
It disables Tab. It shows focus styling for keyboard users without always painting a ring on click. It removes the need for labels.
9. aria-invalid="true" plus an error id in aria-describedby…
Submits the form. Ties an error message to the control for assistive tech. Centres the input.
10. Horizontal overflow on mobile is usually fixed by…
Using Comic Sans. Raising z-index. Making the offending element fit (width, max-width, min-width: 0, wrapping).
11. position: relative on a parent is often used to…
Hide overflow forever. Make it the containing block for absolute children. Enable float.
12. Shared .btn and .card classes help because…
They make HTML invalid. Odoo requires them. One stylesheet change updates every instance.
13. scroll-padding-top exists mainly to…
Pad flex gap. Offset scroll anchoring for sticky headers so targets stay visible. Replace margin on body.
14. Organizing CSS into base / layout / components helps you…
Disable the cascade. Avoid learning selectors. Find and change the right rule without duplicating it.
15. Prefer fixing overflow causes over body { overflow-x: hidden } because…
overflow-x is invalid CSS. Hiding overflow can mask content users still need and leaves the bug in place. Phones ignore overflow.

About

Fifteen scenario questions across the whole course. If you get twelve or more right, you're ready for HTML and CSS Advanced.

Duration
15 min
Last update
08/20/2026
Was this helpful?
​ 0 ​ 0

Comments (0)

Sign in to comment

No comments yet.