CSS Flexbox, CSS, HTML

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Both desktop and mobile layout seems pretty good.

  Regarding your question:

  1. When thinking about whether to use flexbox or grid depends on the layout of what you want to build. For example, like this challenge, there are 3 boxes which is aligned only in one dimensional, one dimensional where it is one way, like this one, it is only straight, flexbox is ideal because flexbox are occasionally used on this kind of structure. On the other hand, grid, grid is more used when the structure or the pattern is most likely 2 dimensional. 2 dimensional like:

  [] [] []
  [] [] []
  

  Grid is really useful when you want to make different layouts:

  [] [     ]    []
  [     ]  []    []
  

  But sometimes flexbox can also achieve what grid does, it depends on whether where you are comfortable to use.

  Aside from that, some suggestions:

  • Have a main tag that wraps all the element, so that screen reader will navigate properly when searching for landmark, also it will announce your h1 properly instead of searching for headings
  • Fonts could be a bit bigger for more clarity, especially in desktop view.
  • I wouldn't use ul on the stars. If you used it that way, when a screen reader user navigate on a list, it will just confuse the user because the items on your list is not really data, rather it is just icons. I would just use div on them, better yet, put all the stars as a background on the wrapper.
  • the names of the person including the description of the person could be wrap inside a h2 or h3.
  • article or blockquote could wrap as well the whole testimonials, one article/blockquote per testimonial.

  Other than that, great job.

  Marked as helpful

  1

  ---

  

  Bryan Sanchez•590

  @0-BSCodePosted over 3 years ago

  @pikamart Thank you for this! It's a lot to take in but I'll definitely use these for my next challenges.

  0