Exercice Templates n°3 - Profil

Le deal à ne pas rater :

Sortie PlayStation 5 Pro : où précommander la console PS5 Pro ?

Voir le deal

Clyde Ale
Membre timide

Messages :
130

PointsCodes :
85

Mer 21 Juin 2017 - 2:14

Informations

Niveau estimé : Facile/Intermédiaire
Sujet mis à jour en aout 2024

Présentation

Pour compléter le schéma de catégorie que j'ai donné précédemment, voici le profil assorti, si l'envie vous prend de vous entraîner sur quelque chose d'un peu différent ^^ L'avatar est bien entendu adaptable, il s'agit ici de mon ancien compte admin x)

La maquette

Exercice Templates n°3 - Profil - Clyde Ale 967328Schmaprofil

Détails

https://2img.net/r/hpimg15/pics/924737Bandeprofil.png

https://2img.net/r/hpimg15/pics/737047Offline.png

'Christa
Codeur.se

Messages :
1262

PointsCodes :
3978

Dim 8 Sep 2024 - 16:53

Les points-clés de l'exercice

Il s'agit d'une maquette proposée en 2017, qui a probablement été pensée pour PhpBB2. Comme les tableaux c'est has-been, il va vous falloir trouver l'équivalent avec les techniques modernes ! Il n'y a pas de fioritures particulières, donc pour le reste c'est assez simple à première vue.

Les coins arrondis du conteneur du profil

Mettre une image de fond sur le pseudo (mais comment gérer les pseudos longs ?)

Positionner l'icone "offline" sur le côté du profil

Flex sera probablement l'approche la plus simple

Ressources

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.
Certaines notions sont accompagnées d'un lien pour en savoir plus !

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>...
Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
- Couleur de fond avec la propriétés background-color, image de fond avec background-color et background-repeat, 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...

Bases de Forumactif :
- Bases des templates, à savoir les boucles et les variables ;
- Savoir décrypter et personnaiser le template viewtopic_body ;

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

Les pseudo-éléments ::before et ::after pour positionner certains éléments qui peuvent se passer d'une image directement dans le code. Dans notre cas, l'icone "offline", associée à la classe online, générée le cas échéant par la variable {postrow.displayed.ONLINE_IMG_NEW} ;

Une touche de positionnement relatif et absolu sera nécessaire pour positionner l'icone "online" ;

La propriété border-radius pour les coins arrondis ;

Pas assez compliqué pour vous ?

Rajoutez-vous des défis ou choisissez une autre approche pour certains éléments !

S'affranchir des dimensions fixes : 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. Le cas des pseudos longs serait également à étudier !

Intéressez-vous potentiellement à la propriété CSS object-fit et sa valeur cover pour gérer la taille de l'avatar

Exercice Templates n°3 - Profil - Clyde Ale 14n2

Exercice Templates n°3 - Profil - Clyde Ale Rwns

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Epicode