Omelette recipe challange

Community feedback

• 

  P

  Rahexx•900

  @RahexxPosted 4 months ago

  Yes, you are making progress! :) This challenge was tougher than your earlier challenges, so overall, good job. I have some advice for you that you can use for your next challenge:

  1. Great that you used tags like main, but you can group elements like instructions under one tag, e.g., section. This would help you divide the project into bigger elements, and you can replace div. For example, for the nutrition list, you used div, but this could be a section tag.

  2. For the img tag, the alt attribute should never be empty. This is for accessibility: if someone has vision problems and uses a screen reader, they won't know there is a picture. Additionally, the alt should describe what is in the picture. My example alt for an image might look like this: "Image of an omelette with some green vegetables and tomatoes on a white plate." Thanks to that, someone will know what the picture shows without seeing it. Of course, I made a mistake here because colors are unnecessary—"green vegetables" or "white plate" could be without color information.

  3. I know that I wrote to you about BEM, but even without using this methodology, it is great to use classes. This makes it easier to read what you're styling because styling only tags is more difficult; you can lose track of what you’re doing. When you have a class like .ingredients, you know exactly what you’re styling, and if you have something like .ingredients_list, you know what element it is.

  4. Make sure that in your project, there are no whitespaces like 22g because it creates problems with positioning. If you want to create some spacing for elements like in .nutrition-list, make sure there are no whitespaces in tags. Set them a width, and then set spacing. If each element has the same width and text alignment, you can properly align them with the rest of the elements.

  5. Read about custom properties because then you can use variables in CSS, which allows you to make changes in one place if you make a mistake.

  6. Read about media queries for CSS. This way, you can adjust your design to different screen sizes.

  7. About CSS, please check my solution: Rahexx-RecipePage. This file is written in SCSS, but this project was made before I started using GitHub Actions. You will find a css folder there with CSS files compiled from SCSS. Check how I managed spacing in this project. This SCSS may not follow all best practices, but it can serve as a starting point for learning how to create spacing, use pseudo-elements, implement media queries, and style numbered lists in ol.

  8. You can replace the hr tag with border-bottom or a pseudo-element, like I did.

  Overall, good job, and fingers crossed for your further progress!

  Marked as helpful

  0

  ---

  

  chukwuma jennifer•160

  @jhenniiferPosted 4 months ago

  @Rahexx I appreciate that you take your time critique my work, thank you. I started studying custom properties and BEM after this project. I will incorporate them in my next project

  1

  

  P

  Rahexx•900

  @RahexxPosted 4 months ago

  @jhenniifer I'm happy to hear that. I personally always like good code review, so I try to pass as much knowledge as I can. It's great that you're already learning custom properties and BEM – those will definitely make a big difference in your next projects. Keep it up!

  1
• 

  Sameer Shaikh•60

  @Sameer847Posted 4 months ago

  Please add padding and margins to your projects

  0