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 :

Qu'est-ce qu'une notation short hand en CSS ?

Les notations short hand CSS sont des propriétés auxquelles on va pouvoir attribuer plusieurs valeurs appartenant à d'autres propriétés d'un même "type". Ainsi, nous allons pouvoir modifier plusieurs styles d'un coup d'un élément HTML grâce aux notations short hand.



Question n°2 :

Le séléecteur CSS étoile (*) sert à...

  1. Appliquer des bordures aux éléments
  2. Sélectionner tous les éléments d'une page HTML
  3. Sélectionner un élément possédant un attribut en particulier

Réponse 2. Le sélecteur étoile est également appelé "sélecteur CSS universel" car il sert à cibler tous les éléments HTML d'une page d'un coup.



Question n°3 :

Le sélecteur div + p sert à sélectionner...

  1. Le premier élément p enfant d'un div
  2. Tous les éléments p enfants dans un div
  3. Tous les éléments p suivants un div (et de même niveau)

Réponse 3. Le sélecteur div + p sert à sélectionner tous les éléments p suivants directement un div dans notre page et étant de même niveau. Pour sélectionner tous les paragraphes dans nos div, nous utiliserons le sélecteur div p.



Question n°4 :

A quoi reconnait-on les pseudo classes en CSS ?

  1. Elles commencent toutes par ":"
  2. Elles commencent toutes par "::"
  3. Elles possèdent toutes le mot "class" dans leur nom

Réponse 1. Les pseudo classes CSS commencent toutes par ":", tandis que les pseudo éléments commencent par "::".



Question n°5 :

A quoi sert la pseudo classe :hover ?

  1. A modifier le style d'un élément lors du survol de la souris sur l'élément
  2. A modifier le style d'un lien dès qu'il a été cliqué
  3. A modifier le style d'un élément avant qu'on l'ait cliqué

Réponse 1. La pseudo classe :hover va nous permettre d'appliquer des styles spécifiques qui seront donnés à un élément dès qu'il sera survolé par la souris.



Question n°6 :

A quoi sert le pseudo élément ::selection

  1. A appliquer un style à un élément lors du survol de la souris
  2. A appliquer un style à la première ligne d'un élément
  3. A appliquer un style à la partie d'un élément sélectionnée par l'utilisateur

Réponse 3. Les styles définis à l'intérieur de ::selection ne seront appliqués à un élément que lorsque celui-ci sera sélectionné par l'utilisateur (avec un double clic de souris par exemple).



Question n°7 :

Pourquoi utiliser des sprites d'images ?

  1. Pour diminuer le nombre de requêtes envoyées au serveur
  2. Par simplicité pour insérer des images
  3. Car cela crée des images plus jolies

Réponse 1. On utilise les sprites d'images afin de diminuer le nombre de requêtes envoyées au serveur et ainsi d'optimiser la vitesse de nos sites.



Question n°8 :

Quelle est la grande différence entre une transition et une animation en CSS ?

Pour créer une transition dans les valeurs d'une propriété CSS, il faut déjà que la propriété en question connaisse à un moment donné un changement de valeur, condition qui n'est pas nécessaire pour créer une animation.



Question n°9 :

Quelle précaution faut il prendre lorsqu'on utilise les transitions ou les animations ?

Les transitions et les animations sont deux fonctionnalités relativement récentes du CSS. Ainsi, leur compatiiblité n'est pas optimale avec toutes les versions des navigateurs les plus utilisés. Il faudra donc utiliser les préfixes vendeurs avec ces propriétés.

Chapitre précédent

Chapitre suivant