Tutoriels de développement web

Pour les débutant·e·s

Premiers pas avec le Web

Premiers pas avec le Web est une série concise qui vous initie aux aspects pratiques du développement web. Vous installerez les outils nécessaires pour créer une page web basique et publier votre propre code.

Tutoriels HTML

Introduction à HTML

Structurer le contenu avec HTML

Notre module d'apprentissage HTML pour débutant·e·s enseigne le HTML en partant de la base — aucune connaissance préalable n'est requise. Il pose les fondations, vous habitue aux concepts et à la syntaxe essentiels, montre comment appliquer du HTML dans le texte, créer des liens hypertextes et structurer une page web.

HTML pour débutant·e·s ^(angl.)

Un guide HTML pour débutant·e·s qui explique les balises courantes. Inclus aussi un guide pas à pas pour créer une page web basique avec des exemples de code.

Défis HTML ^(angl.)

Utilisez ces défis pour perfectionner vos compétences HTML (par exemple, « Dois-je utiliser un élément <h2> ou <strong> ? »), en vous concentrant sur une structuration pertinente.

Sujets HTML avancés

Formulaires web

Les formulaires sont une partie essentielle du Web — ils fournissent de nombreuses fonctionnalités pour interagir avec les sites, comme l'inscription, la connexion, l'envoi de retours utilisateur·ice·s, l'achat de produits, etc. Ce module vous initie à la création de la partie client des formulaires.

Conseils pour créer des pages HTML rapides

Optimisez vos pages web pour offrir un site plus réactif aux visiteur·euse·s et réduire la charge sur votre serveur et votre connexion Internet.

Tutoriels CSS

Introduction à CSS

Bases de CSS

CSS (Cascading Style Sheets, ou feuilles de style en cascade) est le langage utilisé pour la mise en forme de votre page web. Ce guide Bases de CSS vous aide à bien démarrer. Nous répondrons à des questions comme : Comment afficher le texte en noir ou en rouge ? Comment placer le contenu à l'écran ? Comment ajouter des images ou des couleurs de fond à la page ?

Bases de la mise en forme CSS

CSS permet la mise en forme et la mise en page des sites web — par exemple, modifier la police, la couleur, la taille, l'espacement du contenu, le diviser en colonnes, ou ajouter des animations et autres effets décoratifs. Ce module propose une introduction progressive aux bases de CSS, à sa syntaxe et à la manière de l'utiliser pour la présentation du HTML.

Sélecteurs

Ciblage des éléments HTML, y compris selon leur état, avec CSS.

Spécificité

Comprendre l'algorithme du navigateur pour déterminer quelles déclarations CSS s'appliquent à un élément en cas de conflit, avec un quiz sur la spécificité ^(angl.).

Gestion des conflits

La cascade, la spécificité et l'héritage contrôlent l'application du CSS au HTML et la résolution des conflits entre styles.

Mise en forme du texte en CSS

Présentation des bases de la mise en forme du texte : police, gras, italique, espacement, ombres et autres effets. Le module se termine par l'utilisation de polices personnalisées, la présentation des listes et des liens.

Résoudre les problèmes CSS courants

Questions et réponses fréquentes pour débutant·e·s.

Sujets CSS intermédiaires

Mise en page CSS

Après avoir vu les bases de CSS, la mise en forme du texte et la manipulation des boîtes, il est temps d'apprendre à placer vos boîtes par rapport à la zone d'affichage (viewport en anglais) et entre elles. Nous avons couvert les prérequis nécessaires, vous pouvez donc plonger dans la mise en page CSS, explorer les différents modes d'affichage, les méthodes traditionnelles (float, positionnement) et les nouveaux outils comme flexbox.

Référence CSS

Référence complète de CSS, avec détails sur la compatibilité Firefox et autres navigateurs.

Grilles fluides ^(angl.)

Concevez des mises en page qui s'adaptent à la taille de la fenêtre tout en utilisant une grille typographique.

Défis CSS ^(angl.)

