Submitted 5 months ago

Recipe Page

Serhii Derkach•50

@SerhiiDer

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

Not much

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

I couldn't align the last section Nutrition to look like in figma

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

I couldn't align the last section Nutrition to look like in figma

Code

Please log in to post a comment

Community feedback

IO•710
@i000o
Posted 5 months ago
Hi!

Instead of <div>s for your Nutrition table, you can learn about HTML <table> element, and <tr>, <th> elements (table row and table heading). This is really useful when building semantic tables in a design.

Here's an example of how you can improve this section:
```
table {
    display: flex; 
    flex-direction: row;
    justify-content: center;
    text-align: left;
```
You can view my CSS for this challenge here.

The rest looks great and accurate to the design! Well done - This challenge was chunky and takes some time, but you did it 👏🏻
Marked as helpful
Piotr•260
@Gwynbleidd222
Posted 5 months ago
Use grid instead of flex in the last section.

For .nutrition__item, set:
```
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
```
Marked as helpful

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