ARTIS / HACKEUSE

Intégration

Commencer

CV

  1. Intégrer la maquette en HTML puis en CSS
  2. Le site doit contenir des liens externes et des ancres, iframe, tableau, formulaire, input, textarea, listes, paragraphes, titres, une légende, des traits de séparation, des class et des ID
  3. Le site doit être hébergé sur Github ou Netlify
  4. Lien image : Image portrait
  5. Maquettes :
photo Html photo css
Exercice suivant

Boites

  1. Intégrer les maquettes en HTML & CSS
  2. Suivre les instructions de l’image sur la boite 2
  3. Lien image : Image nature
  4. Maquettes :
photo div 1 photo boite 2
Exercice suivant

Flex Box

  1. Créer une section pour chaque exercice
  2. Chaque section fait 90vh, a une bordure pleine noire de 4px et possède une marge de 20px
  3. Les éléments doivent être mis en page avec la méthode Flexbox
  4. Liens images : Image Hercule, Image nature
  5. Maquettes :
photo flex 1 photo flex 2 photo flex 3 photo flex 4 photo flex 5 photo flex 6 photo flex 7 photo flex 8
Exercice suivant

Grid

  1. Créer une section pour chaque exercice
  2. Chaque section fait 100vh, a une bordure pleine noire de 4px et possède une marge de 20px
  3. Les éléments doivent être mis en page avec la méthode Grid
  4. Maquettes :
photo grid 1 photo grid 2 photo grid 3 photo grid 4 photo grid 5 photo grid 6
Exercice suivant

Position

  1. Créer une section pour chaque exercice
  2. Chaque section fait 90vh, a une bordure pleine noire de 4px et possède une marge de 20px
  3. Les éléments doivent être mis en page avec la méthode Position
  4. Dans l’exo 4, le but est de créer un header qui commence en haut du site et qui nous suit pendant le scroll sur toute la page
  5. Dans l’exo 6, le header est dans la section et ne nous suit pas plus loin que la fin de la section
  6. Lien image : Image Bronn
  7. Maquettes :
photo position 1 photo position 2 photo position 3 photo position 4 photo position 5 photo position 6
Exercice suivant

Responsive

  1. Créer une section pour chaque exercice
  2. Chaque exercice est composé de deux étapes, une version desktop et une version mobile. Vous devez intégrer les deux
  3. Les éléments doivent être mis en page avec, entre autre, les média queries
  4. Dans le dernier exercice, vous devez ajouter le break point entre les versions desktop et mobile
  5. Liens images : Image chat, Image Vegeta, Image piscine
  6. Maquettes :
photo responsive 1 photo responsive 2
photo responsive 3 photo responsive 4
photo responsive 5 photo responsive 6
photo responsive 7 photo responsive 8 photo responsive 9
Exercice suivant

Projet Insta

  1. Duppliquer le lien Figma
  2. Intégrer la maquette et rendre le site responsive
  3. Lien maquette :
photo insta
TERMINÉ

Liens utiles

by @jojo