Skip to content
OverviewSolutions
2
Comments
4
Sathees Arumugam
@SatheesA

All comments

  • Sathees Arumugam•80
    @SatheesAPosted almost 2 years ago

    Looks nice and looks close to the original. Some issues I noticed:

    You should decrease some whitespace on the left and right when width is under 400px. The text and card looks very squished. The share icons is also squished. Removing some of the whitespace when under 400px will help with both those issues

    0
  • charmonder•260
    @charmonderSubmitted almost 2 years ago

    Hello! I just learned JavaScript and I want to learn more about it through this challenge. This one was fun for me! I'm sure there are still many things that I can improve on, so please take a look at my solution and leave a comment to help me improve! Thank you so much!

    Article Preview Component

    1
    Sathees Arumugam•80
    @SatheesAPosted almost 2 years ago

    Looks good, you got it to look relative close to the original. Some issues I´ve noticed on the solution:

    • when you toggle social on off in mobile view there is a flicker and shift of the layout.. If you can avoid the flicker it will look better...
    • you have a media breakpoint at 705px and the main grows in width until the breakpoint. You should have a max-width at some point so it doesn´t keep growing. The card at some point doesn´t look good anymore.
    • share-icon is a ´div´ instead of a ´button´.. If not using a button you should read more about it here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
    Marked as helpful
    1
  • Anette23•500
    @Anette23Submitted almost 2 years ago

    Hi guys, this is my solution for this challenge. Please, give me some feedback. I know this solution is not the best, but it is working. So I would love to hear how to make it better. Thanks <3

    Article preview component

    1
    Sathees Arumugam•80
    @SatheesAPosted almost 2 years ago

    Looks nice and well executed to replicate the original layout and styles.. some issues I noticed:

    • your share button is an <a> tag and not a button. Interactive elements should rather be buttons instead of anchors.. Anchors should be used to link to something.
    • you have a fixed width on your .card, both on mobile and desktop views.. you should have some room to scale down or up.. On mobile it won´t scale down to 320px sized mobiles... You should rather use max-width.
    • your arrow from the "bubble" pointing down on the button is a little bit missplaced so it´s not aligned to the share button.. Thats just a minor issue.
    Marked as helpful
    0
  • Sathees Arumugam•80
    @SatheesAPosted almost 2 years ago
    • your image is distorted and aspect ratio is not correct on mobile view. You should look into css properties object-fit object-position. If you look at the original design images you can see the focus point on the image is different and they are not distorted
    • consider not stretching the image all the way to 750-800px. Maybe have a max-width on the card so it is not stretched as much.
    • you have nested <a> inside a <button> That is not a best practise and should be avoided
    Marked as helpful
    0