Testez vos compétences CSS et identifiez les points à améliorer.

Sujets CSS avancés

Utiliser les transformations CSS

Appliquez des rotations, inclinaisons, mises à l'échelle et translations avec CSS.

Transitions CSS

Les transitions CSS permettent d'animer les changements de propriétés CSS, au lieu de les appliquer instantanément.

Tutoriel Canvas

Apprenez à dessiner des graphiques par script avec l'élément canvas.

Tutoriels JavaScript

Introduction à JavaScript

Premiers pas avec JavaScript

Qu'est-ce que JavaScript et comment peut-il vous aider ?

Scripts dynamiques avec JavaScript

Ce module poursuit la découverte des fonctionnalités fondamentales de JavaScript, en abordant les types de blocs de code courants comme les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ces notions dans le cours, mais ici elles sont détaillées explicitement.

Codecademy ^(angl.)

Codecademy est une façon simple d'apprendre à coder en JavaScript. C'est interactif et vous pouvez le faire avec vos ami·e·s.

freeCodeCamp ^(angl.)

freeCodeCamp enseigne divers langages et frameworks pour le développement web. Il propose aussi un forum ^(angl.), une radio en ligne ^(angl.) et un blog ^(angl.).

Sujets JavaScript intermédiaires

Introduction aux objets JavaScript

En JavaScript, presque tout est un objet, des fonctionnalités de base comme les chaînes de caractères et tableaux aux API du navigateur. Vous pouvez aussi créer vos propres objets pour regrouper fonctions et variables. Comprendre la programmation orientée objet en JavaScript est essentiel pour progresser et écrire du code efficace. Ce module détaille la théorie, la syntaxe, la création d'objets et l'utilisation de JSON.

APIs web côté client

En écrivant du JavaScript côté client, vous utiliserez rapidement des API — interfaces pour manipuler le navigateur, le système d'exploitation ou des données externes. Ce module explore ce que sont les API et comment utiliser les plus courantes dans vos développements.

Eloquent JavaScript ^(angl.)

Un guide complet des méthodologies JavaScript intermédiaires et avancées.

Speaking JavaScript ^(angl.)

Pour les programmeur·euse·s souhaitant apprendre JavaScript rapidement et correctement, ou approfondir leurs connaissances.

Essential JavaScript Design Patterns ^(angl.)

Introduction aux patrons de conception JavaScript essentiels.

JavaScript.info - Le tutoriel JavaScript moderne ^(angl.)

Partie 1 : Le langage. Partie 2 : Travailler avec les navigateurs.

Sujets JavaScript avancés

Guide JavaScript

Un guide complet et régulièrement mis à jour sur JavaScript, pour tous les niveaux, de débutant·e à avancé·e.

You Don't Know JS ^(angl.)

Une série de livres qui explore en profondeur les mécanismes du langage JavaScript.

JavaScript Garden ^(angl.)

Documentation sur les aspects les plus particuliers de JavaScript.

Exploring ES6 ^(angl.)

Informations fiables et détaillées sur ECMAScript 2015.

JavaScript Patterns ^(angl.)

Collection de patrons et anti-patrons JavaScript couvrant fonctions, jQuery, plugins, conception, objets, réutilisation de code, DOM, etc.

Comment fonctionnent les navigateurs ^(angl.)

Un article de recherche détaillé sur les navigateurs modernes, leurs moteurs, le rendu des pages, etc.

Vidéos JavaScript ^(angl.)

Une collection de vidéos JavaScript à regarder.

Développement d'extensions

WebExtensions

WebExtensions est un système multiplateforme pour développer des modules complémentaires de navigateur. Il est largement compatible avec l'API d'extension ^(angl.) de Google Chrome et Opera. Les extensions écrites pour ces navigateurs fonctionnent généralement dans Firefox ou Microsoft Edge ^(angl.) avec quelques adaptations ^(angl.). L'API est aussi totalement compatible avec Firefox multiprocessus ^(angl.).