Skip to content
Submitted over 2 years ago

Article preview component (Tailwind CSS + JavaScript)

accessibility, tailwind-css
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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)! 😁

  • Jatin Poriya•200
    @InterestingPlus

    Congratulations.. I have some recommendations for you..

    Give It height: 100dvh instead of 100vh for Best Performance on Mobile Devices..

    It will remove Extra Scroll space in mobile device.

    Thanks..

  • Ahmed Alharees•360
    @AhmedAlharees

    Nice work <3.

  • Karthik SP•110
    @karthisp

    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

  • Ahmed Abdelaal•220
    @shrki416

    @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
  • Alex•1,310
    @AlexKolykhalov

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

    Nice footer!! I'll take note.

  • Elio Flores•400
    @elioflo

    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

  • Mukhiddin Nosirov•190
    @Pepeleeno

    I am a beginner in frontend. Your solution is awesome. No improvement is necessary, I guess 😅. It is just purefect 👏

  • Fallou Jeng•540
    @falloumacbook

    Wow! your solution is amazing I love it.

  • Shawn(Heongi) Yeo•190
    @hyeo151

    Awesome work MELVIN! love your clean design :)

  • shahdevz•50
    @Shah-devs

    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 🙏

  • Musediq Fadilulahi•670
    @fodlu

    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?

  • Furkan Sipahioğlu•110
    @furkansipahioglu

    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 :)

Join our Discord community

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

Join our Discord