Search test library by skills or roles
⌘ K

About the test:

De HTML/ CSS -test evalueert het vermogen van een kandidaat om webpagina's te maken en te stylen met CSS. Met behulp van scenario-gebaseerde MCQ-vragen, evalueert het kennis van HTML (DOM, tags, formulieren, tabellen, enz.) En kritische CSS-concepten (boxmodel, positionering, styling, flexbox, raster, enz.) En de mogelijkheid om responsieve lay-outs te bouwen. De test bevat ook eenvoudige coderingsvragen om praktische programmeerkennis te evalueren.

Covered skills:

  • Core HTML -tags
  • Core CSS (boxmodel; overerving; specificiteit)
  • Flexbox en roosters voor moderne lay -outs
  • Werken met afbeeldingen
  • Op CSS gebaseerde animaties
  • HTML -formulieren afhandelen
  • Styling HTML -elementen met CSS
  • Responsieve websites met behulp van media -vragen
  • Aangepaste lettertypen integreren

9 reasons why
9 reasons why

Adaface HTML/ CSS Test is the most accurate way to shortlist Webontwikkelaars



Reason #1

Tests for on-the-job skills

The HTML/ CSS online test helps recruiters and hiring managers identify qualified candidates from a pool of resumes, and helps in taking objective hiring decisions. It reduces the administrative overhead of interviewing too many candidates and saves time by filtering out unqualified candidates at the first step of the hiring process.

The test screens for the following skills that hiring managers look for in candidates:

  • Toont vaardigheid in kern HTML -tags
  • Ga effectief aan HTML -formulieren
  • Pas concepten toe van het kern CSS -boxmodel, overerving en specificiteit
  • Style HTML -elementen met behulp van CSS
  • Gebruik flexbox en roosters voor moderne lay -outs
  • Maak responsieve websites met behulp van media -query's
  • Manipuleer en optimaliseer afbeeldingen in HTML
  • Integreer aangepaste lettertypen in HTML en CSS
  • Implementeer op CSS gebaseerde animaties
Reason #2

No trick questions

no trick questions

Traditional assessment tools use trick questions and puzzles for the screening, which creates a lot of frustration among candidates about having to go through irrelevant screening assessments.

View sample questions

The main reason we started Adaface is that traditional pre-employment assessment platforms are not a fair way for companies to evaluate candidates. At Adaface, our mission is to help companies find great candidates by assessing on-the-job skills required for a role.

Why we started Adaface
Reason #3

Non-googleable questions

We have a very high focus on the quality of questions that test for on-the-job skills. Every question is non-googleable and we have a very high bar for the level of subject matter experts we onboard to create these questions. We have crawlers to check if any of the questions are leaked online. If/ when a question gets leaked, we get an alert. We change the question for you & let you know.

How we design questions

Dit zijn slechts een klein monster uit onze bibliotheek met meer dan 10.000 vragen. De werkelijke vragen hierover HTML/CSS online test zal niet-googelbaar zijn.

🧐 Question

Easy

Background Properties
Solve
Consider the following shorthand CSS example:

background: #f7f7f7 url(jolie.jpg) no-repeat scroll 0px 0px;

Which of the following show the individual background properties represented by the shorthand:
 image

Easy

Colorful sentences
Solve
Our intern is writing a colorful blog post, and has written the following code. What colors will the sentences be?
 image
A: Sentence 1 will be gray, Sentence 2 will be pink.
B: Both sentences will be gray.
C: Sentence 1 will be pink, Sentence 2 will be gray.
D: Both sentences will be pink.
E: The code does not make sense; will throw an error.

Easy

Links
Solve
In the following HTML, what will be the color of link with class "mark"
 image

Medium

Let's Hack
CSS Property
Solve
Consider the following HTML and CSS:
 image
 image
Which additional CSS rule(s) will render the following image? Choose ALL that apply.
 image
A:
div{
  flex-direction : column;
  align-items : center;
}
B:
div{
  flex-direction : row;
  align-items: center;
}
C:
div{
  flex-direction: column;
  justify-content: center;
}
D:
div{
  flex-direction: row;
  justify-content: center;
}

Easy

