Skip to content
Submitted 10 months ago

Recipe Challenge

Rowan•210
@rowanDeveloper
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

This was quite a challenge. I'm relieved I was able to do this project.

I would like to fix/improve some details that are quite not similar to the design preview in my code:

  1. I was unable to separate the Instruction bullet point and the Info. As you can see in the preview there are two columns in the Instruction part. One for the bullets points and another for the Info. I tried to do that part with grid-properties. .list-item { .list-item { display: grid;
    grid-template-columns: 1fr auto;

But it didn't work. That is why I only commented it.

Also, I would appreciate any kind of advice and improvements!

Community feedback

  • Luciano Lima•1,290
    @LucianoDLimaPosted 10 months ago

    Well done on completing this challenge!

    A few things I've noticed.

    • You used margin: 5rem 22rem; on .container, I'm guessing you did it to center horizontally? This way causes some problems to your website, for example, I tried to inspect your page on devs tool, and your page immediatly shrinked. A better way of going about it would be to first remove this margin on .container, then you add the following in the <body> tag:
    body {
    // ...rest of your style
    max-width: 40rem;
    margin-inline: auto;
}
    • Regarding semantic. You used <ul> list tag 4 times, but there is another tag for lists, the ol that is used for ordered list (when there is an order, as opposed to unnorded (ul)).

    The first, second and third ones are correct to use <ul> tag because the order the items appear can be switched. However, the third one - Instructions - needs to be a <ol> list, because the order of the items cannot be switched, they need to be in order.

    • About the bullet points you mentioned, there is a css property called list-style-position and if you set it to inside, it makes what you want it to. Also make sure to add list-style: decimal so your bullet points become numbers. The way you did ends up overcomplicating a bit and is not really necessary, I'd recommend delete the :before selector you used to make the bullets, and use the native css properties instead.

    Again, well done on completing this challenge and hope you keep on coding!

    Marked as helpful
    1
    Rowan•210
    @rowanDeveloperPosted 10 months ago

    Hi @LucianoDLima! I appreciate your advice! I already updated the styles on the <body> tag. You are correct. That approach is way better than manually adding the margins on the .container div.

    Also, regarding the Instructions decimal bullets points, I think there is no way around it without declaring it as a :before pseudo-element. That is because:

    1. The list-style: decimal is a different style that it's on the design. The most eye-seeing difference is how the "1" decimal bullet point are different.

    2. Without using the :before property, you are unable (at least in my case) to define the color property only for the bullets numbers. Withou it, you <li> item kinda of "inheret" the color property instead of only been applied to the number bullet.

    Well, that was at least my case.

    Anyhow: thanks a lot for the advice

    1
  • Tharindu D•120
    @tharidu678Posted 10 months ago

    you can add simple padding to your <li> tags and this helps you to make a space, between bullet points and info.

    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