Recipe page with basic html and css usuage

Community feedback

• 

  T

  Grace•31,530

  @grace-snowPosted 4 days ago

  Well done on your first challenge! I'll list out the issues I see but don't be discouraged, it's normal to get so many and these are very common beginner mistakes.

  This challenge is mostly about html so it's important you take time to focus learning there early on. So many people skip past html but it is the foundation to everything else. If you don't grasp how to translate designs into appropriate well structured html solutions will never be accessible. Get familiar with available elements and when to use them, especially buttons, links, unordered ordered and description lists, table cell types and attributes, heading levels, dialog, picture and more. Start to look at designs and think about what html would be suitable.

  • all content should be contained within landmarks. Everything in this design belongs inside a main landmark. You need one on main on every full webpage so it's a good practice to get into the habit of including them even to wrap single component demo challenges. If you include the attribution, that would go in a footer outside of main.
  • the image alt is important content in this design. It needs to convey the same information/value as the image. Craig Abbotts blog has a great post about how and when to write alt text on images.
  • Heading order really matters. There should only be one h1 on this page. All other headings should be h2s. Heading levels create a hierarchy of the content on the page, much like the contents page of a big document.
  • the table should have header cells (th) inside it, not just data cells (td). "calories" for example is header cell content. Because these are row headers not column headers (which is the default) the header cells should also have scope="row". This is all really important. Assistive technologies like screen readers need the correct table structure to be able to understand the content.

  Now onto the CSS points:

  • Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • never change the width of the body. Think of it as the available screen space. It's like the piece of paper everything gets drawn onto. You can draw your picture smaller on a piece of paper without having to fold or rip that paper to force it to be smaller. Leave it alone. You may find the body is too short sometimes in future challenges. That's because although the body is full width by default it is only the height of its content by default. To solve that when you face it, give the body a min-height: 100svh;.
  • does the body need to be a flex container in this? I don't think it does... When you do make the body or another landmark display flex remember to set its direction to column.
  • remove all styles from the html and place them on the body instead. As a general rule, leave the html alone. It has no default styling and doesn't need styling. It's a wrapper for the head and body for the browser that's all.
  • it's not essential, but consider using the em unit for margin-top on prose content like this (headings and paragraphs). I don't think they need any margin-bottom. The reason I suggest em there is because that unit is relative to the font size. So a margin-top of 1em on a h2 will be bigger than a paragraph.
  • note however, setting base styling on element selectors is usually only done at the very start of a project, straight after the css reset. Most of the time you will want to use single class selectors in css.
  • don't style on IDs! That's not what they're for and can cause all sorts of problems. They are really important for accessibility because their role is for referencing between elements. They can make styling a total maintenance nightmare because of high css specificity and you can't reuse them. Use classes.
  • never set font size in px, even once. Use rem. More info: https://fedmentor.dev/posts/font-size-px/

  Other than that, just try to get this closer to the design. The max width on the component should be smaller and in rem, and the main heading should definitely be smaller. There may be other sizing issues too.

  At the moment this overflows my mobile screen on the sides, which will likely be caused by the missing css reset, possibly too large font size and too large max-width. Make sure you test solutions down to 320px wide.

  Marked as helpful

  0

  ---

  

  Blenimator•20

  @BlenimatorPosted 4 days ago

  @grace-snow Thank you sooooooo much for taking the time to write down such a detailed feedback! I'll take it all in and see how i can use it in the next challenge. It's great to actually get some advice on a real project you did yourself, as by watching tutorials online it's sooo easy to mix it all up what's actually important and what isn't. Mainly i was slapping everything together (without knowing what i was actually doing obviously) in one way or another, so your feedback is exactly what i need. :)

  0

  

  T

  Grace•31,530

  @grace-snowPosted 2 days ago

  @Blenimator Make sure you refactor this challenge before moving on to anything else. Always do that to ensure you've fully understood the feedback and to start building that muscle memory of good foundational code practices.

  0