Skip to content
Submitted 7 months ago

HTML, CSS, Responsive design

Mehrdad Kordi•40
@Dollarage
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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!

Community feedback

  • 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
    Mehrdad Kordi•40
    @DollaragePosted 7 months ago

    @jwben1

    Hello!

    I wanted to thank you for the resources and instructions. I am taking Kevin Powell's course on Responsive design and it's very helpful. I also stumbled upon Scrimba.com and found a very nice free course on JavaScript.

    I haven't implemented the Responsive design methods on this solution, but as soon as I'm Responsive-Ready I'm going to update it.

    Thank you very much.

    1
    Cyuzuzo Bienvenu•220
    @bienvenudevPosted 7 months ago

    @Dollarage

    Happy to help!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord