Responsive 3-column preview card component page.

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Greetings, Anthony! 👋

  Good effort on this challenge! 👍

  I notice that the file name of the CSS is 3-column-preview-card-component page.css. It's okay, but it's a very long name. The common names for the CSS file are style.css, index.css, styles.css, etc. So, as you may notice they are short and simple.

  Some more feedback from me.

  • I recommend removing the flex-wrap property. I suggest only having two layouts, a one-column layout for mobile and a three-column layout for larger screen sizes. It an "awkward" layout where there are two-column and then one card below it.
  • If all the card elements have the same styling (like the width and the height), you can create a card class where it defines the size of the card. This way, if you need to change the size of those cards, you can just change the styling of the card class. (the same logic applies to the btn elements)

  <div class="card card--orange">
    [...]
  </div>
  <div class="card card--light-cyan">
    [...]
  </div>
  <div class="card card--dark-cyan">
    [...]
  </div>
  

  • Also, I use BEM (block__element--modifier) class naming convention. You don't have to learn it, but most people (including me) find it useful for a lot of reasons. Visit https://en.bem.info/ to learn more about BEM.
  • (Plot twist) I recommend removing the width and the height properties from all the card elements. You only need to set a max-width to the main-container to prevent those cards from becoming too large on a wide screen.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • The "learn more" buttons should be links since they are more likely to navigate the users to another webpage (which is the purpose of the link).

  Hope you find this useful!

  10
• 

  Faruk Abdulganiyu•380

  @faruking

  Posted almost 3 years ago

  You can use 'media queries' to style elements when they satisfies a certain condition like when in mobile mode. Visit this link to learn more. media queries

  00