Prueba en línea de HTML/ CSS

Q: What topics are covered in the Prueba en línea de HTML/ CSS?

Etiquetas de HTML de núcleo Manejo de formularios HTML CSS de núcleo (modelo de caja; herencia; especificidad) ELEMENTOS DE HTML DE ENCENDIDO CON CSS Flexbox y cuadrículas para diseños modernos Sitios web receptivos que utilizan consultas de medios Trabajando con imágenes Integrando fuentes personalizadas Animaciones basadas en CSS

About the test:

La prueba HTML/ CSS evalúa la capacidad de un candidato para crear páginas web y diseñarlas usando CSS. Utilizando preguntas de MCQ basadas en escenarios, evalúa el conocimiento de HTML (DOM, etiquetas, formularios, tablas, etc.) y conceptos críticos de CSS (modelo de caja, posicionamiento, estilo, flexboxbox, cuadrícula, etc.) y la capacidad de construir diseños receptivos. La prueba también incluye preguntas de codificación simples para evaluar el conocimiento de la programación práctica.

Covered skills:

Etiquetas de HTML de núcleo
CSS de núcleo (modelo de caja; herencia; especificidad)
Flexbox y cuadrículas para diseños modernos
Trabajando con imágenes
Animaciones basadas en CSS

Manejo de formularios HTML
ELEMENTOS DE HTML DE ENCENDIDO CON CSS
Sitios web receptivos que utilizan consultas de medios
Integrando fuentes personalizadas

Preview this test

Ver cuadro de mando de muestra

9 reasons why

Adaface Prueba en línea de HTML/ CSS is the most accurate way to shortlist Desarrollador webs

Reason #1

Tests for on-the-job skills

The Prueba en línea de HTML/ CSS 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:

Demostrar competencia en las etiquetas HTML centrales
Manejar efectivamente los formularios HTML
Aplicar conceptos del modelo de caja CSS central, herencia y especificidad
Elementos HTML de estilo con CSS
Utilice Flexbox y cuadrículas para diseños modernos
Crear sitios web receptivos utilizando consultas de medios
Manipular y optimizar imágenes en html
Integre las fuentes personalizadas en HTML y CSS
Implementar animaciones basadas en CSS

Reason #2

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

Preview this test

Ver cuadro de mando de muestra

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

Estas son solo una pequeña muestra de nuestra biblioteca de más de 10,000 preguntas. Las preguntas reales sobre esto Prueba en línea de HTML/CSS no se puede obtener.

🧐 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:
Easy Colorful sentences	Solve
Our intern is writing a colorful blog post, and has written the following code. What colors will the sentences be? 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"
Medium Let's Hack CSS Property	Solve
Consider the following HTML and CSS: Which additional CSS rule(s) will render the following image? Choose ALL that apply. 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
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:
	Easy Colorful sentences	2 mins HTML/CSS	Solve
Our intern is writing a colorful blog post, and has written the following code. What colors will the sentences be? 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	2 mins HTML/CSS	Solve
In the following HTML, what will be the color of link with class "mark"
	Medium Let's Hack CSS Property	3 mins HTML/CSS	Solve
Consider the following HTML and CSS: Which additional CSS rule(s) will render the following image? Choose ALL that apply. 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	30 mins Coding	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	30 mins Coding	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	💪 Difficulty	⌛ Time
	Background Properties	HTML/CSS	Easy	2 mins	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:
	Colorful sentences	HTML/CSS	Easy	2 mins	Solve
Our intern is writing a colorful blog post, and has written the following code. What colors will the sentences be? 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.
	Links	HTML/CSS	Easy	2 mins	Solve
In the following HTML, what will be the color of link with class "mark"
	Let's Hack CSS Property	HTML/CSS	Medium	3 mins	Solve
Consider the following HTML and CSS: Which additional CSS rule(s) will render the following image? Choose ALL that apply. 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; }
	Registration Queue Logic Queues	Coding	Easy	30 mins	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
	Visitors Count Strings Logic	Coding	Medium	30 mins	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.

Reason #4

1200+ customers in 75 countries

Con Adaface, pudimos optimizar nuestro proceso de selección inicial en más de un 75 %, liberando un tiempo precioso tanto para los gerentes de contratación como para nuestro equipo de adquisición de talentos.

Brandon Lee, jefe de personas, Love, Bonito

Preview this test

Ver cuadro de mando de muestra

Reason #5

Designed for elimination, not selection

The most important thing while implementing the pre-employment Prueba en línea de HTML/CSS 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 Prueba en línea de HTML/CSS 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.

Reason #7

Detailed scorecards & benchmarks

Ver cuadro de mando de muestra

Preview this test

Ver cuadro de mando de muestra

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.

Reason #9

Advanced Proctoring

Learn more

Preview this test

Ver cuadro de mando de muestra

About the Prueba en línea de HTML/ CSS

Why you should use Prueba en línea de HTML/ CSS?

The Prueba en línea de HTML/CSS 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:

