Introduction

Dans ce projet, tu vas apprendre a créer ton propre poster.

Ressources en ligne

Nous recommandons l’usage de trinket pour écrire du HTML et CSS en ligne. Ce projet contient les trinkets suivants:

• ‘Wanted’ point de départ – jumpto.cc/web-wanted

Les enfants peuvent aussi commencer à partir d’un trinket vide (jumpto.cc/trinket-blank) pour écrire leur propre HTML et CSS, ou bien ils peuvent utiliser l’exemple suivant (jumpto.cc/trinket-template).

Il y a aussi un trinket contenant la solution au défis :

• ‘Wanted’ Terminé

Ressources hors-ligne

Ce projet peut etre completé hors-ligne si souhaité. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Download Project Materials’ pour ce projet. Ce lien contient un dossier ‘Project Resources’, qui inclut les resources que les enfants auront besoin pour terminer leurs projets hors-ligne. Soyez sur que chaque enfant à accès a une copie de ces ressources. Le dossier contient les fichiers suivant :

• template/Template.html
• template/style.css
• wanted/Wanted.html
• wanted/style.css
• wanted/robot.png

Vous pouvez aussi trouver une version complète des défis du projet dans le dossier ‘Club Leader Resources’, qui contient :

• wanted-finished/WantedFinished.html
• wanted-finished/style.css
• wanted-finished/robot.png

Objectif de la lesson

• Ce projet donne aux enfants l’opportunité d’écrire leur propre CSS pour styler une page internet.

Défis

• “Améliore ton poster” - ajouter une nouvelle propriété CSS au selecteur div;
• “Améliore ton image” - ajouter une nouvelle propriété CSS au selecteur img;
• “Rend ton poster encore plus cool” - ajouter de nouvelles propriétés CSS au selecteur h3 et p;
• “Fait la pub d’un evenement” - écrit et édite du code HTML et CSS.

Style ton poster

Commençons par éditer le code CSS pour ton poster.

• Ouvre ce trinket: jumpto.cc/web-wanted. Si tu es sur la version en ligne, tu peux aussi utiliser la version embarquée de Trinket:

  

• Clique sur l’onglet “style.css”. Tu verras qu’il y a déjà une propriété CSS pour l’élément div qui contient les différentes parties de ton poster.

  

• Commençons par changer la proriété text-align:

  

  Que ce passe-t-il lorsque tu changes la valeur center en left ou right?

• Et qu’en est-il de la propriété border ?

  

  2px veux dire 2 pixels. Qu’est-ce qui se passe si tu changes 2px solid black en 4px dotted red?

• Change la longueur width de ton poster a 400px. Qu’est ce qui change sur ton poster?
• Ajoutons un peu de CSS pour changer la couleur de fond. Va à la ligne 5 de ton code et appuie sur la touche ‘Entrer’, pour commencer une nouvelle ligne.

  

  Entre le code suivant sur ta nouvelle ligne:

  

  Fait attention a correctement écrire le code ci-dessus. Tu devrais voir le fond de ton

  changer en jaune.

  

Defi: Améliore ton poster

Ajoute la propriété CSS suivante a ton style div:

Qu’est ce que cette propriété a transformé ? Que ce passe t’il si tu changes la valeur de pixels dans le code ci-dessus?

Style ton image

Continuons en améliorant l’image de ton poster.

• Pour l’instant. il n’y a pas de propriétés CSS pour ton tag , et si on en rajoutais une!

  Premièrement, ajoute le code CSS suivant après le code pour ton div

  

  

• On peux maintenant rajouter les propriétés CSS pour les images entre les crochets { et }

  Par exemple, ajoute ce code entre les crochets pour définir la longueur de ton image:

  

  Tu devrais voir la taille de ton image changer, sa longueur est maintenant de 100 pixels.

  

• Tu peux aussi ajouter une bordure a ton image avec ce code:

  

• As-tu remarqué qu’il n’y a pas beaucoup d’espace entre l’image et la bordure?

  

  Tu peux ajouter plus d’espace autour de l’image en utilisant la propriété padding:

  

  padding est l’espacement entre le contenu (dans notre cas, l’image) et sa bordure.

  

  Que se passe t’il si tu changes la valeur du padding a 50px?

Défi: Améliore ton image

Peux tu changer la couleur de fond de ton image? et ajouter des bords arrondis ?

Style ton titre

Et maintenant, améliorons le style de ton titre, le tag <h1>

• Ajoute le code suivant en dessus du code CSS pour ton image:

  

  C’est ici que tu va placer tes propriétés CSS pour ton titre <h1> .

• Pour changer la typographie de ton, ajoute le code suivant entre les crochets.

  

• Tu peux aussi changer la taille de ton titre:

  

• As tu remarqué qu’il y a beaucoup d’espace en le titre et tout ce qu’il y a autour ?

  

  C’est parce qu’il y a une marge autour du titre. Une marge, c’est l’espace entre l’élément (dans ce cas le titre) et les autres éléments autour de lui.

  Tu peux rendre la marge plus petite avec ce code:

  

  

• Tu peux aussi souligner ton titre: