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 - HTML / CSS / JS

JibbyCodes 290

@Kijimai

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


Despite its simple looking interface, this was actually a pretty challenging one for me, but I learned so much from it! I may tackle this again, or make something for myself in the future in a similar vein to this project. Definitely would like to refactor the css and maybe use less divs in the future. Your feedback is very much welcome!

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Aman JibbyCodes,

First of all, congrats for the challenge !

The right top/bottom corners of the component are not rounded, it's because your class .info-container overflow the parent and thus the border radius can't be seen. A solution to this might be to add overflow: hidden to the parent class .article-container. Also you could add cursor: pointer to your button to make it more obvious that it's a button and add the dark grey color to your <h1> tag. Lastly you might want to add a media query for tablet size or apply your changes on a larger width than 375px so that when we resize the window on computer it shrinks.

Overall, well done for the challenge and happy coding ! 😃

2

JibbyCodes 290

@Kijimai

Posted

@RayaneBengaoui Thank you so much for taking a look over my code! Will definitely apply your advice on future projects!

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