Skip to content
Submitted 3 months ago

Article Preview Component Master Challenge

AbdelmonemMarei•270
@AbdelmonemMarei
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I appreciate any feedback or suggestions helping me to improve my next challenge. Feel free to leave a comment.

Community feedback

  • Danae Lescano•270
    @Lescano713Posted 3 months ago

    Hi, your code looks great, but there are some areas where you can improve:

    • HTML Structure: Consider using different semantic tags to group content based on its importance. For example:
    <body>
<main> <!-- For important content -->
<section class="info-1"></section>
<section class="info-2"></section>
</main>
</body>

    You can take a look at this article for more information on semantic HTML.

    • Responsive: You can use both min-width and max-width properties to adapt your container to different screen sizes. Consider that some devices have widths as small as 320px, so your container should adapt accordingly to ensure a good user experience on various devices.

    • Consolidated Vendor Prefixes: Removed redundant vendor prefixes for border-radius and filter properties. Modern browsers generally don’t need these prefixes.

    • Used Shorthand Properties: Simplified border-radius properties and other CSS rules.

    • Consistent Units: Made sure units like px and rem are used consistently for sizing and spacing.

    • Improved Readability: Organized and formatted the CSS for better readability and consistency.

    These changes help keep your CSS more manageable and easier to maintain.

    1
    AbdelmonemMarei•270
    @AbdelmonemMareiPosted 3 months ago

    @Lescano713 I appreciate your feedback.

    • For HTML : I will read more about use of section and main instead of DIVs.

    • For CSS : I consider almost of your feedback but I don't recognize that there are devices that their screen width is less than 375 px.

    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