Registration Queue
Logic
Queues
Solve
We want to register students for the next semester. All students have a receipt which shows the amount pending for the previous semester. A positive amount (or zero) represents that the student has paid extra fees, and a negative amount represents that they have pending fees to be paid. The students are in a queue for the registration. We want to arrange the students in a way such that the students who have a positive amount on the receipt get registered first as compared to the students who have a negative amount. We are given a queue in the form of an array containing the pending amount.
For example, if the initial queue is [20, 70, -40, 30, -10], then the final queue will be [20, 70, 30, -40, -10]. Note that the sequence of students should not be changed while arranging them unless required to meet the condition.
⚠️⚠️⚠️ Note:
- The first line of the input is the length of the array. The second line contains all the elements of the array.
- The input is already parsed into an array of "strings" and passed to a function. You will need to convert string to integer/number type inside the function.
- You need to "print" the final result (not return it) to pass the test cases.

For the example discussed above, the input will be:
5
20 70 -40 30 -10

Your code needs to print the following to the standard output:
20 70 30 -40 -10

Medium

Visitors Count
Strings
Logic
Solve
A manager hires a staff member to keep a record of the number of men, women, and children visiting the museum daily. The staff will note W if any women visit, M for men, and C for children. You need to write code that takes the string that represents the visits and prints the count of men, woman and children. The sequencing should be in decreasing order. 
Example:

Input:
WWMMWWCCC

Expected Output: 
4W3C2M

Explanation: 
‘W’ has the highest count, then ‘C’, then ‘M’. 
⚠️⚠️⚠️ Note:
- The input is already parsed and passed to a function.
- You need to "print" the final result (not return it) to pass the test cases.
- If the input is- “MMW”, then the expected output is "2M1W" since there is no ‘C’.
- If any of them have the same count, the output should follow this order - M, W, C.
🧐 Question🔧 Skill

Easy

Background Properties

2 mins

HTML/CSS
Solve

Easy

Colorful sentences

2 mins

HTML/CSS
Solve

Easy

Links

2 mins

HTML/CSS
Solve

Medium

Let's Hack
CSS Property

3 mins

HTML/CSS
Solve

Easy

Registration Queue
Logic
Queues

30 mins

Coding
Solve

Medium

Visitors Count
Strings
Logic

30 mins

Coding
Solve
🧐 Question🔧 Skill💪 Difficulty⌛ Time
Background Properties
HTML/CSS
Easy2 mins
Solve
Colorful sentences
HTML/CSS
Easy2 mins
Solve
Links
HTML/CSS
Easy2 mins
Solve
Let's Hack
CSS Property
HTML/CSS
Medium3 mins
Solve
Registration Queue
Logic
Queues
Coding
Easy30 minsSolve
Visitors Count
Strings
Logic
Coding
Medium30 minsSolve
Reason #4

1200+ customers in 75 countries

customers in 75 countries
Brandon

Met Adaface konden we ons eerste screeningproces met ruim 75% optimaliseren, waardoor kostbare tijd vrijkwam voor zowel de rekruteringsmanagers als ons talentacquisitieteam!


Brandon Lee, Hoofd Mensen, Love, Bonito

Reason #5

Designed for elimination, not selection

The most important thing while implementing the pre-employment HTML/CSS online test in your hiring process is that it is an elimination tool, not a selection tool. In other words: you want to use the test to eliminate the candidates who do poorly on the test, not to select the candidates who come out at the top. While they are super valuable, pre-employment tests do not paint the entire picture of a candidate’s abilities, knowledge, and motivations. Multiple easy questions are more predictive of a candidate's ability than fewer hard questions. Harder questions are often "trick" based questions, which do not provide any meaningful signal about the candidate's skillset.

Science behind Adaface tests
Reason #6

1 click candidate invites

Email invites: You can send candidates an email invite to the HTML/CSS online test from your dashboard by entering their email address.

Public link: You can create a public link for each test that you can share with candidates.

API or integrations: You can invite candidates directly from your ATS by using our pre-built integrations with popular ATS systems or building a custom integration with your in-house ATS.

invite candidates
Reason #7

Detailed scorecards & benchmarks

Bekijk Sample Scorecard
Reason #8

High completion rate

Adaface tests are conversational, low-stress, and take just 25-40 mins to complete.

This is why Adaface has the highest test-completion rate (86%), which is more than 2x better than traditional assessments.

