All comments

• 

  minu-arch•40

  @minu-archSubmitted 11 months ago

  If I have made some mistakes, feel free to comment. I'm an open guy

  

  i have using css flex box

  2

  50
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @minu-arch 👋. Good job on completing the challenge!

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

  CSS and Styling:

  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Like the image, set the parent to a max-width: 50%, and let the image to adapt width object-fit

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Ashong•930

  @AshongAbdallah06Submitted 11 months ago

  What do you think?

  

  ping-coming-soon-page

  1

  50
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @AshongAbdallah06 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Debabrata Banik•730

  @DebabrataBanikSubmitted 11 months ago

  

  blog-preview-card-main

  2

  70
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @DebabrataBanik 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • You could add the hover effect to the title. Change the color to yellow and implement a cursor: pointer.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1
• 

  Ib-dI•120

  @Ib-dISubmitted 11 months ago

  

  3 preview card using css grid & flex box

  1

  60
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @Ib-dI 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.
  • Consider using <h2> for each card titles, instead of a <h1> for each card title.

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  0
• 

  MustafaKemalV•30

  @MustafaKemalVSubmitted 11 months ago

  This is the second project I'm trying to do. I am trying to use commands to position images, text and diagrams, but if you know more practical or more accurate positioning commands, I would like to hear your advice. Your comments and feedback are valuable to me.

  

  NFT preview card component

  2

  100
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @MustafaKemalV 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.
  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Jules Wyvern".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1
• 

  Anlperr•150

  @AnlperrSubmitted 11 months ago

  All feedback is welcomed thank you in advance.

  

  Blog card preview

  3

  60
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @Anlperr 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  2
• 

  OscarC•20

  @OscarCasEscSubmitted 11 months ago

  What do you think I can improve?

  

  Blog preview card

  2

  90
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @OscarCasEsc 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  1
• 

  Serah Nderi•450

  @MundiaNderiSubmitted 11 months ago

  First app with React! It's a simple implementation but I am happy to be dipping my toes in React and building my confidence.

  

  QR Code Component using React.js

  1

  110
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @MundiaNderi 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
  • The body should not have its height limited. Instead of using height: 100vh, use min-height: 100vh.

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  0
• 

  Med-ko•30

  @Med-koSubmitted 11 months ago

  Hey everyone, this is my take on the blog preview card challenge. it's my second challenge so far so I'm hoping I did better. I had some problems with @media querry when setting the width of The main element, so I really hope you'd advise me on that. Thank you very much in advance!

  

  My solution to the blog-preview-card challenge using basic HTML/CSS

  3

  70
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @Med-ko 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Replace the width: 25% in the main for a max-width: 384px
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
  • The body should not have its height limited. Instead of using height: 100vh, use min-height: 100vh.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper" or you could leave it empty alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Darijo Šalković•70

  @D-SalkovicSubmitted 11 months ago

  Feel free to comment any improvements :)

  Also I would like some suggestions how to change my :focus selector to match the border radius and color of my .button elements.

  Thanks in advance :)

  

  Responsive product card

  1

  60
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @D-Salkovic 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.

  • All the content should be contained within landmarks. Every page minimally needs a <main> element.

  • Consider using <picture> tag that is commonly used for responsive images, here you can specify the difference image sources for different screen sizes and devices. For example:

    <picture>
      <source media="(min-width: 640px)" srcset="/images/image-product-desktop.jpg ">
      <img src="/images/image-product-mobile.jpg" alt="">
    </picture>
    

    Check that srcset and src are correct and change the media if you want the desktop image to kicks in on a previous or later screensize.

  CSS and Styling:

  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
  • The body should not have its height limited. Instead of using height: 100%, use min-height: 100vh.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1
• 

  learningtogetherua•230

  @learningtogetheruaSubmitted 11 months ago

  Thx for any feedback

  

  Not first variant))

  2

  60
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @learningtogetherua 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.

  • All the content should be contained within landmarks. Every page minimally needs a <main> element.

  • Consider using <picture> tag that is commonly used for responsive images, here you can specify the difference image sources for different screen sizes and devices. For example:

    <picture>
      <source media="(min-width: 640px)" srcset="/images/image-product-desktop.jpg ">
      <img src="/images/image-product-mobile.jpg" alt="">
    </picture>
    

    Check that srcset and src are correct and change the media if you want the desktop image to kicks in on a previous or later screensize.

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
  • The body should not have its height limited. Instead of using height: 100%, use min-height: 100vh.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  0
• 

  Madhavan•340

  @madhavan-tsSubmitted 11 months ago

  I have completed this as my 7th challenge in Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.

  Advance thanks for any comments 🫡.

  

  NFT preview card component using flexbox

  1

  70
  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @madhavan-ts 👋. Good job on completing the challenge!

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

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Jules Wyvern" or you could leave it empty alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  1