Skip to content
Submitted over 1 year ago

Responsive stats card component

Melaku Alehegn•260
@MelakuAlehegn
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 have tried to make the page as responsive as possible by writing media query for 3 screen sizes. My questions

  1. which is better for the image on the left, putting an empty div on the html and filling it with image using url(), which I did because it is easier to switch to another image for mobile view, or actually putting img tag on html, which I don't see any methods to switch to another img when the screen size is smaller.
  2. does the view change to mobile when the screen is below 375px or does it end there? I couldn't understand where to start and end my media query from the style guide file.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.
    • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
    • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.
    • So resolve the issue by replacing the <div class="card"> element with the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
    Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    @0xAbdulKhalid Thanks man. this had to be a great thing to learn in this challenge. Appreciate it

    0
  • Khawar Mehfooz•530
    @KhawarmehfoozPosted over 1 year ago

    Congratulations on completing this challenge! Regarding your first question, I also used an empty <div> element and filled it with a background image. To add the overlay, I used the background-color property.

    As for your second question, in the style guide file, the view changes to mobile when the screen width is below 375px. You should start your media query from there and end it accordingly. This means that any styles inside that media query will be applied only when the screen width is below 375px.

    I hope this helps! Keep up the great work!

    Marked as helpful
    1
    Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    @Khawarmehfooz Thanks man.

    1
    Khawar Mehfooz•530
    @KhawarmehfoozPosted over 1 year ago

    @MelakuAlehegn you're welcome!

    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