Skip to content
Submitted about 1 year ago

Responsive Article Preview with HTML, CSS and JS

vite, bem
Sarah•580
@AutumnsCode
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am really proud how smoothy the JS came along. I had been worried that it might take me a little bit longer. I would like to structure my css more. Sure, I could use SCSS or Co. but I didn't believe it was neccessary for this challenge.

What challenges did you encounter, and how did you overcome them?

Well, the challange came with Netlify. When I run npm run build the JS file wasn't exporting into the dist file and so the function didn't work either. I did some testing outside then I realised I needed to add type="module" into the script file.

What specific areas of your project would you like help with?

Any feedback is welcome!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    Darkstar•1,440
    @DarkstarXDD

    Hey. Looks like this is a 4 month old submission but somehow in the learning paths i was asked to give feedback on this. Overall it looks good, but here are some suggestions i have.

    • There is no need for a <header> and a <footer> in this challenge. And even if there was, those two should not go inside the <main>. They should be outside of the <main>. This is just a component, so <main> should be the only landmark element needed here.
    • <header> and <footer> both are usually used to wrap content that repeats across multiple pages in a website. <header> you usually see at the very top of a site containing the site logo and the navbar (site navigation). <footer> at the very bottom usually contains any attribution of the site, some contact info, a sitemap (secondary site navigation) etc.
    • When a button or a link only has an image/icon inside it and no text, give it a aria-label. That way screen readers can announce that name when a user navigates into that link. Otherwise the user won't know what that link/button will do since there is no text on it to be announced. You have already given an aria-label to the share button, you can do the same for the social media links as well.
    • I think there is no need for the alt text on that user avatar. Just reading out the name of the person doesn't make that much sense because you already have the name of that person right next to it. So the screen reader will be just reading the name of the person twice. Also at the same time it's very small that there is no point trying to describe that image either. So i think you can keep the alt text of that avatar empty. alt="".
    • Currently when the site loads, the share dialog pops up and then disappears. When i initially click on the share button it doesn't open the dialog. Only when i click the second time the dialog opens. This only happens when the page first loads.

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