Skip to content
Submitted 5 months ago

flexbox

Kevin Salazar Zarate•40
@iamkevin-sz
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?

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
    @Vanillatte68Posted 5 months ago

    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
    Kevin Salazar Zarate•40
    @iamkevin-szPosted 5 months ago

    @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
    @Vanillatte68Posted 5 months ago

    @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

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