Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component (Tailwind CSS + JavaScript)

#accessibility#tailwind-css
Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Melvin Aguilar πŸ§‘πŸ»β€πŸ’»β€™s questions for the community

Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

πŸ› οΈ Built With:

  • TailwindCSS
  • npm - prettier

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Greetings, Melvin Aguilar πŸ§‘πŸ»β€πŸ’»! πŸ‘‹

Just wanted to drop in and say amazing work on yet another challenge! πŸ‘ The card component looks great and you've paid great attention to detail in making your solution accessible! πŸ‘

I also love the little attribution that you can click on in the corner of the page! 😊

Keep coding, my friend (and happy coding, too)! 😁

2

@MelvinAguilar

Posted

@ApplePieGiraffe Thank you so much for your kind words and encouragement! I'm glad to hear that you liked the component. It means a lot to me that you took the time to give me this feedback. Keep coding and have a great day! 😊

1
Karthik SPβ€’ 90

@karthisp

Posted

Hi @MelvinAguilar you've done a great job with implementing the given design. Keep up the good work. I've got a lot of things to learn from you.

Just a small suggestion:

I see that you've used clip for sr-only (H1), instead try using clip-path. Apparently, that's what is recommended. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

1

@MelvinAguilar

Posted

@karthisp Thank you for the kind words and for the suggestion! I appreciate it. However, I am using the Tailwind CSS framework, which includes the sr-only class by default, and it uses clip for the screen reader text. So, I used the styles that come by default in the framework, but I will take it into account.

Thanks again for your suggestion and for taking the time to review my work!

1
P
Ahmed Abdelaalβ€’ 220

@shrki416

Posted

@MelvinAguilar Incredible work! Code is easy to read, follow and understand. Not much to improve if at all. Love how semantic and accessibility focused your work is, keep it up. Footer is a nice touch as well :)

  • Ahmed
1

Alexβ€’ 510

@AlexKolykhalov

Posted

Perfect as always!! Did this atomic css classes tailwind framework? I'm I right?

Nice footer!! I'll take note.

1

Elio Floresβ€’ 360

@elioflo

Posted

Hello,

I really appreciate your solution, it's great! I noticed that the footer element is present in the HTML code, but it doesn't appear to be showing up in the browser. Any reason?

Elio Flores

1

@MelvinAguilar

Posted

@elioflo Hi ! Great to hear that you appreciate my solution! As for the footer element, it's actually present on the page, but it's hidden by default. I implemented a tooltip feature where the footer with my attribution link only appears when the user clicks on the button with my avatar. So, if you click on the avatar button, the footer should appear as a tooltip.

All the best.

0
Elio Floresβ€’ 360

@elioflo

Posted

@MelvinAguilar Sorry, at first glance, I didn't notice the avatar. . It looks great!

0
P

@Pepeleeno

Posted

I am a beginner in frontend. Your solution is awesome. No improvement is necessary, I guess πŸ˜…. It is just purefect πŸ‘

1

shahdevzβ€’ 50

@Shah-devs

Posted

Hey Melvin ! your solution is flawless, brilliantly done! I am so glad that you liked my solution to this challenge, thank you. I looked carefully at your main.js and It really helped to learn how to write functions for on/off button. I do my best to be consistent and do at least one challenge a week to keep up with this amazing community of you guys. πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» Thanks again πŸ™

0

@fodlu

Posted

How your code feels so smooth and clean makes me want to re-write mine from scratch again. how did you become this perfect? show me some secrets, I'm ready to learn

and how did you gathered those points with less solutions compared to mine?

0

@furkansipahioglu

Posted

Your code looks amazing and so clean I wonder how you became so successful and consistent. Can I have your email or any contact account. I want to learn from you and ask some questions so I can do better projects :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join other Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord