DEV Community

loading...
Cover image for I recreated the Twitter 'Who to follow' card

I recreated the Twitter 'Who to follow' card

Riri
Web Developer
Updated on ・1 min read

I had been wanting to learn more about HTML, CSS, and JavaScript for a while, so I figured I should do a series of mini-projects that could hopefully help me in familiarizing myself with these three.

I recreated Twitter's 'Who to follow' card using HTML and CSS (and some JavaScript), and I used theming for the first time!

Light theme snippet

Dark theme snippet

Would love to hear your thoughts on this. Any improvement on the code I could implement?


If you found this cool or useful, consider buying me a coffee.

Discussion (9)

Collapse
zer0 profile image
zer0 • Edited

I like it.
Looks neat and even modern Light/dark theme support.

Here some advices for your JS code:
Take a look at the classList property.
It’s a cleaner way to work with class dynamic/toggling since it handles classes “array-like” and also offer methods like toggle.
Additionally you might not wanna use innerHTML to change only the text as it might cause unwanted behaviour. Use innerText instead.

Collapse
riyanagueco profile image
Riri Author

Oooh! Thank you so much! I knew there was a toggle somewhere but I wasn't sure, I should've Google'd it.

Code should be updated now. Thank you for your help! 😁

Collapse
zer0 profile image
zer0

Still using className in the body variable

Collapse
tawalmc profile image
TawalMc

It is a cute UI you have implemented.
And if you try to abstract the generation of name and username with the follow button in javascript function so you can add many users quickly without touch again your html may be an array. And the adding of @ can be done with javascript instead of CSS.
And if you add a simple animation when color changing on follow button ?.
But you UI impressed me, very cute. 😎

Collapse
riyanagueco profile image
Riri Author

Thank you! But it's Twitter's UI, not mine hehe :)

I'm not sure what you mean by abstracting the generation of name and username. Could you explain further?

Collapse
dmahely profile image
Doaa Mahely

Really nice, I like it!
You might wanna check out using BEM naming for your CSS classes.

Collapse
riyanagueco profile image
Riri Author

Ah yes, I have looked into the BEM structure for CSS before. I really should put that into practice, my naming habit dies hard. Thank you! :)

Collapse
devjaiye profile image
Dayo Jaiye

Wow looks good.. ☺️

Collapse
riyanagueco profile image
Riri Author

Thank you! ♥