Used FlexBox

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  Hey @med0ghaza lovely job here!! 🙌 the page looks lovely and I think you've done a great job over all. Here's a few things you might like to consider:

  1. Buttons vs links. On your page you have a link inside a button. This won't work. I saw it when tabbing through the page, but I see the html validator also picked this up. You have to choose one or the other - the most important thing is what the element will do not what it looks like. This page has a great summary and lots of useful links on this: https://css-tricks.com/buttons-vs-links/

  2. Heading order. Again picked up by the validator, but in case it wasn't clear it is saying that you should use the <h1> headings as main headings of your web page (as you have done), followed by the <h2> headings, then the less important <h3> headings, and so on, without skipping a level.

  This is really important as many people using assistive tech to access your pages will navigate the site based on the heading structure. At the moment this wouldn’t work with your HTML.

  I approach this by first laying out the page using only HTML and only thinking about the document structure, not design at all, and then once done returning to the page and using CSS to make things look how they should. (This will also help with the button vs link issue above)

  We shouldn’t use headings to make text look BIG or bold. Use them only for setting out the heading of your document and to show the document structure, and then change things up with CSS after that.

  3. The icon links at the bottom of the page need a title, and aria-label or something that will announce to people using assistive tech where the links will go - at the moment there is not way for them to find out.

  This is all behind the scenes stuff, but worth thinking about and getting in good habits at this stage makes thinking about this kind of stuff automatic later on and just part of your dev process.

  Cheers 👋

  Dave

  Marked as helpful

  2

  ---

  

  medghazaly•200

  @med-ghazaPosted almost 3 years ago

  @dwhenson Thanks For those adices

  0
• Account deleted

  Hi there 👋 Congratulate on finishing your project 🎉. You did a great job 🔨

  I give some suggestions that I hope help you take your project to the next level 📈. There are no issues in your design 👌. But you can improve your code by fixing some HTML issues. For more information click on VIEW REPORT button just under the screenshot

  Happy coding ☕

  Marked as helpful

  1

  ---

  

  medghazaly•200

  @med-ghazaPosted almost 3 years ago

  @maqsudtolipov Thanks Bro

  1