Gợi ý: - Học viên sử dụng dự án “Online Profile” để hiệu chỉnh. B1 Final Test Instruction TRƯỚC KHI THI > Click vào sandbox bên dưới: > Đặt lại tên sandbox theo tên của mình kèm ngày thi: > Chọn "submit your sandbox" sau khi hoàn thành bài thi! SẢN PHẨM MẪU Dưới đây là một sản phẩm mẫu cho chủ đề: "Online Profile - Albert Einstein". Sample Link: https://app.bsd.education/share/o/v9mwxuv3/ YÊU CẦU ĐỀ Sử dụng template ở bước 2 và dựa vào sản phẩm mẫu, em hãy thiết kế 1 Online Profile của 1 nhà khoa học gồm các tiêu chí sau: > Về thiết kế: ● ● ● Sử dụng palette màu đã cung cấp để thiết kế cho các thành phần chữ và màu nền cho bài. Vị trí và kích cỡ phù hợp Màu sắc hài hoà > Về mặt nội dung: ● Các nội dung nhập vào đúng theo yêu cầu của từng task > Về mặt lập trình: ● ● Các câu lệnh đúng cú pháp Các tính năng hoạt động được > Về mặt kĩ năng số: ● Áp dụng các kiến thức kĩ năng số đã học vào bài bao gồm: bánh xe màu sắc và nguyên lý về màu, kích thước thành phần phù hợp, sự đồng bộ các yếu tố. > Chủ đề gợi ý: ● Nhà khoa học nổi tiếng/ Danh nhân thế giới BẮT ĐẦU THI Task 1 (20 điểm): Thay đổi nội dung và thiết kế header với các yêu cầu sau: ● ● Thêm 1 câu nói nổi tiếng (quote) của nhân vật chính của Online Profile. Thay màu nền tương đồng với màu của bài mẫu. Task 2 (20 điểm): Thay đổi nội dung và thiết kế phần thông tin chung với các yêu cầu sau: ● ● Thay hình đại diện của nhân vật chính của Online Profile. Thêm thông tin cơ bản về nhân vật chính của Online Profile. Task 3 (20 điểm): Thiết kế các yếu tố hình ảnh theo các yêu cầu sau: ● Thiết kế hình ảnh nhân vật phù hợp, đồng bộ phong cách nhân vật, nội dung liên quan và background ● Màu sắc và kích cỡ của yếu tố hình ảnh đồng bộ với tiêu đề và background. Dưới đây là một vài palette màu gợi ý: 1. 2. 3. Task 4 (20 điểm): Điều chỉnh nội dung theo các yêu cầu sau: ● Điều chỉnh nội dung và kích cỡ chữ phù hợp để giới thiệu ngắn về nhân vật trong Online Profile. ● Tạo liên kết dẫn đến 1 video giới thiệu ngắn về nhân vật trong Online Profile. Task 5 (20 điểm): Điều chỉnh thiết kế theo các yêu cầu sau: ● Thêm nút follow và lập trình để khi click vào, nút sẽ thay đổi màu và giá trị chữ thành “followed" theo hướng dẫn sau: o Ở phần HTML, liên kết function “follow()” với nút bằng thuộc tính onclick. o Ở phần JS, tạo 1 function tên follow(). o Bên trong function follow, thêm câu lệnh button.innerHTML = để thay đổi giá trị chữ của nút thành “✓ Followed”.