Le déconfinement nous permet progressivement un retour à la normale. Bonne reprise à tous.

Recette de cuisine

Introduction

Dans ce projet, tu vas apprendre a créer ta propre page internet pour ta recette de cuisine favorite

Ressources en ligne

Nous recommandons l’usage de trinket pour écrire du HTML et CSS en ligne.

Pour ce projet, les enfants peuvent utiliser un trinket vide (jumpto.cc/trinket-blank) pour écrire leur HTML et CSS, ou bien il peuvent se servir de cet exemple (jumpto.cc/trinket-template).

Il y a également un trinket contenant la solution des défis:

Ressources hors-ligne

Ce projet peux etre completé hors-ligne si vous voulez. Vous pouvez accéder au ressources du projet en cliquant sur le lien ‘Project Materials’ pour ce projet. Ce lien contient une section ‘Project Resources’, qui contient les ressources dont auront besoin les enfants pour réaliser ce projet hors-ligne. Vérifiez que chaque enfant à accès à une copie de ces ressources. Ce dossier contient les fichiers suivants:

  • template/Template.html
  • template/style.css

Vous pouvez aussi y trouver une version complète des défis de ce projet dans la section ‘Volunteer Resources’, contenant:

  • recipe-finished/RecipeFinished.html
  • recipe-finished/style.css
  • recipe-finished/banana.jpg

(Toutes les resources sont aussi téléchargeable dans le fichier .zip.)

Objectifs de lesson

  • écrire du HTML:
    • <ul>, <ol> et les tags <li>;
    • Le tag <hr/>;
    • Renforcer l’utilisation des tags imbriqués.
  • écrire du CSS:
    • Couleurs (Noms et codes hexadécimal).

Défis

“Plus d’ingrédients” - ajouter plus d’ingrédients a une liste désordonné;

“Plus d’étapes” - ajouter plus d’étapes a une liste ordonné;

“Plus de couleurs” - ajouter le nom de couleurs, valeurs rgb et codes hexadécimal;

“Commentaires” - ahouter une autre liste désordonné;

“Plus de style” - ajouter des images et des typographies.

Completer ce projet hors-ligne

Si les enfants complètent ce projet hors-ligne, ils devront sauvegarder les images qu’ils veulent utiliser dans le même dossier que le fichier Template.html.

Ils peuvent ensuite juste changer le nom du fichier dans leurs tag <img>:


Choisi ta recette

Avant de commencer a coder, tu va devoir choisir une recette

  • Pense à une recette que tu peux partager avec tes copains. Cela peut etre:
    • Une recette que tu as trouvé sur internet;
    • Ton plat favoris;
    • Quelques chose que tu as inventé!

L’exemple de recette pour ce projet est pour faire un milkshake a la banane. Tu peux copier cette recette si tu n’as pas d’idées.


Ingrédients

Commençons par lister les ingrédients de notre recette.

  • Ouvre ce trinket: jumpto.cc/trinket-template. Si tu lis ce projet en ligne, tu peux aussi utiliser la version incorporé ci dessous.

  • Pour la liste des ingrédients, on va utiliser une liste désordonné, en utilisant le tag <ul>. Va a la ligne 8 de ton code et ajoute ce code HTML, remplace le texte dans ton <h1> avec le titre de ta recette:

  • Regarde ton résultat, et tu devrais voir tes 2 titres.

    Tu ne seras pas en mesure de voir ta liste encore, parce qu’il n’y a aucun élément à ta liste!

  • La prochaine étape sera d’ajouter des éléments à ta liste, en utilisant le tag <li>. Ajouter le code suivant à l’intérieur de ton tag <ul> :

    Comme il s’agit d’une liste désordonné, il n’y a pas de numéro a tes éléments, juste des points.


Défi: Plus d’ingrédients

Peux tu ajouter plus d’ingrédients à ta recette?

Ta page devrais ressembler a ceci:


Method

Next, let’s explain how to make your recipe.

  • Tu vas maintenant utiliser une autre liste pour tes instructions, mais cette fois, tu vas utiliser une liste ordonné, en utilisant le tag <ol>.

