Skip to content
Submitted about 3 years ago

HTML, CSS

Muhammad Abul Kalam Asif•120
@Abulkalam-Asif
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I want to ask something. Should I make these websites responsive for all the widths or just for the widths of the given designs i.e. 1440px and 375px?

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchellPosted about 3 years ago

    Depends how much time and energy you have, what you're trying to learn, or who you're trying to impress! 😉

    My view is that you don't make something responsive "for" particular widths - if it's responsive it will look like the design at those widths, and also (hopefully) for most points in between.

    Marked as helpful
    1
    Muhammad Abul Kalam Asif•120
    @Abulkalam-AsifPosted about 3 years ago

    @markup-mitchell Thanks for your response.

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, awesome work on this one. Layout in desktop looks great but right now, the responsive state and the mobile layout needs a lot of work.

    Some other suggestions would be:

    • The #stats selector could have used ul element, since those are "list" of information about the company website.
    • The text inside the #stats should not use a heading tag, using them on 10k+ does not really make sense at all, since that text doesn't convey anything about the section. Use p tag on it.
    • Do not just wrap text inside a span use meaningful element like p tag for text-content.
    • You don't need to use 2 sections honestly on this one, on a real site, the component is just one section. Also, when using section element it expects a heading tag inside it.
    • The alt for the image could be better, lose the word "image", when using alt attribute, avoid adding words that relates to "graphic" such as "image, logo, icon.." since img is a graphic, no need to describe it as one.
    • The .attribution needs to be inside a footer elements so that every element that has content are inside landmark elements.
    • Lastly, tackle the responsiveness and the mobile layout.

    Aside from those, great work again on this one.

    1
    Muhammad Abul Kalam Asif•120
    @Abulkalam-AsifPosted about 3 years ago

    @pikamart Thanks a lot❣️. I'll make it better. I had some confusions in my mind and now, I have understood them.

    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