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

HTML, CSS, responsive and new design

@XavierGM23

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone! It was an interesting challenge,I just change the design of the "share box", hope you like it and if you have any tips I would be grateful. 👨‍💻💪

Community feedback

Abhik 4,840

@abhik-b

Posted

Hi Xavier , You have done amazing job on this challenge, your background looks great and overall it looks very nice.

Good job, Keep it up 💯

0

@XavierGM23

Posted

Hey @abhik-b! Thanks for your comment. I really apreciate that 😁

0
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, Xavier Guzman! 👋

Nice work on this challenge! 👍 I really like the background you added! 🤩

I suggest,

  • Decreasing the overall size of the card component when the layout first changes from desktop to mobile (since it's quite large, then).

Keep coding (and happy coding, too)! 😁

0

@XavierGM23

Posted

@ApplePieGiraffe hey! Thank you for your comments! ... now, about the size, which do you think would be the right one, because I tried to reduce the size and I use a witdh: 80% so that it looks good in mobile size but in tablet size it is true that it looks large .What do you recommend me?

0
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

@XavierGM23

You can still use width: 80% on the card component but add a max-width to prevent the card from being too wide in the tablet layout. That way, the card will remain a good size in the table layout but still decrease in width for the mobile layout. 😉

0
Web Frog 1,840

@MasterDev333

Posted

Great work @Xavier. I love your share box animation. Some suggestions.

  • Social icons should be anchor tags
  • Make your class names more readable (I suggest you study BEM) Hope it helps. Happy coding~ :)
0

@XavierGM23

Posted

Hey Thanks for your comments, I had not realized what you say about the icons and also the tip on how to name the classes, thanks for making me notice that, I will apply it in a next challenge 👨‍💻💪

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