Epicode

Détails

Les images nécessaires :

• L'extrémité pointue de la colonne centrale


• Le positionnement alterné des petites pattes


• L'effet d'affichage d'informations au survol des images du staff


• Des blocs limités en hauteur


• Un rendu "aligné" entre le menu de navigation et les blocs de contenu

• Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
  
  
  • Balises de titres (<h1>, <h2>, etc.) ;
  
  
  • Blocs paragraphes <p> ou génériques <div> ;
  
  
  • images <img> ;
  
  
  • liens <a> ;
  
  
  • éléments de liste <ul> et <li>
  
  



• Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
  
  
  • Couleurs de fond avec la propriété background-color, voire la propriété raccourcie background ;
  
  
  • Couleurs de texte avec color ;
  
  
  • Marges externes margin et internes padding ;
  
  
  • Propriétés de mise en page du texte font-family, font-size, font-weight, text-align, etc. ;
  
  
  • Dimensions des blocs avec height et width...
  
  



• Flexbox et/ou grid pour l'agencement des éléments


• La propriété CSS text-transform pour mettre du texte en majuscules


• La propriété CSS overflow pour gérer les dépassements (scroll) ;


• les pseudo-éléments ::before et ::after pour placer la flèche vers le bas


• La pseudo-classe :nth-child() pour alterner l'alignement des tops-sites (les empreintes de pattes)


• Savoir réaliser une infobulle, pour l'effet au survol des icônes du staff


• Une touche de positionnement relatif et absolu sera nécessaire

• Indépendance du pixel perfect : Limitez autant que possible le recours aux dimensions fixes, pour qu'on puisse rajouter ou supprimer autant d'éléments qu'on veut sans tout casser ;


• En alternative à l'image triangulaire fournie, essayez plutôt d'utiliser la propriété clip-path (Clippy est un potentiel ami) ;


• Elles sont mignonnes ces petites pattes, et si vous les faisiez pivoter avec la propriété CSS transform associée à la fonction rotate() ?


• Vous pouvez personnaliser les barres de défilement sur les navigateurs Chromium, ainsi que sur Mozilla avec scrollbar-color et scrollbar-width


• Et si vous rendiez ce code responsive ?

• Avec des tableaux
  
  
  
  • Les tableaux HTML
  
  
  • Fusionner des cellules de tableau
  
  
  
  


• Avec du positionnement absolu et relatif
  
  
  
  • Le positionnement en CSS