Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

L’EDITEUR DE TEXTE

Place à la pratique… ou presque

Nous en avons désormais fini avec la théorie et les définitions, et les chapitres qui vont suivre vont être l’occasion pour vous de commencer à pratiquer en codant en HTML et en CSS.

Mais avant tout, il va nous falloir mettre en place notre environnement de travail, c’est-à-dire réunir les différents éléments qui vont nous permettre de pouvoir coder en HTML et en CSS.

Et sur ce point, vous êtes plutôt chanceux car pour coder en HTML et en CSS, c’est très simple : nous n’aurons besoin que d’un éditeur de texte.

Qu’est-ce qu’un éditeur

Il existe des milliers d’éditeurs disponibles sur le web, fonctionnant avec des environnements différents (Windows, Mac Os, etc.). Le plus connu de tous est certainement NotePad++, le fameux éditeur fonctionnant avec Windows.

Un éditeur va nous permettre de pouvoir écrire des pages de code et de les enregistrer au bon format (c’est-à-dire avec la bonne extension). Les éditeurs proposent en général différentes options pour vous aider à coder, comme par exemple des indications lorsque vous faîtes une faute de syntaxe dans votre code.

Je n’ai pas de conseil précis quant au choix de votre éditeur. Je vous recommande simplement d’en télécharger un gratuit qui a déjà fait ses preuves.

Un bon éditeur : Komodo Edit

Personnellement, j’utilise la version gratuite du logiciel Komodo, c’est-à-dire Komodo Edit qui est multiplateformes (il fonctionne aussi bien sous Windows que Mac ou encore Linux).

Vous pourrez trouver ce logiciel en cliquant directement sur l’image ci-dessous :

Télécharger Komodo Edit

Une fois l’éditeur de votre choix installé, n’hésitez pas à l’ouvrir. Normalement, par défaut, lorsque vous créez une nouvelle page, le fond doit être blanc. Je vous recommande de paramétrer votre éditeur afin de changer la couleur de fond pour un gris foncé (vous devrez certainement également changer la couleur de votre code afin d’y voir). Cela vous fatiguera beaucoup moins les yeux.

Editeur contre site

Certains d’entre vous connaissent peut être le site jsbin.com ? C’est le site que j’utilise lorsque je vous propose de tester un code.

En effet, vous n’êtes pas strictement obligés de passer par un éditeur pour apprendre à coder en HTML et en CSS, car de nombreux sites comme JsBin vous proposent de rentrer directement votre code en HTML et en CSS et affichent le résultat en direct.

Ces sites sont très pratiques lorsque vous voulez tester rapidement un bout de code ou pour des démonstrations de cours.

Cependant, retenez bien qu’ils sont aussi limités : vous ne pourrez pas faire certaines choses via ces sites et surtout, si vous devez un jour créer un site avec plusieurs pages reliées entre elles, vous devrez obligatoirement utiliser un éditeur.

Pour le moment, je vous conseille donc de vous en tenir à votre éditeur et de progresser en même temps que moi. Nous utiliserons JsBin seulement lorsque je vous proposerai de tester des codes.

Chapitre précédent

Chapitre suivant