Comprender y aplicar etiquetas Core HTML
Manejo de formularios HTML y validación de formulario
Trabajar con el modelo de caja CSS para el diseño de diseño
Utilización de la herencia y especificidad de CSS en el estilo
Aplicación de CSS a los elementos HTML de estilo
Creación de diseños modernos con FlexBox y cuadrículas
Diseño de sitios web receptivos utilizando consultas de medios
Trabajar con imágenes en HTML y CSS
Integrar y utilizar fuentes personalizadas en CSS
Creación de animaciones basadas en CSS

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 Prueba en línea de HTML/ CSS?

CSS (modelo de caja; herencia; especificidad)
Esta habilidad abarca la comprensión del modelo de caja CSS, que define cómo se representan los elementos en una página web, así como conceptos como la herencia y la especificidad que afectan cómo se aplican los estilos. Es necesario evaluar esta habilidad ya que CSS es una de las tecnologías centrales utilizadas para diseñar páginas web y controlar el diseño.
Estilizar elementos HTML con CSS
Esta habilidad implica aplicar estilos CSS a Elementos HTML utilizando selectores, propiedades y valores. Al medir esta habilidad, los reclutadores pueden evaluar la capacidad de un individuo para crear diseños visualmente atractivos y consistentes, así como personalizar la apariencia de diferentes elementos en una página web.
Flexbox y cuadrículas para diseños modernos
Esta habilidad se centra en el uso de CSS Flexbox y la cuadrícula para crear diseños flexibles y receptivos. Es importante evaluar esta habilidad ya que estas técnicas de diseño modernas proporcionan herramientas potentes para diseñar páginas web que se adapten a diferentes tamaños y dispositivos Uso de consultas de medios para hacer que los sitios web respondan, adaptando su diseño y estilo basado en diferentes tamaños y dispositivos de pantalla. Al medir esta habilidad, los reclutadores pueden evaluar la capacidad de un candidato para crear sitios web que proporcionen una experiencia de usuario consistente en varios dispositivos y resoluciones de pantalla.
Trabajando con imágenes
Esta habilidad implica comprender cómo Trabaje con imágenes en el desarrollo web, incluidas tareas como agregar imágenes a una página web, optimizarlas para su rendimiento e implementar galerías de imágenes. Evaluar esta habilidad es valiosa ya que las imágenes son una parte integral de los sitios web modernos y ser competente para trabajar con ellas demuestra un conjunto de habilidades bien redondeadas.
integrando fuentes personalizadas
Esta habilidad abarca el Capacidad para integrar y diseñar fuentes personalizadas en una página web utilizando CSS. Es necesario medir esta habilidad, ya que las fuentes personalizadas pueden mejorar el atractivo visual y la marca de un sitio web, al tiempo que proporciona un mejor control sobre la tipografía y el diseño.
animaciones basadas en CSS
Esto La habilidad implica crear animaciones y transiciones utilizando propiedades CSS y fotogramas clave. Al evaluar esta habilidad, los reclutadores pueden evaluar la capacidad de un individuo para agregar elementos dinámicos e interactivos a una página web, mejorar la experiencia del usuario y hacer que el sitio web sea más atractivo.
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 Prueba en línea de HTML/CSS to be based on.
Etiquetas HTML
Formularios HTML
Modelo de caja CSS
Herencia CSS
Especificidad CSS
Elementos HTML de estilo
CSS Flexbox
Cuadrículas CSS
Sitios web receptivos
Preguntas de los medios
Optimización de imágenes
Fuentes personalizadas en CSS
Animaciones de CSS

Preview this test

Ver cuadro de mando de muestra

What roles can I use the Prueba en línea de HTML/ CSS for?

Desarrollador web
Desarrollador de software frontend
Desarrollador web de HTML senior
Desarrollador frontal
Ingeniero de software (HTML/ CSS)
Desarrollador de frontend senior
Diseñador web

How is the Prueba en línea de HTML/ CSS 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

Implementación de patrones de diseño efectivos en HTML y CSS
Optimización del rendimiento del sitio web con HTML y CSS
Comprensión de los desafíos de compatibilidad del navegador cruzado en HTML y CSS
Uso de preprocesadores CSS como Sass o menos
Implementación de las mejores prácticas de SEO en HTML y CSS
Aplicación de principios de accesibilidad en HTML y CSS
Implementación de técnicas de tipografía receptiva
Utilización de marcos CSS como Bootstrap o Foundation
Implementación de selectores CSS avanzados y pseudo-clases
Implementación de la internacionalización y localización en HTML y CSS

Preview this test

Ver cuadro de mando de muestra

Los gerentes de contratación sintieron que a través de las preguntas técnicas que hicieron durante las entrevistas del panel, pudieron decir qué candidatos tenían mejores puntajes y diferenciarse de aquellos que no obtuvieron tan buenos puntajes. Ellos son altamente satisfecho con la calidad de los candidatos preseleccionados con la selección de Adaface.

