Skip to content
OverviewSolutions
36
Comments
4
xyzeez
@xyzeez

All comments

  • xyzeez•670
    @xyzeez

    Hello @TAYAKI79*, I commend your effort in achieving such a great design.

    Here are a few suggestions from me to help improve your code:

    • As regards the .numbers-scale container, consider using the <meter> element as this would improve the accessibility. You can have min, max & 'value` attributes do the magic for the storage size labeling. You might want to read more on that here.

    • Always consider having an accessible HTML structure as this is very important. You can check the Intro to accessibility roadmap on the discord server to get resources on that.

    As always, Happy coding!🧑‍💻

  • xyzeez•670
    @xyzeez

    Hello @qu3bin, Amazing lines !

    Here are few things I would suggest:

    • Because of semantics, make the <h3> tag that contains the "30-days ..." a <h2> tag. You can read more on HTML Semantics Here

    • I can see that you've only used font-weight: 400; in your code. From the style guide, header tags are to have the weight 700. Consider using that in your code.

    Happy coding :)!

    Marked as helpful
  • xyzeez•670
    @xyzeez

    Hello @ShubhPatel06, Amazing lines you've got!

    I have a few suggestion:

    • Instead of having another <div> inside the <main>, make it the container. This way, the content is accessed directly rather than having it come second.

    • Why not try reduce the width to try make it similar to the presented on the challenge.

    Happy Coding :)

    Marked as helpful
  • xyzeez•670
    @xyzeez

    Hello @TayAki79, Nice work I really most say but there are few patches to make.

    • Your <body> should not have a height or width, this way it would maintain the device width. You could see that it stretches out when viewed with different device.

    • You're having the <header> used wrongly. In this challenge you do not need a header. The header tag is used to contain links for navigation between pages. See here for more on the header tag.

    • Use the <main> tag to contain all the card element. remove the header and use a <div> as replacement. In that <div>, have a <picture> to house the <img>.

    Happy coding :)

    Marked as helpful