Exercices HTML et CSS

Retour au CV

1) JCDV et Patrick Sébastien

Image de l'exercice 1 (JCVD)

2) Faire un squelette HTML5

Code HTML du squelette HTML5

3) Créer un CV à l'aide des balises sémantiques

CV de Cédric FAMIBELLE

4) Positionnement : Reproduire les images

1 - No Position

Positionnement : Dessin à reproduire
Image à Reproduire
Positionnement : Reproduction dessin
Reproduction

2 - Relative (utiliser position relative)

Positionnement : Image à reproduire avec position relative
Image à Reproduire
Positionnement : Reproduction dessin avec position relative
Reproduction

3 - Absolute (utiliser position absolute)

Positionnement : Image à reproduire avec position absolute
Image à Reproduire
Positionnement : Reproduction dessin avec position absolute
Reproduction

4 - Absolute 2 (utiliser position absolute)

Positionnement : Image à reproduire avec position absolute
Image à Reproduire
Positionnement : Reproduction dessin avec position absolute
Reproduction

5 - Absolute 3 (Box Sizing) (Position absolute)

Positionnement : Image à reproduire avec position absolute
Image à Reproduire
Positionnement : Reproduction dessin avec position absolute
Reproduction

5 - Relative (Box Sizing) (Position relative)

Positionnement : Image à reproduire avec position relative
Image à Reproduire
Positionnement : Reproduction dessin avec position relative
Reproduction

6 - Z_index : Le flux doit respecter l’ordre suivant : vert, bleu, chocolat, jaune

Positionnement : Dessin à reproduire avec Z_index
Image à Reproduire
Positionnement : Reproduction dessin avec Z_index
Reproduction

7 - Float : Utiliser les propriétés float pour réaliser ce dessin

Positionnement : Dessin à reproduire avec flex
Image à Reproduire
Positionnement : Reproduction dessin avec float
Reproduction

8 - Sticky : Reproduire le layout suivant

Menu sticky à reproduire
Image à Reproduire
Reproduction du menu sticky
Reproduction

5) Flex : Reproduire la page

Page flex à reproduire
Image à Reproduire
Reproduction de la page en flex
Reproduction

6) Reproduire ce tableau de Mondrian

Grid : Mondiran à reproduire
Image à Reproduire
Grid : reproduction du Mondiran
Reproduction
Grid : aperçu du CSS du Mondiran
Aperçu du CSS

Grid Bonus : Reproduire cette étoile

Grid : Etoile à reproduire
Image à Reproduire
Grid : reproduction de l'étoile
Reproduction
Grid : aperçu du CSS de l'étoile
Aperçu du CSS

7) Animation : Reproduire les animations du gif ci-dessous

Animations à reproduire
Animations à reproduire

0 - Transition

Animation transition
Reproduction Transition

1 - Carré qui tourne

Animation carré qui tourne
Reproduction Carré qui tourne

2 - Balle qui rebondit

Animation balle qui rebondit
Reproduction balle qui rebondit

3 - Loader

Animation loader
Reproduction loader

4 - Queue

Animation queue
Reproduction queue

5 - Animation 3D (Caroussel)

Animation 3D (Caroussel)
Reproduction Animation 3D (Caroussel)

8) Responsive : Reproduire les pages ci-dessous

1 - Page Web

  1. Les containers contenant du texte sont affichés sous forme de colonnes au-dessus de 640px puis l’un en dessous de l’autre en dessous
  2. Un header est visible seulement pour les écrans au-dessus de 800px
  3. Un Footer est visible uniquement à l’impression
Responsive : Page Web
Reproduction Page Web
Responsive : Page Web
Reproduction Page Web

2 - Reproduire le comportement de ce site météo avec les données de votre choix

Responsive : Météo
Site à reproduire
Responsive : Météo
Reproduction Page Web Météo

3 - Utilisez le système de grille pour reproduire le site suivant :

Responsive : Super site
Site à reproduire
Responsive : Super site
Site à reproduire
Responsive : Super site
Reproduction Super Site