HTML & CSS for Frontend Interviews

HTML & CSS for Frontend Interviews is a free, MCQ-based course on Abekus, built around the HTML and CSS questions that actually come up in frontend interview rounds. It packs 1,000+ practice questions across 12 topics — from document structure and ARIA through Flexbox, Grid, stacking contexts, and modern CSS features. Every wrong answer triggers an instant explanation, so the rule behind the right answer sticks the first time.

A general HTML/CSS tutorial teaches the syntax. This course drills the parts interviewers test: "what's the specificity of a.btn:hover?", "why does this absolutely-positioned element ignore its parent?", "name three things that create a new stacking context", "when does Flexbox give you what you want and when do you reach for Grid?". The questions are picked for how often candidates get them wrong — not for how foundational they are.

• Format — 1,000+ multiple-choice questions with instant explanations
• Duration — about 11h of focused practice, most learners spread it over 2–3 weeks
• Level — beginner-friendly to advanced; HTML basics are revisited, CSS goes deep into the parts interviewers actually probe
• Cost — free, with a public completion certificate
• Audience — engineering students preparing placements, self-taught frontend developers, working developers prepping a job switch
• Companion course — pair with JavaScript Fundamentals for the third leg of the frontend interview stack

The course is built for three audiences. First, engineering students and freshers preparing for frontend placement rounds, where HTML and CSS questions are a reliable screening filter — the candidates who fumble "explain the box model" or "what does position: sticky actually do" rarely make it to the next round. Second, self-taught frontend developers who learned by building and now want to plug the conceptual gaps before a job application. Third, working developers — backend or full-stack — brushing up the parts of the stack they touch least often, before a switch to a more frontend-heavy role.

Foundations (HTML)

• Document Structure & Semantics — the document outline, semantic elements (header, nav, main, article, section, aside, footer), and the head/meta tags that drive SEO and social previews
• Forms & Input Elements — form structure, input types and their built-in behaviour (validation, mobile keyboards), labels, fieldsets, and form accessibility
• Media & Embedded Content — responsive images, audio/video, picture and srcset, iframes, and the trade-offs around embedded content
• Accessibility & ARIA — when semantic HTML is enough, when ARIA attributes are needed, keyboard navigation, focus management, and the screen-reader contract

Depth (Core CSS)

• CSS Selectors & Specificity — selector types, combinators, pseudo-classes and pseudo-elements, specificity calculation, and the source-order tiebreaker
• Box Model & Display — content, padding, border, margin, box-sizing, the display property, and overflow/sizing edge cases
• Positioning & Stacking — static/relative/absolute/fixed/sticky positioning, what creates a stacking context, and how float and block formatting context interact with the rest
• Flexbox — container and item properties, alignment, flex-grow/shrink/basis, and the edge cases around auto-margins and intrinsic sizing
• CSS Grid — grid container and item placement, explicit vs implicit tracks, named lines and areas, and the advanced behaviour interviewers test

Mastery

• Responsive Design — media queries, responsive units (rem, em, vw, vh, ch), and the patterns interviewers expect (mobile-first, fluid typography, container queries)
• CSS Custom Properties & Modern Features — custom properties (CSS variables), modern features (:has(), logical properties, clamp()), animations and transitions
• Review & Mastery — concept comparisons, pattern selection, and applying HTML and CSS together under realistic constraints

Most candidates lose HTML and CSS rounds to a small set of recurring gotchas. The course is built around them:

• Specificity math — why .btn.btn-primary beats #header .btn in some cases and loses in others
• Stacking context creation — the list of properties that quietly create one (z-index with positioning, opacity below 1, transform, filter, will-change)
• Margin collapse — when adjacent margins collapse, when they don't, and what stops the collapse
• The box model and box-sizing — why widths behave differently with content-box vs border-box
• Flexbox item shrinking — why flex: 1 does not always behave the way you expect with content-sized children
• Grid implicit tracks — what happens when items overflow the explicit grid
• Position: sticky failures — why your sticky element scrolls away (parent overflow, scrolling container, missing top value)
• ARIA misuse — when adding role attributes makes accessibility worse
• Semantic HTML — when a <div> is wrong and what to reach for instead
• Responsive units — when to use rem vs em vs % vs vw, and where each one bites

Both are layout systems, both ship in every browser, and both come up in interviews — so candidates often guess. The honest answer is that Flexbox is one-dimensional (lay out items along a row or a column) and Grid is two-dimensional (lay out items in rows and columns at the same time). If you are aligning a row of nav links, a toolbar, or items inside a card, Flexbox is usually right. If you are laying out a page (header / sidebar / content / footer) or a complex card grid where rows and columns matter together, Grid is right. The course drills the specific cases where one wins clearly over the other, and the cases where either works and the choice is a matter of code clarity.

Frontend interview rounds cluster HTML and CSS questions into five buckets: fundamentals ("explain the box model", "what is the difference between display: none and visibility: hidden"), specificity and cascade ("which rule wins in this snippet?"), layout ("build this layout using Flexbox", "build it again with Grid"), positioning and stacking ("why is this z-index not working?"), and accessibility ("how would you make this dropdown accessible?"). The MCQs in this course map directly onto those five buckets, with the highest weight on layout and stacking — the two areas where candidates lose the most points.

Active recall under time pressure. Most candidates can build a layout in 20 minutes with a sandbox open — but interviews ask you to predict CSS behaviour out loud, in 30 seconds, without running the code. That's a different skill. MCQ practice with instant explanations is the fastest way to build it, because every wrong answer maps to a concrete rule the explanation makes stick. Pair the course with one or two layout-building exercises a week (rebuild a real page from a screenshot) and you have a complete prep plan.

You answer one question at a time. If you get it wrong, the explanation appears immediately — what the right answer is, why your choice was wrong, and the underlying HTML or CSS rule. The AI guide tracks which topics you keep slipping on and resurfaces them later, so the specificity questions you keep getting wrong stop being weak spots by the time you finish.

At 1,000+ MCQs and about 35–40 seconds per question (including reading the explanation), the full course is roughly 11 hours of focused practice. Most learners spread that across 2–3 weeks at 30–45 minutes a day. The hero stat shows the same number — 11.0h of content.

HTML and CSS are one leg of the frontend interview tripod. The other two are JavaScript and a framework like React. After (or alongside) this course, work through JavaScript Fundamentals to cover the language, then React Fundamentals for the framework layer most frontend roles expect. A complete frontend interview prep stack is roughly 30–40 hours across all three.