Responsive recipe page

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on the completion of your project! 🎉 It's a significant achievement to finish building a responsive recipe page, and you've done an excellent job with the layout and design.

  Here are a few recommendations to take your project to the next level:

  • Consistent Naming: Use a consistent naming convention for your CSS classes to make your code easier to read and maintain. For example, list1, list2, and list3 could follow a more descriptive and unified naming pattern. 🏷️

  • CSS Selectors: Be cautious with the use of commas in your class selectors. For example, in .second-box, .third-box, .fourth-box, if these are meant to be combined styles, the commas are correct, but if it's meant to be a single class with multiple names, they should not be separated by commas. 🔍

  • Font Loading: It looks like there might be an issue with how you're loading your fonts from Google Fonts. Ensure that the link to the font is correct. It should look like this: <link href="https://fonts.googleapis.com/css2?family=Your+Font+Name&display=swap" rel="stylesheet">. 🖋️

  • Avoid Duplication: Your media query at the bottom repeats many styles that are already declared. Instead, only include the styles that need to change at different breakpoints. This keeps your CSS DRY (Don't Repeat Yourself). 📏

  • Semantic HTML: Use more semantic tags where appropriate. For example, <section> could be used to wrap the different sections of the recipe such as ingredients and instructions, instead of <div id="first-box">. 📖

  • Alt Attributes: Make sure to include descriptive alt text for your images. This is important for SEO and accessibility. 🖼️

  • Image Optimization: Ensure that your images are optimized for the web. This helps with the loading times of your page, especially on mobile devices. 🚀

  References for further learning:

  • For naming conventions and CSS best practices: CSS Guidelines
  • For font loading: Google Fonts
  • For writing DRY CSS: Write less, do more
  • For semantic HTML: MDN Web Docs on Semantic HTML
  • For image optimization: Google Developers on Image Optimization

  Keep on coding and refining your skills. Remember, every project is a step forward in your development journey. Your progress is impressive, and I can't wait to see what you build next! 👨‍💻✨

  Marked as helpful

  0

  ---

  

  Ruth•40

  @ruth-chirwaPosted 10 months ago

  @petritnuredini thank you so much for this feedback!! i will definitely look up those links. i have taken note of all what you have written down. this will help me improve in the next project!!

  0