Cómo mostrar las habilidades de los desarrolladores del front end - HTML y CSS

HTML y CSS son dos de las habilidades más fundamentales de los desarrolladores de primera línea. Sería difícil encontrar un desarrollador web que no tenga al menos un conocimiento básico de los dos pilares. Sin embargo, algunos creen que el HTML y el CSS no deberían recibir el mismo respeto que otros lenguajes porque ninguno de ellos requiere ninguna lógica interna. Eso es porque HTML y CSS son lenguajes declarativos que instruyen a un navegador web para mostrar páginas web en lugar de usar código computacional.

A pesar de lo que algunos puedan pensar, cada vez es más valioso para los desarrolladores poseer un profundo conocimiento y experiencia de estos dos idiomas. Verificar los conocimientos de HTML y CSS de un desarrollador es tan importante como determinar las habilidades en lenguajes como Java y C++. Seguramente, cualquier persona vagamente técnica debería tener una comprensión básica de HTML y CSS. Al final, eso es todo lo que necesitas, ¿verdad? No exactamente.

El HTML y el CSS constituyen la columna vertebral del desarrollo del front end junto con JavaScript. De hecho, también encontrarás un montón de desarrolladores de back-end que utilizan estos lenguajes de forma regular. Mientras que nunca encontrarás un desarrollador que sólo use estos lenguajes, HTML y CSS son lo suficientemente críticos para el desarrollo de software moderno como para asegurar que desarrolladores de la parte delantera son capaces de usarlos de manera efectiva. Si bien son sencillas para empezar, las aplicaciones avanzadas requieren una profunda habilidad y comprensión. Es esencial verificar que su desarrollador tenga esta comprensión.

Mira más cualidades de un ingeniero de software.

1. ¿Qué son HTML y CSS y para qué se usan?

1.1 ¿Qué es el HTML?

HTML o Lenguaje de Marcado de Hipertexto es el lenguaje de marcado estándar para crear páginas web y aplicaciones web. Los lenguajes de marcas se diferencian de los lenguajes de programación en que no realizan ninguna lógica. En cambio, el HTML está diseñado para crear un documento estructurado utilizando elementos como imágenes, formularios, listas, etc. Depende del navegador interpretar este documento para crear las páginas web que terminas viendo (como la que estás leyendo ahora mismo).

1.2 ¿Qué es el CSS?

Las hojas de estilo en cascada o CSS proporcionan una definición estándar de cómo deben aparecer los diferentes elementos en la página. ¿Qué es lo que quiero decir? Imagina que quieres que un pintor pinte tu casa, podrías decirle el color que quieres de cada pared individual. Esto sería similar a dar tus instrucciones sólo usando HTML. Requeriría muchas instrucciones para tus pintores y tardaría más tiempo en escribir.

Pero si eres como yo, quieres que todas las paredes de tu casa sean del mismo color. En ese caso, le dirías a tu pintor que pinte cada pared de un color determinado. Esto sería como dar instrucciones usando CSS. Con CSS, puedes definir un aspecto estándar de un elemento en tu página para que cada vez que crees un nuevo elemento, todos tus estándares de diseño estén intactos. Requiere menos instrucciones y significa que los nuevos elementos, como los colores y las fuentes, serán consistentes con el resto de la página.

1.3 ¿Para qué se utilizan el HTML y el CSS?

Usados juntos, el HTML y el CSS son las piedras angulares de la World Wide Web. Ambos son muy populares, y los conceptos básicos son fáciles de aprender. Tomados con JavaScript, son dos de las tres habilidades esenciales del desarrollador. Pero un desarrollador de front-end necesita saber más que los conceptos básicos para hacer un buen trabajo.

2. ¿Qué es importante que un reclutador de IT sepa sobre las habilidades de los desarrolladores frontales HTML y CSS?

2.1 Normas

El World Wide Web Consortium (W3C) es la organización de estándares internacionales que crea los estándares HTML y CSS. Dicho esto, la última versión de HTML es HTML5, que sigue el estándar WHATWG (llamado HTML Living Standard) en lugar del estándar del W3C. No hay una sola versión de CSS porque desde el CSS 3, está dividido en módulos, y cada módulo está versionado independientemente.

