web-dev-qa-db-fra.com

Comment puis-je évaluer les connaissances d'un candidat en Html / CSS lors d'un entretien?

J'essaie de déterminer de bonnes questions d'entrevue pour évaluer la capacité des personnes qui viennent pour un travail Html/CSS, mais ce sujet est extrêmement large, et je ne sais pas quel genre de questions je peux poser pour évaluer correctement le HTML de quelqu'un/Connaissances CSS.

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

Idéalement, je voudrais poser quelques questions, puis leur donner un scénario réel à combattre.

web-developmenthtmlcss
44
webnoob

HTML et CSS sont difficiles à interviewer pour plusieurs raisons:

  1. Ils sont trop basiques, par exemple, par rapport à un langage de programmation,

  2. Ils dépendent beaucoup du contexte de l'emploi. Exemples:

    • Si vous créez des sites Web à l'échelle Google, extrêmement rapides et optimisés, les personnes que vous interviewez pour le travail ne peuvent pas 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 pour <img/>, etc.

    • Si vous créez de terribles sites Web pleins de piratages, vous devriez demander aux personnes que vous interviewez comment elles feront tel ou tel piratage, comment elles servent différents CSS pour différents navigateurs, etc.

    • etc.

  3. S'il s'agit d'un travail purement HTML et CSS, la personne devra travailler avec les concepteurs d'une part et les développeurs d'autre part. Ils doivent connaître HTML et CSS, mais ce qui est beaucoup plus précieux, c'est 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.

    Par exemple, ils doivent savoir comment structurer leur code HTML de manière à ce qu'il soit facile pour un développeur JavaScript d'ajouter de l'interactivité plus tard.

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

Quel est votre navigateur préféré?

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

Non, je plaisante. La réponse n'est pas pertinente. 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é.

En utilisant principalement Chrome, je travaille quotidiennement avec Developer Tools. Ces outils me permettent de:

  • Afficher les demandes faites depuis une page,

  • Étudiez le temps de chargement d'une page et les ressources associées, notamment la recherche DNS, les temps d'attente et de réception,

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

  • Affichez le DOM et étudiez 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 grande évolutivité. YSlow est également un bon outil pour déterminer si le serveur est correctement configuré (envoi des en-têtes corrects, etc.).

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

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

Ici, vous voulez que la personne puisse expliquer que <dl/> est pour les dictionnaires, associant une clé, <dt/>, avec une ou plusieurs valeurs, <dd/>. Alors que l'utilisation principale de cette balise était purement liée à la sémantique, en pratique, elle était largement utilisée pour remplacer les tables, un bon exemple étant PHPBB3. C'est une bonne chose lorsque les tableaux ralentissent le rendu de la page, mais cela doit être utilisé 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 l'ordinaire 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 mise en page fixe facilite la conception de la page, surtout lorsqu'il y a beaucoup de graphiques pleine largeur. Même sans graphisme, c'est toujours plus facile, car vous ne vous souciez que d'un cas précis. Par exemple, Programmers.SE étant un site Web à mise en page fixe, la colonne qui affiche les questions et les réponses a toujours la même taille. Si une mise en page 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, tandis que sur les grands écrans, les lignes seraient extrêmement grandes, donc le texte serait illisible aussi.

Le problème avec la disposition fixe est qu'elle fonctionne bien pour quelques résolutions 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 écrans larges et l'utilisation croissante d'Internet sur les 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, de grandes pages, une maintenance faible et, pendant le développement, des coûts plus élevés et des délais manqués.

Sur une page avec une mise en page fluide, comment éviter la situation où une colonne de texte devient trop grande pour rester lisible?

Vous pouvez limiter la largeur d'une zone de texte en utilisant max-width propriété.

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

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

  • Il aide à séparer les problèmes et à nettoyer le code, ce qui signifie une maintenance moins coûteuse plus tard
  • Il rend les styles réutilisables d'une page à l'autre, 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 délicates:

Comment éviter de dupliquer des couleurs ou des 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?

