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 commentaires
  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

POURQUOI APPRENDRE LE HTML ET LE CSS ?

Le HTML et le CSS, deux standards

Si le monde de l’informatique vous plaît et que vous êtes tenté d'apprendre la programmation informatique, vous serez obligé de passer par l’apprentissage du HTML et du CSS et ceci pour deux raisons.

Tout d’abord, il faut savoir que le HTML et le CSS sont deux véritables standards et n’ont donc, à ce titre, pas de concurrent comme cela peut être le cas pour le langage PhP par exemple (concurrencé par Ruby on Rails et Django entre autres).

Ensuite, les langages HTML et CSS sont véritablement à la base de tout projet de développement web car les navigateurs (Google Chrome, Safari, etc.) vont utiliser le code HTML et le CSS pour vous fournir et afficher des pages web.

Voici par exemple un exemple de code HTML :

exemple de code html

Et voici un exemple de code CSS :

exemple de code CSS

En bref : que vous vouliez créer un site e-commerce, un blog, une application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les langages HTML et CSS.

Cela étant, si vous connaissez un petit peu le monde du web, vous pouvez très bien vous dire que coder en HTML et en CSS est inutile puisque vous pouvez utiliser des solutions toutes faîtes comme des frameworks (WordPress, PrestaShop), des éditeurs WYSIWIG (What You See Is What You Get) comme Adobe Dreamweaver ou encore avoir recours aux services d’une agence spécialisée.

Faisons table rase des idées reçues

IDEE RECUE N°1 : Un framework, c’est génial.

C’est tout à fait vrai. En effet, utiliser un bon framework correspond à des centaines d’heures de travail économisées pour vous et est également la garantie d’un travail bien fait à priori.

Toutefois, le jour où vous voulez intégrer quelque chose comme disons… un système de paiement, comment faites-vous ? Et si vous voulez modifier un peu l’apparence graphique de votre site ? Dans ce cas là, ça devient la panique totale.

Si installer un framework peut être une bonne solution, ce n’est pas suffisant. Vous devez également le comprendre et pouvoir le modifier.


IDEE RECUE N°2 :
Avez un éditeur WYSIWIG, pas besoin de savoir coder.

Les éditeurs WYSIWIG sont des éditeurs qui codent « à votre place ». En gros, vous choisissez d’insérer un paragraphe, une image, un carré, etc. et l’éditeur crée le code correspondant. Un exemple célèbre est Adobe Dreamweaver. Ces éditeurs sont certes de plus en plus puissants et de mieux en mieux fait.

Cependant, ils font et continueront toujours à faire des erreurs, ne serait-ce que d’organisation du code et de logique. En effet, il n’est pas possible pour un programme de penser comme un humain et ainsi votre code ne sera jamais tout à fait valide. De plus, certaines autres limitations demeurent.


IDEE RECUE N°3 :
Une agence ou un freelance peut faire le travail à ma place.

Pour peu que vous ayez un budget suffisant (> 50K€ en général), vous pourrez vous offrir certaines agences reconnues qui font un travail remarquable et offrent un bon support après vente.

Toutefois, les "bonnes" agences sont généralement hors budget et nombre de freelances et « d’agences » ne se résument en fait qu’à un étudiant cherchant à gagner un peu d’argent. Or, aujourd’hui, le web est trop complexe pour qu’un développeur seul, aussi expérimenté qu’il soit, puisse gérer seul un projet d’envergure dans des délais convenables. Je vous laisse donc imaginer dans nombre de cas le résultat…

De plus, pensez bien que le côté technique d'un projet n'est qu'un aspect parmi d'autres. Si vous dépensez tout votre argent dans le développement de votre site web ou application, comment pourrez-vous marketer votre projet ?

Enfin, une fois le travail rendu, il faudra très souvent ne pas vous attendre à ce que votre freelance ou votre agence vienne vous dépanner pendant des années en cas de problème.

Mettre un pied dans le monde des développeurs

Encore une fois, je ne vous dis pas de ne pas travailler avec une agence, je vous dis simplement de prendre des précautions et de vous organiser avant.

Apprendre le HTML et le CSS signifie entrer dans le monde des développeurs et c’est donc commencer à les comprendre et à parler comme eux.

Si vous comprenez le HTML et le CSS avant de faire appel à une agence, vous rédigerez alors un cahier des charges plus précis et de meilleure qualité et économiserez finalement beaucoup d’argent et réduirez le nombre de vos soucis.

Comprendre son site

Finalement (on garde le meilleur pour la fin !), apprendre le HTML et le CSS c’est surtout et avant tout se créer un socle pour comprendre comment fonctionne son site et ainsi pouvoir le modifier ou corriger des problèmes au besoin.

Deviendriez-vous plombier sur un coup de tête ? Non, car vous n’y connaissez rien en plomberie. C’est exactement pareil sur le web.

L’immense majorité des échecs liés au web proviennent du fait que des personnes se lancent dans l’aventure sans la moindre connaissance de leur environnement.

N’oubliez pas qu’il est essentiel, pour qu’un commerce fonctionne (et aujourd’hui plus que jamais) d’avoir une compréhension de son propre business, de son architecture et de son infrastructure.

Si vous faîtes l’effort de comprendre cela, vous avez d’ores-et-déjà battu 95% de vos concurrents. Sans compter que pour optimiser votre référencement (donc votre visibilité sur le web), la maîtrise du HTML et du CSS est indispensable.

Convaincu ? Dans ce cas, passons à la suite ! Car je suis certain que vous êtes impatients de découvrir ce que signifient les initiales « HTML » et « CSS » !

Chapitre précédent

Chapitre suivant