85%

Reducción en el tiempo de detección

Ver estudio de caso completo

Prueba en línea de HTML/ CSS Preguntas frecuentes

Acerca de las funciones laborales HTML/CSS

HTML (lenguaje de marcado de hipertexto) es el bloque de construcción más básico de la Web. Define el significado y la estructura del contenido web. Otras tecnologías además de HTML se utilizan generalmente para describir la apariencia/presentación (CSS) o la funcionalidad/comportamiento (JavaScript) de una página web.

Los desarrolladores de HTML son responsables de la codificación completa de un extremo a otro de los sitios web. Proporcionan soporte técnico a los usuarios, dirigen proyectos, codifican sitios web, desarrollan aplicaciones basadas en web y realizan pruebas en sitios web. Trabajan con otros codificadores, diseñadores y desarrolladores de contenido, lo que significa que las habilidades de comunicación son importantes. Los desarrolladores de HTML deben poder traducir diseños a código y escribir documentación técnica.

Los desarrolladores de CSS son profesionales web cuya principal responsabilidad es ofrecer un producto pulido y con estilo al navegador del usuario. Casi todos los sitios web utilizan CSS. La mayoría de los desarrolladores frontend o incluso full-stack podrían escribir el código CSS. Pero no todos pueden corregir todos los errores de CSS o implementar diseños sin complicar el código HTML o depender innecesariamente de JavaScript.

Las responsabilidades de un desarrollador HTML/CSS normalmente incluirían:

Traducción de maquetas y wireframes de diseñador a código front-end.
Integración front-end con un framework back-end
Optimizar la aplicación para máxima velocidad y escalabilidad.
Asegúrese de que todas las entradas del usuario estén validadas antes de enviarlas al back-end.
Construir código y bibliotecas reutilizables para uso futuro.
Integrar datos de varios servicios back-end y bases de datos.
Cooperar con diseñadores web para que coincida con la intención del diseño visual.

¿Puedo evaluar JavaScript junto con HTML/CSS?

Sí. Admitimos la evaluación de JavaScript y HTML/CSS en la misma evaluación. Puede revisar nuestra prueba estándar lista para usar JavaScript, HTML/CSS para comprender cómo se diseñaría la evaluación. Para evaluaciones personalizadas, diseñamos las preguntas según la descripción de su trabajo y la prueba final evaluará JavaScript, HTML/CSS y habilidades de codificación juntas.

¿Puedo evaluar frameworks frontend junto con HTML/CSS como React/Angular/Vue?

Sí. Puedes evaluar múltiples habilidades en una sola evaluación. Puede consultar nuestro estándar React, [Angular](https://www.adaface.com/assessment-test/ AngularJS-test), evaluaciones de Vue para tener una idea de las preguntas que se harían. Puede obtener una evaluación personalizada diseñada que tenga preguntas para evaluar todas las habilidades imprescindibles de la descripción de su trabajo. Entonces, para un rol de desarrollador de React estándar, la prueba tendrá preguntas para evaluar React, JavaScript, HTML/CSS y habilidades de codificación.

¿Puedo combinar múltiples habilidades en una evaluación personalizada?

Si, absolutamente. Las evaluaciones personalizadas se configuran en función de la descripción de su trabajo e incluirán preguntas sobre todas las habilidades imprescindibles que especifique.

¿Tiene alguna característica anti-trato o procuración en su lugar?

Tenemos las siguientes características anti-trate en su lugar:

Preguntas no postradas
Procuración de IP
Procedor web
Procedores de cámara web
Detección de plagio
navegador seguro

Lea más sobre las funciones de procuración.

¿Cómo interpreto los puntajes de las pruebas?

Lo principal a tener en cuenta es que una evaluación es una herramienta de eliminación, no una herramienta de selección. Una evaluación de habilidades está optimizada para ayudarlo a eliminar a los candidatos que no están técnicamente calificados para el rol, no está optimizado para ayudarlo a encontrar el mejor candidato para el papel. Por lo tanto, la forma ideal de usar una evaluación es decidir un puntaje umbral (generalmente del 55%, lo ayudamos a comparar) e invitar a todos los candidatos que obtienen un puntaje por encima del umbral para las próximas rondas de la entrevista.

¿Para qué nivel de experiencia puedo usar esta prueba?

Cada evaluación de AdaFace está personalizada para su descripción de trabajo/ persona candidata ideal (nuestros expertos en la materia elegirán las preguntas correctas para su evaluación de nuestra biblioteca de más de 10000 preguntas). Esta evaluación se puede personalizar para cualquier nivel de experiencia.

¿Cada candidato tiene las mismas preguntas?

Sí, te hace mucho más fácil comparar los candidatos. Las opciones para las preguntas de MCQ y el orden de las preguntas son aleatorizados. Tenemos características anti-trato/procuración en su lugar. En nuestro plan empresarial, también tenemos la opción de crear múltiples versiones de la misma evaluación con cuestiones de niveles de dificultad similares.