Comment puis-je évaluer les connaissances d'un candidat en HTML / CSS lors d'un entretien? [fermé]

J'essaie de déterminer quelques bonnes questions d'entrevue pour évaluer l'aptitude des personnes à postuler à un emploi en HTML / CSS, mais ce sujet est extrêmement vaste et je ne suis pas sûr du type de questions que je peux poser pour évaluer correctement le code HTML / de quelqu'un. Connaissances CSS.

Quel type de questions puis-je poser pour évaluer les capacités HTML / CSS d'un candidat lors d'un entretien?

Idéalement, j'aimerais poser quelques questions et leur donner ensuite un scénario de la vie réelle à combattre.

HTML et CSS sont difficiles à interviewer pour plusieurs raisons:

1. Ils sont trop basiques, comparés, par exemple, à un langage de programmation,

2. Ils dépendent beaucoup du contexte du travail. Exemples:

   • Si vous créez des sites Web extrêmement rapides et optimisés sur Google, les personnes que vous interviewez pour le poste ne peuvent ignorer les sprites CSS.

   • Si vous créez des sites Web valides XHTML W3C, vous devez vous assurer que les candidats connaissent la différence entre XHTML 1.0 et XHTML 1.1, ou quels sont les attributs obligatoires <img/>, etc.

   • Si vous créez des sites Web épouvantables remplis de hacks, vous devriez demander aux personnes que vous interviewez comment elles vont faire tel ou tel hack, comment elles servent différents CSS pour différents navigateurs, etc.

   • etc.

3. S'il s'agit d'un travail HTML et CSS pur, la personne devra travailler avec les concepteurs, d'une part, et les développeurs, d'autre part. Ils doivent connaître le HTML et le CSS, mais leur capacité à interagir avec ces personnes et à comprendre à la fois les besoins des concepteurs, les exigences des développeurs et les contraintes du HTML et du CSS a beaucoup plus de valeur .

   Par exemple, ils doivent savoir comment structurer leur code HTML de manière à ce qu'un développeur JavaScript puisse facilement ajouter de l'interactivité ultérieurement.

Vous voudrez peut-être commencer par quelques questions de base:

Quel est ton navigateur préféré?

Si la personne répond "Internet Explorer", arrêtez l'interview immédiatement: vous n'avez pas besoin de quelqu'un comme ça.

Non, je plaisante. La réponse est hors de propos. Au lieu de cela, vous pouvez demander ce qui suit:

Parlez-moi des outils de débogage que vous utilisez dans votre navigateur préféré.

Principalement en utilisant Chrome, je travaille quotidiennement avec les outils de développement. Ces outils me permettent de:

• Voir les demandes faites à partir d'une page,

• Étudiez le temps nécessaire pour charger une page et les ressources associées, en particulier les temps de consultation, d'attente et de réception DNS,

• Etudiez les en-têtes des éléments envoyés, ainsi que l'indicateur de cache,

• Voir le DOM et étudier comment les sélecteurs CSS sont appliqués,

J'utilise également YSlow, qui me sert de liste de contrôle pour l'optimisation d'un site Web qui nécessite une évolutivité élevée. YSlow est également un bon outil pour déterminer si le serveur est configuré correctement (envoi d'en-têtes corrects, etc.).

Dans Firefox, j'utilise Firebug, l'outil très similaire aux outils de développement de Chrome. Les outils de développement sont également disponibles dans les nouvelles versions d'Internet Explorer et me permettent également de passer aux vues compatibles IE7 à IE10. Cette dernière fonctionnalité est très utile, car sans elle, je serais obligé d’installer plusieurs machines virtuelles uniquement pour des tests hérités, ou d’utiliser beaucoup plus souvent les services payants comme Litmus .

S'il vous plaît, expliquez-moi de quoi <dl/>parle le tag? Quelle était l'utilisation prévue de cette balise? Comment est-il utilisé dans la pratique? Que pensez-vous de cette utilisation étendue?

Ici, vous voulez que la personne soit en mesure d'expliquer <dl/>est pour les dictionnaires, associant une clé, <dt/>avec une ou plusieurs valeurs, <dd/>. Bien que l'utilisation principale de cette balise soit purement liée à la sémantique, elle a été largement utilisée pour remplacer des tableaux, un bon exemple étant PHPBB3. C’est une bonne chose lorsque les tableaux ralentissent le rendu de la page, mais vous devez l’utiliser avec prudence: non seulement les tableaux sont toujours appropriés dans de nombreux cas pour mieux décrire les données, mais il peut également y avoir d’autres moyens, tels que des outils ordinaires. listes, pour décrire le contenu sans utiliser <dl/>.

