flexbox, media queries

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @Kaytorah

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things you could improve ✍️

  • I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

  • Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.

  • I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.

  • Try using semantic HTML elements like main, section and article.

  • Try using using relative CSS units like rem and em they make your layout more adaptable.

  • Be careful with setting a fixed width and height on your elements. If the content in these elements grows beyond these restrictions you’ll run into overflow issues. Keeping the height at auto - which block elements are by default - will be fine in most cases.

  • You don’t need to put width: 100% on block elements, they already take up the full width of their parents by default.

  • Try putting your links in a list (ul) to make your code more semantic. You made the right choice using a tags for your links. Generally you would use a tags if you want to link to a different page or website and buttons if you want something to happen on the page. You can make a tags look like a button which is what you want to do here.

  Example of code:

  <ul>
      <li>
          <a href="#">Github</a>
      </li>
  </ul>
  

  I hope you find my feedback helpful! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  2

  ---

  

  Itoro (Celine) James•160

  @CelineJamesPosted 4 months ago

  Thank you, I will try all these out@DylandeBruijn

  0
• 

  SamO•110

  @SamOwensPosted 4 months ago

  Looks good!

  Other feedback has most points covered, but the one I would add is that you should include aria-label attributes to your links for better accessibility. You can read more about them here - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

  Marked as helpful

  1

  ---

  

  Itoro (Celine) James•160

  @CelineJamesPosted 4 months ago

  Thanks for this link, it’s like you read my mind. I was going to go read about it now, Smile.@SamOwens

  0
• 

  P

  Bamo-D-Abdallah•280

  @Bamo-D-AbdallahPosted 4 months ago

  A button does some functionality on the web page.

  But link navigates you somewhere.

  In the project they are links leading you some other place so you made the right decision to use links.

  Some CSS notes:

  • avoid uisng px, use rem instead.
  • there is no need to set height on your elemets.
  • don't set fixed width in the normal design, set max-width in @media to control the width of the element in different screen sizes.

  Marked as helpful

  1