Tại FPT Polytechnic, triết lý đào tạo “Thực học – Thực nghiệp” không phải là một khẩu hiệu, mà là kim chỉ nam cho mọi hoạt động giảng dạy và học tập. Thay vì lý thuyết suông, sinh viên được “nhúng” mình vào các dự án thực tế ngay từ những môn học đầu tiên. Minh chứng rõ nét nhất chính là sản phẩm website “Sekiro: Shadows Die Twice” – một dự án cá nhân đầy ấn tượng của sinh viên Hồ Tấn Đạt , chuyên ngành Lập trình Game khóa 20.3 tại FPT Polytechnic Cần Thơ, được hoàn thiện trong khuôn khổ môn học “Xây dựng trang web”.
Môn học “Xây dựng trang web” là một trong những môn học nền tảng đầu tiên, đặt viên gạch cho bất kỳ sinh viên IT nào. Môn học trang bị kiến thức cốt lõi về HTML và CSS – hai trụ cột của mọi website trên thế giới. Tuy nhiên, tại FPT Polytechnic, “nền tảng” không có nghĩa là “đơn giản”. Sinh viên được yêu cầu vận dụng toàn bộ kiến thức về cấu trúc, layout, hiệu ứng và tính tương thích để xây dựng một website hoàn chỉnh, có giao diện phức tạp, bám sát các tiêu chuẩn thiết kế hiện đại.
Hồ Tấn Đạt, một sinh viên chuyên ngành Game, đã chọn một chủ đề không thể “chiến” hơn: tựa game “Sekiro: Shadows Die Twice” lừng danh của FromSoftware. Đây là một lựa chọn đầy tham vọng, đòi hỏi một giao diện u tối, sắc lạnh, giàu cảm xúc và đậm chất hành động – một thử thách thực sự cho kỹ năng CSS.
Điều làm nên giá trị của website này không chỉ nằm ở hình ảnh đẹp, mà ở cấu trúc code sạch sẽ, thông minh và ứng dụng hàng loạt kỹ thuật front-end hiện đại. Hãy cùng “giải phẫu” những gì Tấn Đạt đã làm.
Nền tảng vững chắc với HTML5 ngữ nghĩa (Semantic HTML)
Ngay từ tệp index.html, Đạt đã cho thấy sự hiểu biết sâu sắc về tầm quan trọng của cấu trúc. Thay vì sử dụng các thẻ <div> vô tội vạ, bạn đã tận dụng tối đa các thẻ HTML5 ngữ nghĩa:
- <header>, <footer>, <nav>, <section>: Các thẻ này giúp phân vùng trang web một cách rõ ràng. Điều này không chỉ giúp người khác (và chính bản thân) dễ đọc và bảo trì code, mà còn là yếu tố then chốt cho SEO (Tối ưu hóa Công cụ Tìm kiếm) và Accessibility (Khả năng Tiếp cận), giúp các trình đọc màn hình hiểu được cấu trúc trang.
- Cấu trúc <head> chuẩn mực: Trang web được trang bị đầy đủ các thẻ meta quan trọng như charset=”UTF-8″, name=”viewport” (chìa khóa cho Responsive), title và favicon.
Làm chủ Layout hiện đại: Sự kết hợp Flexbox và Grid
Đây chính là điểm sáng kỹ thuật đắt giá nhất của dự án. Nếu như 10 năm trước, các lập trình viên phải “vật lộn” với float hay position để dàn trang, thì Tấn Đạt đã chứng minh khả năng làm chủ hai công nghệ layout mạnh mẽ nhất hiện nay: CSS Flexbox và CSS Grid.
- Flexbox: Được sử dụng một cách linh hoạt cho các thành phần một chiều. Từ việc căn chỉnh các mục trong <header> (justify-content: space-between), các nút bấm trong .hero-content, cho đến các icon mạng xã hội. Flexbox giúp việc căn chỉnh trở nên đơn giản, trực quan và hoàn hảo.
- CSS Grid: Khi cần xử lý layout hai chiều phức tạp, Grid đã được “triệu hồi”. Tấn Đạt đã áp dụng Grid cho các phần quan trọng như:
- .menu-popup-content: Chia menu thành 3 cột đều tăm tắp.
- .req-container: Tạo layout 2 cột cho bảng cấu hình (Minimum và Recommended).
- .world-content và .expansions-grid: Dàn layout 3 cột cho các thẻ thông tin một cách hoàn hảo, tự động căn chỉnh và có khoảng cách (gap) đều đặn.
Việc sử dụng thành thạo cả Flexbox và Grid cho thấy một tư duy layout hiện đại, một kỹ năng “bắt buộc phải có” của lập trình viên front-end chuyên nghiệp.
Responsive Design: Thử thách của mọi lập trình viên
Một website đẹp trên desktop nhưng “vỡ” trên điện thoại là một website thất bại. Tấn Đạt đã giải quyết bài toán này một cách xuất sắc bằng Media Queries.
Trong file CSS, chúng ta thấy rõ các khối @media (max-width: …) được định nghĩa. Khi kích thước màn hình thu nhỏ (dưới 1024px và 768px), layout trang web tự động thích ứng:
- Các layout Grid 3 cột (như .world-content) tự động chuyển thành 1 cột để vừa vặn với màn hình điện thoại.
- Menu điều hướng chính (.header-nav) được ẩn đi, nhường chỗ cho nút “MENU”
- Kích thước font chữ, padding được điều chỉnh hợp lý, đảm bảo trải nghiệm đọc tốt nhất trên mọi thiết bị.
Đây chính là hiện thân của triết lý “Thực học – Thực nghiệp” – học để làm ra sản phẩm có thể sử dụng được trong thế giới thực, nơi người dùng truy cập từ vô số thiết bị.
Sản phẩm website “Sekiro” của Hồ Tấn Đạt là một minh chứng hoàn hảo cho triết lý “Thực học – Thực nghiệp”. Nó chứng minh rằng, chỉ với kiến thức từ một môn học, sinh viên FPT Polytechnic hoàn toàn có khả năng tạo ra những sản phẩm có giá trị thực tiễn, sẵn sàng đưa vào portfolio để chinh phục nhà tuyển dụng. Xin chúc mừng Tấn Đạt và giảng viên bộ môn “Xây dựng trang web” tại FPT Polytechnic Cần Thơ!
Giảng viên Nguyễn Đình Ngọc
Bộ môn Công nghệ thông tin
FPT Polytechnic Cần Thơ
