---
title: Tutoriels
slug: Web/Tutorials
tags:
  - Beginner
  - Browser
  - CSS
  - Code
  - Coding
  - GitHub
  - Guide
  - HTML
  - JavaScript
  - MDN
  - Tutorial
  - Web Article
  - Web Development
translation_of: Web/Tutorials
original_slug: Web/Tutoriels
---
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.

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.

## Pour les débutantes et débutants sur le Web

- [Démarrer avec le Web](/fr/docs/Learn/Getting_started_with_the_web)
  - : _Débuter avec le Web_ 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.

## Tutoriels HTML

### Niveau d'introduction

- [Introduction à HTML](/fr/docs/Learn/HTML/Introduction_to_HTML)
  - : 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.
- [Référence des éléments HTML](/fr/docs/Web/HTML/Element)
  - : 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.

<!---->

- [Création d'une page web simple avec HTML](https://www.theblogstarter.com/html-for-beginners) (en anglais)
  - : 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.
- [Défis HTML](https://wikiversity.org/wiki/Web_Design/HTML_Challenges) (en anglais)
  - : Utilisez ces défis pour affiner vos compétences en HTML (par exemple, « Dois-je utiliser un élément `<h2>` ou un élément `<strong>` ? »), en vous concentrant sur un balisage sémantique pertinent.

### Niveau intermédiaire

- [Multimédia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding)
  - : 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.

<!---->

- [Tableaux en HTML](/fr/docs/Learn/HTML/Tables)
  - : Représenter des données tabulaires sur une page web de manière compréhensible, [accessible](/fr/docs/Glossary/Accessibility) 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.

### Niveau avancé

- [Formulaires HTML](/fr/docs/Learn/Forms)
  - : 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.

<!---->

- [Astuces de création de pages HTML à affichage rapide](/fr/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)
  - : 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.

## Tutoriels CSS

### Niveau d'introduction

- [Bases des CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics)
  - : CSS (_Cascading Style Sheets_) est le code que vous utilisez pour styliser votre page web. _Les bases de CSS_ 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 ?
- [Premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps)
  - : 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.

<!---->

- [Blocs de base en CSS](/fr/docs/Learn/CSS/Building_blocks)

  - : Ce module poursuit là où [Premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) 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.

    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 [le style de texte](/fr/docs/Learn/CSS/Styling_text) et [la mise en page CSS](/fr/docs/Learn/CSS/CSS_layout).

- [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text)
  - : 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.
- [Questions fréquentes en CSS](/fr/docs/Learn/CSS/Howto/CSS_FAQ)
  - : Questions et réponses courantes pour les débutants.

### Niveau intermédiaire

- [Mise en page avec CSS](/fr/docs/Learn/CSS/CSS_layout)
  - : À 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.
- [Référence CSS](/fr/docs/Web/CSS/Reference)
  - : Référence complète à CSS, avec des détails sur la prise en charge par Firefox et d'autres navigateurs.

<!---->

- [Grilles fluides](https://www.alistapart.com/articles/fluidgrids/) (en anglais)
  - : Concevez des mises en page qui se redimensionnent de manière fluide avec la fenêtre du navigateur, tout en utilisant une grille typographique.
- [Les défis CSS](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges) (en anglais)
  - : Exercez vos compétences en matière de CSS et voyez si vous avez besoin de vous entraîner davantage.

### Niveau avancé

- [Utilisation des transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
  - : Appliquer une rotation, une inclinaison, une mise à l'échelle et un déplacement à l'aide de CSS.
- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
  - : 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.

<!---->

- [Guide rapide pour l'implémentation des polices Web (avec @font-face)](https://www.html5rocks.com/tutorials/webfonts/quick/) (en anglais)
  - : 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.
- [Commencer à écrire du CSS](https://davidwalsh.name/starting-css) (en anglais)
  - : Une introduction aux outils et méthodologies pour écrire des CSS plus succinctes, maintenables et évolutifs.

<!---->

- [Tutoriel canvas](/fr/docs/Web/API/Canvas_API/Tutorial)
  - : Apprenez à dessiner des graphiques à l'aide de scripts en utilisant l'élément canvas.
- [HTML5 Doctor](https://html5doctor.com/) (en anglais)
  - : Articles sur l'utilisation de HTML5 en ce moment.

## Tutoriels JavaScript

### Niveau d'introduction

- [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps)
  - : 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.
- [Principaux blocs en JS](/fr/docs/Learn/JavaScript/Building_blocks)
  - : 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.

<!---->

- [Bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
  - : Qu'est-ce que JavaScript et comment peut-il vous aider ?
- [Codecademy](https://www.codecademy.com/) (en anglais)
  - : Codecademy est un moyen facile d'apprendre à coder en JavaScript. C'est interactif et vous pouvez le faire avec vos amis.
- [freeCodeCamp](https://learn.freecodecamp.org/) (en anglais)
  - : freeCodeCamp enseigne une variété de langages et de frameworks pour le développement web. Il dispose également d'un [forum](https://freecodecamp.org/forum), d'une [station de radio](https://coderadio.freecodecamp.org), et d'un [blog](https://freecodecamp.org/news).

### Niveau intermédaire

- [Introduction aux objets JavaScript](/fr/docs/Learn/JavaScript/Objects)
  - : 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.
- [API web utilisées côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs)
  - : 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.

<!---->

- [Réintroduction à JavaScript](/fr/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
  - : Une récapitulation du langage de programmation JavaScript destinée aux développeuses et développeurs de niveau intermédiaire.
- [Eloquent JavaScript](https://eloquentjavascript.net/) (en anglais)
  - : Un guide complet des méthodologies JavaScript intermédiaires et avancées.
- [Exploring JavaScript](https://exploringjs.com/) (en anglais)
  - : 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.
- [Modèles de conception JavaScript essentiels](https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/) (en anglais)
  - : Une introduction aux modèles de conception JavaScript essentiels.

### Niveau avancé

- [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
  - : Un guide complet et régulièrement mis à jour de JavaScript pour tous les niveaux d'apprentissage, de débutant à avancé.
- [Vous ne connaissez pas JS](https://github.com/getify/You-Dont-Know-JS) (en anglais)
  - : Une série de livres plongeant dans les mécanismes fondamentaux du langage JavaScript.
- [Le jardin de JavaScript](https://bonsaiden.github.io/JavaScript-Garden/fr/)
  - : Documentation des parties les plus étranges de JavaScript.
- [Explorer ES6](https://exploringjs.com/es6/) (en anglais)
  - : Des informations fiables et approfondies sur ECMAScript 2015.

<!---->

- [Modèles JavaScript](https://shichuan.github.io/javascript-patterns) (en anglais)
  - : 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.
- [Comment fonctionnent les navigateurs](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) (en anglais)
  - : Un article de recherche détaillé décrivant les différents navigateurs modernes, leurs moteurs, le rendu des pages, etc.
- [Vidéos sur JavaScript](https://github.com/bolshchikov/js-must-watch) (en anglais)
  - : Une collection de vidéos de JavaScript à regarder.

### Développement d'extension

- [WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions)
  - : 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 [extension API](https://developer.chrome.com/extensions) prise en charge par Google Chrome et Opera. Les extensions écrites pour ces navigateurs fonctionneront dans la plupart des cas dans Firefox ou [Microsoft Edge](https://developer.microsoft.com/fr/microsoft-edge/platform/documentation/extensions/) avec [juste quelques modifications](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/).