Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first page recipe page using HTML,CSS

@Praveen3009

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

https429 70

@https429

Posted

Hey there, Boss!

Your code is already pretty solid, but there are always ways to improve or tweak things. Here are a few suggestions:

  1. Alt Text for Images: You've got an image tag with an empty alt attribute. It's a good practice to provide descriptive alt text for images. This helps with accessibility and SEO. For example, you could use alt="Omelette".

  2. Semantic HTML: Consider using more semantic HTML tags. For example, you could use <section> tags to group related content together, like the ingredients and instructions. This can improve accessibility and SEO.

  3. CSS Variables: You're using some colors multiple times in your CSS. You could define these as CSS variables at the top of your file. This makes it easier to maintain and change your color scheme.

  4. Font Loading: You're loading two different fonts using @font-face. Consider using a service like Google Fonts or Adobe Fonts. They can handle the font loading for you and can help improve performance.

  5. Responsive Design: You've got a media query for screens larger than 768px, which is great! You might want to consider adding more breakpoints for different screen sizes to make your design even more responsive.

  6. CSS Organization: Consider organizing your CSS in a more structured way. You could group styles by component or follow a methodology like BEM or SMACSS.

Remember, these are just suggestions. Your code is already pretty good! Keep up the good work, mate! 🚀

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord