Recipe-page-main

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

  • Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

        <div>
          <img
            src="assets/images/image-omelette.jpeg"
            alt="close up shot of an omelette with fillings"
          />
        </div>
  

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  0
• 

  P

  svetikbaihe•150

  @svetikbaihePosted about 2 months ago

  Hi there!

  First of all, congratulations on your first project here!

  Not an expert, just a toddler in front-end ;) I came across your project today and decided to share some thoughts, maybe you can use it for your next practice.

  As for your work overall, you handled it quite well. Great job!

  There are some aspects that might be changed. The first thing that caught my eye is HTML structure. I guess, it's one of the most important things that should be honed first among other things at the beginning of your path as a developer. Consider adding divs where necessary so you can easily style your elements. If you add a wrapper to your header and main section, you will be able to move your content away from the edges and add the needed background to your body. Another option instead of styling the body directly is to add another div and apply styles to it.

  Pay attention to design details such as the border-radius on images, margins, and paddings.

  Talking about responsiveness, mobile-first workflow is definitely worth looking into. It's easy to work with and helps you to scale your project from small devices to big ones.

  Regarding font sizes, I noticed you're using a comma instead of a semicolon, which can lead to a syntax error.

  Also, I recommend working with README and markdown from the start as well. It can be useful in your future career. It would be great if you replaced the default template of README with your own description of the project. And the last thing, comments and other notes should be removed from the project.

  Hope it will be useful for you. Good luck!

  0