Une liste ordonné est une liste numéroté, que tu dois utiliser quand les étapes sont importantes.

Ajoute ce code en dessous de ta liste d’ingrédients, en vérifiant qu’elle se trouve toujours dans ton tag <body>.

  • Maintenant, tu as juste a ajouter des éléments à ta nouvelle liste:

T’as vu, la liste est automatiquement numérotée!


Défi: Plus d’étapes

Serais tu capable d’ajouter toutes les étapes pour créer ta recette de cuisine ?

Ceci devrais ressembler a l’image ci-dessous:


Couleurs!

Il est temps d’ajouter un peu de couleur a notre page de recette.

  • Tu sais maintenant comment ajouter de la couleur au texte de ta page. Ajoute ce code dans ton fichier style.css, pour rendre tout le texte de ta page bleu:

  • Ton navigateur connais plein de couleurs comme blue, yellow (jaune) et même lightgreen (vert clair), mais sais tu que ton navigateur connais en faite les noms de 500 couleurs différentes ?

Il existe une liste de toutes les couleurs que tu peux utiliser: jumpto.cc/web-colours, qui comprend des noms de couleurs comme tomato, firebrick et peachpuff.

Change la couleur de ton texte de blue à tomato.

  • Ton navigateur connais enormément de couleurs, mais en faite il connais les valeurs de couleurs de plus de 16 millions de couleurs!

Peut etre le sais tu deja, mais toutes les couleurs sont fabriqués a partir de trois couleurs primaire: rouge, vert et bleu. Pour indiquer à ton navigateur quelle couleur tu veux afficher, tu dois juste lui définir la quantité de chaque couleurs primaire que tu veux utiliser.

La quantité de rouge, vert et bleu peuvent s’écrirent en chiffres compris entre 0 et 255.

Ajoute ce code à ton CSS, sur le selecteur body de ta page, pour afficher un fond jaune léger.

  • Si tu préfères, tu peux aussi indiquer à ton navigateur quelle couleur afficher en utilisant un code héxadécimal (plus connue sous le nom de hex code). Cela fonctionne de façon similaire à la méthode rgb(), à l’exception que le hex code commence toujours par #, et un ‘nombre’ hexadecimal se défini entre 00 et ff pour la quantité de rouge, vert et bleu.

Remplace ton code rgb() dans ton CSS par ce hex code:

Tu devrais voir la même couleur de fond qu’avant!


Touches finales

Et si on ajoutais encore un peu plus d’HTML et CSS pour améliorer notre page.

  • Tu peux ajouter une ligne horizontal à la fin de ta recette, en utilisant le tag <hr/> .

Tu remarqueras que ce tag n’a pas besoin d’un tag de fin, tout comme le tag img.

  • La ligne que tu viens d’ajouter n’est pas en phase avec le reste de ta page. Règlons ce problème en ajoutant un peu de code CSS:

  • Tu peux même changer le style des puces avec ce code CSS:


Défi: Plus de couleurs!

Change les couleurs de tonn code en utilsant des noms de couleurs, valeurs rbg() et hex code. Il y a une tonne de couleurs disponible ici jumpto.cc/web-colours.

Voila quelques exemples de couleurs:

  • Rouge peux s’écrire:
    • red (evidemment!)
    • rgb(255,0,0) (plein de rouge, pas de bleu ni de vert)
    • #ff0000
  • Olive peux s’écrire:
    • olive
    • rgb(128, 128, 0) (un peu de rouge et de vert, pas de bleu)
    • #808000

Essaye de faire en sorte que tes couleurs vont bien avec ta recette!


Défi: Commentaires

Demande à tes amis de laisser un commentaire pour ta recette. Tu devras créer une autre liste pour faire cela.


Défi: Plus de style

Peux tu ajouter une image a ta page? ou changer la typographie? Regarde à quoi ta page peux ressembler:

Voila quelques lignes de codes qui pourront t’aider:

Produit ajouté avec succès à la comparaison des produits