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

P

@wolf2lyon

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Wendy 1,890

@wendyhamel

Posted

Hi, great solution to this challenge!

The desktop version is very close to the design. But I noticed a layout break on mobile where the avatar, information and button overflow the card.

I took a look at the code and noticed you used a lot of custom classes in your code. Did you know that you can add these to the tailwind config? This way, if you need a custom class more then once, you only have to specify it once and for the rest reference te name of the class. The power of utility classes. In your JS I noticed you could clear up the names of the buttons. I now had to switch between your index.html and index.js to know which button belonged to which classname. If you name the buttons in a way that other people understand which is which, it makes your code a lot more readable.

Keep at it, Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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