Grid Component using Flexbox

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  Well done Hdev! I applaud you for redoing it, I think it's one of the best ways to really check if you learned something.

  Since this code works I'll just go through it and see if I can pick up on any tiny improvements, which I will list below :)

  1. You used grid-template-rows: 0.25fr 0.25fr;. This is identical to if you used 1fr 1fr, or any 'fr' unit number, as long as both were equal. Best to stick to 1fr for simplicity's sake i think.

  2. I think it's cool you used grid for this project. You can actually use the grid shortcut that I will outline below (I convert your exact code into the shortcut):

  grid:
     "header header" 0.25fr
     "subscription why-us" 0.25fr / 1fr 1fr;
  

  The above code can be read as:

  grid:
     "gridArea gridArea" grid-row-height
     "gridArea gridArea" grid-row-height / grid-template-columns;
  

  3. Quick tip on UI, namely contrast ratio. Your why-us div's background is too light and it makes the text difficult to read. This is actually a major issue in some designs I see people doing (imagine a hero section of a website, bright background and bright text. No matter how great the copyright is (the message), if the user can't read it easily they might very well move on and why shouldn't they?).

  4. Bit of symantic HTML: the why-us reasons are essentially a list. So you could have used <ul> <li></li> </ul> here I think. It would make sense to. It would save you the trouble of clogging up the HTML with <br>s too! And it's just useful to know, if you haven't looked at them already.

  5. Padding Vs Margin: General rule is to use margin when you want to change the position of an element in relation to another element, whilst padding is when you want to change the element's styling in itself (no relation to another element).

  You used padding-bottom mostly to separate elements from one another. Whilst the visual effect may seem similar it is not considered as good practice.

  6. Kudos on using HSL for your colors! The more used to them you get the easier colors become. I made the mistake of not getting used to them and I still end up writing HEX and it just wastes time as HSL is so much easier 😓

  Again, well done on this challenge and for doing it twice :)! I ended up doing the same thing on a sliiiightly bigger project but oh man was it worth it! Lots of learning 😁

  Happy coding!

  1

  ---

  

  Hdev•215

  @hemanuelaPosted over 3 years ago

  @grizhlieCodes Rafal, thank you so much! All your feedbacks were amazing and one of them (about padding-bottom) help me to solve another code that I'm working on xD

  Tks! PS: I saw your projects! I hope one day I can do something like that. Congrats!

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @hemanuela Gotta love 2 for 1 solutions 😎.

  Glad you found my feedback helpful, all I wanted to accomplish with it.

  If you want to do those bigger projects I just have 1 piece of advice, just stick with coding no matter what. At some point you will realise that you have leveled up and can do whatever you want visually. Even without knowing, you'll sort of feel that you can figure it out as you build something.

  And of course - thank you, 1 year ago every project I did was waaaay over my head. Especially JavaScript, I think I was fairly intimidated going into it. The vices of being a perfectionist I guess.

  Happy coding 😁👍

  0