Pour ce faire, vous utilisez des préprocesseurs CSS, comme Sass ou LESS. Ils permettent de définir des couleurs, des polices et d'autres parties du style à l'intérieur de variables que vous pourrez utiliser plus tard dans vos styles.

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

  • Ils nécessitent parfois de modifier le workflow de développement et de déploiement, afin d'avoir le code CSS à jour dans le navigateur,

  • Ils ne sont connus que de quelques développeurs, ce qui rend plus difficile pour une nouvelle personne de rejoindre ou de maintenir le projet plus tard,

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

Donnez-moi un exemple d'une valeur href d'une image qui se trouve sur CDN, étant donné que cette image est affichée sur un site Web accessible à la fois via HTTP et HTTPS.

Étant donné que HTTPS a besoin que chaque ressource appelée soit également sur HTTPS (sinon, un avertissement de sécurité sera affiché pour l'utilisateur dans de nombreux cas), il n'est pas possible de spécifier le lien comme http://cdn.example.com/image.png. Pour créer correctement un lien vers l'image, //cdn.example.com/image.png doit être utilisé; le navigateur ajoutera alors http: ou https: selon le 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 être ajouté, comment donnez-vous l'impression à l'utilisateur que le site Web Qu'est-ce que cela implique du point de vue HTML?

Si HTTP 1.1 est utilisé, la page peut être fragmentée . Cela signifie que les premières parties apparaîtront plus rapidement, donnant l'impression que le site Web est plus rapide qu'il ne l'est en réalité. Le codage de transfert en morceaux 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 signifie pas qu'ils devraient apparaître en haut de la page). Par exemple, sur un site de commerce électronique, lorsque l'utilisateur souhaite voir les détails du produit, le premier bloc peut contenir le <head/> et les détails du produit. Le prochain morceau peut contenir les éléments principaux comme le logo du site Web, le menu principal, le copyright, etc. Enfin, le dernier morceau peut contenir la section "Les personnes qui ont acheté ce produit 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 réel. Cela peut être n'importe quoi, comme le plus simple ci-dessous, pour 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 du texte. Deux zones sont séparées par une ligne verticale qui s'étend du haut vers le bas de la page. Liste et texte de taille variable, vous ne pouvez pas prédire lequel aura la plus grande hauteur. Vous ne pouvez pas utiliser <table/>s.

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

87
Arseni Mourzenko

