Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Basic four card feature section using simple HTML and CSS.

P
BozJR 220

@BozJR

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@dquinn089

Posted

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
Discord logo

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