Skip to content
OverviewSolutions
5
Comments
5
JustAsteri
@justasteri

All comments

  • Mahenaj Tabassum•30
    @mahenajTSubmitted 25 days ago
    What specific areas of your project would you like help with?

    I’m looking for feedback on any areas that could be improved, whether in layout, code structure, or accessibility.

    Social links profile

    1
    JustAsteri•90
    @justasteriPosted 25 days ago

    Hi! Great work! Here are is some feedback for your solution:

    • Try to make your websites responsive for all the pre-defined layouts that the browser offers. I realized that your page isn't really responsive when trying the "Galaxy z fold 5" layout (I always use this layout because it has the smallest width size of all the pre-defined layouts)
    • Try to avoid px for fonts, here is a great article that explains this more: https://fedmentor.dev/posts/font-size-px/
    Marked as helpful
    1
  • JustAsteri•90
    @justasteriPosted about 1 month ago
    • CSS Specificity: While your CSS is generally well-structured, consider using more specific selectors to avoid unintended styling. For example, instead of using .image, you could use .recipe-card .image to target the image within the recipe card.
    • CSS Variables: Using CSS variables (e.g., --primary-color, --font-family) can make it easier to manage your color palette and typography throughout the project.
    • Accessibility: Ensure that your code adheres to accessibility guidelines. This includes using appropriate ARIA attributes, providing alternative text for images, and using heading elements (H1, H2, etc.) in a logical hierarchy.
    0
  • JustAsteri•90
    @justasteriPosted about 1 month ago
    • Accessibility: Consider adding screen reader descriptions to the social media icons using the aria-label attribute.
    • Font Customization: You've included a @font-face rule for a custom font named "InterVar" but it's not currently used. If you want to use this font, make sure to link it correctly in your stylesheet. Alternatively, you can remove the unused rule.
    Marked as helpful
    0
  • JustAsteri•90
    @justasteriPosted about 1 month ago
    • Global Styling: Your global styles reset most of the browser's default margins and paddings. This can be helpful for consistency, but be mindful of potential unintended consequences. Consider using a more targeted approach to resetting styles.
    • Image Alt Text: While you have alt text for the illustration, consider adding alt text for the author avatar as well, for better accessibility.
    • Author Attribution: The attribution div is currently hidden. You might want to make it visible with a lower opacity or a different styling approach.
    • Button Functionality: The "Learning" button doesn't seem to have any functionality defined. Consider adding an onclick event or styling it differently if it's just for decoration.
    • Responsiveness: You could explore further improvements for responsiveness on even smaller screens.
    0
  • JustAsteri•90
    @justasteriPosted about 1 month ago

    HTML:

    • Semantic elements: Consider using a more semantic element for the .image container. Since it holds an image, a <figure> element might be more appropriate.
    • Redundant srcset attribute: The img tag doesn't have a srcset defined, so you can remove the empty srcset="" attribute.

    CSS:

    • Specificity: You can improve the specificity of your selectors to avoid potential conflicts with other styles. Consider using class names instead of tags whenever possible (e.g., .container instead of #container).
    • Responsiveness: The code currently uses fixed widths and margins. Implementing responsive design techniques like media queries would ensure the component adapts to different screen sizes.

    Additional points:

    • Font loading: Importing the font from Google Fonts is a good practice. However, consider using a font-loading strategy (like font-display) to optimize performance.
    • QR code accessibility: For improved accessibility, consider adding a descriptive text block (besides the visual QR code) explaining its purpose and providing a link to the target website.
    1