Feedback on carbonara tribute page

Project Feedback
#1

Hello everyone! I’m Kal and this is my first project here. It was really fun building it and cant wait to continue with the rest of the projects. Still have some stuff to add in the origin section, but everything else I think is ok. Any feedback or suggestions are trully welcome!
Carbonara tribute page

#2

Hi there, welcome to the forum !

Your page looks good, it’s responsive and passes all the tests, good job :partying_face:

I’d maybe improve readability of the “Recipe” section:

recipe-2
recipe-21267×505 82.5 KB

recipe-1
recipe-11269×668 80.2 KB

#3

Hey there! Happy to be here!
Thank you very much! It looks way more better and easier to read the way you’re suggesting.

#4

Your page looks good @kal.pap. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • In addition to being used incorrectly in your code, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia” is not accessible
#5

Thank you very much. Changed some things and I believe its better now, and simpler.
I see now that getting feedback on your code is as important as the lessons. Thanks again!

#6

Looks better but I’m still seeing a <br> element and a link that’s not accessible.

  • Rather than using the br element you can nest an unordered list within the ordered list to indent that sub-instruction.
  • Please read the provided links to learn about accessibility. Anyone using a screen reader is just going to hear “wikipedia entry” and it won’t mean a thing.
#7

Done and done. I think so. I used the “title” attribute inside the link tag, so that should be visible for screen readers right?

#8

I was thinking instead of just removing the br element you’d do something like;

<ol>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> 
    <ul>
      <li> </li>
    </ul>
   </li>
  <li> </li>
  </ol>

but you’re styling so you do how you want to do.

Not really. With the title attribute someone has to hover over the link and they’ll see the tooltip provided. I don’t believe screen readers read those. Did you read the provided links?
And now you’ve changed it back to “wikipedia”

#9

Yeah I understood what you were telling me with the nested lists, but didn’t like the styling, so I just removed the br element. I guess I misanderstood and thought that the title attribute did the trick. Just changed the link text to something more self explanatory.

1 Like