Skip to content
Submitted 2 months ago

recipe-page-main

YanivRidel•210
@Yanivridel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • This CCS code is not being used and can be removed with no consequence,
    .main-container {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="" />

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪

    Marked as helpful
    1
  • Fachrezi•200
    @Fbeye04Posted 2 months ago

    Nice work, bro, I commend how you replicated this project so well from both mobile and desktop screens. I would like to make a few suggestions you might want to consider.

    1. So first, try to wrap the main-container using the main semantic element.
    2. Use the h1 tag for the big title, then h2 for the other segment titles, if that's not enough you can use h3. You can customize in CSS if there are special cases for certain sentences so that you don't need to use h4 or even h5 tags.
    3. Compared to using class=“purple”, I think it would be better to use id because it is more specialized.
    Marked as helpful
    1
    Grace•31,270
    @grace-snowPosted 2 months ago

    @Fbeye04 styling shouldn't ever be done on IDs. They are important for referencing between elements in html, that's their purpose. As soon as you start adding them to CSS it gets higher specificity which can lead to style wars and makes css very hard to maintain on larger projects.

    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