Skip to content
Submitted 3 months ago

News homepage

abdalla shaker•140
@abdalla-shaker
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of the time it took me to finish this page as i was afraid it will take me days to finish it but i managed to finish it in no time eventually :).

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

I didn't counter any challenges finishing this challenge :) .

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

Any feedback is appreciated

Please log in to post a comment

Log in with GitHub

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi @abdalla-shaker!

    The developed solution looks great! The responsiveness appears to be handled very well—great job! 🚀

    Just a minor suggestion:

    The image image-web-3-desktop.jpg is currently being used across all resolutions. However, there’s also a image-web-3-mobile.jpg provided, which is intended for mobile resolution but is missing in the implementation.

    To optimize the image usage for different screen sizes, consider using the <picture> element. This allows you to load different images based on the screen resolution, improving performance and ensuring a better visual experience.

    Example using the <picture> element:

    <picture>
    <source srcset="image-web-3-mobile.jpg" media="(max-width: 768px)">
    <img src="image-web-3-desktop.jpg" alt="Web 3.0 Image">
</picture>

    How this works:

    • If the screen width is 768px or smaller, the mobile image (image-web-3-mobile.jpg) is used.
    • Otherwise, the default desktop image (image-web-3-desktop.jpg) is displayed.

    This ensures that the appropriate image is used based on the device, improving loading speed and maintaining design integrity.

    The rest of the implementation looks fantastic! This is truly a very well-developed solution—keep up the great work! 🚀

    Marked as helpful
  • P
    Thomas TS•920
    @ttsoares

    Great job! Very near the proposed design.

    A suggestion about the README: FEM offers a README-template.md. Right ? I have been using it in my solutions that file by filling the gaps with the contents proposed, like the section:

    What I learned

    Shaped my Tailwind skills with this project...

    Marked as helpful
  • kerolosamiel•0
    @kerolosamiel

    Amazing work, Abdalla :)

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