🎨Skill assessment · 180 questions

Frontend Engineering skill assessment

HTML, CSS, JavaScript, React — build for the browser.

Take the assessment →🧑‍🏫 Learn hands-onProfessional→

What it covers

HTML & Semantics

Learn semantic HTML so pages are meaningful to browsers, screen readers, and search engines, not just visually correct. Div soup breaks accessibility and SEO in ways that are hard to retrofit.

Semantic elements (header, nav, main, article, section)Document outline and heading hierarchyForms, input types, and validation attributesAccessibility tree basics: roles, labels, and landmarksMetadata, links, and other head essentials

CSS & Layout

Master the box model, flexbox, and grid so you can build layouts that hold up across screen sizes without fighting the cascade. Layout bugs are the most common visual defects shipped to production.

Box model: content, padding, border, marginFlexbox for one-dimensional layoutsGrid for two-dimensional layoutsCascade, specificity, and inheritanceResponsive design with media queries and relative units

JavaScript & the DOM

Understand how JavaScript manipulates the DOM and handles asynchrony so you can build interactive pages without memory leaks or race conditions. This is the layer every framework is built on top of.

DOM traversal, selection, and manipulationEvent listeners, delegation, and bubblingScope, closures, and the `this` keywordPromises, async/await, and the event loopFetch API and error handling

React & Components

Learn the component model and hooks that power most modern frontend jobs today. Misunderstanding rendering and hook rules leads to subtle bugs and performance regressions.

Components, JSX, and compositionProps, children, and component APIsuseState, useEffect, and core hooksRendering, reconciliation, and keysCustom hooks and logic reuse

State & Data

Learn to choose the right home for state and the right pattern for fetching data, since most real-world app bugs trace back to stale or misplaced state. Client state and server state need different strategies.

Local vs. lifted vs. global stateContext API and when to reach for itData fetching, caching, and revalidation patternsClient state vs. server stateControlled inputs and form state

Performance & Accessibility

Learn to measure and improve Core Web Vitals and build interfaces usable by keyboard and screen-reader users. Slow or inaccessible sites lose users and fail audits before code review even starts.

Core Web Vitals: LCP, CLS, INPCode splitting and lazy loadingBundle size auditing and optimizationARIA roles, states, and propertiesKeyboard navigation and focus management

Ready to benchmark your Frontend Engineering skills?

180 questions · about 5 minutes · see your level and percentile instantly.

Take the assessment →

Explore other assessments

🤖AI Engineering 🧑‍💻AI for Coding 🧠Building AI on the Cloud ☸️Kubernetes ☁️AWS Cloud ⚙️Backend Engineering 🗄️Databases 📦Containerization 🔐Security & DevSecOps 🏗️Terraform & IaC 📊Observability & Monitoring 🐍Python 🚀CI/CD & Delivery Pipelines 🔁GitOps & Delivery 🧩System Design 🐧Linux & the Command Line 🔷Microsoft Azure 🌥️Google Cloud 📜Shell Scripting