test completion rate
Reason #9

Advanced Proctoring


Learn more

About the HTML/ CSS Assessment Test

Why you should use Pre-employment HTML/ CSS online test?

The HTML/CSS online test makes use of scenario-based questions to test for on-the-job skills as opposed to theoretical knowledge, ensuring that candidates who do well on this screening test have the relavant skills. The questions are designed to covered following on-the-job aspects:

  • Inzicht in en toepassen van kern HTML -tags
  • HTML -formulieren en vormvalidatie omgaan
  • Werken met het CSS -boxmodel voor lay -outontwerp
  • Gebruikmakend van CSS -overerving en specificiteit bij het stylen
  • CSS toepassen op Style HTML -elementen
  • Moderne lay -outs maken met behulp van Flexbox en Grids
  • Responsieve websites ontwerpen met behulp van media -vragen
  • Werken met afbeeldingen in HTML en CSS
  • Integratie en gebruik van aangepaste lettertypen in CSS
  • CSS-gebaseerde animaties maken

Once the test is sent to a candidate, the candidate receives a link in email to take the test. For each candidate, you will receive a detailed report with skills breakdown and benchmarks to shortlist the top candidates from your pool.

What topics are covered in the HTML/ CSS online test?

  • Core CSS (boxmodel; overerving; specificiteit) </h4> </h4>

    Deze vaardigheid omvat het begrip van het CSS -boxmodel, dat definieert hoe elementen op een webpagina worden weergegeven, evenals concepten zoals overerving en specificiteit die beïnvloeden hoe stijlen worden toegepast. Het is noodzakelijk om deze vaardigheid te evalueren, aangezien CSS een van de kerntechnologieën is die worden gebruikt voor het stylen van webpagina's en het beheersen van de lay -out. HTML -elementen met behulp van selectors, eigenschappen en waarden. Door deze vaardigheid te meten, kunnen recruiters het vermogen van een individu beoordelen om visueel aantrekkelijke en consistente ontwerpen te creëren, en het uiterlijk van verschillende elementen op een webpagina aan te passen.

  • flexbox en roosters voor moderne lay -outs

    Deze vaardigheid richt zich op het gebruik van CSS Flexbox en Grid om flexibele en responsieve lay -outs te maken. Het is belangrijk om deze vaardigheid te evalueren, aangezien deze moderne lay -outtechnieken krachtige tools bieden voor het ontwerpen van webpagina's die zich aanpassen aan verschillende schermformaten en apparaten.

  • responsieve websites met behulp van mediabesprekken

    Deze vaardigheid omvat deze vaardigheid Met behulp van media -query's om websites te responsief maken, hun lay -out en styling aanpassen op basis van verschillende schermformaten en apparaten. Door deze vaardigheid te meten, kunnen recruiters het vermogen van een kandidaat beoordelen om websites te maken die een consistente gebruikerservaring bieden op verschillende apparaten en schermresoluties.

  • Werken met afbeeldingen

    Deze vaardigheid omvat het begrijpen van hoe te weten hoe kan worden Werk met afbeeldingen in webontwikkeling, inclusief taken zoals het toevoegen van afbeeldingen aan een webpagina, het optimaliseren van deze voor prestaties en het implementeren van beeldgalerijen. Het beoordelen van deze vaardigheid is waardevol, omdat afbeeldingen een integraal onderdeel zijn van moderne websites en bedreven zijn in het werken met hen toont een goed afgeronde vaardigheden. Mogelijkheid om aangepaste lettertypen te integreren en te stylen op een webpagina met behulp van CSS. Het is noodzakelijk om deze vaardigheid te meten, omdat aangepaste lettertypen de visuele aantrekkingskracht en branding van een website kunnen verbeteren, terwijl ze ook een betere controle bieden over typografie en ontwerp.

  • op CSS gebaseerde animaties

    Dit Vaardigheid omvat het maken van animaties en overgangen met behulp van CSS -eigenschappen en keyframes. Door deze vaardigheid te beoordelen, kunnen recruiters het vermogen van een individu evalueren om dynamische en interactieve elementen aan een webpagina toe te voegen, de gebruikerservaring te verbeteren en de website aantrekkelijker te maken.

  • Full list of covered topics

    The actual topics of the questions in the final test will depend on your job description and requirements. However, here's a list of topics you can expect the questions for HTML/CSS online test to be based on.

    HTML -tags
    HTML -vormen
    CSS Box -model
    CSS -erfenis
    CSS -specificiteit
    Styling HTML -elementen
    CSS Flexbox
    CSS -roosters
    Responsieve websites
    Media -vragen
    Afbeeldingoptimalisatie
    Aangepaste lettertypen in CSS
    CSS -animaties

