Speed run grid layout using SASS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hey,

  Well done on completing this challenge, it looks nice! I'd suggest you to spend a bit more time making it look more similar to the original design though, rather than turning it into a speed run! Speed comes with practice anyway, so I wouldn't worry about it too much for now.

  Few things you could do to improve your solution:

  1. You could swap your div called "main" for a main, it would be a bit more semantic that way. The same container has a fixed width and height: the width isn't necessary (it's 100% by default), the height you could swap for min-height: 100vh.

  2. Similar goes for your card. Height rarely needs to be specified (apart from the case mentioned above), the card's height will come naturally from it's children's height, padding, etc. Instead of fixed width max-width would be a better option to increase responsiveness.

  3. Headings: they help to create a clear document outline, so your choice of headings actually matters a lot. There should be only one h1 (would be the best to use it for the "Join our community" here). The text below ("secondaryText") probably isn't really a heading, could just be a p styled differently. And then the "Subscription" and "Why Us" titles could be h2s. You could learn some more by watching Kevin Powell's video, he explains this a lot better than I do.

  4. "contentText": this shouldn't be a paragraph logically. It's a list of items. You could use a ul for this and then an li for each item.

  5. I'd advise against using position: absolute on the footer, as this will make it overlap with the rest of the content on certain screen sizes. The document's natural flow would put this on the bottom anyway.

  6. When it comes to naming, it's worth taking the time to come up with names that are more descriptive of their content. This will save you a lot of time later, when you're writing and navigating through a lengthier code. ^^

  I hope I was able to help a bit. Good luck! ^^

  Marked as helpful

  2

  ---

  

  JoeKooler•120

  @JoeKoolerPosted almost 3 years ago

  @FluffyKas First of all thank you for your kind feedback! ^^ I did the speedrun because I tend to procrastinate if I didn't finish the work in time before I get back to my main job X(.

  The original design font size and weight seems to be a little bit off when I wrote it but it's still my fault for not checking it properly. I see that you've been looking through my code I really appreciate that I hope I didn't harm your eyes with that :D,also thank you for the suggestion it was very detailed I will try to apply them to my work next time

  ps. English is not my first language so it's pretty hard for me to come up with good naming stuff maybe I need to observe other people's code more :P

  0