Skip to content
Submitted 5 months ago

Responsive Card Section using Gridbox in vanillaJs

Ujjwal•20
@guptaujjwal1128
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Gridbox and Flexbox Font Optimisation Responsive design

What challenges did you encounter, and how did you overcome them?

Font optimizations. Overcomed by using font display css property and font face to load required fonts only.

What specific areas of your project would you like help with?

Font optimizations

Community feedback

  • Grace•31,090
    @grace-snowPosted 5 months ago

    What's with all the section elements?! You know you can use divs for layout, right? There is no benefit to using section like this, it just makes the code hard to read for no reason in my opinion.

    The solution looks great overall though! Only a few minor issues I can see:

    1. The main heading should all be one h1.
    2. The main heading looks quite a lot smaller in your solution compared to the original design. Try to get it closer if you can.
    3. Those icons are decorative so alt should be empty.
    4. This has poor accessibility at the moment. Font size must never be in px, use rem. And the media query values should also be defined in rem or em not px. This is important for people who change their default text size.
    0
    Ujjwal•20
    @guptaujjwal1128Posted 5 months ago

    @grace-snow

    Hi

    Thanks for the feedback. I agree with your suggestions. Good catches.

    One doubt: how to contain two heading with different style in single H1 tag.

    Regards Ujjwal Gupta

    0
    Grace•31,090
    @grace-snowPosted 5 months ago

    @guptaujjwal1128 a strong or span on one half set to display block

    0
    Ujjwal•20
    @guptaujjwal1128Posted 5 months ago

    @grace-snow Thanks, can we connect on discord.

    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