Four Card page using HTML and CSS.

Community feedback

• 

  Nasratullah Talash•255

  @nasrattPosted over 4 years ago

  great work! just have a look to your website when the resolution is between 1200 - 1215 px, it is a minor problem. your cards have not normal behaviour.

  2

  ---

  

  Oka Wibawa•340

  @okawibawaPosted over 4 years ago

  @NasratTalash Yeah I noticed that too, but when I was about to fix it it somehow disappears. I will fix it later, thanks!

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work, Oka, and congrats on submitting your first solution to the site! Your code looks great. Here are a couple of small pointers on your CSS:

  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

  I hope this helps. Keep up the great work! 👍

  1

  ---

  

  Oka Wibawa•340

  @okawibawaPosted over 4 years ago

  @mattstuddert Thank you so much for the feedback! I'll keep that in mind! Truth be told, I'm still a little bit confused regarding min-width and max-width, I'll look more to it today. Once again thank you!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @okawibawa no problem at all. If you ever have any questions please feel free to message me 🙂

  1

  

  Oka Wibawa•340

  @okawibawaPosted over 4 years ago

  @mattstuddert Hi Matt, I'm sorry for the straightforwardness but I have a few questions. If I want to make a section in my page that is equal to the viewport's height, should I use vh? Because I saw in one of your replies where you suggested to avoid vh as possible. Like for example the Four Card Feature page that I made, if I open it on my laptop it becomes scroll-able (vertically), not that it's a bad thing (right?) but it would've been much better if the whole content fits the screen. I did some research but I kind of want to hear your opinion on it. Thanks in advance!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @okawibawa no problem at all! If you want to set a section to 100% the viewport then vh is fine, but it's very rare that you actually want to do that. In the case of this specific challenge, it's OK seeing as it is a single section. But if it were a larger multi-section website you probably wouldn't want/need to use it. I hope that helps!

  1

  

  Oka Wibawa•340

  @okawibawaPosted over 4 years ago

  @mattstuddert Thank you for the quick reply! I also found out a way by setting the HTML height and then set the element height to 100% too, is that a good idea? In the context of responsiveness. I also figured out that if there is some sort of interactions within that element, some of the elements will overflow the viewport’s height. For example the Intro Component challenge, when the state is active, my footer went out of the section and the page becomes scrollable but the image and background color stays the same height as the viewports height. It stresses me out, I definitely do something wrong but I just couldn’t figure it out yet. Once again thank you for responding and sorry for the babbling 😂

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @okawibawa for this challenge it would work fine with it being a single section. vh is typically better to use in the very specific instance of wanting the element to be sized based on the viewport. As you've found out, it can be tricky though when working with a responsive website. As the screen size gets smaller and the content gets taller you can run into those overflow issues. That's why I only recommend using it in very specific circumstances and when you know all of the issues that could occur.

  1

  

  Oka Wibawa•340

  @okawibawaPosted over 4 years ago

  @mattstuddert Thank you for the reply. I was struggling really hard at that part. I just uploaded the solution to the Intro Component page, if you have the time please take look into it and then give me your feedback on it. Thank you so much, Matt!

  0