Simple omlette recipe challenge

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted 5 days ago

  Hi, I don't think this looks enough like the design yet. And you're missing a few key foundations in the html.

  • all content should be contained within landmarks. Everything in this design should be in a main landmark. The attribution should be in a footer.
  • look up how and when to write alt text on images. An image's alternative description shouldn't ever include words like "image" because it's already an image role. The description needs to provide the same value that the image itself provides.
  • you don't need all these extra divs. The whole component is one div, all text content should be in another (a child of the first) and the last div is for the preparation section because that has a different background colour. You don't need any others. Keep it simple. All these extra divs do is make you need more work in the styling.
  • strong is the tag for bold emphasis, not b
  • headings should stay in hierarchical order. So preparation is a h2 not h3.
  • in the table, it's essential to use header cells (th) for header cell content. These should also have a scope="row" to make it clear they are row headers.
  • the p Google font preconnect links must be before the font links. Order matters in the html head!
  • this should only have one css file, definitely not two.
  • make sure you update your attribution link to your frontend mentor profile page or github profile page.
  • get into the habit of including a full modern css reset at the start of the styles in every project you do. Look up Andy Bell's or Josh Comeau's —read and understand it then use one of those.
  • font size must never be in px. Use rem. https://fedmentor.dev/posts/font-size-px/.
  • mobile styles should be the default. This is totally broken on mobile. Pay attention to it! There is an article on the same FEDmentor.dev site about how to approach responsive design and media queries which may help you.
  • this component needs a max width in rem.

  Marked as helpful

  0

  ---

  

  vahid11koln•20

  @vahid11kolnPosted 4 days ago

  @grace-snow Thank you for all your suggestions about my first project. I can create this challenge by wordpress. what is your idea? as I said I just started becoming a web developer.

  0

  

  T

  Grace•31,230

  @grace-snowPosted 4 days ago

  @vahid11koln There is definitely no need to use WordPress for this.

  Marked as helpful

  0