- Cho một hình thiết kế như này với tên gọi trong tiếng Anh là
cardáp dụng BEM để kể ra block, elements, và modifier nếu có: https://static.collectui.com/shots/2451336/daily-ui-challenge-011-large ví dụ:card__image - Tạo một khối có class là
boxcó độ rộng và chiều cao lần lượt là200x300có màu nền là#ffa400và chữ bất kỳ màu đen, border màu vàng, padding 10px, margin 15px bo góc 4px, chữ canh giữa. Lưu ý sử dụng đơn vịrem - Tạo một khối có đoạn chữ rất dài bât kỳ, có độ rộng tối đa là
500pxhiển thị 3 hàng kết hợp dấu 3 chấm - Tạo một khối có đoạn chữ rất dài bât kỳ, có độ rộng tối đa là
100pxhiển thị 1 hàng kết hợp dấu 3 chấm - Cho một hình thiết kế như này, gọi là
producthiểu về BEM và liệt kê ra các class về block, elements, modifer nếu có: https://static.collectui.com/shots/2414184/travel-bag-detail-spare-time-fun-large ví dụ:product__container - Tạo một khối có độ rộng và chiều cao lần lượt là
100vw100vhcho hình nền bất kỳ, yêu cầu phủ toàn khối, canh góc bên phải, không có lặp lại - Tạo một khối có độ rộng và chiêu cao tương ứng là
400x400và cho hình ảnh hiển thị bên trong, yêu cầu khối này là hình tròn, và hình ảnh nằm trọn bên trong, không được méo, không được tràn ra ngoài, gợi ý dùngborder-radiusvàoverflow:hidden - Chèn font từ Google vào bài tập sử dụng Fonts
Robotovới các độ đậm là400và600 - Chỉ là yêu cầu: phải sử dụng đơn vị
remcho hợp lý, không sử dụngpx, sử dụngbox-sizingđể hiển thị cho đúng kích thước,