Submitted 16 days ago

Recipe page main (HTML,CSS)

Kalyan TR• 40

@tr-Kalyan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Able to make the solution look identical to design with some minor colour grade difference.

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

Aligning the numbers and using flex to adjust the positions in instructions section. I have tried instructions part alone in online IDE to try out possible options. Finally came up with tree like div structure and flex box to adjust the position of text and numbers.

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

Any help, If the instructions part can be done using lesser div. Open for any suggestion or code examples.

Community feedback

KapteynUniverse• 590

@KapteynUniverse

Posted 16 days ago

Hey,

<div> is used as a container for HTML elements, i am not sure that you can use it like you did here, example:

<div class="number">1.</div>

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

In instruction div you can use list items with ordered list (<ol>). That will get rid of most of the divs.

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

Sevgiler

Please log in to post a comment

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