Quelle est la différence entre les dispositions fixes et fluides? Quels sont les avantages et les inconvénients de chacun?

La disposition fixe a des largeurs prédéfinies des éléments. Les éléments d'une mise en page fluide dépendent de la largeur de la page.

La disposition fixe facilite la conception de la page, en particulier lorsque les graphiques pleine largeur sont nombreux. Même sans graphiques, c'est toujours plus facile, car vous ne vous occupez que d'un cas précis. Par exemple, Programmers.SE étant un site Web à disposition fixe, la colonne qui affiche les questions et les réponses a toujours la même taille. Si une disposition fluide était utilisée pour cette colonne, cela créerait un problème: sur les petits écrans, le texte serait illisible, car les lignes seraient trop courtes, alors que sur les grands écrans, les lignes seraient extrêmement grandes. serait illisible aussi.

Le problème avec la mise en page fixe est que cela fonctionne bien pour quelques résolutions parmi les plus utilisées, mais échoue plus ou moins pour tout le reste. Cela devient particulièrement important depuis l'adoption de très grands moniteurs larges et l'utilisation croissante d'Internet sur de petits appareils mobiles.

La mise en page fluide aide à cela, mais la conception est plus difficile à faire pour un tel site Web. Dans certains scénarios sur des projets mal gérés, cela peut entraîner des piratages HTML et CSS, des pages volumineuses, une maintenance faible et, au cours du développement, des coûts plus élevés et des délais non respectés.

Sur une page avec une mise en page fluide, comment pouvez-vous éviter la situation dans laquelle une colonne de texte devient trop volumineuse pour rester lisible?

Vous pouvez limiter la largeur d'une zone de texte à l'aide de la max-widthpropriété.

Que pensez-vous de ce morceau de code <p color="Red" align="Center">Text here</p>:?

Le morceau de code a un défaut pour mélanger la logique de présentation dans HTML. La logique de présentation doit être mise en CSS pour plusieurs raisons:

• Cela aide à séparer les problèmes et à nettoyer le code, ce qui signifie une maintenance moins chère plus tard,
• Cela rend les styles réutilisables de page en page, ce qui (en dehors des problèmes de maintenabilité) permet de garantir que vous utilisez les mêmes styles sur l'ensemble du site Web,
• Cela aide à réduire la bande passante, car les fichiers CSS seront mis en cache.

Après quelques questions de base comme celle-ci, vous pouvez en poser d’autres plus difficiles:

Comment éviter la duplication de couleurs ou de polices en CSS lorsque ces couleurs ou polices sont appliquées à plusieurs éléments qui ne peuvent pas être ciblés par un seul sélecteur? Y a-t-il des inconvénients?

Vous faites cela en utilisant des pré-processeurs CSS, comme Sass ou LESS. Ils permettent de définir des couleurs, des polices et d’autres éléments du style à l’intérieur de variables que vous pourrez utiliser ultérieurement dans vos styles.

Les inconvénients des préprocesseurs CSS sont les suivants:

• Ils doivent parfois modifier le flux de travail de développement et de déploiement afin de disposer du code CSS à jour dans le navigateur.

• Ils ne sont connus que de quelques développeurs, ce qui empêche une nouvelle personne de rejoindre ou de gérer le projet ultérieurement,

• Il n'y a pas à la fois de bons et de rapides IDE pour Sass ou LESS, et l'intégration au sein des IDE les plus populaires est plutôt décevante.

Donnez-moi un exemple de hrefvaleur d'une image qui est sur CDN, étant donné que cette image est affichée sur un site Web auquel vous pouvez accéder à la fois via HTTP et HTTPS.

