Skip to content
Submitted 8 months ago

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

MohammadAzmatAliā€¢50
@MohammadAzmatAli
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 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...

Community feedback

  • Daniel šŸ›øā€¢44,310
    @danielmrz-devPosted 8 months ago

    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
    0
    MohammadAzmatAliā€¢50
    @MohammadAzmatAliPosted 8 months ago

    @danielmrz-dev I think the source of the images will be swapped as when the screen size is max 460 px the image should be mobile version.

    0
    MohammadAzmatAliā€¢50
    @MohammadAzmatAliPosted 8 months ago

    @danielmrz-dev The code will be like : <picture> <source media="(max-width: 460px)" srcset="{mobile image path here}"> <img src="{desktop image path here}" alt="{alternative text here}"> </picture>

    0
  • lij110397ā€¢230
    @lij110397Posted 8 months ago

    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
    0

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