Skip to content
Submitted about 1 year ago

Responsive landing page using HTML, CSS (flexbox and media queries)

MohammadAzmatAli•50
@MohammadAzmatAli
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that i have completed this project. The feedback which i got with the previous solution was very helpful. I will apply the methods which i learnt through this project in my future works.

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

The challenges for this project was pretty easy. The only challenge was to make the design responsive for all kinds of screen sizes. Therefore i tried my best to make it work. I will also look for others solutions to learn more.

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

I am new to responsive designs. I don't know how can what methods should i use to make a responsive designs for webpages. Open for any helpful feedback...

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Daniel 🛸•44,740
    @danielmrz-dev

    Hello @MohammadAzmatAli

    Your project looks great!

    I have a suggestion about your code that might interest you:

    📌 You can use the <picture> tag when you have different versions of the same image.

    Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

    Example:

    <picture>
    <source media="(max-width: 460px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

    I hope this helps!

    Other than that, excellent work!

    Marked as helpful
  • lij110397•230
    @lij110397

    Overall, the solution fits the design.

    In the css file, I think using a class selector may be better than using a id selector in general.

    The image of product did not change when it changes from desktop screen to mobile screens. You may consider the method as followed:

    <picture class="product-image">
        <source media="(max-width: 43rem)" srcset="images/image-product-mobile.jpg" />
        <source media="(min-width: 43rem)" srcset="images/image-product-desktop.jpg" />
        <img src="images/image-product-mobile.jpg" alt="images of the product" />
</picture>

    This can be used when in different screen size, there are different images besides the difference in size.

    Marked as helpful

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