Skip to content
Submitted about 2 months ago

Four card feature section using CSS Grid and Flexbox

Anamay•120
@anamaydev
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?

I am particularly proud of how smoothly I was able to implement layout using CSS Grid for the desktop version of my project. The process was surprisingly quick and efficient! Based on feedback from my peers on previous challenges, I made several improvements:

  • I replaced elements with tags to enhance semantic HTML.
  • I utilised @font-face to incorporate custom fonts, reducing reliance on third-party CDNs.
  • I added a `` description to enhance SEO, which is a crucial aspect of web development that I wanted to prioritise.
  • I also remembered to include alt attributes for images this time, which I often forget.

I would focus more on optimising for mobile layouts from the beginning to ensure a seamless experience across all devices.

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

I encountered a significant challenge when trying to create a top color border for each card. Initially, I attempted to use border-top, but I noticed that there were slight curves on both the left and right sides, which didn't align with the card's design. To address this, I created a new div called card-line-* and set its height and width accordingly.

However, this approach led to another issue: the card-line-* div was overflowing and not conforming to the card's border-radius. After doing some research online, I discovered the overflow: hidden property, which resolved the issue and allowed the card-line-* to fit perfectly within the card's rounded borders.

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

I’d love feedback on my code to see how I can improve it, as I always learn something new from the insights I receive.

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted about 2 months ago

    I use this site to get my .woff2 fonts

    0
  • Steven Stroud•11,910
    @StroudyPosted about 2 months ago

    Hey, You smashed this challenge, Incredible work on this! You’re making great strides, and I have a couple of suggestions that might push it even further…

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    @media only screen and (max-width: 1024px) and (min-width: 551px)
    • It is good to see you hosting your own fonts, Consider hosting fonts in a .woff2 format, .woff2 is a highly compressed version of fonts, reducing the file size significantly (up to 30% smaller than WOFF, and much smaller than TTF). This smaller size improves website loading times and reduces bandwidth usage. .ttf is better suited for desktop applications or systems that don’t require the same web-specific performance or compression standards.

    It is really nice to see you making changes based on my feedback, You’re doing so well, and I hope this feedback is helpful! Keep honing your skills and remember to enjoy the process—you’re on a great path. Stay motivated, and happy coding! 🎯

    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