Web #1
Web #2
🟦 PHẦN 1: HTML + CSS (70 điểm)
Câu 1 (20 điểm) – Cấu trúc HTML
Tạo trang web với tiêu đề:
👉 “JobConnect – Kết nối cơ hội nghề nghiệp”
Yêu cầu:
Trang gồm các phần:
- Header: logo + tên website
-
Navigation (menu):
- Trang chủ
- Việc làm
- Nhà tuyển dụng
- Liên hệ
-
Main:
- Section 1: Danh sách việc làm
- Section 2: Giới thiệu website
- Footer: thông tin bản quyền
Bắt buộc:
-
Dùng semantic tags:
header,nav,main,section,footer -
Có:
- Ít nhất 2 job (mỗi job gồm: tiêu đề, mô tả, nút “Ứng tuyển”)
- 1 ảnh minh họa
📊 Chấm điểm:
- Đúng cấu trúc: 10đ
- Semantic chuẩn: 5đ
- Nội dung đầy đủ: 5đ
Câu 2 (25 điểm) – CSS Layout + Giao diện
Yêu cầu:
- Menu nằm ngang
- Danh sách việc làm hiển thị dạng card
- Các job hiển thị theo dạng grid (2–3 cột)
- Header nổi bật
- Footer nằm dưới cùng
Bắt buộc:
- Dùng Flexbox hoặc Grid
-
Card có:
- border
- shadow
- hover effect
📊 Chấm điểm:
- Layout đúng (grid/flex): 10đ
- Card job đẹp: 5đ
- Hover hiệu ứng: 5đ
- Tổng thể UI: 5đ
Câu 3 (15 điểm) – Form ứng tuyển
Tạo form:
Gồm:
- Họ tên
- Số điện thoại
- Chọn vị trí ứng tuyển (select)
- Nội dung
CSS:
- Input đẹp
- Focus đổi màu
- Button hover
📊 Chấm điểm:
- HTML form đúng: 5đ
- CSS input/button: 5đ
- UX (focus/hover): 5đ
Câu 4 (10 điểm) – Responsive
Thiết kế responsive:
Mobile:
- Menu → dọc
- Job → 1 cột
👉 Dùng:
@media (max-width: 768px)
📊 Chấm điểm:
- Media query: 5đ
- Hiển thị đúng: 5đ
🟨 PHẦN 2: JAVASCRIPT (30 điểm)
Câu 5 (10 điểm) – DOM + Interaction
Yêu cầu:
-
Click nút “Ứng tuyển” → hiển thị alert:
👉 “Bạn đã chọn ứng tuyển!” - Hover vào job → đổi màu nền
📊 Chấm điểm:
- DOM đúng: 5đ
- Event xử lý đúng: 5đ
Câu 6 (10 điểm) – Validation Form
Kiểm tra:
- Không để trống
- Email đúng định dạng
- SĐT là số
Hiển thị lỗi dưới input
📊 Chấm điểm:
- Validate đầy đủ: 5đ
- Hiển thị lỗi rõ: 5đ
Câu 7 (10 điểm) – Lọc việc làm (Logic JS)
Yêu cầu:
- Có input tìm kiếm
- Khi nhập → lọc job theo tên
📊 Chấm điểm:
- Lọc đúng: 5đ
- Code rõ ràng: 5đ
