From 2b706f3451b382939befc3019f43796d6ac72c4f Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Fri, 24 May 2024 13:02:05 +0200
Subject: [PATCH] Ajout de certaines partie du journal

---
 recettes/02-creer-un-journal.html | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/recettes/02-creer-un-journal.html b/recettes/02-creer-un-journal.html
index 99a3eb1..7c6d208 100644
--- a/recettes/02-creer-un-journal.html
+++ b/recettes/02-creer-un-journal.html
@@ -26,10 +26,11 @@
             </ul>
         </section>
 
-        <p>L'ensemble des operations de ce guide sont éfféctuée dans l'élément <code>body</code> (entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>)</p>
-
         <section class="guide">
             <h2>Ajouter des sections</h2>
+
+            <p class="note">L'ensemble des operations de cette partie sont éfféctuées dans l'élément <code>body</code> (entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>)</p>
+
             <p>Ecrire le titre de la section entre des balises <code>&lt;h2&gt;</code> et <code>&lt;/h2&gt;</code>.</p>
             <p>Ecrire un paragraphe à la suite du titre entre des balises <code>&lt;p&gt;</code> et <code>&lt;/p&gt;</code>.</p>
             <p>Ajouter autant de section que necessaire pour écrire l'ensemble du texte.</p>
@@ -78,6 +79,13 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
 &lt;!-- ... --&gt;</code></pre>
         </section>
 
+        <section class="guide">
+            <h2>Mettre certaines partie du texte en évidence</h2>
+            <p>Entourer le texte à mettre en évidence d'une balise <code>&lt;strong&gt;</code> et <code>&lt;/strong&gt;</code></p>
+        
+            <pre><code>J'ai &lt;strong&gt;mal &agrave; la t&ecirc;te&lt;/strong&gt; et j'ai &lt;strong&gt;faim&lt;/strong&gt;</code></pre>
+        </section>
+
         <section class="guide">
             <h2>Centrer le contenu de la page</h2>
             <p>Dans l'élément <code>head</code> de la page, ajouter un élément <code>style</code> qui contiendra toutes les regles de style de la page.</p>
@@ -139,6 +147,9 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
                 <pre><code>body {
     background-color: hsl(35.2, 69%, 83.5%);
 }</code></pre>
+                <aside>
+                    <p>Vous pouvez ajuster la couleur à votre convenance en modifiant 3 valeurs numériques dans <code>hsl()</code>.</p>
+                </aside>
             </article>
 
             <article>
@@ -150,14 +161,17 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
 h1, h2, h3 {
     font-family: serif;
 }</code></pre>
+                <aside>
+                    <p>Vous pouvez mettre le nom de n'importe quel police installée sur l'ordinateur a la place de <code>serif</code>   ou <code>sans-serif</code>.</p>
+                </aside>
             </article>
         </section>
 
-        <section>
+        <section class="guide">
             <h2>Mettre en avant le premier paragraphe</h2>
 
             <article>
-                <p>Contrer le titre principal de la page en ajoutant le code suivant a l'élément <code>style</code> précédent:</p>
+                <p>Centrer le titre principal de la page en ajoutant le code suivant à l'élément <code>style</code> précédent:</p>
                 <pre><code>
 h1 {
     text-align: center;
@@ -180,6 +194,10 @@ h1 + p {
 }</code></pre>
             </article>
 
+            <aside>
+                <p>Vous pouvez ajuster la taille de la police en modifiant la valeur apres <code>font-size</code> (tout en conservant l'unité <code>rem</code>).</p>
+            </aside>
+
             <article>
                 <p>Ajouter de la marge au dessus du titre principal et au dessous du paragraphe qui le suit en ajoutant le code suivant dans l'élément <code>style</code> de la plage:</p>
                 <pre><code>h1 {
@@ -189,6 +207,10 @@ h1 + p {
 h1 + p {
     margin-bottom: 100px;
 }</code></pre>
+
+                <aside>
+                    <p>Vous pouvez ajuster la marge en modifiant les valeurs apres <code>margin-top</code> ou <code>margin-bottom</code> (tout en conservant l'unité <code>px</code>).</p>
+                </aside>
             </article>
         </section>