Oh mon dieu ! Je n'avais pas vu le sujet, je me penche dessus de suite.
Je passais simplement en espérant avoir des nouvelles... Toutes mes excuses >.<
(Je ferai un double post si besoin)

Pas de soucis, je sais que le temps d'attente n'a pas dû aider à t'y faire penser XD

J'ai surtout complètement raté le post en passant tous les jours quoi...

Alors je reviens de ma semaine loin de la maison, et je suis pas sûr de savoir par où commencer. Juste une liste de ce que je pense avoir besoin ? Pour l'instant j'essaie de bien comprendre le flexbox mais je suis très dans la confusion encore pour le moment.
Mais si c'est juste une liste de ce que je pense avec une petite explication du pourquoi je peux essayer. Même si j'ai beaucoup de mal à tout mettre dans l'ordre pour le moment xD

Yep, pour le moment je ne te demande pas de coder, juste de lister les différents éléments clés de la structure que tu souhaites obtenir et de comment ils seraient codés, au niveau le plus basique. Ça me permettra de voir où tu en es niveau compréhension des différentes balises HTML et de te donner de meilleures solutions si tu me réponds "div, div, div, div, div, div" XD

Pour t'aider : c'est important de respecter la sémantique, en HTML. Avant de t'intéresser à l'aspect esthétique, pense à la structure logique. On s'occupera de l'agencement esthétique quand on aura notre squelette général.

Okay! Here it goes :

Code:

<div>
    <img src=""><h1>Tweet</h1>
    <img src=""><h2>Subunny ~<h2><br>
    <span>@sububu</span>
    <hr>
    <div>
        <p>Tweet text</p>
    </div>
    <hr>
    <span>09:49 PM . 27 Dec 21</span>
    <hr>
    <img src=""><img src=""><img src=""><img src="">
    <hr>
</div>

Je sais pas si c'est qui était attendu, mais j'ai tenté un truc

Hmmm, structurellement parlant, c'est un début oui. C'est bien, tu as utilisé des balises de titre, de paragraphe et même les barres de séparation. Je pense que ma principale objection serait surtout que j'aurais utilisé une liste HTML pour les images finales, même si elles ne sont là que pour la déco dans un contexte de "faux tweet".

Si on décompose l'image que tu m'as donnée en guise d'exemple de tweet, on peut en déduire une structure en cinq parties :
- D'abord le "titre", à savoir l'indication "Tweet" avec la flèche sur le côté (est-elle utile dans un contexte de faux tweet ? Elle sert à quoi cette flèche ? Si elle est purement décorative, alors on pourra se contenter d'utiliser le pseudo-élément ::before en CSS, et de supprimer le besoin de mettre une image dans le HTML)
- Puis l'avatar, le nom et le "tag" de l'auteur (c'est le plus "complexe", on gagnera à définir un bloc englobant le tout avec la balise <div>.)
- Le contenu du tweet proprement dit (un paragraphe suffit largement indeed)
- La date du tweet (l'utilisation de la balise paragraphe serait plus propre qu'un span)
- Les différents liens de partage & co sous forme d'image (sous forme de liste d'images)

Tu peux supprimer la balise <br> que tu as mise, surtout si ton intention est juste de créer un espace avec : on s'occupera de ça avec le CSS.

Partant de ces observations, est-ce que tu as une autre suggestion à faire niveau squelette HTML ?

(N'oublie pas de me poser tes questions si jamais quelque chose ne te semble pas clair).

Code:

<div>
    <h1>Tweet</h1>
        <div>
            <img src=""><span>Subunny ~<span>
            <span>@sububu</span>
        </div>
    <div>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
    </div>
    <img src=""><img src=""><img src=""><img src="">
</div>

Comme ça ? o:

En effet la flèche sert à retourner sur la timeline sur twitter. Donc très peu utile en soit. C'est quoi le before ?
Je crois ne pas comprendre la liste d'images ? C'est ce que j'ai fait ou y a autre chose que je ne connais pas ?
(Je poserai des questions au fur et à mesure que mon esprit structure la chose... Pour l'instant j'essaie juste de voir si je comprends ce que je fais à tâtons.. XD)

Ahah, je me disais bien qu'on allait devoir potasser quelques fondamentaux ^^

Alors, quand je parle de liste d'image, je parle d'utiliser les balises de liste en HTML, à savoir :

• <ul> (liste d'éléments),
  
• <ol> (liste ordonnée),
  
• et <li> (élément de liste).
  

Ces balises sont à utiliser lorsque tu souhaites créer une liste d'items, genre celle que je viens de faire, mais sont également utilisables pour afficher une barre de navigation (la barre de navigation d'épicode en est un exemple), une liste de partenaires, etc. Leur aspect par défaut peut être totalement revu avec le CSS ;)
Tu peux consulter par exemple le tutoriel d'Epicode ou encore la page de Pierre Giraud sur les listes pour un tutoriel en français.

Le pseudo-élément ::before est un sélecteur CSS, tu en apprendras plus sur les sélecteurs CSS dans ce tutoriel, mais va falloir s'accrocher, c'est complexe au premier abord. Dans le cas spécifique de ::before, il permet d'insérer un pseudo élément (d'où son nom) avant un élément désigné. Par exemple, avec le sélecteur h1::before on pourra rajouter la fameuse image de flèche vu qu'elle est purement esthétique. Tu peux lire l'article du MDN sur le sujet.

