Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am proud to finish and next time I will create a specific class for each h2, since so much size, space, color, etc. was repeated

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

The challenge I found was to put bold in the instructions, preparation time, in the end I couldn't do it through CSS, I did it manually through HTML and I think that is wrong, and in nutrition I couldn't put bold and that color through CSS either, In the end I left it like this since I would have to place a span in the html and give each one a color, I think it is not done that way

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

I would like help on how to bold certain words in CSS and also in the table I wanted to align horizontally and I couldn't, in the end I used a justify content space around, it just didn't align as seen in the image, so I increased an empty td to each column like this so that it looks almost the same, but it is not well aligned between columns, I would like to know how to do it

Community feedback

Roselin Y 330

@Vanillatte68

Posted

Good job on completing the challenge!

You make good use of <b> tag in the HTML, remember you can always change the font weight and family for each HTML elements out there.

I completed this challenge the other days and here is how i build my table in my case:

<table>
   <tr>
       <th scope="row"></th>
       <td></td>
   </tr>
   ......
</table>

Use scope attribute to define the row as header. You don't need to define the table row as flex and just use text-align to align the text inside. You can use class selector :first-child and :last-child to stylize the table border

I hope this help, happy coding!

Marked as helpful

1

@iamkevin-sz

Posted

@Vanillatte68 thank you very much, it was useful

I saw your code, my question is why do you use rem in some parts and em in others?

0
Roselin Y 330

@Vanillatte68

Posted

@iamkevin-sz Hello, thanks for the reply! I use em for spacing between elements to keep it consistent between parent and child element, while i use rem to set font size, margin, and padding to keep the size relative to the parent element.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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