Casi todos los desarrolladores, y mucho menos un desarrollador de front-end, deberían tener al menos un entendimiento básico de HTML y CSS. Un desarrollador de HTML o CSS es raramente una posición autónoma. La mayoría de las veces, es sólo una de las habilidades de un desarrollador de front-end o full-stack o un diseñador gráfico/web.

Las normas no cambian muy a menudo. Sin embargo, las nuevas características llegan regularmente, por lo que los desarrolladores deben mantenerse al día. En los últimos años, ha habido un flujo constante de nuevas características y actualizaciones de CSS. Tanto es así que los desarrolladores del back end pueden no ser conscientes de lo poderosa que se ha vuelto la tecnología.

2.2 Herramientas

Cada navegador interpreta el CSS y el HTML de una manera ligeramente diferente. El desarrollador debe conocer las diferencias entre los diferentes navegadores y su soporte de las diferentes versiones de HTML/CSS. Además, los desarrolladores deben saber qué herramientas pueden utilizar para crear contenido HTML/CSS en todos los navegadores.

Los desarrolladores de frontend que usan marcos de JavaScript suelen trabajar con bibliotecas llenas de componentes listos para usar. Sin embargo, la creación de una aplicación lista para la producción requiere la adaptación del estilo para el diseño del producto. Este tipo de adaptación a menudo requiere un conocimiento avanzado de CSS.

Para facilitar y acelerar las páginas web, los desarrolladores suelen utilizar herramientas adicionales como los marcos de trabajo del front end (es decir, Bootstrap) o el lenguaje de hojas de estilo (es decir, LESS o SCSS).

2.3 Experiencia del usuario (UX)

La UX es un componente vital de desarrollo de la parte delantera. Un competente desarrollador de la parte delantera debe poseer la capacidad de ver páginas web o aplicaciones desde la perspectiva del usuario. Eso significa optimizar el UX holísticamente. Sugerir mejoras en la aplicación, como eliminar los clics innecesarios o mejorar el rendimiento optimizando la velocidad de carga de la página, son dos ejemplos de optimización.

El Diseño Web Receptivo (RWD) es otra importante técnica que los desarrolladores de primera línea deben considerar para UX. Es el enfoque que sugiere que el diseño y el desarrollo deben responder al comportamiento y al entorno del usuario en función del tamaño de la pantalla, la plataforma y la orientación.

Por último, a11y (que es una abreviatura del término "accesibilidad") se está convirtiendo en un movimiento ampliamente debatido en los círculos tecnológicos y en otra importante consideración de UX. No se refiere a una norma, medida o ley específica que tenga que ver con la tecnología, sino más bien a un cambio en la forma en que se construyen los sitios web para dar cuenta de las personas con discapacidades. El proyecto tiene por objeto hacer las páginas web más digeribles, actualizadas y que perdonen a quienes tienen discapacidades, ya sea una discapacidad visual u otra forma de dolencia.

Fuente: Unsplash - Safar Safarov

3. Evaluar los conocimientos de HTML y CSS de un desarrollador de front-end usando su currículum.

El primer indicio que muchos reclutadores tienen del conocimiento de HTML y CSS de un desarrollador de primera línea es lo que está escrito en el currículum del candidato. Más allá de los conocimientos simples de HTML y CSS (que deberían ser un hecho para cualquier desarrollador de front-end), es vital ver qué tan conocedor y actualizado está el candidato con la pila de tecnología del front-end. A continuación se incluye un glosario de habilidades que hay que tener en cuenta y un resumen de todo lo que el candidato debe saber para ayudarle a entender mejor qué buscar en un desarrollador de front-end.

3.1 Glosario de HTML y CSS para reclutadores técnicos

Marcos frontales	Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
Preprocesadores CSS	Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
Marcos HTML5	Esqueleto, HTML KickStart, Montaje, SproutCore, Zebra,
Animaciones	Diseño de Web receptivo (RWD)
Accesibilidad	A11Y
Convenciones	Modificador del elemento de bloqueo
Herramientas	Módulos CSS, CSS en JS
Otros/Miscelánea	Plantilla de HTML5

3.2 Estándares HTML - tipos de HTML

• HTML 4 - la versión básica de HTML recomendada por el W3C en 1997
• XHTML - una extensión de HTML4, sólo una versión más estricta de HTML 4. Incorporó algunas características de XML en HTML.
• HTML5 - última versión del estándar HTML. El más utilizado.

