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

P

@delroscol98

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


What are you most proud of, and what would you do differently next time?

I'm super proud of the CSS, I got it as close as I could to the design. As stated in the README, it's really important that as project become more complex to assign appropriate classes to elements based on their purpose. Also to identify the pattern of certain components in their styling. This would produce a personal CSS library which would be pretty cool.

What challenges did you encounter, and how did you overcome them?

Definitely the construction of the tooltip. This was my first time making one. I was tempted to use a CSS library like Bootstrap, but I wanted to build it from scratch first to understand the design and logic.

What specific areas of your project would you like help with?

Readability of the HTML file and the assignment of class names to elements. As the class names link directly to the CSS file, I want to make sure that my assignment of class names and the organisation of my CSS code is the best it can be.

Community feedback

@ArryBlack

Posted

@delroscol98 Great job man! Really concise code. I solved this challenge just now and your solution gave me an idea of how to improve it. Btw, if I can provide any feedback, on smaller screens from around 500px to 767px, the share button is overlapping with the social media links. You can maybe try adding a margin.

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