Skip to content
Submitted 4 months ago

Basic four card feature section using simple HTML and CSS.

BozJR•250
@BozJR
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?

Im most proud that i completed it ! this was a little struggle though NGL !

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

I think I've got the HTML locked in now its just remembering the CSS features to help move things around and then figure out why things cant move around is what I find difficult.

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

More help is needed for the the CSS flexbox cause just when I think I have it I DONT! I tried so many ways to get this right but the only way I could figure out was to swap 2 x elements around in my HTML which I know should not be the case but every other method i tried resulted in the same wrong action so this was my only choice! see my code compared to OG code to know what I mean.

Community feedback

  • Dylan•290
    @dquinn089Posted 4 months ago

    Your code looks fantastic, and you've done a great job with the layout and styling! Here are a couple of tips for potential improvements:

    Accessibility Improvement: Consider adding descriptive alt attributes to your <img> tags to improve accessibility for screen reader users. This simple change enhances the user experience for a broader audience.

    Consistent Color Variables: Great job using CSS variables for colors! For consistency and readability, use lowercase for all custom property names (e.g., --very-dark-blue instead of --Very-Dark-Blue). This maintains a consistent coding style.

    :root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --very-dark-blue: hsl(234, 12%, 34%);
    --grayish-blue: hsl(229, 6%, 66%);
    --very-light-gray: hsl(0, 0%, 98%);
  
    --font-family1:  "Poppins", sans-serif;
  
    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
}

    These are very minor changes but can help enhance your code’s accessibility and maintainability. Happy coding!

    Marked as helpful
    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