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

TRAVAIL EN LOCAL VS EN PRODUCTION

Travailler en local, c’est quoi ?

Avant de commencer notre découverte du HTML et du CSS, il me semble important de dire un petit mot sur les différentes façons de travailler en informatique. Cela devrait vous permettre d’y voir beaucoup plus clair par la suite.

Lorsque vous codez, vous pouvez travailler soit en local, soit en production.

Travailler en local signifie travailler avec des fichiers enregistrés sur votre propre ordinateur. Comme les fichiers ne sont que sur votre ordinateur, vous seul pourrez voir ce que vous faîtes.

Travailler en production, au contraire, signifie intervenir sur des fichiers qui sont déjà stockés sur un serveur web, c’est-à-dire travailler sur des fichiers déjà accessibles via Internet.

L’intérêt du travail en local

Travailler en local comporte de nombreux avantages. Le plus important est certainement le fait de pouvoir créer ou tester de nouvelles fonctionnalités sans impacter le fonctionnement d’un site "live" qui serait déjà visité par des internautes.

Du local vers la production

Un bon développeur commencera toujours son projet en local, c’est-à-dire avec ses fichiers stockés sur sa propre machine.

Une fois le travail terminé, il faudra alors louer un hébergement web chez un hébergeur et acheter et choisir une URL, c’est-à-dire une adresse web pour notre site. Ensuite, nous allons transférer tous nos fichiers sur l'espace serveur que nous avons loué chez notre hébergeur.

L’hébergeur se charge alors de veiller à ce que le serveur fonctionne toujours afin que notre site soit toujours accessible via Internet.

Si nous désirons par la suite modifier quelque chose d’important sur notre site, nous créerons une copie de notre site live en local en récupérant tous les fichiers, et nous implémenterons d’abord les modifications en local afin de minimiser le risque de bugs finaux et ainsi le temps de maintenance sur notre site.

Durant tout ce tutoriel, nous travaillerons en local : nous stockerons les fichiers créés sur nos propres ordinateurs.

Chapitre précédent

Chapitre suivant