EngineerHamziey Four card Feature Solution

Community feedback

• 

  T

  Grace•31,830

  @grace-snowPosted about 2 years ago

  Hi

  the way you've set up the grid isn't right in this and would result in misalignment if a content editor changed the amount of text in the cards, or if users changed font size. Change the last card to have double the amount of text in it for example - see how the first and last box are no longer the same height on desktop? The grid alignment is broken.

  The reason is because you only have 2 rows when you should have 4. You should be placing the cards so they sit (fill) exactly in their grid area.

  Like this:

  grid-template-areas:
    " . team . " 
    "superv team  calc" 
    "superv karma calc" 
    " . karma . ";
  

  (The dots are how you leave a grid area empty in grid-template-areas)

  Marked as helpful

  1

  ---

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted about 2 years ago

  @grace-snow thanks so much 😊 this is priceless Seriously back then, I don't even know how it worked.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Hamzat Lawal! 👋

  Great job on this challenge! You managed to use CSS grid for the layout! Awesome! 🙌

  I have some suggestions.

  • I notice an interesting thing in the head tag. There are two link tags. I guess the purpose of doing this is to optimize render-blocking assets. But, I don't think it's going to be beneficial if the file size of the CSS is not huge. Currently, each stylesheet takes around 400ms (time for the server to respond + content download). As a result, it ended up with 800ms to download both stylesheets. So, I would recommend having one CSS file especially if the CSS file is really small to gain performance benefits.
  • I would recommend wrapping the "Reliable, efficient delivery powered by technology" with one heading tag. I think it makes sense to be read as one sentence, don't you think so?
  • At 768px width, the cards are too narrow. So, I would recommend adjusting the breakpoint of the media query.

  That's it! I hope you find this useful! Happy coding! 😁

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EngineerHamziey One thing that I forget to say earlier is that the body background color is not white. If you see at the design comparison, you will notice that the original design has darker background color compare to the site. So, I recommend changing the background color of the body element to match your site with the design. 😉

  Marked as helpful

  1

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @vanzasetia Thanks so much for your recommendation 😁, I think I'll probably add tablet version to it. And I'll merge the CSS back. I was trying to make the the file look clean and standard in general 🤠 that's why I split up the CSS earlier.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EngineerHamziey I don't know that splitting up CSS code into multiple files is considered as "clean and standard" CSS. But, in my experience, I usually see people have one CSS file whenever possible.

  Also, could you explain the "clean" CSS that you are talking about? I am curious to learn more about writing clean CSS.

  Marked as helpful

  1

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @vanzasetia 😊 I actually meant that it was my believe that separating the stylesheet that way is just a standard way of organizing your files, and I thought it's most important, but after learning from your comment I observed that it's not necessary when the file is small since it could be a disadvantage when the file is small.

  • How do you measure the time it takes to download?
  • what's the best tool you use to ensure pixel perfect design? I used this chrome pixel perfect extension but it doesn't seem to work fine.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EngineerHamziey Okay, I get it. 🙂

  I use the developer tool to see how long it takes to download the CSS. You can do that as well by opening the dev tool and the go the the "Network" tab. After that, hard refresh the page (if you are on Windows, hold Ctrl + Shift then hit R). Then, you will see how long it takes to download the page, the CSS, and all other assets as well.

  The pixel-perfect extension also doesn't work for me. 😅

  I would not recommend focusing on trying to make your solution to be "pixel-perfect". It's not something that is actually possible (to be truly "pixel-perfect). I would recommend focusing on the code quality instead. Also, as long as your solution looks similar, that's already good enough.

  Marked as helpful

  1

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @vanzasetia thanks so much

  1

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @vanzasetia 😂 😘 thanks for indirectly introducing me to Josh W Comeau, I have learnt alot from this and his other blog post, also the one you shared on slack. Thanks boss 😁☺️

  1