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

Chapitre précédent

Chapitre suivant

Question n°1 :

Que signifie "responsive design" ?

Cela signifie "design adaptable". On parle de responsive design pour designer les techniques permettant à un site de s'adapter à des tailles d'écran différentes.



Question n°2 :

Pourquoi créer un site responsive ?

Il y a deux raisons majeures à cela. D'une part, de plus en plus de personnes utilisent des Smartphones pour aller sur Internet. Afin de leur proposer une expérience agréable de navigation, vous devez retravailler votre site pour qu'il s'affiche bien sur des petits écrans. D'autre part, l'aspect responsive d'un site est aujourd'hui pris en compte par Google dans son algorithme de classement. C'est donc également important pour votre référencement.



Question n°3 :

Lorsqu'on utilise des valeurs en pourcentage pour redimensionner un élément en CSS, la valeur donnée à un élément dépend...

  1. De sa taille de départ
  2. De la taille de la fenêtre
  3. De la taille de son élément parent

Réponse 3. Lorsqu'on applique une valeur relative à un élément en CSS pour le redimensionner, le pourcentage donné est toujours un pourcentage de la taille de son élément parent.



Question n°4 :

Laquelle de ces trois écirtures est correcte

  1. @media screen and max-width = 680px
  2. @media screen and (max-width: 680px)
  3. @media screen and (max-width = 680px)

Réponse 2. On n'utilise jamais le signe égal en CSS pour définir une taille. Faites bien attention aux parenthèses en utilisant les media queries !

Chapitre précédent

Chapitre suivant