What roles can I use the HTML/ CSS online test for?

  • Webontwikkelaar
  • Frontend Software Developer
  • Senior HTML Web Developer
  • Front-end ontwikkelaar
  • Software Engineer (HTML/ CSS)
  • Senior Frontend Developer
  • Webdesigner

How is the HTML/ CSS online test customized for senior candidates?

For intermediate/ experienced candidates, we customize the assessment questions to include advanced topics and increase the difficulty level of the questions. This might include adding questions on topics like

  • Implementatie van effectieve ontwerppatronen in HTML en CSS
  • De prestaties van de website optimaliseren met HTML en CSS
  • Inzicht in cross-browser compatibiliteitsuitdagingen in HTML en CSS
  • Het gebruik van CSS -preprocessors zoals sass of minder
  • Implementatie van SEO -best practices in HTML en CSS
  • Toegankelijkheidsprincipes toepassen in HTML en CSS
  • Responsieve typografietechnieken implementeren
  • Gebruikmakend van CSS -frameworks zoals bootstrap of foundation
  • Implementatie van geavanceerde CSS-selectors en pseudo-klassen
  • Implementatie van internationalisering en lokalisatie in HTML en CSS
Singapore government logo

De rekruteringsmanagers waren van mening dat ze door de technische vragen die ze tijdens de panelgesprekken stelden, konden zien welke kandidaten beter scoorden, en onderscheidden ze zich met degenen die niet zo goed scoorden. Zij zijn zeer tevreden met de kwaliteit van de kandidaten op de shortlist van de Adaface-screening.


85%
Vermindering van de screeningstijd

HTML/ CSS Hiring Test Veelgestelde vragen

Over HTML/CSS-taakrollen

HTML (HyperText Markup Language) is de meest fundamentele bouwsteen van het internet. Het definieert de betekenis en structuur van webinhoud. Naast HTML worden over het algemeen andere technologieën gebruikt om het uiterlijk/presentatie (CSS) of functionaliteit/gedrag (JavaScript) van een webpagina te beschrijven.

HTML-ontwikkelaars zijn verantwoordelijk voor de volledige end-to-end-codering van websites. Ze bieden technische ondersteuning aan gebruikers, leiden projecten, coderen websites, ontwikkelen webgebaseerde applicaties en voeren tests uit op websites. Ze werken samen met andere programmeurs, ontwerpers en contentontwikkelaars, waardoor communicatieve vaardigheden belangrijk zijn. HTML-ontwikkelaars moeten ontwerpen in code kunnen vertalen en technische documentatie kunnen schrijven.

CSS-ontwikkelaars zijn webprofessionals wiens primaire verantwoordelijkheid het is om een ​​gepolijst en vormgegeven product aan de browser van een gebruiker te leveren. Bijna elke website maakt gebruik van CSS. De meeste frontend- of zelfs full-stack-ontwikkelaars kunnen de CSS-code schrijven. Maar ze kunnen niet allemaal elke CSS-bug repareren of ontwerpen implementeren zonder de HTML-code ingewikkeld te maken of onnodig op JavaScript te vertrouwen.

De verantwoordelijkheden van een HTML/CSS-ontwikkelaar omvatten doorgaans:

  • Vertaling van designer mock-ups en wireframes naar front-end code
  • Front-end integratie met een back-end framework
  • Optimaliseer de applicatie voor maximale snelheid en schaalbaarheid
  • Zorg ervoor dat alle gebruikersinvoer wordt gevalideerd voordat deze wordt verzonden naar de back-end
  • Bouw herbruikbare code en bibliotheken voor toekomstig gebruik
  • Integreer gegevens uit verschillende back-end services en databases
  • Werk samen met webontwerpers om de visuele ontwerpintentie te matchen

Kan ik JavaScript samen met HTML/CSS evalueren?

