HTML, CSS

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 💻

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òn width: 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

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.