Skip to content
Submitted 7 days ago

Frontend-Mentor-Recipe-page

Moundjid Machghour•140
@PxMach
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

Solution retrospective

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

the thing where i'm the most proud, it's just when i finished and what i would like do differently the next time is review my table skills.

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

the challenge I've taken up is with the table, as it's been a long time since I used the table tag, I've overcome using the div tag instead of the table tag .

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

I'd like someone to tell me whether I did well in the last section or not.

Community feedback

  • DrMetr•210
    @DrMetrPosted 7 days ago

    Hello, you did a good job however here's a few advice I'd like to give:

    1. The table should be made with <table>, <tr>,<td>, <th> tags. Semantics are important for code readability and accessibility. Users with print disability use screen readers that navigate them through websites and those recognise the sections, buttons forms, tables etc. through the site html code. And you should keep that in mind.

    2. Your work looks okay from my phone but on smaller screens it'll be a little irksome because the main card is too big and doesn't fit the vertical orientation, i.e. your site is not responsive. You should research @media css at-rule and build your projects with mobile-first workflow, i.e. first you code the style for little screens (for example, my phone width is about 350px width vertically) and then add alternative style code for screens wider than specific size using @media at-rule.

    Specifically in this challenge I'd recommend adding a little margin to your taste to the .container class ao there's a small space between the card and the screen edges.

    1. There's a white space on your screenshot bottom that doesn't seem to appear in the site. If it comes from an older version and you have it fixed already then you should regenerate the screenshot.

    Think, that's enough. Continue your development, see how more experienced people solve these challenges and never give up 😀

    Marked as helpful
    1
    Moundjid Machghour•140
    @PxMachPosted 7 days ago

    @DrMetr Okay, can you take a look at the media I made

    0
    DrMetr•210
    @DrMetrPosted 7 days ago

    @PxMach sure :) The main card is still too wide for my phone. The thing is, you use width: 100% and margin: 50px auto. Width 100% means that the element will take up all the available width of a parent container, in this case the <body>, and margin 50px auto means 50px top and bottom and auto left and right. Since there are no other rules about left and right margin or padding or anything, the result is -- the card is the width of 350px (which comes from @media screen and (max-width: 350px)).

    To solve this, you can set width 100% for the element and a desired margin (or padding, seems like they both work the same in the <body>) in the parent element (here it's <body>) in the media queries, for example.

    Same with the image. Instead of setting its width manually in pixels you can just give it 100% because it'll take the permitted width of the card (permitted = width of the parent element minus padding of the parent and margin of the element in question). Say, you have a parent element width to be 100px with 5px of padding ascribed to it and then you add a child div with margin of 10px and width 100%. This div will in fact have 100px - 25px - 210px = 70px (we multiply by two because we count both left and right). So, try to fiddle with that too.

    Marked as helpful
    1
    Moundjid Machghour•140
    @PxMachPosted 7 days ago

    @DrMetr please you see again, thanks in advance.

    0
    DrMetr•210
    @DrMetrPosted 6 days ago

    @PxMach I fiddled with your code a little. You gotta do this in the beginning:

       background: hsl(30, 54%, 90%);
   font-family: "Outfit", sans-serif;
   font-weight: 400;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: /*padding to your taste, put any number here*/;
}

    Setting height and width 100% for <body> is pointless. But having parent element comply with the flex rule helps.

    In the media queries you can specify width (or min and max width) of the .container in this project.

    Marked as helpful
    0
  • Aldi•230
    @AldikrasniqiPosted 7 days ago

    Try to be consistent with typography and spaces, overall layout look good

    1
    Moundjid Machghour•140
    @PxMachPosted 7 days ago

    @Aldikrasniqi Thanks

    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