recipe-page

Community feedback

• 

  P

  Daniele•300

  @dedo-devPosted 4 months ago

  Hi @MAIAN-HUNTER, I reviewed your repository and I have some suggestions for you:

  1. Adopt mobile-first approach, is a good way to style the html;
  2. Try to start to use a modern approach with the css by using Logical properties example: - margin-left = margin-inline-start; - margin-bottom = margin-block-end; - Check out this article about Logical properties;
  3. To follow the design you need to remove the padding on your .container, you can add it by using @media or @container query, I used the second one, or maybe the fluid spacing;
  4. You need to set all the headings bigger than now;
  5. Don't use strong if your goal is only to highlight text, instead use the b or span to achieve that. Read this article to discover why;
  6. To make a divider use the semantic hr or a div with class .divider for example, the last one was my solution, instead of setting padding-top to the h2;
  7. Remove the default padding from ul and ol, and to style the bullet points use the same trick that you use on the li for ol (they should be bold), and play with ::before pseudo-element, this is how I did all the marker for the list; hint: left: some rem
  8. To style the border of the table you can use table {border-collapse: collapse;}, with this css the border looks like a single line;
  9. In my solution I used only tr and td to make the table, maybe this doesn't matter, but you need to highlight the right column of the table, th has font-weight: bold; as default on it;
  10. Fix the footer tag and position, on mobile view it overlaps the layout and on large screen, it sits on the left of the card;

  Hoping you find this helpful ✌️

                    Keep learning 📖 Keep coding 💻
  

  Marked as helpful

  1