Design comparison
Solution retrospective
Hi, thanks for taking your time to look at this challenge. I am practicing CSS and HTML as a newbie and hoping to get some feedback from our fellow web designers. In this challenge, I found a few questions to mind:
- When setting up the grid, should I use unit Pixel (px) or Percentage (%)? Both work fine but using percentages may move the context inside and mess up the align-items. Pixel is good and very constant but it doesn't feel responsive(?)
- I am using 2 screens: a 2k and a FullHD screen. I found that the size of the website is not the same on the two screens (Ex: too big on fullHD but small on 2k screen). Should I change them to the same resuluation or is there any standard that I need to take into consideration? Thank you!
Community feedback
- Account deleted
Hello quocbao19982009,
Congratulations on completing this challenge 🥳🎉
You solution looks good and very close to the actual design.
Few suggestions I have here
• use universal selector instead of putting all tags in one place(the universal selector provided by CSS helps in choosing any elements within the HTML page)
*{
margin: 0; padding:0;}
• Use HTML heading tag for headings.(Heading tags are indicators used in HTML to help structure your webpage from an SEO point of view, as well as helping Google to read your piece of content )(h1-h6 )
• Checkout this link for semantic HTML tags (https://www.w3schools.com/html/html5_semantic_elements.asp)
• use fr(fractional unit) when setting up the grid.
• Checkout this link (https://www.geeksforgeeks.org/css-grid-layout-the-fr-unit/)
• For your second question ( I don't have the exact answer) ,but when it comes to 2k screen (as far as I know there is no specific rule to follow)
Great work here 👍
Have fun coding 💻
Marked as helpful3@quocbao19982009Posted over 3 years ago@Nik-web12 Thanks! Really appreciate the feedback!
This helps me gain some new knowledge, I will definitely take your feedback into my practices.
Happy Coding!
0 - @jerry-the-kidPosted over 3 years ago
Chào ông. Ngày xưa tui cũng có những câu hỏi như ông. Thấy tốt là ông cũng đặt câu hỏi như vậy :)) Tui cứ tưởng ai cũng là PX fan :))
Câu 1 : Là ông có thể dùng cả 2 thứ luôn là px và % ông có thể đăt như sau
width: 80%; max-width : 400px. Vì khi vậy khi ông thu nhỏ screen thì vẫn có 400px đến một lúc nó sẽ so sánh 80% với 400px nếu 80% nhỏ hơn 400px thì nó sẽ thu lại theo 80%.
VD :
width : 80%= 375px < 400px thì nó sẽ theo width. cònwidth: 80%= 500px thì nó sẽ theo max width (vì lớn hơn). Viết rút gọn như sau :width : calc(min(80%, 400px)). Rảnh thì ông có thể coi video : https://www.youtube.com/watch?v=U9VF-4euyRo&t=262s
Câu 2 : Theo tui khi đi sâu vô thì ít ai dùng px. Mà thay thế bằng rem sẽ giải đc trường hợp trên. px thì sẽ dùng ở mấy cái ít thay đổi như border, boder-radius.... kiểu vậy.
Đặt bằng rem thì nó sẽ cỡ font của hệ thống vd
html { font-size : 62.5% }thì giờ 1rem = 10px (100% = 16px) ; Rồi ông có thể làm mọi thứ bằng rem
VD :
width: 4rem;=width: 40px
Ở màn hình lớn có chiều dài rộng hơn ông có thể làm @media cho màn hình rộng
html { font-size : 75% }. Giờ 1rem = 12px. Mọi thứ sẽ giãn ra theo rem
Video tham khảo : https://www.youtube.com/watch?v=N5wpD9Ov_To
Marked as helpful1@quocbao19982009Posted over 3 years ago@jerry-carry This is really great! Thanks!
Cảm ơn ông nhé, cho những người mới bắt đầu thì cái feedback này của ông quá tuyệt vời :)) Vậy là khi xài Width thì nên xài Width với Max-width để scale nhưng trong tầm kiểm soát. Còn về đơn vị trong Video nói khá là kĩ. Cảm ơn ông nhiều!
In summary:
font-size: rem width: % in combination with a max-width, ch height: question urself "do i rly need to set height" if yes -> use a min-height padding/margin: rem or em media queries: em
px only for little things like shadows, borders etc.
1@jerry-the-kidPosted over 3 years ago@quocbao19982009 Kinh nghiệm chật vật vs css cả năm trời :)) Mong nó giúp đc ông phần nào. CSS còn dài :)) Tui vẫn đang trau rồi. Chúc ông thành công
0 - @BenjaDotMinPosted over 3 years ago
Hello! Apologies, I am not experienced enough to answer your second question, but I can give insight into your first question.
When it comes to flexbox and grid (especially grid) I would move away from percentages, and in some cases pixels too. If you examine the width of each car section, you will see they are very slightly different widths, because % is not super accurate in this case. However, if you remove your min-widths, and change your car sections (.sedans, .suvs, .luxury) each to flex:1; then that will make them all perfectly even width, and be repsonsive.
If you wanted differing widths, you could set one of the car sections to flex:1.2; for example (but not needed in this design). Flex works out the width relative to each other, in the given parent. So flex:2, would be twice the size of an item with flex:1, etc.
If you want to get into using Grid, I would also recommend using "fr", due to %'s wont work correctly along side the gap rule. Sorry if this is longwinded, I just wanted to give better options than %, or static pixels.
Also, just as a side, if you really want to use %'s, to get more accurate widths, you would need to used something like 33.333%, which really is not pretty and will give you very specific widths like 399.999px wide due to the missing .111%. Where as flex and fr will be perfect.
2
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord