Fylo landing page with two column layout using flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Iyanu

  This looks good but not quite matching the designs yet. The nav links are wrapping onto two lines for me (sign on one line, in on next line) on mobile, for example. Also, pay particular attention to the height, padding, border radius and shadow on inputs and buttons.

  Your html is pretty well structured - wl done! Just a few small issues :

  • take another look at alt text. Think if you turned images of 1) is this image needed and 2) do I understand what it is from that desceiption
  • this should be a link not input <input type="text" placeholder="See how Fylo works"><span class="productive-arrow"><img src="./images/icon-arrow.svg" alt="arrow"></span>
  • in your footer you've used two uls for the main links when it should be one list. Look into column properties to display it as columns on desktop
  • add accessible link names to icon-only links

  Hope thats helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  A few more tips after looking at css

  • I don't think you've applied a color to your social links, may be why they're not showing up?
  • youre nesting css heavily at the moment and using element selectors sometimes, neither of these is best practice. Try to classes on every element you want to style, and use single class selectors in css
  • I notice you're using a lot of explicit margins in pixels on elements. Try to use consistent margins on layout blocks (eg. Margin auto on the sides to center content) or text blocks (eg all paragraphs get a default margin top). Let the units like flex-basis, fr, max or min widths etc define how big or small stuff should be, not margins

  Asking about class naming, some of that comes down to personal preference. I could suggest naming conventions for you, but it's probably better if you read up about CSS naming conventions yourself and see what you like best. Eg I like BEM, others don't. The goal of any approach is usually to create reusable classes, or reusable chunks of css that you can apply to classes.

  Good luck with it

  0