Search Adaface test library by skills or roles
⌘ K

HTML/ CSS Online Test

The HTML/ CSS test evaluates a candidate's ability to create web pages and style them using CSS. Using scenario-based MCQ questions, it evaluates knowledge of HTML (DOM, tags, forms, tables etc.) and critical CSS concepts (box model, positioning, styling, Flexbox, Grid etc.) and the ability to build responsive layouts. The test also includes simple coding questions to evaluate hands-on programming knowledge.

Covered Skills:

  • Core HTML tags
  • Handling HTML forms
  • Core CSS (box model; inheritance; specificity)
  • Styling HTML elements with CSS
  • Flexbox and Grids for modern layouts
  • Responsive websites using media queries
  • Working with images
  • Integrating custom fonts
  • CSS-based animations
  • See full list

Adaface HTML/CSS Online Test is trusted by enterprises worldwide

Amazon Morgan Stanley Vodafone United Nations HCL PayPal Bosch WeWork Optimum Solutions Deloitte Microsoft NCS Doubtnut Sokrati J&T Express Capegemini

Sample HTML/CSS Online Test Questions

These are just a small sample from our library of 10,000+ questions. The actual questions on this HTML/CSS Online Test will be non-googleable.

🧐 Question🔧 Skill💪 Difficulty⌛ Time
Column widths
CSS grid layout or CSS grid is a CSS technique that allows developers to create complex responsive web design layouts easily and consistently across browsers. The CSS grid introduced a new length unit (fr) to create flexible grid tracks. For her school project, Nu wrote the following code. What do you expect the column widths to be?
 image
A: 1st column will be 50px wide, 2nd column will be 150px wide and 3rd column will be 300px wide.
B: 1st column will be 50px wide, 2nd column will be 50px wide and 3rd column will be 100px wide.
C: 1st column will be 50px wide, 2nd column will be 300px wide and 3rd column will be 150px wide.
D: 1st column will be 50px wide, 2nd column will be 500px wide and 3rd column will be 1000px wide.

Options:

  • A
  • B
  • C
  • D
HTML/CSSEasy2 min
Links
In the following HTML, what will be the color of link with class "mark"
 image

Options:

  • orange
  • black
  • blue
  • white
HTML/CSSMedium2 min
Footer List
Notice the footer element of Adaface website. What is the best way to write HTML code for this?
 image
A) Ordered list
B) Unordered list inside a nav element
C) Ordered list inside a nav element
D) Unordered list

Options:

  • A
  • B
  • C
  • D
HTML/CSSEasy2 min
Options
We have to create a HTML form for user so that they can choose between "Non-vegetarian", "Eggetarian" and "Vegetarian". The user should be able to select only one of the options. Of the following options, which is the best way to code this up?
 image

Options:

  • A
  • B
  • C
  • D
