• 4 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/24/23

Entrainez-vous : réalisez un mini-projet

À 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.

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement