Article Preview Component

Community feedback

• 

  P

  Aaron Smith•280

  @medic-codePosted 5 months ago

  Minor UI

  1. On desktop view you can see the article title is not quite what the design is - check the fontweight, letter spacing and line height.

  2. Similar to last point when you click on desktop view you can see the share element is not quite in the right place as per the design. Check the article preview description for fontweight, letter spacing and line height. They can be pretty particular about these typography aspects you may not have considered.

  3. The name of the author is a little too large, try h4 instead of h3.

  4. On mobile view the title is a little too large and font-weight a little too heavy, it should stretch to only 3 lines use h3 instead and check the typography styles for letter spacing and line height.

  5. Similarly check the typography styles, the letter spacing, as it goes over 4 lines and not 3.

  6. The image in desktop should be overflowing slightly, you can see there's no grey strip on desktop view, its overflowing. I didn't manage to find a way to do this, but just thought i'd let you know about it!

  HTML

  1. You're using main inside an article element, which should be the other way around, the main should go directly below the body.
  2. I'm not sure article is the correct element given that this is a component, i used sections but probably not the best at knowing this myself!
  3. Otherwise looks pretty good, a lot more efficient than mine.

  CSS

  1. You could use a reset for the specific elements together instead of using margin:0 on every h1,h2, h3 including other styles. For example you could use * { margin: 0}

  2. Generally good looking CSS to me! Interesting use of filter, not sure I would've been able to come up with this.

  JS

  1. User experience looks good to me, you caught the edge cases around if you've clicked it in desktop or mobile and then resize it.

  2. The JS is nice a clean and minimal, much more succinct than mine.

  Summary: Overall a pretty decent job, only minor UI details changes. The HTML only has some minor changes i'd make, the CSS is strong and the JS is concise and succinct.

  Marked as helpful

  0

  ---

  

  Rowan Pereira•330

  @rowanroosterPosted 5 months ago

  Thanks so much for comment @medic-code! Thanks for taking the time! Reading through your points Im agreeing and learning - using the main more appropriately: Ill definitely keep that in mind!

  I think I rush to upload in the end when I should take a 10min break, come back and make sure all the styling is accurate! I also forgot the drop shadow!!

  PS: I had a closer look into the image and adjusted the background position which seemed to work. Its live:

  background-position: center left;
  

  Thanks again! Will go through your comment more thoroughly soon!

  0