Blog preview card Solution

Community feedback

• 

  Nitr0Skay•100

  @Nitr0SkayPosted about 2 months ago

  Hi. I was looking at Your code and I like the way how you manage your code. It's clean and sterile. Keep it up ;)

  Now, If you don't mind, I want to point you some aspects you can work on.

  1. The main content (in our example it is the Card component) should be placed in the main element

  2. Every page should contain at least main header and h1 title should be used only once on a page. In this example I simply used it like that

  <header class="visuallyhidden">
   <h1>Card component</h1>
  </header>
  

  Visually hidden is a class that allows us to visually hide our content, but it's still accessable to via Screen readers or Search Engine crawlers and other Web Scrappers

  .visuallyhidden {
          clip: rect(0 0 0 0);
          clip-path: inset(50%);
          height: 1px;
          overflow: hidden;
          position: absolute;
          white-space: nowrap;
          width: 1px;
  }
  

  Why we do that you would ask. Just to have the right page outline: https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47

  I have done the same Challenge Recently. My solution is not perfect, but you can just peek and you will see my approach here. If you have any questions about my approach, please feel free to ask me, I will try to answer as quick as I can.

  Once again, good work and keep it up ;)

  Marked as helpful

  1
• 

  Rameesha Padmatilaka•220

  @rameesha0126Posted about 2 months ago

  Change the width of ".card" component to 375px to perfectly line up with the given design. Rest of the code is done well and i corrected my own code looking at yours.

  Marked as helpful

  0

  ---

  

  Nitr0Skay•100

  @Nitr0SkayPosted about 2 months ago

  @rameesha0126

  And a height of Card component is 520px. But if you using box-sizing: border-box; you have also count the border size into that.

  Also instead of absolute units like Pixels, I used in this Challenge rem, assuming that font-size for root element (or through the browser settings) is set to 16px;

  Have a nice day ;)

  1
• 

  Ahmad E. Nugraha•20

  @AerdianshaPosted about 2 months ago

  pretty awesome

  0