Fylo dark theme landing page | SASS | 7-1 Architecture | Mobile First

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted almost 4 years ago

  Hey @krisp-dev I just posted a long comment here, but it got lost when I tried to post it so I'm sorry if this is a bit short! Overall great job 🙌 here's some points to think about:

  1. You might want to think about stopping the page from spreading too wide a very large screens. There are many ways to do this but I set a grid on the body element, with three columns, as using a class selector as follows:

  .center-content {
  	display: grid;
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
  }
  
  .center-content > *  {
  	grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

  The second part positions all direct children of the body in this nicely sized middle column. In my case, mostly, my header, main, and footer the middle column, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this constraint if you need to.

  Other people use container classes to do the same thing. Either way it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  2. On form validation, at the moment the in built validation runs on focus so I get an error before I even type anything. I think the inbuilt validation is a good fallback for some progressively enhanced validation using JS (if you are comfortable doing that...)

  For example, I would typically do the following:

  • On page load, add a listener to the form to i) prevent it being submitted by default, ii) add a 'novalidate' attribute to the form (as we are doing this with JS now, but if JS fails the inbuilt validation would still work), and then run a function to check the email validity.

  • Not sure how comfortable you are with JS, but then if the email validity fails, I then add another listener on the ‘change event to check the input every time someone types in the input, this then checks when the email is valid immediately and removes the error styles.

  Sorry if that sounds hectic, you can see an example in my code here:https://github.com/dwhenson/frontend-mentor/blob/master/28.%20fylo-landing-page/js/main.js

  Having just looked at this again, I would change the initial event listener to listen for the submit event, rather than click, and I would change the keydown event to change - as this will also validate if people paste a value in rather than type.

  Overall though lovely job!

  Cheers 👋

  Dave

  23

  Marked as helpful