HTML/CSSMedium2 min
Netflix Fav Movie
We are building a Netflix clone where users can stream movies. Our service tracks and logs usage for each user. Each log contains the name of the movie, length of the movie (in minutes) and number of minutes of the movie watched by the user. Can you help with some data analysis?
Our code needs to return the Favorite movie: the name of the movie with the highest percentage of movie watched by the user. If a user watched 30mins out of 60mins for movie1 (50%) and 75min out of 100min of movie2 (75%), the movie with the highest percentage of movie watched by the user is movie2 (Assume that the values are such that there can never be a tie for this spot).
    CodingMedium40 min

    How to use the Adaface HTML/CSS Online Test

    Start screening candidates within minutes with the ready-to-go HTML/CSS Online Test

    1. Choose the most appropriate test for your role

    2. Start inviting candidates to complete the assessment

    3. Receive real time notifications and shortlist the best candidates

    Customize the Adaface HTML/CSS Online Test according to your job description

    1. Get a custom assessment from our library of 500+ skills within 48 hours

    2. Start inviting candidates to complete the assesment

    3. Receive real time notifications and shortlist the best candidates

    About the Adaface HTML/CSS Assessment Test

    Evaluate HTML/ CSS technical and coding skills with Adaface skills assessment platform powered by an intelligent chatbot

    Topics:

    Core HTML Tags
    The Structure of an HTML Page
    Spacing
    Text Formatting & Decoration
    Lists
    Tables
    Images & Background Images
    Flexbox
    Grid
    Box model
    Positioning schemes
    Inheritance
    Media queries
    CSS Properties
    Pseudo-classes
    Classes, Spans, Divisions
    Text Properties, Margins, & Padding
    Borders, Backgrounds, & Transparency
    Positioning - Relative, Absolute, Fixed, Float, Clear
    Z-Index
    Transitions
    Animations
    Responsive layouts
    Embedding Videos
    Anchors/ Links
    Tables & Nested Tables
    Building Forms
    Embedding Iframes
    SVGs
    File Referencing
    Buttons
    Input Areas
    Select Menus
    Navigation
    Fonts
    Forms
    Pre-processors

    Recommended Roles:

    Web Developer
    Frontend Software Developer
    Senior HTML Web Developer
    Front-end Developer
    Software Engineer (HTML/ CSS)
    Senior Frontend Developer
    Web Designer

    Why you should use this HTML/ CSS Online Assessment test

    HTML/ CSS online assessment test is designed and validated by industry experts to help tech recruiters and hiring managers to assess the HTML/ CSS programming skills of the candidate. Top tech companies are using our HTML/ CSS programming test to reduce candidate screening time by 85%.

    The test ensures candidates have the following traits:

    • Knowledge of core HTML tags and CSS properties
    • Ability to create responsive HTML with modern layouts- Grids, Flexbox
    • Knowledge of how CSS works behind the scenes
    • Styling HTML elements with CSS to be closer to design mockups
    • Handling images, fonts, videos in HTML
    • Creating readable and scaleable HTML and CSS code
    • Understanding JS DOM manipulation
    • Hands-on JavaScript programming language

    How do you customize the test for Senior Frontend developers?

    The questions for Senior developers will involve advanced topics and will be of higher difficulty level. Here are few topics the questions will be based on for intermediate and experienced web developers:

    • In-depth knowledge of how CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts
    • Responsive images in HTML and CSS for faster page loads: resolution switching, density switching, art direction;
    • DOM manipulation using JS
    • Advanced CSS selectors, pseudo-classes, and pseudo-elements
    • Advanced CSS animations with @keyframes, animation and transition
    • JS-based animations
    • SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;
    • Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities
    • Modern CSS techniques to create stunning designs: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;

    Additionally, the coding questions used to evaluate JavaScript skills will be of higher difficulty level.

    How is this HTML/ CSS Online Test customized?

    1
    2
    3

    HTML/CSS Online Test FAQs

    About HTML/ CSS Job Roles

    HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

    HTML developers are responsible for the complete end-to-end coding of websites. They provide technical support to users, direct projects, code websites, develop web-based applications, and perform testing on websites. They work with other coders, designers and content developers, which means that communication skills are important. HTML developers must be able to translate designs into code and write technical documentation.

    CSS developers are web professionals whose primary responsibility is to deliver a polished and styled product to a user's browser. Almost every website uses CSS. Most frontend or even full-stack developers could write the CSS code. But not all of them can fix every CSS bug or implement designs without convoluting HTML code or relying on JavaScript unnecessarily.

    A HTML/ CSS Developer's responsibilities would typically include:

    • Translation of designer mock-ups and wireframes into front-end code
    • Front-end integration with a back-end framework
    • Optimize application for maximum speed and scalability
    • Assure that all user input is validated before submitting to back-end
    • Build reusable code and libraries for future use
    • Integrate data from various back-end services and databases
    • Cooperate with web designers to match visual design intent

    Can I evaluate JavaScript along with HTML/ CSS?

    Yes. We support evaluating JavaScript and HTML/ CSS in the same assessment. You can review our standard ready-to-go JavaScript, HTML/ CSS test to understand how the assessment would be designed. For customized assessments, we design the questions as per your job description and the final test will evaluate JavaScript, HTML/ CSS and coding skills together.

    Can I evaluate frontend frameworks along with HTML/ CSS like React/ Angular/ Vue?

    Yes. You can evaluate multiple skills in a single assessment. You can check our standard React, Angular, Vue assessments to get a sense of what questions would be asked. You can get a custom assessment designed that has questions to evaluate all the must-have skills of your job description. So for a standard React developer role, the test will have questions to evaluate React, JavaScript, HTML/ CSS and coding skills.

    What is a custom assessment?

    Every role is different and requires a custom assessment to identify top candidates efficiently. Adaface subject matter experts understand your job description/ role requirements and pick the most relevant questions from our library of 10000+ questions to create a technical assessment that helps you find the qualified candidates in your candidate pipeline quickly. All custom assessments are set up based on the job description, role requirements, must-have skills, experience level and salary range within a maximum of 48 hours and you will get an email notification once it goes live.

    Check out a sample assessment here (no credit card required).

    Can I combine multiple skills into one custom assessment?

    Yes, absolutely. Custom assessments are set up based on your job description, and will include questions on all must-have skills you specify.

    How is Adaface different from other assessment tools?

    We believe that status quo tech assessment platforms are not a fair way for companies to evaluate engineers because they focus on trick questions/ puzzles/ niche algorithms. We started Adaface to help companies find great engineers by assessing on-the-job skills required for a role. Read more about why we started Adaface.

    Here's what's different with Adaface:

    • High quality non-googleable questions that test for on-the-job skills as opposed to theoretical knowledge.
    • A friendly conversational assessment with a chatbot, instead of sending a "test" to a candidate. This translates to a higher completion rate. Adaface assessments (86% candidate completion rate), as opposed to traditional tests (40-50% candidate completion rate)
    • Customized assessments for 700+ skills at different experience levels.

    Do you have any anti-cheating or proctoring features in place?

    We have the following anti-cheating features in place:

    • Web proctoring
    • Webcam proctoring
    • Plagairism detection
    • Non-googleable questions
    • Secure browser

    Read more about the proctoring features.

    How do I interpret test scores?

    The primary thing to keep in mind is that an assessment is an elimination tool, not a selection tool. A skills assessment is optimized to help you eliminate candidates who are not technically qualified for the role, it is not optimized to help you find the best candidate for the role. So the ideal way to use an assessment is to decide a threshold score (typically 55%, we help you benchmark) and invite all candidates who score above the threshold for the next rounds of interview.

    What experience level can I use this test for?

    Each Adaface assessment is customized to your job description/ ideal candidate persona (our subject matter experts will pick the right questions for your assessment from our library of 10000+ questions). This assessment can be customized for any experience level.

    Does every candidate get the same questions?

    Yes, it makes it much easier for you to compare candidates. Options for MCQ questions and the order of questions are randomized. We have anti-cheating/ proctoring features in place. In our enterprise plan, we also have the option to create multiple versions of the same assessment with questions of similar difficulty levels.

    I'm a candidate. Can I try a practice test?

    No. Unfortunately, we do not support practice tests at the moment. However, you can use our sample questions for practice.

    What is the cost of using this test?

    You can check out our pricing plans.

    Can I get a free trial?

    The platform is completely self-serve, so here's one way to proceed:

    • You can sign up for free to get a feel for how it works.
    • The free trial includes one sample assessment (Java/ JavaScript) that you will find in your dashboard when you sign up. You can use it to review the quality of questions, and the candidate experience of a conversational test on Adaface.
    • To review the quality of questions, you can also review our public questions for 50+ skills here.
    • Once you're convinced that you want to try it out with real assessments and candidates, you can pick a plan according to your requirements.

    I just moved to a paid plan. How can I request a custom assessment?

    Here is a quick guide on how to request a custom assessment on Adaface.

    Singapore government logo

    The hiring managers felt that through the technical questions that they asked during the panel interviews, they were able to tell which candidates had better scores, and differentiated with those who did not score as well. They are highly satisfied with the quality of candidates shortlisted with the Adaface screening.


    Human Resources Manager

    Singapore Government

    85%
    reduction in screening time

    How Adaface Is Different

    Adaface conversational assessments are reflective of on-the-job skills and see an 86% completion rate as compared to ~50% for traditional assessment platforms.

    OLD WAY

    TRADITIONAL TESTS

    Theoretical questions/ puzzles

    Feels like a test

    One-size-fits-all assessments

    😞
    HIRE IN
    Weeks/Months

    NEW WAY

    ADAFACE ASSESSMENTS

    Questions for on-the-job skills

    Conversational

    Customized
    assessments

    😀️
    HIRE IN
    Days

    With Adaface, we were able to optimise our initial screening process by upwards of 75%, freeing up precious time for both hiring managers and our talent acquisition team alike!


    Brandon Lee, Head of People, Love, Bonito

    hashtag image heart icon Brandon
    Join 1200+ companies in 75+ countries.
    Try the most candidate friendly skills assessment tool today.
    Have any questions about the Adaface HTML/CSS Online Test?
    Have any questions about the Adaface HTML/CSS Online Test?
    Chat with us ✨
    Terms Privacy Trust Guide