Flexbox solution

Community feedback

• 

  Walter Sono•660

  @waltersonoPosted over 3 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

  Marked as helpful

  1

  ---

  

  David-ODB57•10

  @David-ODB57Posted over 3 years ago

  @waltersono Hi walersono, I made the changes you gave me. I just remove the 'attribution' part. I'm not sure that my media queries are good but i tried to done something.

  0
• 

  kugi•265

  @askugiiPosted over 3 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.

  0

  ---

  

  David-ODB57•10

  @David-ODB57Posted over 3 years ago

  @Bahadr-tech Hi Bahadir, Thanks for the feedback. If you check my github page you'll see there are spaces between image, title and paragraph but not on the preview. I worked on the result that my live server returned me on Firefox with his devtools (adaptive view).I'm confused between my preview and the one from here.

  0