Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article Component with Vanilla JS & Sass

@Dorian30

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What would you improve from the code ?

Are semantic tags properly set ?

Is this proficient ? Is there anything you would add to make it more lighthouse audit acceptable ?

Community feedback

@Dorian30

Posted

You can surely guess my surprise when I realised that the found of front end mentor had just reviewed my solution. How awesome and refreshing it is to see that you take the time for that.

Thanks a lot for the feedback! I totally missed the GitHub link detail and I didn't know you could add those attributes for accessibility, I've been coding for a while but just recently started to pay more attention to this.

About the media queries I totally agree, I was actually planning to do a refactor of this with an implementation of mobile first! I was kind of used to desktop first 'cause at my workplace we don't often get the mobile design ahead. Just the desktop and we work with that while the design team builds the mobile view.

Would you say mobile first (min media queries) is the way to go even when you don't have a mobile design ahead (only the desktop version) ?

1

P
Matt Studdert 13,611

@mattstuddert

Posted

@Dorian30 haha, that’s kind of you to say! I love helping people learn and improve so I’ll always take the time to dive into the solutions and provide feedback wherever I can 🙂

Accessibility is definitely a topic I’d recommend becoming well versed in. It’s a crucial part of being a great front-end developer. It’s often a topic that people don’t spend much time on so it’s a great selling point if you know how to create accessible websites. The web should be accessible to as wide a range of people as possible, so having that skill set as a developer is key.

I would always recommend considering mobile first from design through to development. It helps highlight and prioritise discussions such as content hierarchy much sooner because of the lack of screen space. If you are building to a desktop design first though you could always build that and then just put the necessary code in a min-width media query. So either way I’d recommend using min-width over max-width 👍

1
P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Dorian, nice work on this challenge. Just a quick heads up that the GitHub link is currently broken. You can update it by clicking the 3 vertical dots in the top right and selecting "Edit Solution".

The semantics all look good. If you wanted to make it truly accessible you could add aria-controls and aria-expanded attributes to the share button. But everything looks great!

Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

I hope that helps. Your solutions are looking great! 🙌

1

Please log in to post a comment

Log in with GitHub
Discord logo

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