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

CREER UN SITE PERSONNEL / CV EN HTML ET EN CSS

Présentation de l’exercice

Vous savez maintenant quasiment tout ce qu’il y a à savoir sur le HTML et le CSS. Tout ce qu’il vous reste à faire maintenant est de pratiquer, encore et encore.

Dans cette optique, il me semblait intéressant de finir ce cours avec un gros exercice qui correspond à la création d’un site web personnel ou « site CV » en HTML et en CSS.

Cet exercice va réutiliser beaucoup de notions vues dans ce cours et va également me permettre d’introduire les quelques points de détails concernant le HTML et le CSS dont je n’ai pas encore pu parler.

Déroulé de l’exercice

Comme souvent lorsque l’on doit mener à bien un projet (informatique), nous allons suivre différentes phases.

Nous commencerons d’abord avec une période de réflexion durant laquelle nous établirons précisément ce que l’on souhaite et ferons la liste de ce qu’il va nous falloir pour y parvenir.

Ensuite, nous attaquerons le squelette HTML de notre site dans son ensemble, page par page.

Nous ne mettrons en forme avec le CSS qu’une fois le squelette HTML de chaque page terminé : rappelez vous qu’on bâtit toujours les murs d’une maison avant de passer la couche de peinture.

Commençons donc déjà par la phase de réflexion.

Réfléchir au résultat voulu

Nous voulons donc ici créer un site web personnel, qui va servir à nous présenter et à présenter nos compétences et expériences.

Nous sommes limités dans cet exercice par une chose : nous n’avons le droit de n’utiliser que le HTML et le CSS.

Nous voulons un site moderne qui s’adapte selon les tailles d’écran ( donc un site responsive).

Notre site comportera quatre pages :

  • Une page d’accueil ;
  • Une page décrivant nos expériences professionnelles ;
  • Une page décrivant nos loisirs ;
  • Une page de contact.

La page d’accueil nous servira de page de CV : nous nous présenterons et mettrons en avant notre formation et nos compétences.

Chapitre précédent

Chapitre suivant