Skip to content
Submitted over 3 years ago

Mobile-first workflow of Article Component Using HTML, CSS & JS

Skyz Walker•1,045
@Skyz03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Finally, completed this challenge where I implemented mobile-first workflow for first time plus implemented as successful JS for the first time as well. My only question is how can I make the SVG color change like white as it is black naturally, plus is there any way to make my share-icon animation any smoother at the end during second click. THANKS in advance for your valuable feedback's.

Community feedback

  • Amon•2,560
    @A-amonPosted over 3 years ago

    Hello, great work! I think it would be better if you use the button tag for the share button because well, it's a button. To change the svg's color, I can only think of using the svg code itself then use the fill CSS property to change its color. The share arrow seems to be a little cropped on the left.

    Marked as helpful
    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @A-amon Thanks will check it out and implement it

    0
  • Conrad•950
    @ConradMcGrifterPosted over 3 years ago

    I would change your img to have a width:100% instead of max-width:100% since it doesnt fill the box initially while shrinking down to mobile size. also add a height of 100% to the img, as well as object-fit:cover;

    Marked as helpful
    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @ConradMcGrifter Thanks will try to surely implement this out.

    0
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @ConradMcGrifter Thank a lot, this really made the image perfect and fit screen on all the sizes.

    0

Please log in to post a comment

Log in with GitHub

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