best Practices for avatar section

No description
19 Replies
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
I'm wondering what is the most compatible elemtns to use for image, and every text
ἔρως
ἔρως7mo ago
that's an impossible question "most compatible" is an <img> but an svg´is equally valid as well, and can be better for the text, it depends on the rest of the page and what you want there isn't a "this is it" answer for you hell, if you wanted, you could do this all with an svg or with a div or with paragraphs
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
Of course I can, but I want to type it following best pratices as much as I can
ἔρως
ἔρως7mo ago
well, the "best practices" depend on the rest of the page and your expectations
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
sorry, I didn't understand how?
ἔρως
ἔρως7mo ago
well, lets start with the image do you use any framework?
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
nope just plain html, css, js
ἔρως
ἔρως7mo ago
do you mind doing something a tiny bit hacky, to make it easier to change and reuse the image?
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
no problem I don't mind
ἔρως
ἔρως7mo ago
will you use symbols on your website?
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
this is not a website. It is a small exercise from front end mentors
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
No description
ἔρως
ἔρως7mo ago
then lets simplify it
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
No description
ἔρως
ἔρως7mo ago
use an <img> with the width, height and alt attributes set the alt is mandatory
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
ok that is for image, what about Report for and name
ἔρως
ἔρως7mo ago
that's very tricky, but i would use a <span> for the tiny text, and an <h1> for the name
Ahmed Kashkoush
Ahmed Kashkoush7mo ago
ok, thanks a lot for your help. I'll do it this way
ἔρως
ἔρως7mo ago
you're welcome