HTML CSS PRO - PROJECT 1

UI - Design

Cách phân tích dự án:

• Từ tổng quát đến chi tiết.
• Từ trái sang phải.

Notes:

• Set layout bằng việc set WIDTH & MARGIN LEFT RIGHT AUTO
• Hai Button hoặc hai gì đó đi cùng nhau thì nên bọc lại bằng thẻ DIV
• Khoảng cách ở cách thẻ a nên dùng padding vì tạo UX thân thiện hơn, dễ bấm hơn.
• Dùng Padding để tạo chiều cao của nút.
• Đặt biến CSS cho màu chủ đạo.
• Ảnh chụp nên chọn nhiều ảnh với kích thước khác nhau.
• Sử dụng biết để reuse trong css: -webkit-line-clamp: var(--line-clamp, 2);
• Dịch chuyển trục X 50% của chính nó: transform: translateX(-50%);
• Tạo khoảng cách giữa các flex_item : gap: x;
• Giữ đúng tỉ lệ hình ảnh: width 100% & object-fit: cover;
• Thẻ cha có display flex, thẻ con có thể đặt được width, height