Ja. Wij ondersteunen de evaluatie van JavaScript en HTML/CSS in dezelfde beoordeling. U kunt onze standaard kant-en-klare JavaScript, HTML/CSS test bekijken om te begrijpen hoe de beoordeling zou worden ontworpen. Voor beoordelingen op maat ontwerpen we de vragen volgens uw functiebeschrijving en tijdens de laatste test worden JavaScript-, HTML/CSS- en codeervaardigheden samen geëvalueerd.

Kan ik frontend-frameworks samen met HTML/CSS zoals React/Angular/Vue evalueren?

Ja. U kunt meerdere vaardigheden in één assessment beoordelen. U kunt onze standaard React, Angular bekijken AngularJS-test), Vue beoordelingen om een ​​idee te krijgen van welke vragen er gesteld zouden worden. U kunt een op maat gemaakt assessment laten ontwerpen met vragen om alle onmisbare vaardigheden van uw functiebeschrijving te evalueren. Dus voor een standaard rol als React-ontwikkelaar bevat de test vragen om React-, JavaScript-, HTML/CSS- en codeervaardigheden te evalueren.

Kan ik meerdere vaardigheden combineren in één aangepaste beoordeling?

Ja absoluut. Aangepaste beoordelingen zijn opgezet op basis van uw functiebeschrijving en bevatten vragen over alle must-have vaardigheden die u opgeeft.

Heeft u functies tegen latere of proctoring op hun plaats?

We hebben de volgende anti-cheating-functies op zijn plaats:

  • Niet-googelbare vragen
  • IP Proctoring
  • Web Proctoring
  • Webcam Proctoring
  • Plagiaatdetectie
  • Beveilig browser

Lees meer over de Proctoring -functies.

Hoe interpreteer ik testscores?

Het belangrijkste om in gedachten te houden is dat een beoordeling een eliminatietool is, geen selectietool. Een vaardighedenbeoordeling is geoptimaliseerd om u te helpen kandidaten te elimineren die niet technisch gekwalificeerd zijn voor de rol, het is niet geoptimaliseerd om u te helpen de beste kandidaat voor de rol te vinden. Dus de ideale manier om een ​​beoordeling te gebruiken is om een ​​drempelscore te bepalen (meestal 55%, wij helpen u benchmark) en alle kandidaten uit te nodigen die boven de drempel scoren voor de volgende interviewrondes.

Voor welk ervaringsniveau kan ik deze test gebruiken?

Elke ADAFACE -beoordeling is aangepast aan uw functiebeschrijving/ ideale kandidaatpersonage (onze experts van het onderwerp zullen de juiste vragen kiezen voor uw beoordeling uit onze bibliotheek van 10000+ vragen). Deze beoordeling kan worden aangepast voor elk ervaringsniveau.

Krijgt elke kandidaat dezelfde vragen?

Ja, het maakt het veel gemakkelijker voor u om kandidaten te vergelijken. Opties voor MCQ -vragen en de volgorde van vragen worden gerandomiseerd. We hebben anti-cheating/proctoring functies. In ons bedrijfsplan hebben we ook de optie om meerdere versies van dezelfde beoordeling te maken met vragen over vergelijkbare moeilijkheidsniveaus.

Ik ben een kandidaat. Kan ik een oefentest proberen?

Nee. Helaas ondersteunen we op dit moment geen oefentests. U kunt echter onze voorbeeldvragen gebruiken voor praktijk.

Wat zijn de kosten van het gebruik van deze test?

U kunt onze [prijsplannen] bekijken (https://www.adaface.com/pricing/).

Kan ik een gratis proefperiode krijgen?

Ja, u kunt gratis aanmelden en een voorbeeld van deze test.

Ik ben net naar een betaald plan verhuisd. Hoe kan ik een aangepaste beoordeling aanvragen?

Hier is een korte handleiding over hoe een aangepaste beoordeling aanvragen op Adaface.

customers across world
Join 1200+ companies in 75+ countries.
Probeer vandaag de meest kandidaatvriendelijke vaardighedenbeoordelingstool.
g2 badges
Ready to use the Adaface HTML/CSS online test?
Ready to use the Adaface HTML/CSS online test?
ada
Ada
● Online
Previous
Score: NA
Next
✖️