Flexbox solution

Community feedback

• 

  Walter Sono•660

  @waltersono

  Posted about 4 years ago

  Hello David-ODB57

  Nice work, the design looks good and you have organized your code. That is good.

  Here are my suggestions:

  • Add a border to the buttons before hover

    • Because you added a border on hover, when you hover the button it grows and does not look good

  • Add a transition on button hover

    • This will make the hover effect smooth

  • Fix the attribution text

    • Instead of making the body flex, add a container and make it flex
    • Then move the attribution text outside of this container to it can be below of your solution

  • Add media queries at the right breakpoints

    • I believe the best breakpoints to add mediaqueries are when your design starts to break
    • You design starts to breaks at 1116px but you only added at 600px, this is not good
    • Dont rely on devices dimensions because that changes every time, you do not want to go back to your websites to change your break points every time a device with new dimensions comes along

  • Provide an alternative text to each image

    • Alternative texts help screen reader users to understand your content despite their difficulty to see

  • Use links for links and buttons for buttons

    • I think that instead of using a button you should have used a link
    • Imagine if this was a real website, you would have write a JS script or backend script to be able to redirect the user to a "learn more" page

  Ok, this is a lot

  But that will make your next projects better.

  Hope this is helpful.Keep the good work

  11

  Marked as helpful
• 

  kugi•265

  @askugii

  Posted about 4 years ago

  Great job!

  U can add margin between images and headings if u want, but not necessary.U can make images bigger and decrease the font size of the headers.

  Also body tag is displayed as flex, and default value is row so if u add "flex-direction: column;" attribution section will be at bottom.

  01