Informations

Niveau estimé : Intermédiaire
Sujet mis à jour en mars 2023

Présentation

Bonjour à tous les petits et grands codeurs ! C'est encore moi !

Un schéma de fiche de présentation un peu plus compliqué cette fois. Si vous êtes inspirés n'hésitez pas à reprendre le schéma et à le modifier pour un code plus original.

La maquette

Détails

• Icône : https://www.zupimages.net/up/18/11/52yd.png
• Fleurs : https://www.zupimages.net/up/18/11/52yd.png
• Typographie : Selon vos préférences
•  Couleurs : #bcbcbc

Compétences suggérées

Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore. Chaque notion est accompagnée d'un lien pour en savoir plus.

• Bases de HTML : Balises de titres (<h1>, <h2>, etc.), blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>, éléments génériques inline <span>, balise de texte important <strong>...
  Tutoriel Epicode sur les balises HTML / Documentation HTML francophone
• Bases de CSS : Image de fond avec background-image, couleur de fond avec la propriété background-color, voire 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 ; dimensions des blocs avec height et width...
  Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone
• La balise <hr> pour la séparation entre "Caractère" et "Physique"
• Les barres de défilement sur les navigateurs Chromium ainsi que scrollbar-color et scrollbar-width sur Mozilla.
• La propriété CSS border pour créer des bordures
• La propriété CSS border-radius pour les coins arrondis (pour l'icone)
• Flexbox permet de placer proprement et facilement les blocs côte à côte. Vous pouvez également utiliser les grilles CSS avec display:grid.

Solutions alternatives sans flexbox

• La propriété float est capricieuse mais intéressante à utiliser, jetez un coup d'oeil au tutoriel sur le positionnement CSS ;
• Avec le même tutoriel, vous pouvez également expérimenter avec position:relative et position:absolute ;
• Alternativement, jetez un oeil à display:inline-block ;
• La méthode dépassée : les tableaux HTML. A proscrire dans un cas concret, mais un bon entrainement pour vous familiariser avec les tableaux.

Remarques

Prévoyez les cas particuliers : une citation très longue, un personnage avec un nom à rallonge, un membre qui met des images plus grandes que les dimensions 100x100 prévues...