Recipe Page - HTML & CSS

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 10 days ago

  Hi @Dpal88, your solution and code looks good but it has some few issues. Don't worry though as these issues are very easy to fix and is a common mistake when learning. "Mistakes are a part of learning".

  My Tips and Feedback

  1. Consider self-hosting your fonts instead of using Google Fonts. Google Fonts violates privacy laws such as GDPR which can be a problem on larger sites due to lawsuits and it it also slower. I use this handy resource for helping me self host my fonts.
  2. Use the ::marker pseudo-class to change the list styling instead of using ::before.
  3. Use proper semantic HTML. Replace the .container div with a <main> tag instead. The <main> tag signifies the main content of a site and each site should have atleast 1 main tag. There is no need for the <header> or <section> tags as there are already headings. Replace all of the <h3> tags with an <h2> tag, self explanatory since the headings are the same. Also, the .attribution div should be a <footer> tag instead. Use the <strong> tag instead of a span for the bold text.
  4. Use a CSS reset. What a CSS reset does is that it makes your styles look more consistent across devices and browsers since it removes all of the browser default styling. I recommend Andy Bell's or Josh Comeau's CSS reset for this. For this type of project where there are alot of text, use Andy Bell's CSS reset instead. You should also use a CSS reset for all of your projects. You don't have to do anything special since you only need to copy and paste the CSS reset inside your code.
  5. No need for counter-increment for this.

  That's pretty much all and refactor your code after this and I will continue with feedback.

  Marked as helpful

  0

  ---

  

  Dominic P•40

  @Dpal88Posted 10 days ago

  Hi @geomydas ,

  Thank you for all the feedback, I'm gonna work on getting these changes implemented into my code.

  However, I'm a little lost on when I should be using the <header> and <section> tags. Are you able to elaborate a little more on why my usage of those tags are incorrect?

  0
• 

  Saiful Islam•500

  @saifuldtPosted 10 days ago

  hey @Dpal88

  your design is nice But Change some issue *font-size *background-color

  1

  ---

  

  Dominic P•40

  @Dpal88Posted 10 days ago

  Hi @saifuldt ,

  I completely missed that I had the wrong background color, thank you for the heads up!

  0