Skip to content
Submitted 8 days ago

Recipe Page - HTML - CSS

Gigantisk•20
@Gigantisk
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?

Most of the page.

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

Create a table and separate line.

Research how to do it on internet.

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

Some advice for better accessibility on different device, or any other advice for table.

Community feedback

  • Irina Lagutina•620
    @FoxMalder-coderPosted 8 days ago
    1. There is a easier way to deal with rem. a) your need set font: size: 62.5% to html --- rem will be 10px; b) set initial (if so) value to body font-size: 1.6rem --- 16px for text-elements and then c) use any rem values inside your's css --- like 240px is 24rem - no hard calculation)))
    2. To make adaptive layout use max-width instead of width (image, table and container). Also don't forget to make images display: block
    Marked as helpful
    2
    Gigantisk•20
    @GigantiskPosted 6 days ago

    @FoxMalder-coder Thank you for the feed back, i heared about the 62.5% "hack" but i heared too it could cause some problem with some package this why i calculate everything, it's slow but for now, it's fine.

    0
  • hitmorecode•6,680
    @hitmorecodePosted 8 days ago

    Congratulations well done. I do have some pointers

    • It's best to have a CSS reset on a page, this is a simple CSS reset.
    * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
    • You can remove the margin: 0; on the body.
    .container {
    width: var(--670px);
    background-color: white;
    border-radius: 15px;
    margin-top: 60px;
    margin-left: auto;  // you can remove this
    margin-right: auto; // you can remove this
    padding-bottom: 24px; // change this to just al-round padding
}

    The reason why your page is not responsive is, because you are not using media queries. If you had media queries, you can adjust the page for all different screen sizes.

    • They way you setup the root it's not clear what it is. It might be clear for you for now, but for someone else it's not clear what it is. Give your variables names that make sense.
    :root {
    --16px: 1rem;
    --22px: 1.375rem;
    --32px: 2rem;
    --575px: 35.9375rem;
    --600px: 37.5rem;
    --670px: 41.875rem;
}

:root {
   --font-size-16: 1rem;
   --font-size-22: 1.375rem;
   --font-size-32: 2rem;
   --width-container-575: 35.9375rem;
   // and so on with this is easier to understand what you are doing
}
    • You didn't add the font style on your page, right now it's using the default font style.

    See if you can fix the responsiveness with media queries. If you need help let me know. I hope you find this helpful.

    Keep it up 👍👌

    Marked as helpful
    1
    Gigantisk•20
    @GigantiskPosted 6 days ago

    @hitmorecode Hello, thanks you for the feed back!

    I updated the code (it should be visible), if you have other/new advice i'm all ear.

    I have some questions :

    1. is it a good idea to put the image inside a container?
    2. do i need the .young-serif-regular, .outfit-regular and .outfit-bold in my css?
    3. on frontend mentor i have 2 error : -Document should have one main landmark "<html lang="EN">" -All page content should be contained by landmarks "<div class="container">" did you know how i can resolve that? i tried to watch for it but i didn't see where the problem is.

    thanks again!

    0
  • Olaniyi-Fatola•70
    @Olaniyi-FatolaPosted 8 days ago

    This is absolutely great. For accessibility on different devices, you can use media queries which is "@media (max-width: 768px){}" and then code the what you'll like be different for mobile devices on it. You can check out this video on youtube for better understanding https://youtu.be/k0UVMuCXJtY?si=Y56Xin_U6RjFGdOG

    Marked as helpful
    1
    Gigantisk•20
    @GigantiskPosted 6 days ago

    @Olaniyi-Fatola thanks for the feed back!

    1

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