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

Responsive Preview card HTML CSS Typescript

#bem#typescript
lulzz 210

@lulzz

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


This was really much tougher than i thought it would be. Used typescript for handling animations and add/remove classes. Your thoughts are very welcomed. :)

Community feedback

@MojtabaMosavi

Posted

  • Add a hover state to the social icons, a color or size change suffices.
  • The markup implenetation is a bit interesting, I think something the you missed is to ask youself where this would be used ? The answer is most like that is going to be a constituent of something bigger and it that case you might wanna resue it somewhere else. Here is an alternative markup
<article class="article">
    <div class="article__content">
       <h3 class="article__heading"></h3>
      <p class="article__text"></p>
       <div class="article__profile">...<div>
    </div>
   <div class="article__img-wrapper">
      <img  class="article__img"/>
   </div>
</article>
```
Keep coding :=)

Marked as helpful

1

lulzz 210

@lulzz

Posted

Hey @MojtabaMosavi trying to make sense of sematic element yet it seams. I'll do my best. Thx on comment. :)

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