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

James 390

@neenreva

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


Close but I know it needs some work. I thought I had a good idea of CSS... HA ha

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Awesome work with this one. Viewing at your solution, I would recommend the following for you...

  • Add padding: 1rem; in the main rule set
  • Adjust the properties in h1 rule set into font-size: 1.2rem; and line-height: 1.5rem;
  • Adjust the font size of p into font-size: 0.8rem;
  • Include alt with description in the img tag
  • Refactor this part of the code:
 <button>
            <a href="https://facebook.com" target="_blank"
              ><img src="images\icon-facebook.svg"
            /></a>
</button>
 - Remove the `button` tag, it's improper to wrap the `a` with a `button`, it's good to use it as an alternative.
 - Be careful with the use of slashes, use the correct way which is `/`
  • Wrap the card-lower with div instead of section which need at least one heading hierarchy
  • Include transition: all 200ms ease in the button

Overall you did well, your CSS is fine. Keep practicing and Hope this helps! Cheers!

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