Workit Landing Page - Grid & Flexbox

Community feedback

• 

  kakuhd•60

  @kakuhdPosted over 1 year ago

  Henlo, before you read my feedback please be aware that everyone new to web-dev does some mistakes, so don't be discouraged but rather embrace it - learning part will never go away in your IT career and overtime you'll get better at it :) a few suggestions from my side:

  • desktop design was not implemented, it's all mobile layout for me
  • fonts are not scaled up on desktop screensize
  • the phone hero img looks too small on desktop
  • you can use .container class with max-width so the content on the page is limited vertically to the middle part of the screen (it matters on ultra wide monitors)
  • the light gray background in 1st section (look below the phone img) is white but should be light gray
  • socials at the bottom are not clickable
  • text in the purple div (founder message) should be placed into <p> tags. <span> is used rather for stying some part of a paragraph/header. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
  • instead of the last section you can use <footer> which is exactly for that :)
  • I'd put top navigation and hero section's content into <header> tag, right now it's not semantic
  • for text underline all you have to do is just to wrap text within <span> and add some styling for on :hover for border-bottom: 1px solid --var(your-var-name);
  • I'd avoid calling classes with names (.louis), content may change at some point so always name the class to what it does/represents

  0

  ---

  

  Clinto Bean•130

  @clinto-beanPosted over 1 year ago

  @kakuhd

  Thank you! I didn't even realize until after I had uploaded the files that the features section changes with the display size. I did know that the bio section with the image of the founder was supposed to, but I struggled with positioning. Probably because I did not have a container div with both items in it.

  As for the light gray background, the color is there, but for some reason is far lighter even though I used the color codes directly from the figma design. I didn't realize the underline was that easy until I looked at someone else's solution, lol

  0