Tu n'es pas obligé d'utiliser des <div> partout (les paragraphes pour le tweet et la date se suffisent à eux même), et tu as perdu le titre <h2> sur le pseudo :<

Ca te semble plus clair ? D'autres questions ? :p

Je pense que j'ai du mal à me détacher de mes div je sais pas tellement pourquoi. Très probablement parce que je "ne sais pas faire sans" du coup j'en mets partout. Je pense que j'ai beaucoup de mal à me dire que tout peut tenir tout seul. Ou alors j'ai réellement compris comment la div fonctionne. Mais c'est bien juste, je mets une div pour "englober" le reste de mon squelette ?

J'ai lu les secteurs, mon cerveau a fondu... Déjà que je pls sur les flex-box depuis une semaine maintenant. XD

Code:

<div>
    <h1>Tweet</h1>
        <img src=""><h2>Subunny ~<h2>
        <span>@sububu</span>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

Alors je mettrai pas ma main au feu là-dessus, mais je dois bien mettre 4 balises de liste comme il y a 4 images ou une seule suffit ? Je ne suis pas sûre de comprendre la différence entre ul et ol. Est-ce que c'est juste une histoire de numérotation entre les deux ? Je suis si la confusion 'Christa hahahaha ALED. xD Là on fait une liste d'images, mais j'ai du mal à comprendre comment on va pouvoir en mettre 4 si elle s'appelle toutes li ?  