3.3 Estándares de CSS

• CSS 2 - Especificación CSS de nivel 2 publicada por el W3C en 1998
• CSS 2.1 - CSS nivel 2 revisión 1, corregidos los errores en CSS2
• CSS 3 - divide la especificación en diferentes secciones llamadas módulos, un cambio importante. CSS 3 introdujo muchas nuevas características como nuevos selectores, nuevas propiedades, cambios en el modelo de caja, y mucho más.

3.4 Marcos HTML y CSS

El HTML y el CSS básicos son fáciles de codificar, pero el nivel de complejidad que se encuentra en los sitios web modernos puede llevar mucho tiempo codificarlos directamente. Afortunadamente, los desarrolladores no están obligados a crear todo desde cero. Hay marcos de trabajo disponibles que ofrecen ayuda con componentes listos para usar y proporcionan una forma fácil de personalizar el aspecto de una página.

Los marcos más populares para buscar son:

• Bootstrap (v4)
• Fundación (última versión 6)

3.5 Otras áreas de HTML y CSS que tu desarrollador de front-end debe conocer

Como los fundamentos de CSS son bastante fáciles de aprender, hay algunas áreas de CSS que requieren un esfuerzo extra para ser usadas eficientemente por los desarrolladores. Estas incluyen:

• Modelo CSS Flexbox
• Grilla CSS
• Modelo de caja CSS
• Elementos de diseño con posicionamiento absoluto
• Elementos de diseño con flotadores
• Animaciones CSS

4. Preguntas y respuestas de la entrevista HTML/CSS

Puedes encontrar estas preguntas y más aquí.

4.1 HTML Preguntas y respuestas de la entrevista

¿Qué es lo que hace un doctor tipo?

El tipo de documento determina a qué versión de HTML se refiere el documento.

¿De qué tipo de cosas hay que tener cuidado cuando se diseña o desarrolla para sitios multilingües?

Las respuestas de los candidatos a esta pregunta deben demostrar si tienen o no experiencia en la construcción de sitios de gran escala de diferentes regiones del mundo. Las respuestas que incluyen los siguientes temas son un buen indicador de un candidato informado: apoyar el Unicode para la codificación, de izquierda a derecha vs. de derecha a izquierda, automatizar la traducción de monedas, fechas y forma plural, y parametrizar las cadenas traducidas

Describa la diferencia entre , y .

Las respuestas a esta pregunta están relacionadas con el conocimiento del candidato de cómo se ejecuta JavaScript dentro de una aplicación web. Típicamente, los scripts se ejecutan secuencialmente, y son técnicas para cargar los scripts en un orden diferente.

¿Por qué es generalmente una buena idea posicionar el CSS <link href="">s entre <head></head> y JS <script>s just before </body>? Do you know any exceptions?</script>

Las respuestas a esta pregunta demuestran un alto nivel de comprensión de la estructura del documento HTML. Enlaces CSS dentro de <head> se asegurará de que cualquier contenido dentro de la página estará correctamente estructurado desde el principio de la renderización (sin destellos temporales de contenido). Por otro lado, cargar JS desde el fondo de <body> pedirá al navegador que ejecute JS después de que se haya mostrado el contenido.

¿Qué es la representación progresiva?

Las respuestas demostrarán la atención del candidato al rendimiento de sus sitios. La representación progresiva es una técnica para cargar las páginas vistas más rápido.

4.2 Preguntas y respuestas de la entrevista del CSS

¿Qué es la especificidad del selector de CSS y cómo funciona?

Esta pregunta está diseñada para decir si un candidato ha tenido la oportunidad de construir y/o mantener grandes sitios web en los que puede haber sido responsable de varias hojas de estilo (potencialmente conflictivas). Si hay muchas hojas de estilo conflictivas aplicadas a un determinado bloque, el CSS necesita determinar cuál es la más importante.

¿Cuál es la diferencia entre "reiniciar" y "normalizar" el CSS? ¿Cuál elegirías y por qué?

Las respuestas demostrarán si un candidato tiene experiencia en la eliminación de diferencias entre navegadores. Reiniciar es eliminar los estilos predeterminados y normalizar es unificar los resultados.

Describa las carrozas y cómo funcionan.

