responsive 3-column preview card component using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

  • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

  • Avoid using percentage widths in the component; it can cause distortion on some devices. Instead, consider using max-width to adapt to the screen size and prevent excessive growth. Also, set a defined margin of 20px to avoid touching the screen edges.

  • You don't need to add font-family: 'Lexend Deca', sans-serif to each <p> separately. Instead, add it to body.

  • The <article> tag is typically used to represent a self-contained piece of content that could be distributed and reused independently. If the content inside the <article> tag is not a standalone piece, or if it doesn't represent an independent piece of content you might want to reconsider using the <article> tag

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @osmanbay90!

  Your project looks very good!

  I just have one minor suggestion:

  • Replace your section tag with the main tag. This won't change anything visually, but it makes your HTML code more semantic. It improves your project in terms of SEO and accessibility. And since it's the main content, it makes more sense to use the main tag.

  I hope it helps!

  Other than that, you did a great job!

  Marked as helpful

  1
• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  • If you need to center your <section> , You could add in your body:

  display: flex ;
  justify-content: center ;
  align-items: center ;
  min-height: 100vh ;
  

  then what comes under your body such as your <section> will be centered without using top

  • You could check on and use clamp ( ) method ( font-size, width, margins, paddings, etc. ) ,so your design sizes will change according to the viewport dimensions and will be suitable for any device layout. ( Responsive Design )

  Hope you find this Useful & Helpful.

  Other than that, Nice work & keep Going on.

  Marked as helpful

  1