Font size
WorksheetsTHIẾT KẾ WEB - BÀI 1
Total questions: 29
Worksheet time: 34mins
Vai trò chính của trình duyệt web trong việc hiển thị trang web là gì?
Gửi yêu cầu đến máy chủ web, nhận và xử lý các tệp HTML, CSS, JavaScript để hiển thị nội dung
Lưu trữ mã nguồn HTML và các tài nguyên của website
Thiết kế giao diện người dùng (UI) cho trang web
Quản lý tên miền và địa chỉ IP của website
Trong quy trình hiển thị trang HTML, bước nào sau đây được thực hiện ngay sau khi phân tích cú pháp HTML?
Tính toán vị trí (Layout)
Phân tích CSS để tạo CSSOM
Tải tài nguyên như hình ảnh và font
Painting (Vẽ)
Công cụ nào sau đây được sử dụng để kiểm tra và chỉnh sửa cấu trúc DOM của một trang web?
Developer Tools (Inspect) của trình duyệt
GitHub
Figma
Visual Studio Code
Vai trò nào sau đây của trang web được đề cập trong bài học? (Chọn 2 đáp án)
Tạo mã nguồn tự động
Lưu trữ cơ sở dữ liệu
Quảng bá thương hiệu
Cung cấp thông tin
Kéo thả để ghép đúng các bước trong quy trình hiển thị trang HTML của trình duyệt web với mô tả tương ứng:
Vẽ các phần tử lên màn hình với màu sắc, văn bản, bóng...
Painting
Tạo Render Tree chứa các phần tử sẽ hiển thị trên màn hình
Kết hợp DOM và CSSOM
Trình duyệt gửi yêu cầu HTTP để tải HTML, CSS, JavaScript
Tải tài nguyên
Xây dựng DOM Tree từ tài liệu HTML
Phân tích cú pháp HTML
Giai đoạn nào trong quy trình xây dựng website xác định mục tiêu, đối tượng người dùng và các chức năng cần thiết?
Kiểm thử
Thiết kế
Triển khai
Lập kế hoạch
Trong giai đoạn thiết kế website, yếu tố nào được ưu tiên để đảm bảo trải nghiệm người dùng tốt?
Tối ưu hóa cơ sở dữ liệu
Viết mã nguồn back-end
Tạo giao diện trực quan và dễ sử dụng (UI/UX)
Kiểm tra hiệu suất tải trang
Mục đích chính của giai đoạn kiểm thử trong quy trình xây dựng website là gì?
Ra mắt website trên môi trường thực tế
Phát hiện lỗi và đảm bảo các tính năng hoạt động đúng trên mọi thiết bị
Thiết kế giao diện người dùng
Cập nhật nội dung website
Kéo thả để ghép đúng các giai đoạn trong quy trình xây dựng website với công cụ hoặc công nghệ thường được sử dụng:
Cập nhật nội dung và xử lý lỗi phát sinh
Bảo trì
Sử dụng công cụ Developer Tools để tìm và sửa lỗi
Kiểm thử
Sử dụng HTML, CSS, JavaScript và các framework như React
Xây dựng
Sử dụng Figma để tạo giao diện mẫu
Thiết kế
Hãy xác định các phát biểu sau là Đúng hay Sai về các hoạt động thuộc giai đoạn bảo trì website:
Cập nhật tính năng theo nhu cầu người dùng là một trong những nhiệm vụ của giai đoạn bảo trì website.
ĐÚNG
SAI
Xác định mục tiêu của website là hoạt động điển hình trong giai đoạn bảo trì.
ĐÚNG
SAI
Thiết kế lại giao diện người dùng từ đầu là nhiệm vụ chính của giai đoạn bảo trì.
ĐÚNG
SAI
Xử lý lỗi phát sinh trong quá trình sử dụng là một phần quan trọng của bảo trì website.
ĐÚNG
SAI
Bạn cần chia sẻ thiết kế giao diện mẫu với nhóm lập trình viên để họ bắt đầu viết mã. Hành động nào sau đây là phù hợp nhất trong Figma?
Sử dụng Inspect Panel để cung cấp thông số kỹ thuật
Tạo một Frame mới với kích thước khác
Sử dụng Auto Layout để điều chỉnh bố cục
Thêm hiệu ứng hoạt hình bằng plugin Figmotion
Khi thiết kế giao diện mẫu, bạn muốn đảm bảo bố cục tự động điều chỉnh khi nội dung thay đổi. Tính năng nào của Figma nên được sử dụng?
Assets
Layers
Prototype
Auto Layout
Bạn đang thiết kế phần Header của một trang web trong Figma. Yếu tố nào sau đây nên được đặt ở góc trên bên trái để thu hút sự chú ý của người dùng?
Menu điều hướng
Nút kêu gọi hành động (CTA)
Logo thương hiệu
Thông tin liên hệ
Kéo thả để ghép đúng các tính năng của Figma với mục đích sử dụng trong thiết kế giao diện mẫu:
Định nghĩa màu sắc và kiểu chữ để đảm bảo tính nhất quán
Style Guide
Cung cấp thông số kỹ thuật cho lập trình viên
Inspect Panel
Tạo thành phần tái sử dụng như nút bấm
Components
Tạo bố cục tự động điều chỉnh khi nội dung thay đổi
Auto Layout
Hãy xác định các phát biểu sau là Đúng hay Sai về hành động nên thực hiện khi xuất và chia sẻ thiết kế giao diện mẫu từ Figma cho lập trình viên:
Tạo Frame mới cho thiết bị khác là việc bắt buộc để chia sẻ thiết kế với lập trình viên.
ĐÚNG
SAI
Xuất hình ảnh dưới định dạng SVG hoặc PNG giúp lập trình viên dễ dàng sử dụng trong quá trình phát triển giao diện.
ĐÚNG
SAI
Sử dụng Inspect Panel trong Figma để cung cấp thông số kỹ thuật như màu sắc, kích thước, font chữ,... cho lập trình viên.
ĐÚNG
SAI
Tạo hoạt hình bằng Figmotion là bước cần thiết trước khi bàn giao thiết kế cho lập trình viên.
ĐÚNG
SAI
Thành phần nào sau đây là một phần của cấu trúc cây DOM?
Element Nodes
Tên miền (Domain)
Giao thức HTTP
Web Hosting
Những hoạt động nào sau đây thuộc về giai đoạn lập kế hoạch trong quy trình xây dựng website? (Chọn 2 đáp án)
Xác định mục tiêu của website
Viết mã nguồn back-end
Phân tích đối tượng người dùng
Kiểm tra khả năng tương thích trên các trình duyệt
Khi sử dụng Figma để thiết kế giao diện mẫu, bạn muốn tạo một nút bấm có thể tái sử dụng trên nhiều trang. Tính năng nào của Figma bạn nên sử dụng?
Components
Grid
Inspect Panel
Auto Layout
Khi thiết kế giao diện mẫu bằng Figma, những hành động nào sau đây giúp đảm bảo tính nhất quán trong thiết kế? (Chọn 2 đáp án)
Xuất file dưới định dạng PDF
Tạo Style Guide để định nghĩa màu sắc và kiểu chữ
Sử dụng Components để tái sử dụng các thành phần như nút bấm
Sử dụng plugin Figmotion để tạo hoạt hình
Trong giai đoạn xây dựng website, phần front-end chủ yếu liên quan đến việc gì?
Quản lý cơ sở dữ liệu và server
Kiểm tra bảo mật của website
Tích hợp hệ thống kiểm soát phiên bản
Xây dựng giao diện người dùng với HTML, CSS, JavaScript
Những thành phần nào sau đây là cần thiết để một website hoạt động? (Chọn 2)
Tên miền (Domain)
Auto Layout trong Figma
Source Code (Mã nguồn)
Trình duyệt web
Kéo thả để ghép đúng các loại nút trong cấu trúc cây DOM với định nghĩa của chúng:
Đại diện cho nội dung văn bản trong các thẻ HTML
Text Nodes
Đại diện cho các thuộc tính của thẻ HTML (như id, class, href)
Attribute Nodes
Đại diện cho các thẻ HTML (như div, span)
Element Nodes
Giai đoạn triển khai website bao gồm hoạt động nào sau đây?
Phân tích hành vi người dùng để xác định mục tiêu
Đưa website lên máy chủ và kiểm tra lần cuối trước khi công khai
Thiết kế giao diện bằng Figma
Sửa lỗi mã nguồn JavaScript
Hãy xác định các phát biểu sau là Đúng hay Sai về các thành phần nên có trong phần Hero section khi thiết kế giao diện mẫu trong Figma:
Hình ảnh nổi bật là một thành phần quan trọng trong Hero section để thu hút sự chú ý người dùng
ĐÚNG
SAI
Thông điệp chính của trang web nên được thể hiện rõ ràng trong Hero section.
ĐÚNG
SAI
Logo thương hiệu luôn phải được đặt trong Hero section của trang web.
ĐÚNG
SAI
Thông tin liên hệ thường được đặt trong Hero section để người dùng dễ thấy nhất
ĐÚNG
SAI
Hãy xác định các phát biểu sau là Đúng hay Sai về các yếu tố được tập trung trong giai đoạn thiết kế website để cải thiện trải nghiệm người dùng:
Tối ưu hóa tốc độ tải trang là yếu tố chính được ưu tiên trong giai đoạn thiết kế trải nghiệm người dùng.
ĐÚNG
SAI
Thiết kế trải nghiệm người dùng (UX) là yếu tố cốt lõi được chú trọng để nâng cao mức độ hài lòng của người dùng.
ĐÚNG
SAI
Thiết kế giao diện người dùng (UI) là một phần quan trọng nhằm cải thiện trải nghiệm người dùng.
ĐÚNG
SAI
Kiểm thử bảo mật là một bước quan trọng để tăng cường UX trong giai đoạn thiết kế.
ĐÚNG
SAI
Document Object Model (DOM) là gì?
Một công cụ thiết kế giao diện web
Một giao diện lập trình ứng dụng (API) biểu diễn tài liệu HTML dưới dạng cây phân cấp các nút
Một hệ thống quản lý cơ sở dữ liệu cho website
Một giao thức truyền tải dữ liệu giữa máy chủ và trình duyệt
Kéo thả để ghép dúng các bước thiết kế giao diện mẫu trong Figma với mô tả tương ứng:
Tạo bố cục linh hoạt và mô phỏng tương tác người dùng
Sử dụng Auto Layout và Prototype
Đăng ký tài khoản tại www.figma.com và khám phá giao diện
Tạo tài khoản và làm quen với giao diện
Sử dụng Frame để xác định kích thước và bố cục cho thiết bị
Thiết lập kích thước khung làm việc
Tạo các nút bấm, văn bản, hình ảnh và sử dụng Components
Thêm và quản lý thành phần thiết kế
Trang web là gì?
Một máy chủ lưu trữ dữ liệu của website
Một chương trình phần mềm chạy trên trình duyệt web
Một văn bản được viết bằng HTML hoặc XHTML, hiển thị trên World Wide Web thông qua trình duyệt
Một giao diện thiết kế đồ họa cho ứng dụng di động
Bạn đang thiết kế giao diện mẫu cho một trang web thương mại điện tử bằng Figma. Để đảm bảo tính nhất quán trong thiết kế, bước nào sau đây bạn nên thực hiện đầu tiên?
Tạo Style Guide với màu sắc và kiểu chữ
Sử dụng plugin Unsplash để thêm hình ảnh sản phẩm
Xuất tài nguyên dưới định dạng PNG
Thiết lập Prototype để kiểm tra tương tác
