Skip to content
Submitted about 3 years ago

Responsive landing page using HTML5 and CSS Grid

angular, bootstrap, wordpress
Fatoki Matthew•10
@iTech-Matt
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I don't really know how to make use of the CSS and I find it difficult to work it. Am unsure of my CSS I need suggestion on how to make use of CSS and be Good at it. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi there! 👋

    I suggest fixing up the HTML markup first.

    • The width and height attributes for the img element should be used to create a placeholder before the image is fully loaded. This is going to prevent jumping layout or reduce the Cumulative Layout Shift. There's an article from web.dev about "Optimize CLS" to learn more about it.
    • Remove all br elements from the heading and paragraph. Let lines wrap where they need to. br elements will be read out by screenreaders. You can't accommodate every screen size, so it's rare you'll ever need to use them.
    • For the about section, I recommend changing it to a list item, because if the site has no styling, it is more likely a list item.
      • 10K+ companies
      • 314 templates
      • 12M+ queries
    • Also, it's best to write HTML without any CSS. This way, it can help you decide better HTML markup. Think of it like a document file which in my opinion the same as the site with no styling.
    • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
    • Lastly, fix all the issues that have been reported by Frontend Mentor by clicking the "View Report" button.

    For the CSS.

    • Import and use the correct font family. See the style-guide to know the font family.
    • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. Also, it's best to keep the CSS specificity as low and flat as possible. 😉
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. Also, I have a great article that will explain rem and em units in a simple way. I recommend reading it if you're not confident to use those units.

    I know that I'm not very specific about the CSS though all the things that I mention will be a good thing to get used to.

    That's it! Hope this helps. 😊

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