Skip to content
Submitted 8 months ago

A Mobile First News Home Page

konja kuma sampson•270
@DR-KSP-VIRUS
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

Hi guys.

I am very pleased with the design of this particular project. I am proud that I was able to use two days to finish it.

However, I hope to improve the speed next time.

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

Designing with pure CSS is a little challenging. However, I am proud that I can now design interfaces with CSS Flexbox and Grid.

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

I know how to get media queries. But I have a challenge with declaring different media queries and using them on the same project.

Can someone help me with an explanation concerning declaring multiple media queries on CSS and using them in the same project to cover all devices for that project?

Community feedback

  • Grace•31,130
    @grace-snowPosted 8 months ago

    There are fairly significant problems in the html on this and the way you are approaching vue. Is this your first attempt at a Vue project?

    You shouldn't be using things like query selectors in vue but more computed props and v-ifs.

    Don't forget the essential foundations of good html when you start working with js frameworks like:

    • always containing content within landmarks (this needs a header and main)
    • appropriate alt text on images
    • not repeating markup for mobile vs desktop
    • an accessible disclosure button pattern directly before the nav list for the mobile menu toggle.
    • using the picture element for serving responsive images in a performant way.
    • not wrapping elements in extra divs for no reason.
    • including appropriate headings, even if these need to be visually-hidden when not included in the design (this is extremely important in this particular challenge)
    • using headings at the correct level as well as links for the article headings.
    • never ever having font size or line height in px (extremely important)
    Marked as helpful
    1

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