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

Responsive Feature section

@abhi1322

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?

My design is is responsive as well as so close to the original design.

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

I made this feature section with ease using tailwind.

Community feedback

Wendy 1,890

@wendyhamel

Posted

Hi, nice solution to this challenge!

Your mobile and dektop versions are great.

I do have a few things you might want to consider to improve your solution.

  • I noticed you can improve semantics on you solution by wrapping the content in a <main> element.
  • You could also reconsider how you used the <h> elements. Semantically it is recommended to use only one <h1> element on one page. And to imporve accessibility, it is better to use the <h> elements in order of importance. If you like to read more about this, see MDN docs: heading elements
  • Take another look at the screen sizes between mobile and desktop. There is a point you switch from the mobile layout to the dektop layout, but the cards don't fit next to eachother yet. You may want to switch on one of the other breakpoints, or just add another layout for the in-between screens.
  • Nice to see you use the custom class option from tailwind to determine the width and height of your cards. w-[350px] h-[260px] Did you know you could also add it as a class to the Spacing, Width and/or Height?
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

I like to add classes if I end up using my custom classes more then once in my code. Read about it in the Tailwind docs

Happy Coding!

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