Las respuestas determinan aspectos fundamentales del CSS. Los flotadores determinan cómo colocar un elemento dentro de un contenedor.

Describa el BFC (Contexto de Formato de Bloque) y cómo funciona.

La respuesta determina si el candidato entiende cómo los bloques estructuran la página y cómo pueden ajustarse entre sí.

¿Cuáles son las diversas técnicas de despeje y cuál es la apropiada para cada contexto?

Las respuestas a esta pregunta demuestran un conocimiento fundamental del CSS. Las 3 técnicas más comunes son; "clear: both", propiedad de desbordamiento y ":after" pseudo-sector.

¿Cómo abordaría la solución de los problemas de estilo específicos de los navegadores?

Las respuestas a esta pregunta deben referirse a si el candidato entiende cómo garantizar un aspecto y un tacto consistentes para los usuarios de muchos dispositivos diferentes. Un ejemplo de solución podría ser normalize.css.

¿Cómo sirve sus páginas para los navegadores con funciones limitadas?

Las respuestas demostrarán que los candidatos son conscientes de que algunos usuarios pueden utilizar versiones más antiguas de los navegadores y que las características del CSS dentro de la base de código pueden no ser compatibles. Esto es de particular importancia cuando se crean sitios de gran escala como los sitios de publicación de noticias.

¿Qué técnicas/procesos utiliza?

Degradación elegante - proporciona un respaldo para una función de navegador que falta, de modo que si algo no está soportado se proporciona un UX similar como sea posible.

Mejora progresiva - se centra en proporcionar características para los usuarios de base y añadir nuevas funcionalidades sólo cuando un navegador las soporta.

¿Cuáles son las diferentes maneras de ocultar visualmente el contenido (y hacerlo disponible sólo para los lectores de pantalla)?

Las respuestas a esta pregunta verifican si el candidato tiene experiencia en proporcionar accesibilidad a sitios web (a11y), es decir, en asegurar una UX igual para las personas con discapacidades. Este escenario en particular debería darse cuando el contenido es visualmente aparente para los usuarios videntes y se dispone de información de respaldo para que los lectores de pantalla proporcionen información.

5. Examen técnico de las habilidades de los desarrolladores de HTML y CSS usando una prueba en línea.

Los desarrolladores de front-end existen para construir el front-end de las páginas web y aplicaciones. Aunque es importante ver si un desarrollador es consciente de los conceptos esenciales, es más importante saber si pueden aplicarlos al trabajo real. Esto se puede hacer con prueba de codificación o entrevista de programaciónpero no todas las plataformas para estas pruebas se crean igual.

5.1 ¿Qué pruebas de codificación HTML y CSS deberías elegir para probar las habilidades de los desarrolladores del front end?

Cuando busque la prueba de codificación online de HTML y CSS correcta, debería asegurarse de que coinciden con los siguientes criterios:

• La prueba debe reflejar el trabajo real que se está haciendo, utilizando HTML y CSS en los proyectos reales de primera mano.
• Tiempo eficiente - una o dos horas como máximo.
• Se envía automáticamente y se puede llevar a cualquier lugar para darle a usted y a su candidato flexibilidad.
• Ir más allá de comprobar si el código rinde una página, pero también comprobar la eficiencia del código y lo bien que rinde a través de múltiples plataformas.
• Estar lo más cerca posible del entorno natural de desarrollo del frente y dejar que el candidato acceda a los tipos de recursos que normalmente utilizaría en su trabajo.
• Proporcionar a los candidatos acceso a todas las bibliotecas, marcos y otras herramientas que normalmente utilizarían, incluidas las más importantes para el trabajo
• Comparar las habilidades del candidato con el examen apropiado...

6. DevSkiller listo para usar en línea HTML y pruebas de codificación CSS para evaluar las habilidades de los desarrolladores de primera línea

La metodología de DevSkiller's RealLifeTestingTM está construida para probar a los desarrolladores como si ya estuvieran en el trabajo. Los desarrolladores no reciben pruebas de una sola página para alcanzar un resultado predeterminado. En DevSkiller, los desarrolladores de primera línea son probados con proyectos completos de múltiples archivos que desarrollan para mostrar toda la extensión de sus habilidades. Aquí hay algunas pruebas prefabricadas que incorporan HTML y CSS.