Etant donné que HTTPS nécessite que chaque ressource appelée soit également sur HTTPS (sinon, un avertissement de sécurité sera affiché à l'utilisateur dans de nombreux cas), il n'est pas possible de spécifier le lien sous la forme http://cdn.example.com/image.png. Pour lier correctement à l'image, //cdn.example.com/image.pngdoit être utilisé; le navigateur sera alors ajouté http:ou https:dépendant du contexte.

Étant donné que la taille des pages et le nombre de demandes sur un site Web ne peuvent pas être optimisés et que le contenu ne peut pas être modifié ni AJAX ajouté, comment donnez-vous l'impression à l'utilisateur que le site Web est plus rapide? Qu'est-ce que cela implique du point de vue HTML?

Si HTTP 1.1 est utilisé, la page peut être tronquée . Cela signifie que les premières parties apparaissent plus rapidement, ce qui donne l'impression que le site Web est plus rapide que ce qu'il est en réalité. Le codage de transfert en bloc est impossible dans HTTP 1.0, ce qui signifie qu'il n'y a rien à faire dans ce cas.

Pour pouvoir servir le contenu fragmenté, il faut, du point de vue HTML, réorganiser les éléments, en plaçant les plus critiques en haut du fichier (ce qui ne veut pas dire qu’ils doivent apparaître en haut de la page). Par exemple, sur un site Web de commerce électronique, lorsque l'utilisateur souhaite voir les détails du produit, le premier morceau peut contenir les <head/>détails du produit. Le bloc suivant peut contenir les éléments principaux tels que le logo du site Web, le menu principal, les droits d'auteur, etc. Enfin, le dernier bloc peut contenir la section "Les personnes ayant acheté cet article ont également acheté", les commentaires et les évaluations du produit, le "Partager sur Facebook", etc.

Enfin, vous pouvez demander au candidat de travailler sur un scénario du monde réel. Cela peut être n'importe quoi, comme le plus facile ci-dessous, dans les scénarios complexes où la personne doit faire face à des sprites CSS ou à d'autres techniques d'optimisation avancées, avec des incohérences de navigateur, etc.

S'il vous plaît, pouvez-vous créer une page XHTML avec deux zones: la gauche, avec une liste, et la droite, avec le texte. Deux zones sont séparées par une ligne verticale qui s'étend du haut au bas de la page. La liste et le texte variant en taille, vous ne pouvez pas prédire laquelle aura la plus grande hauteur. Vous ne pouvez pas utiliser <table/>s.

En fait, c'est assez simple mais cela montre si la personne a le réflexe de penser aux hauteurs. Un candidat inexpérimenté créera la float:leftzone et la border-left:solid 1px #ccc;zone, mais oubliez d’ajouter la bordure dans la zone de gauche et de l’étendre de sorte que deux frontières se trouvent au même endroit.

Voici quelques questions que je voudrais poser à propos de CSS:

1. Modèle de boîte CSS. Marges, remplissage, etc. Modèle IE par rapport au modèle W3C. Comment peut-on basculer entre les deux? Quels sont leurs avantages et inconvénients?
2. Positionnement CSS. Qu'est-ce que cela signifie pour un élément d'être "dans le flux" et "hors du flux"
3. inline-blocket d'autres valeurs d'affichage. Différence entre display: none;et visibility: hidden; (c'est une bonne question pour les débutants en CSS)
4. inline-blockvs floatpour les mises en page.
5. Les sélecteurs.
6. CSS réinitialise. Pourquoi sont-ils nécessaires et qu’ils accomplissent?
7. Requêtes avec les médias et design réactif.
8. Comment organiser les styles et réduire le nombre de sélecteurs. LESS, Sass et d’autres pré-processeurs CSS. CSS orienté objet.

Et quelques questions sur HTML:

1. Doctype et les modes de navigation.
2. Pourquoi certaines balises sont-elles plus préférables que d'autres ( emvs ipar exemple)?
3. Quels sont les principes de base à suivre pour que HTML et CSS restent gérables et faciles à maintenir?

En général, je mets davantage l’accent sur les CSS car c’est le domaine que beaucoup de gens ont du mal à saisir et à utiliser efficacement. Je rencontre beaucoup de candidats qui ont mis "CSS" dans leur CV mais ne sont pas en mesure de répondre à leurs questions. La plupart des gens se contentaient de dire "Non-non, je connais assez bien CSS pour le gérer mais pas assez pour en parler."

Parfois, il est judicieux de confier une tâche simple à une personne interrogée. Dites, concevez une page simple avec une mise en page et un style de bloc prenant en charge plusieurs tailles d'écran et s'adaptant en conséquence. Cela devrait prendre environ une heure ou deux et le candidat devrait expliquer ce qu’il fait et pourquoi.

Bonne chance pour interviewer!

Si vous menez une interview en direct, le meilleur moyen est de demander au développeur d’écrire du code html / css.

Exemple (très commun dans le développement réel). Demandez au développeur d’écrire le code html / css de la page avec:

1. Largeur du fluide.
2. En-tête de hauteur 100px;
3. Bouton de connexion au coin droit de l'en-tête
4. Panneaux latéraux gauche et droit d'une largeur de 100 pixels et d'une hauteur de 200 pixels;
5. Panneau central pour le texte de l'article.
6. Pied de page, qui sera toujours au bas. Même si l'article a 1 rangée.

UPD: Bien sûr, demandez au développeur d’écrire le code en utilisant seulement divs (sans tables).

Cela devrait ressembler à:

Mais avant d’interviewer en direct, je vous suggère de tester les candidats en ligne. Parce qu’il est plus facile de tester les candidats en ligne et d’inviter à un entretien uniquement des développeurs de talent, plutôt que de consacrer du temps à chaque candidat.

J'ai participé à quelques entretiens avec des concepteurs de sites Web. Nous avons donc imprimé sur papier une mise en page de blog très simple , puis demandé au candidat de noter du code HTML et / ou CSS sur la page pendant 10 minutes environ, pour donner nous une idée de base de la façon dont ils le coder. Cela nous a permis de savoir si quelqu'un connaissait réellement CSS ou non. Nous recherchions simplement des éléments de base tels que floats vs tables, ou autre chose, et nous avons expliqué que cela n’était pas obligatoirement parfait.

Des tonnes de gens ont réclamé des années d'expérience avec CSS, mais quand ils ont été pressés de l'écrire, ils ont écrit de façon approximative, comme " layout: floating; direction: up;" ou autre. Plus de 1 "CSS Ninja" n'avait même pas la syntaxe correcte, à la " div(margin=5)". C'était très révélateur pour moi de voir combien de personnes restaient immobiles dans les interviews. Et il est apparemment plus facile de mentir à propos du CSS que du codage direct. Vous ne savez peut-être rien sur CSS, mais faites des recherches sur Google pour pouvoir utiliser la terminologie appropriée assez rapidement. Vous ne pouvez pas vraiment faire cela efficacement avec des concepts de niveau supérieur tels que la POO, par exemple.

Il existe un test en ligne dans lequel vous devez répertorier les balises HTML ou les propriétés CSS en 5 minutes.

Bien qu'il ne s'agisse pas d'un test complet, cela peut vous permettre de savoir si le candidat est suffisamment familiarisé avec HTML / CSS.

À propos de la question, vous pouvez faire un test avec un exemple de code et lui demander de détecter les erreurs de syntaxe / structure.

En ce qui concerne le scénario réel, tout dépend de ce sur quoi le candidat travaillera dans votre entreprise. Si vous voulez juste un développeur front-end, vous pouvez demander une conception de site Web sur un sujet aléatoire.

La révision de code est un type de test applicable aux langages de programmation et aux langages de balisage. Créez un petit échantillon (20 ou 30 lignes) avec un mélange d'erreurs de syntaxe, d'erreurs de logique, de casse aux angles, de mauvais style, etc. Demandez ensuite au candidat d'identifier tout ce qui lui paraît suspect.

Il est important d'utiliser ce type de test correctement: comme pour toute question d'entretien, la manière dont le candidat aborde la tâche est importante et pas seulement les résultats.

Je ne vais pas poster mon test, mais quelques astuces pour l’appliquer au CSS:

• Erreurs de syntaxe: oubliez certains points-virgules. En prime, vous pouvez manquer des options (style discutable) et voir si le candidat commente.
• Erreurs logiques: placez une propriété préfixée après la propriété non préfixée. Cela teste également la familiarité avec CSS3 et peut provoquer une discussion sur la manière dont la norme est développée.
• Corner cases: par exemple une marge avec 3 valeurs - vous seriez surpris du nombre de personnes qui ne se rendent pas compte que c'est possible. Si le candidat ne commente pas, vous pouvez demander comment il est interprété pour vérifier qu'il l'a ignoré par connaissance plutôt que par ignorance.
• Autre cas de figure: exercez vos deux ou trois bogues IE7 préférés. Cela permettra de distinguer ceux qui ont des cicatrices au combat (qui devraient en repérer au moins un) des inexpérimentés ou du Webkit uniquement.
• Style: spécificité excessive, manque emet px, etc. Quelqu'un qui a étudié la syntaxe de l'entrevue ne sera probablement pas attraper beaucoup d' entre eux.

De mon expérience personnelle, en travaillant avec d’autres développeurs, je pense que les questions sur HTML et CSS ne sépareront pas les personnes qui savent de quoi elles parlent de celles qui savent ce qu’elles font réellement.

Je recommanderais un prototype / test de simulation basé sur l'expérience réaliste des besoins de votre entreprise.