Skip to content
Submitted about 1 year ago

Article preview component - No framework - Only CSS and Vanilla JS

P
Thomas Dimnet•250
@tdimnet
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Hi folks, Thanks for reading this!

I managed to use the same element for the tooltip on mobile and desktop. I wasn't really sure at first that I could to that but it worked. Quitte happy with that :). It uses the same JavaScript and CSS code.

Next time, I want to be better with ARIA attributes. I know that my code is accessible but I want to do a better job with that.

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

Not many challenges. The only one I have in mind is related to CSS readability. I wrote some nested CSS, which I do like, but some parts could have maybe been better. I am thinking about the tooltip element on desktop.

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

Mostly the HTML and CSS. I am okay with the JS part.

Have a nice day, Tom.

Code

Please log in to post a comment

Log in

Community feedback

  • joacomenda•170
    @joacomenda

    There are some improvments that you can do:

    • In your footer, I would recommend creating 2 divs, one div will contain the image of the author of the article, then you create another div that contains the author and the date of publish. In the second div, you would put the button of the article (you can create a button element, then you copy and paste the share svg that frontend mentor gives you and then you put some text in the button, then you style it to have 0 font-size so screen readers can undestand that the button is used to share content). Now, you style the div that contains the 2 divs, use display:flex, align-items:center and justify-content:space between. With this, your footer is perfectly aligned and your button is in the far left of the article.

    • When users display your article in an ipad, the layout goes far down, be careful with that. I would recommend you to investigate about how can you center content perfectly using grid or flexbox. In my body, I display:flex, justify-content:center (to put it in the center of the page in the X axis) and align-items:center(to align it to the center in the Y axis). This only works if you put a height of your body to 100vh and set a width to your wrapper.

    *I would also sugest using max-width in order to avoid an excesive stretching of your article

    I hope this comment helps you to make better and more responsive designs.

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