Article preview component Solution

Community feedback

• 

  Sean Gray•690

  @seangray-devPosted almost 2 years ago

  Hey Siddharth! Nice job on this, I recently completed this one too!

  I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:

  • the author of the article if we wanted to see more articles by this author.
  • the article title as it would probably link to the full read of what it belongs to
  • the share button

  I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

  and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:

  a {
  transition: all .3s ease;  
  }
  a:hover, a:focus {
  cursor: pointer; 
  color: (add new color that matches design or see specs); 
  }
  

  Maybe check out my solution for some ideas.

  Hope this helps! Keep it up and happy coding 😁

  Marked as helpful

  0

  ---

  

  Siddharth•230

  @siddharth-1407Posted almost 2 years ago

  @seangray-dev Thanks! I really wasn't think about interactibility at all. I'll make those changes as soon as possible. Also i checked out your solution too. It looks great and i have a question. How did you manage to find the exact size for the image container. I struggled a lot with that image. In my solution the image is a bit squished if you look carefully. i wanted to go with grid too but because i didn't know the sizes i couldn't.

  0

  

  Sean Gray•690

  @seangray-devPosted almost 2 years ago

  @siddharth-1407 No problem! I had the design files from Figma. If I don't get the design though if you're on MAC and open the design files in preview you can click and drag and a ruler will appear giving you an approx. px value

  Marked as helpful

  0