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

@Ridwan10000

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 specific areas of your project would you like help with?

I want help with the desktop tooltip. I could not position it as the design shows.... As I set the .container to overflow:hidden It's not crossing the border of the container while positioning it like the design. Please help.

Also any suggestions regarding anything else is welcomed.

Community feedback

Dylan 290

@dquinn089

Posted

Your code is well-organized and functions great! For a slight improvement, using more semantic HTML elements can improve both accessibility and SEO. For example, wrapping the div elements within the main with more specific tags such as <article> and <section> where appropriate:

<section class="image">
  <img src="drawers.jpg" alt="A drawer with two painting and a flower vase on it">
</section>
<article class="text">
  <p class="bold-paragraph">Shift the overall look and feel by adding these wonderful
    touches to furniture in your home
  </p>
  <p class="description-paragraph">Ever been in a room and felt like something was missing? Perhaps
    it felt slightly bare and uninviting. I’ve got some simple tips
    to help you make any room feel complete.
  </p>
</article>

These changes can enhance the user experience, making your code more readable and accessible. 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