Skip to content
Submitted about 2 years ago

Just on HTML and CSS

Gem•120
@ladyprogrammer
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Page was created in HTML and CSS, nothing more. It is a practice project for me to get updated on the latest in this skill as well as get a good grasp of the best practices. I challenged myself by doing a desktop-first workflow over the mobile-first approach, most projects I have encountered before followed this approach.

In real world web application projects, a framework or library is normally preferred to speed up development, but it is always a good practice to get a good grasp of the basics.

Feel free to review - particularly focusing on how the code was organized, and feel free to share the best practices.

(I have to estimate the UI and assume the behavior, as I am not using a pro account.)

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Gem!

    I am against the idea of challenging yourself by writing your CSS with a desktop-first approach. I don't see any benefit in doing it. Also, the mobile-first approach is the best approach. So, why do you make that decision?

    You can't add an image description if you are making the image as a background image. You should use <img> element to be able to provide alternative text.

    Also, you should use <picture> element for the image since there are two versions of the same image.

    Never set width: 100vw on anything as it does not account for scrollbars when present. It may ever introduce potential overflow or scroll bugs.

    I recommend having one stylesheet. If you want to have separate stylesheets, it is better to reference them within the HTML using <link> tags. Using @import will make the browsers do more request which can make site slower.

    Learn more about CSS performance — CSS and Network Performance

    I hope this helps. Happy coding! 😄

    Marked as helpful

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