Responsive Feature section

Community feedback

• 

  Wendy•1,970

  @wendyhamelPosted about 2 months ago

  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