Landing page with tailwind flexbox and grids

Community feedback

• 

  

  Grace•32,130

  @grace-snowPosted about 2 years ago

  Hi

  You always need to add aria-hidden and focusable false to svgs if used inline, OR accessibly label them (but that is quite unreliable). For example, in your logo it would be better to label the anchor tag with [name of site - Home] than have an inaccessible svg inside there.

  You have some content outside of main here which should never happen. And I am seeing horizontal overflow causing a scroll bar that shouldn't happen. I think this is caused by the grid of items at the bottom of the page having width 100% AND margin-left for some reason.

  As that list of articles at the bottom looks like a numbered list, I would expect to see the ordered list element and some list items there

  You don't need to add aria labels like "read more about..." on the article names. The article names/headings are fine as link text. It's like you're over-engineering a fix there to a problem that doesn't exist.

  You are missing heading elements throughout the html. New should be a heading, as should every article title.

  Read more must be an anchor tag not a button element. They have distinct purposes and it's important to use the correct one for the content. This would trigger navigation so must be an anchor

  Overall, you seem to be making the layout much harder than it needs to be. It's like you're throwing margins all over the place to get it to look just about right without taking any kind of systematic approach. I recommend stripping away all margin and padding classes, rethink how you're using grid/flex/margin/padding, re-read about the box model, and make use of properties like gap. Remember, padding is for internal spacing within boxes, margin is for external spacing between elements. It would also help you if you created/used a wrapper class that sets a max width, side padding and margin auto on your content. You can reuse that class wherever it's needed and it would help get you away from this bad habit of adding left margin on multiple elements

  Marked as helpful

  0

  ---

  

  Pierluigi Ferro•110

  @weppamiPosted about 2 years ago

  @grace-snow thank you ! this is what i am looking for here. Appreciate the detailed analysis and will go through as suggested. Thanks again !

  0