UPDT: Retranslation of the Tutorial Index page (#868)

* UPDT: Refresh from english, fix flaws

* FIX: eol

* Review - minor rewordings

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 193 insertions, 177 deletions

diff --git a/files/fr/web/tutorials/index.html b/files/fr/web/tutorials/index.html
index 768131e8f5..6862be2ae7 100644
--- a/files/fr/web/tutorials/index.html
+++ b/files/fr/web/tutorials/index.html
@@ -2,187 +2,203 @@
 title: Tutoriels
 slug: Web/Tutorials
 tags:
+  - Beginner
+  - Browser
   - CSS
   - Code
-  - Design
-  - Débutant
-  - Fondamentaux du Web
+  - Coding
+  - GitHub
+  - Guide
+  - HTML
   - JavaScript
   - MDN
-  - Tutoriel
+  - Tutorial
+  - Web Article
+  - Web Development
 translation_of: Web/Tutorials
 original_slug: Web/Tutoriels
 ---
-<p><font><font>Les liens présents sur cette page mènent à un grand nombre de tutoriels et d'outils pédagagiques. </font><font>Que vous soyez débutant ou expérimenté, vous pourrez trouver ici de précieuses ressources sur les meilleurs pratiques du développement web. Ces ressources sont écrites par des entreprises visionnaires </font><font>et des développeurs qui ont adoptés des normes ouvertes et de bonnes pratiques en développement web qui fournissent ou autorisent la traduction de ces informations, au travers de licences libres tel que celle de Creative Commons. </font></font></p>
-
-<table class="topicpage-table">
- <tbody>
-  <tr>
-   <td>
-    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels HTML</font></font></h2>
-
-    <h3 id="Introduction"><font><font>Introduction</font></font></h3>
-
-    <dl>
-     <dt><a href="https://webplatform.github.io/docs/guides/the_basics_of_html/" lang="en">Introdution à HTML</a> <font><font>(WebPlatform.org)</font></font></dt>
-     <dd>Qu'est-ce que le HTML ? Origine, utilité et structure d’un document HTML. Cet article présente les principaux éléments qui composent une page HTML. Les suivants présentent les éléments individuels qui composent HTML plus en profondeur.</dd>
-     <dt><a href="http://reference.sitepoint.com/html/page-structure" lang="en" rel="external"><font><font>Structure de base d'une page web</font></font></a><font><font> (SitePoint)</font></font></dt>
-     <dd><font><font>Apprendre comment les éléments HTML s'assemblent pour former une page web.</font></font></dd>
-     <dt><a href="http://reference.sitepoint.com/html/elements" lang="en" rel="external"><font><font>Balises HTML de base</font></font></a><font><font> (SitePoint)</font></font></dt>
-     <dd><font><font>Description des différents types d'éléments utilisés pour les documents HTML.</font></font></dd>
-     <dt><a href="http://htmldog.com/guides/htmlbeginner/" lang="en" rel="external"><font><font>Guide HTML pour débutant</font></font></a><font><font> (HTML Dog)</font></font></dt>
-     <dd><font><font>Articles et exercices pour apprendre les bases.</font></font></dd>
-     <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" lang="en" rel="external"><font><font>Challenges HTML</font></font></a><font><font> (Wikiversity)</font></font></dt>
-     <dd><font><font>Améliorer ses compétences avec des challenges HTML.</font></font></dd>
-     <dt><a href="/fr/docs/Web/HTML/Element"><font><font>Référence des balises HTML sur le MDN</font></font></a></dt>
-     <dd><font><font>Référence complète des balises HTML et leur support par Firefox et les autres navigateurs.</font></font></dd>
-     <dt><a href="http://codeavengers.com/" hreflang="en" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
-     <dd><font><font>Une introduction au développement d'application ou de jeux web avec HTML, CSS et JavaScript.</font></font></dd>
-    </dl>
-
-    <h3 id="Niveau_intermediaire">Niveau intermediaire</h3>
-
-    <dl>
-     <dt><a href="/fr/docs/Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide"><font><font>Astuces pour accélerer les pages HTML</font></font></a></dt>
-     <dd><font><font>Optimiser les pages pour un site plus réactif et réduire la charge du serveur web.</font></font></dd>
-     <dt><a href="http://diveintohtml5.info/" lang="en" rel="external"><font><font>Plonger dans HTML5</font></font></a><font><font> (Mark Pilgrim)</font></font></dt>
-     <dd><font><font>Découverte des fonctionnalités d'HTML5, la dernière version de la spécification HTML.</font></font></dd>
-     <dt><a href="http://www.html5rocks.com/tutorials/" lang="en" rel="external"><font><font>Tutoriel HTML5</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
-     <dd><font><font>Laissez-nous vous guider dans le labyrinthe HTML5.</font></font></dd>
-     <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" lang="en" rel="external"><font><font>La sémantique HTML5</font></font></a></dt>
-     <dd><font><font>Apprendre les balises HTML, leur usage actuels et leur équivalent passé et à venir.</font></font></dd>
-     <dt><a href="/fr/docs/Tutoriel_canvas"><font><font>Tutoriel sur les Canvas</font></font></a></dt>
-     <dd><font><font>Apprendre à dessiner des éléments en utilisant les canvas.</font></font></dd>
-     <dt><a href="http://html5doctor.com/" lang="en" rel="external"><font><font>HTML5 Doctor</font></font></a></dt>
-     <dd><font><font>Utiliser HTML5 maintenant.</font></font></dd>
-     <dt><a href="http://www.elated.com/articles/html5-audio/" lang="en" rel="external"><font><font>Intégration audio avec HTML5</font></font></a></dt>
-     <dd><font><font>Introduction de la balise HTML5 audio pour inclure facilement du son sur votre page web. </font><font>L'article comprend plusieurs exemples d'utilisation.</font></font></dd>
-    </dl>
-   </td>
-   <td>
-    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels Javascript</font></font></h2>
-
-    <h3 id="Introduction_2"><font><font>Introduction</font></font></h3>
-
-    <dl>
-     <dt><a href="http://www.codecademy.com/?locale_code=fr"><font><font>Codecademy</font></font></a><font><font> (Codecademy)</font></font></dt>
-     <dd><font><font>Codecademy est le moyen le plus simple pour apprendre le développement avec JavaScript. </font><font>Interactif, amusant et collaboratif.</font></font></dd>
-     <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript"><font><font>Démarrer avec JavaScript</font></font></a></dt>
-     <dd><font><font>Présentation de Javascript et de son utilisation</font></font></dd>
-     <dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external"><font><font>Programming - The real fundamental</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
-     <dd><font><font>Introduction à JavaScript, ses possibilités, les bonnes pratiques, pour l'apprecier, et davantage.</font></font></dd>
-     <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external"><font><font>JavaScript Best Practices</font></font></a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a><font><font> (WebPlatform.org)</font></font></dt>
-     <dd><font><font>Consultez les bonnes pratiques les plus courantes, mais pas seulement, pour écrire du JavaScript.</font></font></dd>
-     <dt><a href="http://codeavengers.com/" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
-     <dd><font><font>Avengers Code est une introduction amusante au développement d'applications web et aux jeux avec HTML, CSS et JavaScript.</font></font></dd>
-    </dl>
-
-    <h3 id="Niveau_intermediaire_2"><font><font>Niveau intermediaire</font></font></h3>
-
-    <dl>
-     <dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript"><font><font>Ré-introduction au JavaScript</font></font></a></dt>
-     <dd><font><font>Résumé de JavaScript destiné aux développeurs intermédiaires.</font></font></dd>
-     <dt><a href="http://eloquentjavascript.net/" rel="external"><font><font>Eloquent JavaScript</font></font></a></dt>
-     <dd><font><font>Guide JavaScript complet comprenant des pratiques de niveau intermédiaire et avancé.</font></font></dd>
-     <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external"><font><font>Les Design Patterns essentiels en Javascript</font></font></a><font><font> (Addy Osmani)</font></font></dt>
-     <dd><font><font>Les <em>design patterns</em> de base pour JavaScript.</font></font></dd>
-     <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external"><font><font>The JavaScript programming language</font></font></a><font><font> (YUI Blog)</font></font></dt>
-     <dd><font><font>Douglas Crockford étudie la position actuelle de JavaScript et son avenir.</font></font></dd>
-     <dt><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet"><font><font>Introduction à JavaScript orienté objet</font></font></a></dt>
-     <dd><font><font>Apprendre la modélisation objet dans Javascript.</font></font></dd>
-    </dl>
-
-    <h3 id="Niveau_avancé"><font><font>Niveau avancé</font></font></h3>
-
-    <dl>
-     <dt><a href="http://ejohn.org/apps/learn/" rel="external"><font><font>Apprendre le JavaScript avancé</font></font></a><font><font> (John Resig)</font></font></dt>
-     <dd><font><font>Guide JavaScript par John Resig.</font></font></dd>
-     <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external"><font><font>Introduction au JavaScript DOM</font></font></a><font><font> (Elated)</font></font></dt>
-     <dd><font><font>Qu'est-ce que le <em>Document Object Model</em>, et pourquoi il est utile? </font><font>Cette article vous donnera un petit aperçu de la puissance de cette fonctionnalité de JavaScript.</font></font></dd>
-     <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external"><font><font>An Inconvenient API: The Theory of the DOM</font></font></a><font><font> (YUI Blog)</font></font></dt>
-     <dd><font><font>Douglas Crockford explique le "Document Object Model" (DOM).</font></font></dd>
-     <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external"><font><font>JavaScript avancé</font></font></a><font><font> (YUI Blog)</font></font></dt>
-     <dd><font><font>Douglas Crockford étudie les modèles que les développeurs peuvent choisir pour la création de leur application.</font></font></dd>
-     <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external"><font><font>JavaScript Garden</font></font></a></dt>
-     <dd><font><font>Documentation des fonctionnalités étranges de Javascript.</font></font></dd>
-     <dt><a href="http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external"><font><font>Which JavaScript framework to choose?</font></font></a><font><font> (StackOverflow)</font></font></dt>
-     <dd><font><font>Conseil pour le choix d'un framework Javascript.</font></font></dd>
-     <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external"><font><font>Non-blocking JavaScript Downloads</font></font></a><font><font> (YUI Blog)</font></font></dt>
-     <dd><font><font>Conseil pour accèlerer le chargement des pages avec JavaScript.</font></font></dd>
-     <dt><a href="/fr/docs/Web/JavaScript/Guide"><font><font>JavaScript Guide</font></font></a></dt>
-     <dd><font><font>Un guide régulièrement mis à jour qui explique dans le détail les opérations de JavaScript. Il est destiné à tous les niveaux, du néophyte aux utilisateurs plus avancés.</font></font></dd>
-    </dl>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2">
-    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels CSS</font></font></h2>
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <h3 id="Introduction_3"><font><font>Introduction</font></font></h3>
-
-    <dl>
-     <dt><a href="/fr/Apprendre/CSS"><font><font>Démarrer avec CSS</font></font></a></dt>
-     <dd><font><font>This tutorial will introduce you to Cascading Style Sheets (CSS). </font><font>It will guide you through the CSS features, using concrete examples that you can try for yourself on your own computer.</font></font></dd>
-     <dt><a href="https://developer.mozilla.org/fr/Apprendre/CSS" rel="external"><font><font>Les bases de CSS</font></font></a></dt>
-     <dd><font><font>What is the CSS, learning from its use, key selectors and properties</font></font></dd>
-     <dt><a href="http://docs.webplatform.org/wiki/guides/getting_started_with_css" rel="external"><font><font>CSS Basics</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
-     <dd><font><font>What is the CSS, how to apply it in HTML and looks like the basic syntax of CSS.</font></font></dd>
-     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external"><font><font>Selectors CSS classes</font></font></a><font><font>  (Wikiversity)</font></font></dt>
-     <dd><font><font>What is a class in CSS?</font></font></dd>
-     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external"><font><font>External CSS</font></font></a><font><font>  (Wikiversity)</font></font></dt>
-     <dd><font><font>Use CSS to an external stylesheet.</font></font></dd>
-     <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external"><font><font>Add a touch of style</font></font></a><font><font>  (W3C)</font></font></dt>
-     <dd><font><font>Realizing this beginner's guide to learn how to put CSS in your pages.</font></font></dd>
-     <dt><a href="/fr/docs/CSS/CSS_questions_frequentes"><font><font>Frequently asked questions about CSS</font></font></a></dt>
-     <dd><font><font>Questions and answers for beginners.</font></font></dd>
-     <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
-     <dd><font><font>Avengers Code is an effective and fun way to learn to code web applications and games with HTML, CSS and JavaScript.</font></font></dd>
-    </dl>
-
-    <h3 id="Niveau_intermediaire_3">Niveau intermediaire</h3>
-
-    <dl>
-     <dt><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference" lang="fr"><font><font>CSS Reference</font></font></a></dt>
-     <dd><font><font>Complete CSS reference with support details of Firefox and other browsers.</font></font></dd>
-     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" lang="en" rel="external"><font><font>CSS Challenges</font></font></a><font><font> (Wikiversity)</font></font></dt>
-     <dd><font><font>Practice your skills in CSS, and see where you need the most practice.</font></font></dd>
-     <dt><a href="http://www.html.net/tutorials/css/" lang="fr" rel="external"><font><font>Intermediate concepts in CSS</font></font></a><font><font>  (HTML.net)</font></font></dt>
-     <dd><font><font>Group, pseudo-classes, and more.</font></font></dd>
-     <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" lang="fr" rel="external"><font><font>CSS positioning bases</font></font></a><font><font>  (A List Apart)</font></font></dt>
-     <dd><font><font>Using positioning to meet the standards, the layout without tables.</font></font></dd>
-     <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" lang="en" rel="external"><font><font>Progressive Enhancement with CSS</font></font></a><font><font> (A List Apart)</font></font></dt>
-     <dd><font><font>The gradual improvement of your web pages with CSS.</font></font></dd>
-     <dt><a href="http://www.alistapart.com/articles/fluidgrids/" lang="en" rel="external"><font><font>Fluid Grids</font></font></a><font><font> (A List Apart)</font></font></dt>
-     <dd><font><font>Creating models that smoothly resize with of the browser window while using a typographic grid.</font></font></dd>
-    </dl>
-   </td>
-   <td>
-    <h3 id="Niveau_avancé_2"><font><font>Niveau avancé</font></font></h3>
-
-    <dl>
-     <dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external"><font><font>CSS3 in less than 5 minutes</font></font></a><font><font> (Addy Osmani)</font></font></dt>
-     <dd><font><font>Une courte introduction du coeur des innovations apportées par CSS3.</font></font></dd>
-     <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS"><font><font>Use of CSS transformations</font></font></a></dt>
-     <dd>
-     <div class="g-unit" id="gt-src-c">
-     <div id="gt-src-p">
-     <div id="gt-src-wrap">
-     <div style="width: 100%;"><span class="short_text" id="result_box" lang="fr" style="font-size: 14px; line-height: 1.5;"><span class="hps"><font><font>Appliquer la rotation, le détournement, la mesure et la translation</font></font></span></span><font><font> d'élement avec </font></font><span class="hps" style="font-size: 14px; line-height: 1.5;"><font><font>CSS </font></font></span><span style="font-size: 14px; line-height: 1.5;"><font><font>.</font></font></span></div>
-     </div>
-     </div>
-     </div>
-     </dd>
-     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions"><font><font>CSS transitions</font></font></a></dt>
-     <dd><font><font>CSS3 inclue dans sa spécification de contrôler l'animation lors du changement d'une propriété CSS. </font><font>Ceci ajuste progressivement la transition visuelle de la proprieté liée.</font></font></dd>
-     <dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external"><font><font>Understanding CSS3 transitions</font></font></a><font><font> (A List Apart)</font></font></dt>
-     <dd><font><font>Débutez avec les transitions CSS et apprenez à choisir attentivement dans quelle situation les utiliser.</font></font></dd>
-     <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external"><font><font>Quick guide to implement Web Fonts with @ font-face</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
-     <dd><font><font>La fonction @font-face de CSS3 proposée parmi les modules vous permet l'utilisation de polices de caractère personnelles sur le web, de manière flexible et accessible</font><font>.</font></font></dd>
-    </dl>
-   </td>
-  </tr>
- </tbody>
-</table>
+<p>Les liens de cette page mènent à une variété de tutoriels et de matériel de formation. Que vous soyez débutante ou débutant, que vous appreniez les bases ou que vous soyez habitué⋅e au développement web, vous trouverez ici des ressources utiles pour les meilleures pratiques.</p>
+
+<p>Ces ressources sont créées par des entreprises et des développeuses et développeurs web qui ont adopté des normes ouvertes et les meilleures pratiques en matière de développement web et qui fournissent ou autorisent des traductions, par le biais d'une licence de contenu ouvert telle que Creative Commons.</p>
+
+<h2 id="for_complete_beginners_to_the_web">Pour les débutantes et débutants sur le Web</h2>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/Getting_started_with_the_web">Démarrer avec le Web</a></dt>
+  <dd><em>Débuter avec le Web</em> est une série concise qui vous présente les aspects pratiques du développement web. Vous mettrez en place les outils dont vous avez besoin pour construire une page web simple et publier votre propre code simple.</dd>
+</dl>
+
+<h2 id="html-tutorials">Tutoriels HTML</h2>
+
+<h3 id="introductory_level">Niveau d'introduction</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a></dt>
+  <dd>Ce module prépare le terrain, en vous familiarisant avec les concepts et la syntaxe importante, en examinant l'application du HTML au texte, la création d'hyperliens et l'utilisation du HTML pour structurer une page web.</dd>
+  <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt>
+  <dd>Une référence complète pour les éléments HTML et qui contient des informations de compatibilité pour la prise en charge des différents navigateurs.</dd>
+</dl>
+
+<dl>
+  <dt><a href="https://www.theblogstarter.com/html-for-beginners">Création d'une page web simple avec HTML</a> <small>(en anglais)</small></dt>
+  <dd>Un guide HTML pour les débutants qui comprend des explications sur les balises courantes, y compris les balises HTML5. Il comprend également un guide étape par étape pour créer une page web de base avec des exemples de code.</dd>
+  <dt><a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges">Défis HTML</a> <small>(en anglais)</small></dt>
+  <dd>Utilisez ces défis pour affiner vos compétences en HTML (par exemple, « Dois-je utiliser un élément <code>&lt;h2&gt;</code> ou un élément <code>&lt;strong&gt;</code> ? »), en vous concentrant sur un balisage sémantique pertinent.</dd>
+</dl>
+
+<h3 id="intermediate_level">Niveau intermédiaire</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimédia et intégration</a></dt>
+  <dd>Ce module explore comment utiliser le langage HTML pour inclure des éléments multimédias dans vos pages web, y compris les différentes façons d'inclure des images, et comment intégrer des vidéos, des sons et même des pages web entières.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/HTML/Tables">Tableaux en HTML</a></dt>
+  <dd>Représenter des données tabulaires sur une page web de manière compréhensible, <a href="/fr/docs/Glossary/Accessibility">accessible</a> peut être un défi. Ce module couvre le balisage de base des tableaux, ainsi que des fonctionnalités plus complexes telles que l'implémentation de légendes et de résumés.</dd>
+</dl>
+
+<h3 id="Advanced_level">Niveau avancé</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/Forms">Formulaires HTML</a></dt>
+  <dd>Les formulaires sont une partie très importante du Web — ils fournissent une grande partie de la fonctionnalité dont vous avez besoin pour interagir avec les sites Web, par exemple pour vous enregistrer et vous connecter, envoyer des commentaires, acheter des produits, etc. Ce module vous permet de commencer à créer les parties côté client des formulaires.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Astuces de création de pages HTML à affichage rapide</a></dt>
+  <dd>Optimisez les pages web pour offrir un site plus réactif aux visiteurs et réduire la charge sur votre serveur web et votre connexion Internet.</dd>
+</dl>
+
+<h2 id="css-tutorials">Tutoriels CSS</h2>
+
+<h3 id="introductory_level_2">Niveau d'introduction</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Bases des CSS</a></dt>
+  <dd>CSS (<i>Cascading Style Sheets</i>) est le code que vous utilisez pour styliser votre page web. <em>Les bases de CSS</em> vous présente ce dont vous avez besoin pour commencer. Nous répondrons à des questions telles que : Comment rendre mon texte noir ou rouge ? Comment faire pour que mon contenu s'affiche à tel ou tel endroit de l'écran ? Comment puis-je décorer ma page web avec des images et des couleurs d'arrière-plan ?</dd>
+  <dt><a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a></dt>
+  <dd>Les feuilles de style en cascade (CSS) sont utilisées pour styliser et mettre en page des pages Web, par exemple pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le diviser en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre parcours vers la maîtrise de CSS, en vous expliquant les bases de son fonctionnement, la syntaxe et la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a></dt>
+  <dd>
+    <p>Ce module poursuit là où <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> s'est arrêté — maintenant que vous vous êtes familiarisé avec le langage et sa syntaxe, et que vous avez acquis une certaine expérience de base de son utilisation, il est temps de plonger un peu plus profondément. Ce module traite de la cascade et de l'héritage, de tous les types de sélecteurs disponibles, des unités, de la taille, du style des arrière-plans et des bordures, du débogage et de bien d'autres choses encore.</p>
+
+    <p>L'objectif ici est de vous fournir une boîte à outils pour écrire un CSS compétent et vous aider à comprendre toute la théorie essentielle, avant de passer à des disciplines plus spécifiques comme <a href="/fr/docs/Learn/CSS/Styling_text">le style de texte</a> et <a href="/fr/docs/Learn/CSS/CSS_layout">la mise en page CSS</a>.</p>
+  </dd>
+  <dt><a href="/fr/docs/Learn/CSS/Styling_text">Introduction au style de texte</a></dt>
+  <dd>Nous examinons ici les principes fondamentaux de la mise en forme du texte, notamment le réglage de la police, de la graisse et de l'italique, l'espacement des lignes et des lettres, les ombres portées et autres caractéristiques du texte. Nous terminons le module en examinant l'application de polices personnalisées à votre page, ainsi que le style des listes et des liens.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/Howto/CSS_FAQ">Questions fréquentes en CSS</a></dt>
+  <dd>Questions et réponses courantes pour les débutants.</dd>
+</dl>
+
+<h3 id="intermediate_level_2">Niveau intermédiaire</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout">Mise en page avec CSS</a></dt>
+  <dd>À ce stade, nous avons déjà examiné les principes fondamentaux de CSS, comment styliser le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps d'examiner comment placer vos boîtes au bon endroit par rapport à la fenêtre d'affichage et les unes par rapport aux autres. Nous avons couvert les prérequis nécessaires et pouvons maintenant nous plonger dans la mise en page CSS, en examinant les différents paramètres d'affichage, les méthodes de mise en page traditionnelles impliquant le flottement et le positionnement, ainsi que les nouveaux outils de mise en page comme flexbox.</dd>
+  <dt><a href="/fr/docs/Web/CSS/Reference">Référence CSS</a></dt>
+  <dd>Référence complète à CSS, avec des détails sur la prise en charge par Firefox et d'autres navigateurs.</dd>
+</dl>
+
+<dl>
+  <dt><a href="https://www.alistapart.com/articles/fluidgrids/">Grilles fluides</a> <small>(en anglais)</small></dt>
+  <dd>Concevez des mises en page qui se redimensionnent de manière fluide avec la fenêtre du navigateur, tout en utilisant une grille typographique.</dd>
+  <dt><a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges">Les défis CSS</a> <small>(en anglais)</small></dt>
+  <dd>Exercez vos compétences en matière de CSS et voyez si vous avez besoin de vous entraîner davantage.</dd>
+</dl>
+
+<h3 id="advanced_level_2">Niveau avancé</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utilisation des transformations CSS</a></dt>
+  <dd>Appliquer une rotation, une inclinaison, une mise à l'échelle et un déplacement à l'aide de CSS.</dd>
+  <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></dt>
+  <dd>Les transitions CSS, qui font partie du projet de spécification CSS3, permettent d'animer les changements apportés aux propriétés CSS, plutôt que de leur donner un effet immédiat.</dd>
+</dl>
+
+<dl>
+  <dt><a href="https://www.html5rocks.com/tutorials/webfonts/quick/">Guide rapide pour l'implémentation des polices Web (avec @font-face)</a> <small>(en anglais)</small></dt>
+  <dd>La fonction @font-face de CSS3 vous permet d'utiliser des caractères personnalisés sur le web d'une manière accessible, manipulable et évolutive.</dd>
+  <dt><a href="https://davidwalsh.name/starting-css">Commencer à écrire du CSS</a> <small>(en anglais)</small></dt>
+  <dd>Une introduction aux outils et méthodologies pour écrire des CSS plus succinctes, maintenables et évolutifs.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a></dt>
+  <dd>Apprenez à dessiner des graphiques à l'aide de scripts en utilisant l'élément canvas.</dd>
+  <dt><a href="https://html5doctor.com/">HTML5 Doctor</a> <small>(en anglais)</small></dt>
+  <dd>Articles sur l'utilisation de HTML5 en ce moment.</dd>
+</dl>
+
+<h2 id="javascript-tutorials">Tutoriels JavaScript</h2>
+
+<h3 id="introductory_level_3">Niveau d'introduction</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></dt>
+  <dd>Dans notre premier module JavaScript, nous répondons d'abord à certaines questions fondamentales telles que « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « que peut-il faire ? », avant de vous faire vivre votre première expérience pratique d'écriture de JavaScript. Ensuite, nous aborderons en détail certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes de caractères, les nombres et les tableaux.</dd>
+  <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks">Principaux blocs en JS</a></dt>
+  <dd>Dans ce module, nous poursuivons notre couverture de toutes les fonctionnalités fondamentales de JavaScript, en portant notre attention sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ces éléments dans le cours, mais seulement en passant — ici, nous allons en discuter de manière explicite.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Bases de JavaScript</a></dt>
+  <dd>Qu'est-ce que JavaScript et comment peut-il vous aider ?</dd>
+  <dt><a href="https://www.codecademy.com/">Codecademy</a> <small>(en anglais)</small></dt>
+  <dd>Codecademy est un moyen facile d'apprendre à coder en JavaScript. C'est interactif et vous pouvez le faire avec vos amis.</dd>
+  <dt><a href="https://learn.freecodecamp.org/">freeCodeCamp</a> <small>(en anglais)</small></dt>
+  <dd>freeCodeCamp enseigne une variété de langages et de frameworks pour le développement web. Il dispose également d'un <a href="https://freecodecamp.org/forum">forum</a>, d'une <a href="https://coderadio.freecodecamp.org">station de radio</a>, et d'un <a href="https://freecodecamp.org/news">blog</a>.</dd>
+</dl>
+
+<h3 id="intermediate_level_3">Niveau intermédaire</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a></dt>
+  <dd>En JavaScript, la plupart des choses sont des objets, qu'il s'agisse de fonctions JavaScript de base comme les chaînes de caractères et les tableaux ou des API de navigateur construites au-dessus de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables connexes dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre si vous voulez aller plus loin dans votre connaissance du langage et écrire un code plus efficace, c'est pourquoi nous avons prévu ce module pour vous aider. Nous y enseignons en détail la théorie et la syntaxe des objets, nous voyons comment créer vos propres objets et nous expliquons ce que sont les données JSON et comment travailler avec elles.</dd>
+  <dt><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs">API web utilisées côté client</a></dt>
+  <dd>Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des API — des interfaces permettant de manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site s'exécute, ou même des données provenant d'autres sites Web ou services. Dans ce module, nous allons explorer ce que sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</dd>
+</dl>
+
+<dl>
+  <dt><a href="/fr/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Réintroduction à JavaScript</a></dt>
+  <dd>Une récapitulation du langage de programmation JavaScript destinée aux développeuses et développeurs de niveau intermédiaire.</dd>
+  <dt><a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> <small>(en anglais)</small></dt>
+  <dd>Un guide complet des méthodologies JavaScript intermédiaires et avancées.</dd>
+  <dt><a href="https://exploringjs.com/">Exploring JavaScript</a> <small>(en anglais)</small></dt>
+  <dd>Pour les programmeurs qui veulent apprendre JavaScript rapidement et correctement, et pour les programmeurs JavaScript qui veulent approfondir leurs compétences et/ou rechercher des sujets spécifiques.</dd>
+  <dt><a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">Modèles de conception JavaScript essentiels</a> <small>(en anglais)</small></dt>
+  <dd>Une introduction aux modèles de conception JavaScript essentiels.</dd>
+</dl>
+
+<h3 id="advanced_level_3">Niveau avancé</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></dt>
+  <dd>Un guide complet et régulièrement mis à jour de JavaScript pour tous les niveaux d'apprentissage, de débutant à avancé.</dd>
+  <dt><a href="https://github.com/getify/You-Dont-Know-JS">Vous ne connaissez pas JS</a> <small>(en anglais)</small></dt>
+  <dd>Une série de livres plongeant dans les mécanismes fondamentaux du langage JavaScript.</dd>
+  <dt><a href="https://bonsaiden.github.io/JavaScript-Garden/fr/">Le jardin de JavaScript</a></dt>
+  <dd>Documentation des parties les plus étranges de JavaScript.</dd>
+  <dt><a href="https://exploringjs.com/es6/">Explorer ES6</a> <small>(en anglais)</small></dt>
+  <dd>Des informations fiables et approfondies sur ECMAScript 2015.</dd>
+</dl>
+
+<dl>
+  <dt><a href="https://shichuan.github.io/javascript-patterns">Modèles JavaScript</a> <small>(en anglais)</small></dt>
+  <dd>Une collection de modèles et d'anti-modèles JavaScript qui couvre les modèles de fonctions, les modèles jQuery, les modèles de plugins jQuery, les modèles de conception, les modèles généraux, les modèles de littéraux et de constructeurs, les modèles de création d'objets, les modèles de réutilisation du code, DOM.</dd>
+  <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Comment fonctionnent les navigateurs</a> <small>(en anglais)</small></dt>
+  <dd>Un article de recherche détaillé décrivant les différents navigateurs modernes, leurs moteurs, le rendu des pages, etc.</dd>
+  <dt><a href="https://github.com/bolshchikov/js-must-watch">Vidéos sur JavaScript</a> <small>(en anglais)</small></dt>
+  <dd>Une collection de vidéos de JavaScript à regarder.</dd>
+</dl>
+
+<h3 id="extension_development">Développement d'extension</h3>
+
+<dl>
+  <dt><a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt>
+  <dd>WebExtensions est un système inter-navigateurs pour le développement d'extensions de navigateur. Dans une large mesure, le système est compatible avec l'API <a href="https://developer.chrome.com/extensions">extension API</a> prise en charge par Google Chrome et Opera. Les extensions écrites pour ces navigateurs fonctionneront dans la plupart des cas dans Firefox ou <a href="https://developer.microsoft.com/fr/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> avec <a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">juste quelques modifications</a>.</dd>
+</dl>