Voici quelques questions que je voudrais poser sur CSS:

  1. Modèle de boîte CSS. Marges, remplissage, etc. IE modèle vs 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-block et d'autres valeurs d'affichage. Différence entre display: none; et visibility: hidden;(c'est une bonne et facile question pour les nouveaux utilisateurs de CSS)
  4. inline-block vs float pour les mises en page.
  5. Sélecteurs.
  6. CSS se réinitialise. Pourquoi sont-ils nécessaires et ce qu'ils accomplissent?
  7. Requêtes médias et design réactif.
  8. Comment organiser les styles et comment limiter le nombre de sélecteurs. MOINS, Sass et autres pré-processeurs CSS. CSS orienté objet.

Et quelques questions sur HTML:

  1. Modes Doctype et navigateur.
  2. Pourquoi certaines balises sont-elles plus préférables que les autres (em vs i par exemple)?
  3. Quels sont les principes de base à suivre pour garder HTML et CSS gérables et faciles à entretenir?

En général, je mets davantage l'accent sur le CSS car c'est le domaine que beaucoup de gens trouvent difficile à saisir et à utiliser efficacement. Je rencontre beaucoup de candidats qui mettent "CSS" dans leur CV mais ne sont pas en mesure de répondre à des questions à ce sujet. La plupart des gens disent simplement "Non-non, je sais CSS assez bon pour y faire face mais pas assez bon pour en parler."

Parfois, c'est une bonne idée de simplement donner une tâche simple et une personne à remplir. Dites, concevez une page simple avec une mise en page et un style de bloc qui prend en charge plusieurs tailles d'écran et s'ajuste 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 vos entretiens!

20
Andrew Андрей Листочкин

Si vous menez une interview en direct, la meilleure façon est de demander au développeur d'écrire du code html/css.

Exemple (très courant en développement réel). Demandez au développeur d'écrire le code de page html/css avec:

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

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

Cela devrait ressembler à:

css / html test

Mais avant l'entretien en direct, je vous suggère de tester les candidats en ligne. Parce qu'il est plus facile de tester des candidats en ligne et d'inviter à l'entretien que de bons développeurs qualifiés, que de passer votre temps sur chaque candidat.

8
Joseph

Je me suis assis sur quelques interviews de concepteurs de sites Web, et ce que nous avons fait était imprimer une mise en page de blog très simple sur papier, puis demander au candidat de simplement prendre un peu de HTML et/ou CSS sur la page plus de 10 minutes environ, pour nous donner une idée de base de la façon dont ils le coderaient. Cela nous a permis de savoir si quelqu'un connaissait réellement CSS ou non. Nous cherchions simplement des trucs de base comme des flotteurs contre des tables, ou autre chose, et nous avons expliqué que cela ne devait en aucun cas être parfait.

Des tonnes de gens ont revendiqué des années d'expérience avec CSS, mais quand on les a poussés à l'écrire, ils écrivaient des suppositions folles comme "layout: floating; direction: up;" Ou d'autres bavardages similaires. Plus de 1 "CSS Ninja" n'a même pas eu la bonne syntaxe, à la "div(margin=5)". Cela m'a ouvert les yeux, de voir combien de personnes se trouvent directement dans les interviews. Et il semble plus facile de mentir sur CSS que sur le codage direct. Vous ne pouviez rien savoir sur CSS, mais faites une recherche sur Google et soyez capable de jeter la terminologie appropriée assez rapidement. Vous ne pouvez pas vraiment le faire efficacement avec des concepts de niveau supérieur comme la POO, par exemple.

4
Graham

Un type de test applicable aux langages de programmation et aux langages de balisage est la révision de code. Créez un petit échantillon (20 ou 30 lignes) avec un mélange d'erreurs de syntaxe, d'erreurs logiques, de cas d'angle, sans doute de mauvais style ... Ensuite, demandez au candidat d'identifier tout ce qui lui semble suspect.

Il est important d'utiliser correctement ce type de test: comme pour toute question d'entrevue, la façon 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 appliquer cela à CSS:

  • Erreurs de syntaxe: manquez des points-virgules. En bonus, vous pouvez en manquer quelques-uns optionnels (style défendable) et voir si le candidat commente.
  • Erreurs logiques: placez une propriété préfixée après celle non préfixée. Cela teste également la familiarité avec CSS3 et peut provoquer une discussion sur la façon dont la norme est développée.
  • Cas d'angle: par ex. une marge avec 3 valeurs - vous seriez surpris du nombre de personnes qui ne savent pas que c'est possible. Si le candidat ne fait aucun commentaire, vous pouvez demander comment il est interprété pour vérifier qu'il l'a ignoré par connaissance plutôt que par ignorance.
  • Un autre cas d'angle: exercez vos deux ou trois bogues IE7 préférés. Cela distinguera ceux qui ont des cicatrices de bataille (qui devraient en repérer au moins un) des inexpérimentés ou du Webkit uniquement.
  • Style: spécificité excessive, em et px manquants, etc. Quelqu'un qui a étudié la syntaxe de l'interview n'en saisira probablement pas beaucoup.
2
Peter Taylor

Il existe un test en ligne dans lequel vous devez répertorier les balises HTML ou 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 connaît suffisamment HTML/CSS.

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

Quant au scénario réel, tout dépend de ce sur quoi le candidat travaillera dans votre entreprise. Si vous voulez juste un développeur frontal, vous pouvez demander une conception de site Web sur un sujet aléatoire.

2
XGouchet

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

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

0
DAVIEAC