Skip to content
Submitted 8 months ago

Recipe page using pure CSS

Chard Largodizimo•270
@chardlargodizimo
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'm most proud of the fact that I completed the challenge within 2 days.

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

Setting the markers of the list element as a ::before pseudo-element. I overcome them with the help of mdn web docs.

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

BEM naming convention

Community feedback

  • Charlie•300
    @XarlizardPosted 8 months ago

    Heyo Chard, it looks amazing!

    Just one tip:

    Instead of trying to construct a table using an unordered-list <ul> with flex enabled list-items <li> (what a trick you've accomplished with that by the way!), just use the <table> component, containing table-rows <tr> and table-data <td> ( = columns, if you may):

    <table>
   <tr>                  // <-- Example for the first table row
      <td>Calories</td>
      <td><b>277kcal</b></th>
   </tr>
</table>

    You might need to specify the width of each <td> on your style.css file to for example max-width: 50%; or to a fixed pixel count, that depends on your preferences.

    Besides that, you only need to fix your "table's" second column text alignment, it should be aligned to the left with text-align: left; (you currently have it aligned to the right).

    Hope it helps, but anyways, I'm really impressed by your results, keep up the good work! 😉👍

    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