Epicode

Détails

• Effet de survol (hover) sur le staff


• Quand vous passez la souris sur l'image du prédef l'info s'affiche sur le rectangle.


• Polices : Oswald & arial

• Des coins arrondis


• L'effet de survol sur les images du staff


• L'effet de survol alternatif sur les prédéfinis


• Des ombres

• 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 ;
  
  
  • Bordures de blocs avec border ;
  
  
  
  
  • 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 ou/et grid pour l'agencement des éléments


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


• La propriété CSS box-shadow pour l'ombre qui sert de contour aux blocs


• La propriété CSS text-shadow pour l'ombre sur le texte


• La propriété CSS transform associée à la fonction rotate() pour la rotation du texte ;


• La propriété CSS border-radius pour les coins arrondis


• Connaitre le principe de fonctionnement d'une infobulle, pour les images du staff


• Bien savoir utiliser les sélecteurs CSS et la propriété :hover pour s'en sortir avec l'effet des prédéfinis


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

• 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 ;


• Les barres de défilement sur les navigateurs Chromium ainsi que scrollbar-color et scrollbar-width sur Mozilla ;


• Intéressez-vous potentiellement à la propriété CSS object-fit et sa valeur cover pour gérer la taille des images ;


• Il y a plusieurs solutions possibles pour réussir l'effet sur les prédéfinis, les avez-vous toutes tentées ?

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


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