Four card feature section - CSS Open Props & Vite

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Very nice work on this challenge, Darrick! 👋

  It's great to see you submit another great solution! 🙌 It's responsive and looks good on both landscape and portrait mobile views! 👍

  I don't understand Vite however, I notice that the first section is wrapped with header tag which it should not. This site doesn't have a header. Normally, header is going to have a logo and nav element. The heading one should live inside the main element (which commonly the heading for the hero section).

  Overall, great work and it's great that you added a cool hover effect on those cards. Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  @vanzasetia Hi Vanza! 👋

  Thank you for the kind words. I always appreciate your helpful feedback.

  Vite is very good and fast. I'm now using it instead of Parcel and Webpack. It also supports Sass out-of-the-box as they say. Vite website

  Regarding the header, I guess I fell into the page pattern of applying a header, main, and footer. But, as this is a "section" project, I've now wrapped the header and cards into a section landmark. I think it works better as a section > header. Does that make sense? 🤷‍♂️

  I just updated this solution and it is now more visually closer to the design and is using more CSS Open Props. Open Props 💖

  The hover effects are my way of having a little fun transforming the design.

  Thanks again for the great feedback, Vanza! 😊

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @DarrickFauvel I recommend still keeping the main and removing the header. header inside the section element would have no meaning which means it doesn't make it more accessible and hurt the accessibility at the same time. It works like div. So, all the child elements of the body element would be landmark elements (main and footer).

  Also, nice work with the update! It's amazing that it perfectly matches the design! 👏

  Keep up the great work! 👍

  Marked as helpful

  1

  

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  @vanzasetia Thanks for making that clarification about main, header, & section.👍 I have made the correction.

  Thanks for kind words about perfectly matching the design. I know the goal is not pixel perfection, but I try to get pretty close. Even if it makes me 🤪.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @DarrickFauvel You're welcome! 😄

  0