Skip to content
OverviewSolutions
10
Comments
10
Cyuzuzo Bienvenu
@bienvenudev

All comments

  • Samuel Sylvester•330
    @Sylvester009Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing really, still solidifying my position as a newbie.

    What challenges did you encounter, and how did you overcome them?

    None at all

    What specific areas of your project would you like help with?

    For this project, None

    Responsive preview card using flexbox

    2
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hello!

    Well done, here are some things I notice that you may need to change/add:

    • You should always have a main tag in your body
    • I'm getting some horizontal scrolling
    • Media queries must always be defined in rem or em not px
    • It's better for performance to link fonts in the html head instead of css imports
    • Font size must never ever be in px (https://fedmentor.dev/posts/font-size-px/)
    • Always include a full modern css reset at the start of the styles to provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)

    Additional resource:

    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    Happy Coding!

    1
  • Omowunmi Kamiludeen•120
    @OmowunmikamilSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud to have finished this challenge, It was a challenging but amazing experience!

    What challenges did you encounter, and how did you overcome them?

    working on the circle, individually styling the right div components, and making the page responsive.

    What specific areas of your project would you like help with?

    I believe there is a better solution to this problem. Could you please review the code and share your thoughts? Thank you.

    Results Summary Component

    2
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hello!

    Well done, here are some things to improve:

    • Try to make this responsive on all screen sizes.
    • Work mobile first when it comes to styling. Have dev tools open on the side and shrink the viewport narrow. Start from there. The default styles should always look good on mobile.
    • Include a modern CSS reset at the beginning of your styles to help normalize browser defaults and provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)
    • Use headings appropriately and in the correct order.
    • Do you mean to use em where you're using it? Em should be a very intentional choice when you specifically want a property to scale with that element's font size.
    • Media queries must always be defined in rem or em not px
    • It's better for performance to link fonts in the html head instead of css imports
    • Font size must never ever be in px (https://fedmentor.dev/posts/font-size-px/)

    Additional resources:

    • Kevin Powell's walkthrough: https://www.youtube.com/watch?v=KqFAs5d3Yl8
    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    Happy Coding!

    Marked as helpful
    0
  • Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hello!

    Well done, here are some things to improve:

    • Try to make this responsive on all screen sizes.
    • Include a modern CSS reset at the beginning of your styles to help normalize browser defaults and provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)
    • This design has no header. Headers are for repeating content across a site not for page-specific content.
    • Your media query should be in rem or em not px.
    • Avoid setting font sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
    • For decorative images, alt should be blank.

    Additional resources:

    • Kevin Powell's walkthrough: https://www.youtube.com/watch?v=KqFAs5d3Yl8
    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    Happy Coding!

    Marked as helpful
    1
  • Elsayed ELbauomy•250
    @elsayedelbauomySubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    my hard work

    What challenges did you encounter, and how did you overcome them?

    prduct responsive project

    What specific areas of your project would you like help with?

    how i could change the imge to be responsive from html

    responsive product project card

    1
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hello!

    Good job!

    Here are a few suggestions that might make things even better:

    • Please pay attention to units you choose to use (ex: lvh). Make sure you know why you chose them.
    • Em should be a very intentional choice when you specifically want a property to scale with that element's font size. Make sure you're using it intentionally here.
    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
    • You don't have to put on a media query to change an image, instead you could use the picture tag in html and let the browser load the desired image. Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/
    • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).

    Additional resources:

    • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    Happy Coding!

    0
  • Mehrdad Kordi•40
    @DollarageSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I did the desktop design of the page very fast, but I got stuck on the responsive mobile part. I had to experiment with styles in order to make the page responsive.

    What challenges did you encounter, and how did you overcome them?

    Setting styles for responsive mobile version was a bit challenging but I managed to make a mobile version.

    What specific areas of your project would you like help with?

    If you know some good study and practice material about responsive web design please introduce them to me. Thank you for reading this!

    HTML, CSS, Responsive design

    1
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hello!

    Congrats.

    Here are a few suggestions that might make things even better:

    • You don't need to change the width of the body.
    • Try to make this responsive on all screen sizes
    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
    • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
    • Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
    • Similar to width, avoid setting a fixed height on your main.This ensures the content can adjust to different content lengths.

    Additional resources:

    • Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/

    • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    Marked as helpful
    0
  • Vicki Davidson•10
    @Vicki-DeeSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    That I've done my first challenge and it feels good taking that first step. Next challenge I'll plan it out a bit better now that I know how this process works.

    What challenges did you encounter, and how did you overcome them?

    Refreshing myself with the coding I've learnt so far in my journey. Trust my instincts as well as use the resources out there.

    Desktop view solution using flexbox

    1
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hi there!

    Good job.

    Here are a few suggestions that might make things even better:

    • The overflow issue is caused by changing the width of the body please remove the width on the body.
    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
    • Avoid setting font-sizes in px, use rem instead (https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
    • Instead of setting a fixed width on your card, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
    • Similar to width, avoid setting a fixed height on your card. If you need extra space around the text, use padding instead. This ensures the content can adjust to different content lengths.

    I hope these tips are helpful! Feel free to ask any questions you might have.

    Marked as helpful
    0
  • Essencell•50
    @Essensity-devSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have been able to implement responsive design.

    What challenges did you encounter, and how did you overcome them?

    My biggest challenge in this case was the change of image by having a container with fewer pixels but I investigated and was able to solve it with the content tag in CSS

    What specific areas of your project would you like help with?

    I would like help on the responsive side and when using percentages, em and rem

    Product preview card component main

    2
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hi @Essensity-dev!

    This is looking good! Here are a few suggestions that might make things even better:

    • For non-decorative images, consider using descriptive alt text like "Front-End Mentor QR Code" to improve accessibility for screen readers.

    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/

    • Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.

    • Similar to width, avoid setting a fixed height on your main. This ensures the content can adjust to different content lengths.

    • As @danielmrz-dev mentioned you don't have to put on a media query to change an image, instead you could use the picture tag in html and let the browser load the desired image. Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/

    • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these are helpful! Feel free to ask any questions you might have and happy coding!

    0
  • Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    Hi there!

    This is looking good overall! Here are a few suggestions that might make things even better:

    • For non-decorative images, consider adding descriptive alt text like "Front-End Mentor QR Code" to improve accessibility for screen readers.
    • Instead of pixels, using REM units for font sizes ensures better responsiveness across different screen sizes. Here's a helpful article: (https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5)
    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
    • Instead of setting a fixed width on your card, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
    • Similar to width, avoid setting a fixed height on your card. If you need extra space around the text, use padding instead. This ensures the content can adjust to different content lengths.

    And I also saw your question asking 'Is using :root and creating variables considered good practice?'.

    The answer: Yes, using :root and creating variables is a fantastic practice called CSS Variables. It makes your CSS more organized, maintainable, and easier to update. Here's a helpful article for further exploration (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

    CSS variables video(https://www.youtube.com/watch?v=PHO6TBq_auI)

    I hope these tips are helpful! Feel free to ask any questions you might have.

    Marked as helpful
    0
  • Cyuzuzo Bienvenu•220
    @bienvenudevPosted 10 months ago

    Hello!

    Unfortunately, this solution is not responsive on tablet screens (770px - 1020px), and I'd recommend using grid on this layout to have a little practice with it.

    Marked as helpful
    1
  • Cyuzuzo Bienvenu•220
    @bienvenudevPosted over 1 year ago

    Hello! The link to your live site is not accessible

    1