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
• Email
• 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đ