Maquette d'Exercice - Fiche de présentation
Créée par : Ori
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
![[INTERMÉDIAIRE] Exercice 2 - Fiche présentation Bfr5](https://www.zupimages.net/up/18/11/bfr5.png)
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
, voirebackground
; couleurs de texte aveccolor
; marges externesmargin
et internespadding
; propriétés de mise en page du textefont-family
,font-size
,font-weight
; dimensions des blocs avecheight
etwidth
...
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
etscrollbar-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
etposition: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...
Merci d'informer le staff d'Epicode en cas de lien mort !