Est-ce que je laisse la span pour le @ ou est-ce que là je mets aussi h3 (par exemple) ?
Je suis en roue libre cérébrale toutes mes excuses
(J'espère que mes questions sont plus ou moins claires)

Prends ton temps pour lire et intégrer les tutoriels, c'est normal de ne pas tout comprendre au début !

Les listes créées avec la balise <ul> sont des listes non ordonnées (des listes à puces quoi) et les listes créées avec la balise <ol> sont des listes ordonnées (numérotées). Si l'ordre n'a pas de réelle importance, on choisira généralement les listes non ordonnées. Les listes ordonnées sont plutôt utilisées pour les sommaires par exemple.

Et chaque item de liste contient le texte que tu souhaites, donc ici ce seront tes quatre images !

Du coup, un code propre pour afficher ces quatre images :

Code:

<ul>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
</ul>

(Tu noteras la présence de l'attribut alt dans la balise <img>. Il est obligatoire et sert à décrire l'image. Il est utilisé par les moteurs de recherches, lecteurs d'écran, et est très utile pour les personnes malvoyantes. Prends dès maintenant l'habitude de toujours décrire tes images en quelques mots via cet attribut )

La balise <div>, de même que la balise <span> sont des balises "sans sens sémantique", tu les utilises quand tu n'as pas d'autre choix. Le MDN a un article sur la sémantique, mais en résumé, il s'agit d'utiliser des balises qui correspondent à l'objectif de chaque élément : une balise de titre pour un titre, une balise de paragraphe pour un bloc de texte, une balise <strong> pour mettre en valeur un ou plusieurs mots, etc. En bref si tu souhaites coder en HTML proprement, tu dois favoriser les balises sémantiques pour que les lecteurs d'écran, moteurs de recherches et autres systèmes sachent trier les informations que tu fournis.

Malheureusement, la majorité des gens qui codent sur Forumactif n'ont pas de réelle formation en HTML et essaient surtout d'avoir l'apparence qu'ils souhaitent sans être conscients de l'importance de la sémantique. En tant que développeuse de formation, je mettrai toujours l'accent sur ce point histoire que les générations futures n'aient pas ce problème :p

Dans l'idéal, on utilisera la balise <div> pour englober des sections de code, ou pour une mise en forme supplémentaire. Pareil pour la balise <span>, qui n'a pas de sens sémantique. Par exemple, comme en HTML tout est une question de sens et pas d'apparence, tu n'as pas de balise "texte souligné". Dans ce cas là, la solution sera généralement quelque chose comme <span style="text-decoration:underline"> du texte </span> (mais si on veut faire ça proprement, on utilisera plutôt une classe XD).



En tout cas, tu avais bien pensé en utilisant une balise <div> pour englober le pseudo, l'avatar et le @, parce qu'ils constituent un ensemble. Et la présence d'une autre balise <div> pour le tweet et sa date n'est pas forcément une mauvaise idée, même si je m'en serais passée, je ne voulais pas te faire peur en te disant que tu n'avais pas besoin d'en mettre partout XD C'était surtout pour t'indiquer que ce n'est pas obligatoire.

Pour le @, c'est un sous-titre, mais il ne définit pas vraiment une "section" (contrairement au pseudo qui introduit l'espace où la personne s'exprime). On a plusieurs façons d'implémenter un sous-titre. Tu pourrais utiliser un paragraphe ici également.

Juqu'ici ça va ? @o@

Code:

<div>
    <div>
        <h1>Tweet</h1>
        <img src="lien" alt="description">
        <h2>Pseudo<h2>
        <p>@tag</p>
    </div>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
        <ul>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
        </ul>
</div>

Je crois que ça va. Je pense que j'ai surtout l'habitude de coder pour forumactif et du coup je prends 'au plus simple' pour le rendu que je veux en ignorant tout le reste. Je sais pas si c'est clair comme explication.... Mais genre c'était plus simple pour moi de mettre des divs puis te les gaver de css pour que ça rende comme j'en ai envie. Du coup c'est "compliqué" de me rendre compte qu'il existe d'autres possibilités

(Me revoilà, désolé du délais >.<)

Salut @Lykoi ! Ahah cette réapparition pile 15 jours après le dernier message en mode panique XD

Maintenant qu'on a un code propre, c'est le moment d'essayer d'avoir un rendu qui correspond au visuel que tu cherches.
- Il va falloir utiliser la propriété float pour l'avatar du pseudo (si ça marche pas, réfléchis à comment revoir le code)
- Testouille un peu tout seul avec le pseudo-élément ::before
- Pour la liste d'images, un petit flex sera probablement le plus simple.

Tu n'es pas spécialement obligé d'utiliser une classe pour chaque élément individuel. N'oublie pas d'utiliser l'héritage et le système des styles en cascade en CSS :p

Pas de stress pour ce premier jet, si tu coinces sur un élément, mets le de côté et bosse sur un autre bout, et note tout ce qui te pose souci et pourquoi.

Plop @Lykoï je te fais une petite fleur en pokant ce sujet des fois que tu reviendrais d'entre les morts (et je n'ai pas été très active récemment donc je ne vais pas trop te jeter la pierre) mais sinon faute de nouvelles je vais devoir le clore :<

Quand les gens disparaissent comme ça je me demande toujours s'ils ont juste oublié ou s'il leur est arrivé un truc horrible x_x

En tout cas, je clos le sujet :'(