Skip to content
Submitted over 2 years ago

Responsive| Mobile First| HTML|CSS

Hazel Dotson•300
@Hazel-Black
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

This was a team effort by me and @michealhybrid we would both love any and all feedback

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi @Hazel-Black and Michaelhybrid! 👋

    Congratulations to both for completing this challenge! 👏

    It would be great if you describe what is the responsibility that you take and what Michaelhybrid is doing. For example, let's say you take care of the HTML markup and then Michaelhybrid writes the CSS. You can write it on the README.md so that people know what each of you is doing.

    Anyway, here is some feedback for this solution.

    • Each page should only contain one h1. Also, those stats numbers should not be headings either. So, I recommend either using strong tag or styling it bold instead.
    • For the stats, I suggest making it a list item. If the site has no styling then it would be more likely a list.
      • 10k+ companies
      • 314 templates
      • 12m+ queries
    • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍
    • I would not recommend specifying the height of the card element, especially using vh unit. I suggest letting the element inside the card dictate the height of it. Currently, on some screen sizes the card would have a small amount of height while on large screen sizes, the card has a big amount of height.

    P.S. I can't find Michaelhybrid's Frontend Mentor profile. 😅

    Marked as helpful
    1
    Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Here is Michaelhybrid's profile😁

    0
    Emmanuel Oludare•460
    @EmmanuelOludarePosted over 2 years ago

    @vanzasetia Thanks for your feedback,we really appreciate it and we'll definitely make amends

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @TheCoderGuru Thank you for the link, Shash!

    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey!

    Congrats on completing the challenge.

    As everyone has already given good feedback, I will give you just one tip about the image.

    • Instead of blending the image with background background-blend-mode: multiply; , take another div color it :root { --Softviolet: hsl(277, 64%, 61%); } and then blend that div with image by using mix-blend-mode:multiply; CSS property.

    Hope this helps. :)

    Marked as helpful
    0
    Hazel Dotson•300
    @Hazel-BlackPosted over 2 years ago

    @Harshi786 thank you for the great feedback

    1
  • Yehan Nilanga•670
    @Yehan20Posted over 2 years ago

    Looks clean , and Great Nicely done , good luck for other challenges

    Marked as helpful
    0
    Hazel Dotson•300
    @Hazel-BlackPosted over 2 years ago

    @Yehan20 thank you so much

    1
  • Osama Ahmed•50
    @Osama472Posted over 2 years ago

    Great work keep it up!

    Marked as helpful
    0
    Hazel Dotson•300
    @Hazel-BlackPosted over 2 years ago

    @Osama472 thank you <3

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I have some recommendations regarding the design aspect

    • The font size of the title "Get insights that helps your business grow" needs to be a bit bigger

    • The purple overlay on the image needs to be decreased a little to achieve the design shown.

    Lets talk about your accessibility issues

    • Document needs one main landmark is caused by the inability to detect the main content, which can be resolved by using the semantic main to wrap all the elements within the body element like this
    <body>
  <main></main>
</body>

    In terms of your code I have the following suggestions

    • Have a descriptive css variable for your colors like this --card-bg-400: hsl(244, 38%, 16%), this will be easier instead of typing the colors explicitly and thus will make your code readable.

    • Avoid using the css unit vw since it is not efficient in responsiveness and may cause elements to overflow on certain screen sizes. Instead use % since they are relative to each screen size.

    I recommend learning about html semantic tags since they help with stating the intended usage of their enclosed tags and therefore will get rid of the accessibility issues in your markup. Click the link below to learn more

    Read more on HTML Semantic Tags.

    I hope my feedback and recommendations help you in some way.

    Cheers, Happy coding 👍

    Marked as helpful
    0
    Hazel Dotson•300
    @Hazel-BlackPosted over 2 years ago

    @TheCoderGuru thank you so much for the amazing free back we are both working on a responsive design course and then we can move back into sematic html. thank you again! supper helpful feedback!

    0
  • Hazel Dotson•300
    @Hazel-BlackPosted over 2 years ago

    Thank you so much for the feedback we both really appreciate it I'll have to make these changes tomorrow as it is very late for me. Also I'm going to @ him so he can see this and reply inorder for you to view his front-end mentor page @Michaelhybrid

    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