À vous de jouer !
Pour cette activité, je vous ai préparé un mini-projet typique, que je pourrais donner à un candidat pour un entretien de recrutement. Ce dernier s’adresse avant tout aux développeurs web (vs des développeurs Android ou iOS), et vous devez avoir quelques bases en HTML/CSS pour le réaliser.
Vous devez réaliser l’activité en deux temps :
Dans un premier temps, rédigez le code qui permet d'intégrer cette maquette :
Notez bien : n’étant pas graphiste, je vous ai fourni une maquette au format PNG. Ce n’est donc pas grave si votre version intégrée ne ressemble pas totalement à l’image ;
Puis, dans un second temps, listez des questions que l’on pourra vous poser avec leurs réponses possibles. Vous devez trouver un minimum de 5 questions : ces dernières peuvent porter sur le HTML, le CSS et la programmation de manière générale (par exemple, les requêtes HTTP et/ou les boucles).
À l'issue de l'activité, vous aurez donc :
Le lien du repository GitHub avec la maquette intégrée.
Un document texte avec votre liste de questions et réponses.
Gardez bien en tête que ce mini-projet est là pour vous faire pratiquer. :) L’idée est donc que vous fassiez le maximum pour rendre un projet de qualité professionnelle.
Faites donc attention à vos nommages, à vos commentaires, à la façon dont vous organisez votre CSS, etc. Vous êtes, par ailleurs, libre d’utiliser un framework CSS tel que Bootstrap.
À vous de coder !
Vérifiez votre travail
Pour vous aider dans votre auto-correction, voici un exemple corrigé à votre disposition. Inspirez-vous de cette solution pour réaliser votre correction, mais gardez bien en tête que c’est la cohérence et la logique du travail qui comptent.
Il y a deux documents dans le corrigé :
un premier se concentre sur la partie code du projet .
le second donne des exemples de questions et de réponses possibles.
La partie HTML
Pour vérifier que vous avez bien compris le HTML, posez-vous les questions suivantes :
Le code HTML est-il compréhensible ? Est-il, par exemple, bien indenté et commenté ?
Le code génère-t-il des erreurs lors que vous utilisez un validateur (https://validator.w3.org/) ?
Si le projet utilise Bootstrap, est-ce qu’il a bien été intégré au projet ?
Si les textes ou les images sont différents de la maquette, ce n’est pas grave. L’important est ici de se concentrer sur l’organisation du HTML et sur la sémantique du projet :).
La partie CSS
Posez-vous les questions suivantes :
Le code CSS est bien indenté et commenté ?
Genère-t-il des erreurs via un validateur ? - https://jigsaw.w3.org/css-validator/
Si un framework CSS a été utilisé, a-t-il été bien utilisé ? Autrement dit, n’y a-t-il pas du CSS en trop ?
Utilisez-vous des media queries ? Si oui, sont-elles utilisées de façon pertinente ?
Enfin, le code CSS est-il ordonné ? Autrement dit, est-ce qu’il vise les points les plus génériques (comme la couleur ou la police de fond) avant de s’attarder sur les points les plus précis ?
Les critères d'évaluation
Vérifiez que votre travail répond aux critères suivants :
Tous les éléments de la maquette ont été convertis en éléments HTML et CSS ;
Le contenu de la page web ressemble à la maquette ;
Toutes les balises sémantiques sont utilisées à bon escient (Par exemple “<article>Ceci est mon article.</article>” au lieu de “<div>Ceci est mon article.</div>”) ;
Le code HTML est correctement indenté, comprend des commentaires explicatifs et il utilise le HTML 5 ;
Le CSS est présent, mais des bugs à l’affichage sont tolérés.
Vous avez rédigé 5 questions précises.
Vous avez rédigé 5 réponses claires aux questions.
