Báo cáo cuối kỳ: Thiết kế website trường mầm non - ĐH Sư phạm Kỹ thuật

Hướng dẫn chi tiết bài tập thiết kế web xây dựng website trường mầm non. Cung cấp cấu trúc giao diện chuẩn, tính năng cần thiết và mẫu giao diện thân thiện.

• Tác giả: Nguyễn Đức Phước
• Người hướng dẫn: Th.S Trần Bữu Dung
• Trường học: Đại học Sư phạm Kỹ thuật
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng website trường mầm non
• Loại tài liệu: Báo cáo cuối kỳ
• Năm xuất bản: 2022
• Địa điểm: Đà Nẵng

Tóm tắt

I. Tổng quan đề tài thiết kế và xây dựng website trường mầm non

Đề tài thiết kế và xây dựng website trường mầm non đóng vai trò nền tảng trong chuyển đổi số giáo dục mầm non. Hệ thống cung cấp kênh truyền thông chính thống giữa nhà trường và phụ huynh. Nhu cầu tra cứu thông tin tuyển sinh trực tuyến ngày càng tăng cao. Phụ huynh mong muốn tiếp cận thông tin chương trình đào tạo nhanh chóng. Trang web phản ánh trực quan cơ sở vật chất và phương pháp sư phạm của nhà trường. Dự án áp dụng các tiêu chuẩn thiết kế web hiện đại để đáp ứng nhu cầu này. Cấu trúc đồ án bao gồm nghiên cứu khảo sát và xây dựng bộ nhận diện số. Các trang chức năng được xây dựng đồng bộ từ trang chủ đến trang tin tức. Quy chuẩn bố cục sử dụng hệ thống lưới CSS Grid rõ ràng. Giao diện trực quan giúp gia tăng mức độ tin tưởng của gia đình học sinh. Công nghệ phát triển hướng tới tốc độ tải trang nhanh và khả năng tương thích cao. Báo cáo tổng kết phương pháp hiện thực hóa cổng thông tin mầm non chuẩn hóa. Mọi thành phần đều phục vụ mục tiêu quảng bá và quản lý đào tạo hiệu quả.

1.1. Mục tiêu và phạm vi xây dựng website trường mầm non

Mục tiêu chính là xây dựng cổng thông tin giới thiệu toàn diện trường mầm non. Dự án tập trung trình bày sứ mệnh, giá trị cốt lõi và đội ngũ giáo viên. Phạm vi nghiên cứu bao gồm thiết kế giao diện trang chủ, các trang chuyên mục học tập và biểu mẫu tương tác. Hệ thống cung cấp bảng lịch tham quan trường học tiện lợi. Phụ huynh có thể gửi phản hồi và đăng ký nhập học trực tuyến dễ dàng. Giao diện được tối ưu hóa nhằm tạo cảm giác thân thiện, ấm áp và chuyên nghiệp. Cấu trúc thông tin đảm bảo tính khoa học, chuẩn xác và mạch lạc trên từng chuyên trang.

1.2. Vai trò của website đối với công tác giáo dục mầm non

Website trường mầm non là cầu nối thông tin hai chiều giữa giáo viên và gia đình. Nhà trường cập nhật thời khóa biểu, thực đơn dinh dưỡng và hoạt động ngoại khóa định kỳ. Phụ huynh dễ dàng theo dõi môi trường sinh hoạt hàng ngày của trẻ. Kênh thông tin trực tuyến giúp nâng cao tính minh bạch trong quản lý giáo dục. Hình ảnh chân thực về phòng học và sân chơi tạo niềm tin vững chắc. Nền tảng còn hỗ trợ truyền thông thương hiệu giáo dục hiệu quả trong thời đại số. Việc số hóa thông tin giảm thiểu áp lực tư vấn trực tiếp cho cán bộ tuyển sinh.

II. Phân tích yêu cầu hệ thống website trường mầm non hiện đại

Quá trình phân tích yêu cầu website trường mầm non đòi hỏi sự thấu hiểu tâm lý phụ huynh. Giao diện cần kết hợp hài hòa giữa màu sắc tươi sáng và cấu trúc rõ ràng. Sự thiếu hụt thông tin trực tuyến minh bạch gây khó khăn cho việc tuyển sinh truyền thống. Phụ huynh thường gặp trở ngại khi tìm kiếm học phí, thực đơn và lịch học. Website giải quyết triệt để các rào cản thông tin thông qua việc tổ chức dữ liệu khoa học. Hệ thống cần phân chia các module chức năng chuyên biệt cho từng đối tượng sử dụng. Menu điều hướng phải sắp xếp phân cấp hợp lý và dễ thao tác. Các biểu mẫu liên hệ, đặt lịch tham quan cần ngắn gọn, trực quan. Khả năng bảo mật thông tin liên hệ của phụ huynh là yêu cầu then chốt. Nền tảng phải vận hành ổn định trên nhiều thiết bị và trình duyệt khác nhau. Phân tích chi tiết giúp loại bỏ các thao tác thừa, tối giản hành trình tiếp cận thông tin của người dùng.

2.1. Yêu cầu giao diện và trải nghiệm người dùng mầm non

Giao diện website mầm non đòi hỏi màu sắc sinh động, bố cục ấm cúng và đường nét mềm mại. Phông chữ phải rõ ràng, dễ đọc trên mọi kích thước màn hình. Các nút bấm kêu gọi hành động như đăng ký tham quan cần đặt ở vị trí nổi bật. Hình ảnh trẻ thơ và cơ sở vật chất phải có độ sắc nét cao. Trải nghiệm người dùng tập trung vào tính trực quan, giảm thiểu thời gian tìm kiếm dữ liệu. Tốc độ chuyển trang nhanh giúp duy trì tương tác của phụ huynh. Bố cục phân chia đồng đều giúp truyền tải trọn vẹn thông điệp giáo dục.

2.2. Phân tích các phân hệ chức năng cốt lõi trên website

Hệ thống bao gồm các phân hệ chức năng cơ bản phục vụ tuyển sinh và thông tin. Phân hệ giới thiệu hiển thị tầm nhìn, sứ mệnh, giá trị cốt lõi và cơ sở vật chất. Phân hệ chương trình học phân loại lớp theo lứa tuổi và các khóa kỹ năng ngoại ngữ. Phân hệ tuyển sinh cung cấp quy trình nộp hồ sơ cùng hướng dẫn chi tiết. Module biểu mẫu hỗ trợ đặt lịch hẹn tham quan trực tiếp tại trường. Cuối cùng, phân hệ chân trang tổng hợp thông tin liên hệ, bản đồ và thời gian làm việc chính xác của nhà trường.

III. Phương pháp thiết kế và xây dựng website trường mầm non

Phương pháp triển khai kỹ thuật tập trung vào việc áp dụng các công nghệ web tiêu chuẩn. Mã nguồn xây dựng bằng HTML5 ngữ nghĩa và cấu trúc phân tầng CSS3 rõ ràng. Hệ thống sử dụng mô hình CSS Grid và Flexbox để quản lý bố cục đa cột linh hoạt. Bộ thư viện Font Awesome cung cấp hệ thống biểu tượng liên lạc và chỉ dẫn trực quan. Hiệu ứng chuyển động Animation và Transition được tích hợp khéo léo để tạo sự sinh động. Mỗi trang chức năng được module hóa thành các tệp tin HTML và CSS độc lập. Cấu trúc thư mục phân tách rõ ràng giữa hình ảnh, phông chữ và mã định kiểu. Kỹ thuật Responsive Web Design ứng dụng thông qua CSS Media Queries. Giao diện tự động co giãn tối ưu trên điện thoại di động, máy tính bảng và màn hình máy tính. Việc tối ưu hóa mã nguồn giúp giảm dung lượng tệp tin và nâng cao tốc độ tải trang. Kiến trúc này tạo tiền đề vững chắc cho việc mở rộng cơ sở dữ liệu động trong tương lai.

3.1. Kiến trúc bố cục với CSS Grid và Flexbox responsive

Mô hình CSS Grid kết hợp Flexbox tạo nên khung xương vững chắc cho toàn bộ trang web. Kỹ thuật phân chia cột theo tỷ lệ l-2, l-7, l-3 giúp thanh header hiển thị cân đối. Hệ thống hàng và cột no-gutters loại bỏ khoảng cách dư thừa giữa các phần tử giao diện. Các breakpoint linh hoạt xử lý hiển thị đa phương tiện cho màn hình nhỏ. Menu trên thiết bị di động chuyển đổi mượt mà sang dạng icon bars thu gọn. Bố cục thích ứng đảm bảo toàn bộ nội dung giáo dục luôn hiển thị trọn vẹn và đẹp mắt.

3.2. Thiết kế module giao diện và tương tác người dùng

Các module giao diện được lập trình chi tiết từ khối giới thiệu, đội ngũ giáo viên đến phản hồi phụ huynh. Hiệu ứng hover đổi màu đỏ tạo điểm nhấn tương tác trên thanh menu. Thanh tìm kiếm nhanh tích hợp icon kính lúp hỗ trợ truy vấn thông tin tiện lợi. Khung biểu mẫu liên hệ được định dạng khoảng đệm và kích thước chuẩn xác. Footer hai cột chứa thông tin bản quyền và mạng xã hội được thiết kế trang nhã. Tất cả các thành phần trực quan đều hướng tới tính thẩm mỹ cao và tương tác thân thiện.

IV. Đánh giá ứng dụng thực tiễn website trường mầm non chuẩn SEO

Báo cáo thiết kế và xây dựng website trường mầm non hoàn thành toàn diện các mục tiêu đề ra. Sản phẩm sở hữu giao diện tươi sáng, bố cục khoa học và tính tương thích cao. Cổng thông tin hỗ trợ đắc lực cho ban giám hiệu trong việc truyền thông và tiếp cận phụ huynh tiềm năng. Mô hình đáp ứng tốt tiêu chuẩn thiết kế web hiện đại và quy chuẩn SEO cơ bản. Tốc độ phản hồi giao diện nhanh giúp giữ chân người truy cập lâu hơn trên website. Trong thực tế triển khai, hệ thống đóng vai trò như một văn phòng tuyển sinh trực tuyến 24/7. Nhà trường có thể tiết kiệm chi phí in ấn tài liệu quảng bá truyền thống. Định hướng phát triển tiếp theo bao gồm tích hợp hệ quản trị cơ sở dữ liệu động và cổng thanh toán học phí. Các tính năng sổ liên lạc điện tử và theo dõi camera lớp học có thể được tích hợp thêm. Đồ án khẳng định giá trị ứng dụng công nghệ thông tin trong việc đổi mới và nâng cao chất lượng giáo dục mầm non.

4.1. Hiệu quả truyền thông và tối ưu hóa công cụ tìm kiếm

Website trường mầm non đạt chuẩn cấu trúc mã nguồn tối ưu cho các công cụ tìm kiếm. Thẻ tiêu đề, thẻ mô tả và hệ thống phân cấp heading được tổ chức mạch lạc. Cấu trúc URL thân thiện kết hợp thẻ hình ảnh alt đầy đủ giúp tăng thứ hạng từ khóa tuyển sinh. Nền tảng giúp nhà trường nâng cao độ phủ thương hiệu tại địa phương. Tỷ lệ phụ huynh tìm kiếm và đăng ký tham quan trường qua internet tăng trưởng rõ rệt. Đây là công cụ đắc lực giúp quảng bá hình ảnh trường học chất lượng cao.

4.2. Hướng phát triển và tích hợp hệ sinh thái giáo dục số

Tiềm năng mở rộng của website mầm non là xây dựng hệ sinh thái số hóa toàn diện. Dự án có thể tích hợp cổng thông tin nội bộ dành riêng cho phụ huynh theo dõi khẩu phần ăn và sức khỏe của trẻ. Việc bổ sung hệ thống quản lý học phí trực tuyến giúp tinh gọn quy trình kế toán. Tích hợp AI chatbot hỗ trợ giải đáp thắc mắc tuyển sinh tự động là giải pháp nâng cao hiệu suất. Định hướng phát triển này giúp trường mầm non khẳng định vị thế tiên phong trong chuyển đổi số giáo dục.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong chương trình đào tạo chuyên ngành Công nghệ thông tin thuộc Khoa Công nghệ số, Trường Đại học Sư phạm Kỹ thuật – Đại học Đà Nẵng, học phần Thiết kế Web giữ vai trò cung cấp kiến thức nền tảng về cấu trúc tài liệu siêu văn bản, kỹ thuật định kiểu tầng và tổ chức giao diện người dùng tương tác. Đề tài "Bài tập Thiết kế Web: Xây dựng website trường mầm non" được sinh viên Nguyễn Đức Phước thực hiện dưới sự hướng dẫn của Th.S Trần Bữu Dung (lớp học phần 221TKW02, thời gian hoàn thành vào tháng 6 năm 2022) nhằm giải quyết bài toán hiện thực hóa giao diện thông tin cho một cơ sở giáo dục mầm non (DPN School).

Về mặt thực tiễn, website trường mầm non đóng vai trò là kênh truyền thông đa phương tiện giữa nhà trường, phụ huynh và cộng đồng. Hệ thống đòi hỏi việc trình bày thông tin trực quan, rõ ràng về cơ sở vật chất, triết lý giáo dục, chương trình đào tạo theo độ tuổi, giới thiệu đội ngũ giáo viên, tiếp nhận phản hồi và xử lý nhu cầu đăng ký tham quan, tư vấn tuyển sinh.

Nhiệm vụ nghiên cứu và phát triển cụ thể của đồ án bao gồm:

1. Xây dựng cấu trúc tài liệu chuẩn HTML5 cho các phân trang giao diện chính: Trang chủ (Trang chủ.html), Trang Tầm nhìn và nhiệm vụ (Program.html), Trang Đội ngũ giáo viên (Teacher.html).
2. Thiết kế hệ thống lưới CSS (Grid System) tùy biến dựa trên mô hình hộp linh hoạt (Flexbox) nhằm đáp ứng khả năng hiển thị tương thích (Responsive Web Design) trên nhiều độ phân giải màn hình từ máy tính để bàn (Desktop), máy tính bảng (Tablet) đến điện thoại thông minh (Mobile).
3. Hiện thực hóa các thành phần tương tác giao diện người dùng bao gồm: thanh điều hướng đa cấp (Dropdown Navigation Bar), trình chiếu hình ảnh tự động (Slideshow Carousel) với hiệu ứng mờ dần (Fade transition), khung nhúng video truyền thông (YouTube Iframe) và biểu mẫu thu thập thông tin tư vấn trực tuyến.
4. Chuẩn hóa phong cách thiết kế giao diện (Style Guide) với màu sắc chủ đạo nhận diện thương hiệu (#e73446), hệ thống biểu tượng FontAwesome và cấu trúc Typography phù hợp với môi trường giáo dục trẻ em.

Phạm vi nghiên cứu của đồ án giới hạn ở tầng Front-end tĩnh, tập trung vào việc bố cục mã nguồn HTML/CSS/JavaScript thuần, lấy bối cảnh xây dựng trang tin tức - thông tin cho cơ sở giáo dục mầm non tại địa chỉ 48 Cao Thắng, Đà Nẵng.

---

Cơ sở lý thuyết và phương pháp

Đồ án áp dụng các nguyên lý lập trình giao diện web hiện đại với cấu trúc mã nguồn được phân tách theo từng tầng chức năng riêng biệt:

• Ngôn ngữ cấu trúc HTML5: Sử dụng các thẻ ngữ nghĩa (semantic tags) và cấu trúc phân cấp khối (div, header, nav, ul/li, iframe, form, footer) để xây dựng khung xương vững chắc cho tài liệu.
• Kỹ thuật định kiểu CSS3 và Bố cục Flexbox: Xây dựng hệ thống lưới tùy biến không phụ thuộc framework bên thứ ba, sử dụng thuộc tính display: flex, flex-wrap: wrap, kết hợp kỹ thuật canh lề âm (negative margin) và bù trừ phần đệm (padding) để tạo khoảng cách cột đồng đều.
• Kỹ thuật thiết kế tương thích (Responsive Design qua Media Queries): Ứng dụng các điểm ngắt truy vấn phương tiện (@media) để định nghĩa lại độ rộng cột và ẩn/hiện các thành phần giao diện phù hợp với từng nhóm thiết bị.
• Thư viện biểu tượng FontAwesome: Nhúng bộ font biểu tượng qua đường dẫn font/vendor/fontawesome/css/all.css phục vụ trực quan hóa các hạng mục thông tin liên hệ, danh mục điều hướng và chỉ số cơ sở vật chất.
• Ngôn ngữ kịch bản JavaScript: Hiện thực hóa logic điều khiển slideshow qua tệp kịch bản js/slide.js, hỗ trợ chuyển ảnh tự động và tương tác thông qua các nút chuyển tiếp (prev/next).

Phương pháp triển khai đồ án dựa trên quy trình phân tích thành phần giao diện (Component-based UI Design), chia nhỏ giao diện thành các module độc lập: Khối tiêu đề đầu trang (Header), Khối điều hướng (Navigation), Khối trình diễn banner (Slider), Khối tin tức (News Module), Khối thông số trường học (Info Category), Khối cảm nhận phụ huynh (Feedback), Khối định vị niềm tin (Trust Panel) và Khối chân trang (Footer).

---

Thiết kế và triển khai

Hệ thống giao diện được tổ chức thành các tệp mã nguồn chuyên biệt, phân định rõ ràng giữa cấu trúc nội dung, kiểu hiển thị chung và kiểu hiển thị riêng cho từng phân trang.

Tệp tin	Định dạng / Công nghệ	Chức năng chính trong hệ thống
Trang chủ.html	HTML5, FontAwesome	Trang đích chính tích hợp đầy đủ các module tổng quan về trường mầm non
Program.html	HTML5, CSS layout 2 cột	Trang trình bày chi tiết về Sứ mệnh và Mục tiêu đào tạo của cơ sở
Teacher.html	HTML5, CSS Card UI	Trang giới thiệu đội ngũ giáo viên tiêu biểu theo định dạng thẻ cá nhân
grid.css	CSS3 (Flexbox, Media Query)	Hệ thống lưới 12 cột tự xây dựng (wide, row, col, .c-*, .m-*, .l-*)
style.css / style2.css	CSS3	Thiết lập phong cách tổng thể, header, navigation, form, module thông tin
slide-style.css	CSS3 Keyframes	Thiết lập kích thước khung trượt, hiệu ứng @keyframes fade, nút điều hướng
program.css / teacher.css	CSS3 Module	Thiết lập kiểu bố cục đặc thù cho trang Tầm nhìn và trang Đội ngũ giáo viên
js/slide.js	JavaScript thuần	Xử lý logic chuyển đổi chỉ số hiển thị hình ảnh slide

Kiến trúc hệ thống lưới Responsive (grid.css)

Hệ thống lưới được thiết lập với chiều rộng tối đa của khung chứa chính là .wide { max-width: 1200px; margin: 0 auto; }. Độ phân giải hiển thị được chia thành các ngưỡng điểm ngắt chính xác:

• Màn hình di động (Mobile, tiếp đầu ngữ .c-*): Phân bổ tỷ lệ độ rộng từ .c-3 (25%), .c-6 (50%), .c-9 (75%) đến .c-12 (100%).
• Màn hình máy tính bảng (Tablet, tiếp đầu ngữ .m-*, 740px - 1024px): Khung chứa .wide co giãn cố định ở mức 644px, hệ thống cột phân chia từ .m-3 (25%), .m-6 (50%), .m-9 (75%) đến .m-12 (100%).
• Màn hình máy tính để bàn độ phân giải thấp (1024px - 1240px): Khung chứa .wide có độ rộng 984px.
• Màn hình máy tính để bàn tiêu chuẩn (PC, tiếp đầu ngữ .l-*, min-width: 1113px): Hỗ trợ đa dạng tỷ lệ cột gồm .l-2 (16.66667%), .l-2-4 (20%), .l-3 (25%), .l-4 (33.33333%), .l-6 (50%), .l-7 (58.33333%), .l-9 (75%), .l-12 (100%).

---

Nội dung chính theo từng chương

PHẦN I. Giao diện trang chủ (Trang chủ.html)

Giao diện trang chủ được cấu trúc thành chuỗi các khối nội dung liên tục nhằm dẫn dắt trải nghiệm của phụ huynh khi truy cập website:

+---------------------------------------------------------------+
| HEADER: Hotline [phone]) | Email | Đặt lịch tham quan     |
+---------------------------------------------------------------+
| NAV: Logo | Trang chủ | Về chúng tôi | CT học | Tuyển sinh ...|
+---------------------------------------------------------------+
| SLIDESHOW CAROUSEL: Trình chiếu ảnh hoạt động trường học      |
+---------------------------------------------------------------+
| MODULE TIN TỨC: 3 Hộp thông tin định hướng giáo dục           |
+---------------------------------------------------------------+
| MODULE THÔNG TIN TRƯỜNG DPN: CSVC (1400m2) | Độ tuổi | Ngoại ngữ|
+---------------------------------------------------------------+
| VIDEO SECTION: Khung nhúng giới thiệu tổng quan trường học     |
+---------------------------------------------------------------+
| FEEDBACK: Cảm nhận của Phụ huynh / Học sinh / Giáo viên       |
+---------------------------------------------------------------+
| TRUST PANEL: 6 Trụ cột xây dựng niềm tin của nhà trường       |
+---------------------------------------------------------------+
| FOOTER: Thông tin liên hệ (48 Cao Thắng) | Biểu mẫu tư vấn    |
+---------------------------------------------------------------+

• Khối Đầu trang (Header & Navigation): Header trên cùng mang màu nền đỏ #e73446 chứa số điện thoại đường dây nóng 0905624543, thư điện tử [e-mail] và nút tác vụ "Đặt lịch tham quan". Thanh menu điều hướng chính tích hợp logo thương hiệu (img/KC_logo1.png), menu đa cấp dạng xổ xuống tại mục "Chương trình học" (bao gồm: Lớp học theo tuổi, Education, Học tiếng Anh), kèm theo biểu tượng tìm kiếm và nút mở menu cho thiết bị di động (.btn-bars).
• Khối Trình chiếu (Slideshow Container): Chiều cao cố định 600px trên máy tính, tích hợp danh sách 6 hình ảnh cơ sở vật chất và hoạt động học đường, chuyển động hiệu ứng mờ dần trong thời gian chu kỳ với nút bấm điều hướng sang trái/phải (plusSlides(-1), plusSlides(1)).
• Khối Tin tức & Thông tin cốt lõi trường mầm non DPN: Trình bày 3 hộp tính năng đại diện cho triết lý giáo dục: Tạo nền tảng tốt nhất cho trẻ, Chương trình học của chúng tôi (lấy trẻ làm trung tâm, khoa học và thích ứng sinh học), Mục đích xây dựng lớp học. Ngay phía dưới là bảng danh mục 4 chỉ số then chốt: Cơ sở vật chất (khu học tập rộng hơn 1400m2), Chương trình học, Độ tuổi tiếp nhận (trung bình từ 2 - 2,5 tuổi), Ngôn ngữ giảng dạy (100% tiếng Anh kết hợp ngôn ngữ khác).
• Khối Video & Cảm nhận cộng đồng (Feedback): Tích hợp khung video YouTube kích thước 1160x580px. Khu vực cảm nhận phân loại theo 3 đối tượng (Phụ huynh, Học sinh, Giáo viên), hiển thị nội dung chia sẻ thực tế từ các phụ huynh học sinh (Chị Thu Minh – Mẹ HS Đức Toàn, Anh Tiến Minh – Bố HS Huy Đức, Bà Hoàng Châu – Bà HS Gia Minh).
• Khối Niềm tin (Trust Panel) & Chân trang (Footer): Khối Trust liệt kê 6 lý do khiến phụ huynh an tâm gửi gắm con em: Không gian học tập hiện đại, Chương trình học tư duy cao, Hành trình học riêng biệt toàn diện, Môi trường an toàn chu đáo, Mối quan hệ tích cực hỗ trợ, Đội ngũ chuyên môn nhiệt tình tận tâm. Chân trang hiển thị thông tin pháp lý tại địa chỉ 48 Cao Thắng, Đà Nẵng, điện thoại [phone], giờ làm việc Thứ 2 - Thứ 6, 8h30 - 18h00, form tiếp nhận thông tin tư vấn gồm 5 trường nhập liệu (Họ tên, Địa chỉ, SĐT, Email, Nội dung liên hệ) và thanh biểu tượng mạng xã hội cố định.

PHẦN II. Giao diện trang tầm nhìn và nhiệm vụ (Program.html)

Trang Program.html tập trung truyền tải định hướng giáo dục và sứ mệnh phát triển của cơ sở mầm non:

• Cấu trúc khung nhìn: Sử dụng hình nền tiêu đề lớn (img/csvc-gardenia-1.jpg) kết hợp bố cục 2 cột nằm trong khung chứa .moduleWrapper__content.
• Cột điều hướng phụ bên trái (.moduleWrapper__content-left): Chiếm 30% độ rộng, cung cấp lối tắt nhanh giữa các trang: Giới thiệu, Tầm nhìn và nhiệm vụ (trạng thái kích hoạt màu đỏ), Đội ngũ giáo viên.
• Khung nội dung chi tiết bên phải (.moduleWrapper__content-right): Chiếm 70% độ rộng, trình bày hai văn bản cốt lõi:
  • Sứ mệnh: Khẳng định định hướng giáo dục phát triển nhân cách và năng lực toàn diện, trang bị nền tảng tri thức vững vàng và kỹ năng thực tiễn để học sinh trở thành công dân ưu tú, khỏe thể chất, mạnh trí lực, giàu lòng nhân ái và tự tin hội nhập quốc tế.
  • Mục tiêu đào tạo: Phân định 3 nhiệm vụ trọng tâm: (1) Đào tạo thế hệ trẻ hiểu biết, độc lập, tự tin và sáng tạo; (2) Xây dựng chương trình đào tạo toàn diện trên 3 mặt: Tri thức – trí tuệ, Nhân cách – tâm hồn, Năng lượng – cảm xúc; (3) Thiết lập môi trường văn hóa "Tôn trọng, Tích cực, Có động lực, Yêu thương, Chia sẻ".

PHẦN III. Giao diện trang đội ngũ giáo viên (Teacher.html)

Trang Teacher.html được thiết kế nhằm minh bạch hóa năng lực và chân dung nhân sự giảng dạy:

• Bố cục thông tin chung: Kế thừa khung cấu trúc 2 cột của trang chương trình, tái khẳng định cam kết chất lượng của đội ngũ nhà giáo trong việc đồng hành cùng sự trưởng thành của học sinh.
• Khu vực thẻ nhân sự tiêu biểu (.teacher__card): Triển khai danh sách thẻ giáo viên xuất sắc của tháng dạng lưới hàng ngang, bao gồm các thông tin thành phần:
  • Ảnh chân dung giáo viên đại diện.
  • Họ tên giáo viên: Cô Hoàng Mỹ (Giáo viên lớp A), Cô Thiên Ngọc (Giáo viên lớp B), Cô Hồng Hà (Giáo viên lớp C).
  • Khung liên kết mạng xã hội cá nhân tích hợp các biểu tượng FontAwesome (Facebook, YouTube, TikTok).
  • Nút tác vụ tương tác liên hệ trực tiếp (Contact button).

---

Kết quả và đóng góp

Kết quả triển khai kỹ thuật

1. Xây dựng hoàn chỉnh 3 trang giao diện người dùng: Đáp ứng đầy đủ cấu trúc ngữ nghĩa HTML5 cho các phân trang Trang chủ.html, Program.html, Teacher.html với đầy đủ các khối chức năng phục vụ trường mầm non.
2. Tự thiết kế hệ thống lưới CSS linh hoạt: Thiết lập thành công thư viện grid.css thuần không sử dụng framework ngoài, định nghĩa đầy đủ 12 cột cho 3 nhóm màn hình (Desktop, Tablet, Mobile) với các mốc biến đổi tỷ lệ chính xác từ 8.33% đến 100%.
3. Hiện thực hóa bộ hiệu ứng tương tác: Tích hợp thành công hiệu ứng hoạt họa @keyframes fade và @keyframes upLine cho menu điều hướng, cùng cơ chế điều khiển hiển thị ẩn/hiện trên màn hình điện thoại dưới 376px (ẩn slideshow phức tạp, chuyển đổi thanh menu sang biểu tượng bars).

Đóng góp thực tiễn của đề tài

• Cung cấp bộ mã nguồn mẫu (template) hoàn chỉnh, trực quan cho bài toán xây dựng cổng thông tin trường mầm non, trường tiểu học.
• Minh chứng phương pháp xây dựng giao diện chuẩn responsive bằng mã nguồn CSS/JS thuần, giúp giảm dung lượng tải trang và hỗ trợ sinh viên nắm vững nguyên lý hoạt động cốt lõi của hệ thống layout web.

---

Hạn chế và hướng nghiên cứu tiếp

• Hạn chế của đồ án:
  • Dữ liệu trên toàn bộ hệ thống là dữ liệu tĩnh gắn cứng trong mã nguồn HTML, chưa có hệ thống quản trị cơ sở dữ liệu (DBMS) hay giao diện quản trị nội dung (Admin Dashboard).
  • Các biểu mẫu (như form nhận thông tin tư vấn, nút đặt lịch tham quan, nút liên hệ giáo viên) mới chỉ dừng lại ở tầng giao diện Front-end, chưa xử lý xác thực dữ liệu đầu vào và chưa có kịch bản xử lý gửi dữ liệu qua giao thức HTTP/API về máy chủ Back-end.
  • Một số liên kết nội bộ trong thanh điều hướng và nút chức năng còn sử dụng liên kết rỗng (href="" hoặc href=".html").
• Hướng phát triển tiếp:
  • Tích hợp công nghệ phía máy chủ (như Node.js, PHP hoặc Python) cùng hệ quản trị cơ sở dữ liệu (MySQL, MongoDB) để quản lý động các bài viết tin tức, danh sách lớp học và hồ sơ giáo viên.
  • Hiện thực hóa tính năng xử lý form liên hệ và đặt lịch tham quan trực tuyến, kết nối gửi email tự động tới ban tuyển sinh nhà trường.

---

Giá trị tham khảo

Tài liệu báo cáo đồ án này mang lại giá trị tham khảo hữu ích cho các nhóm đối tượng:

• Sinh viên ngành Công nghệ thông tin / Kỹ thuật phần mềm: Là tài liệu tham khảo trực quan cho các học phần Thiết kế Web cơ bản, Lập trình Front-end, minh họa cách tổ chức cây thư mục dự án (css/, font/, img/, js/), cách phân chia tệp CSS theo module và kỹ thuật viết hệ thống lưới grid.css.
• Lập trình viên giao diện (Front-end Developer): Tham khảo cấu trúc bố cục UI/UX của một website thuộc lĩnh vực giáo dục mầm non, từ cách phối màu nhận diện thương hiệu đến việc sắp xếp các module định vị lòng tin của phụ huynh.

---

Câu hỏi thường gặp

1. Đồ án sử dụng những công nghệ và thư viện nào để xây dựng giao diện?
Đồ án sử dụng hoàn toàn mã nguồn Front-end cơ bản gồm HTML5, CSS3, JavaScript thuần (slide.js) cùng thư viện biểu tượng FontAwesome phiên bản nội bộ (font/vendor/fontawesome/css/all.css).

2. Hệ thống lưới (Grid System) trong đồ án được thiết kế như thế nào?
Hệ thống lưới được định nghĩa trong grid.css sử dụng CSS Flexbox với chiều rộng tối đa khung chứa là 1200px. Hệ thống chia làm 12 cột tương ứng với 3 tiền tố lớp theo thiết bị: .c-* dành cho điện thoại (Mobile), .m-* dành cho máy tính bảng (Tablet, 740px - 1024px) và .l-* dành cho máy tính để bàn (PC, từ 1024px trở lên).

3. Trang chủ của website bao gồm những khối nội dung chính nào?
Trang chủ bao gồm: Thanh thông tin liên hệ đầu trang (Hotline, Email, Đặt lịch), Thanh điều hướng đa cấp kèm Logo, Khung trình chiếu ảnh (Slideshow), Khối tin tức 3 cột, Khối danh mục thông tin trường DPN (diện tích 1400m2, độ tuổi, ngôn ngữ), Khung nhúng video YouTube, Khối chia sẻ cảm nhận phụ huynh (Feedback), Khối 6 trụ cột niềm tin (Trust Panel) và Chân trang tích hợp form đăng ký tư vấn.

4. Khối thông tin "Tầm nhìn và nhiệm vụ" đặt ra những mục tiêu đào tạo nào?
Nhà trường tập trung vào 3 mặt giáo dục toàn diện: Tri thức – trí tuệ, Nhân cách – tâm hồn và Năng lượng – cảm xúc; xây dựng môi trường văn hóa mang định hướng "Tôn trọng, Tích cực, Có động lực, Yêu thương, Chia sẻ".

5. Giao diện được tối ưu hóa như thế nào trên thiết bị di động có chiều rộng màn hình nhỏ (dưới 376px)?
Trong style.css, truy vấn @media (max-width: 376px) được áp dụng để hiển thị nút menu .btn-bars, ẩn thanh điều hướng đầy đủ, giảm chiều cao slideshow xuống 180px, ẩn khung video YouTube, ẩn bớt các thẻ phản hồi phụ huynh không cần thiết (.feedback__none) và điều chỉnh lại độ rộng của các ô nhập liệu trong form chân trang.

---

Kết luận

Đồ án "Bài tập Thiết kế Web: Xây dựng website trường mầm non" của sinh viên Nguyễn Đức Phước đã hoàn thành mục tiêu thiết kế và xây dựng thành công giao diện Front-end đa trang hoàn chỉnh cho cơ sở giáo dục mầm non DPN School. Thông qua việc tự xây dựng hệ thống lưới CSS Responsive kết hợp cấu trúc HTML5 chuẩn mực, sản phẩm đảm bảo khả năng hiển thị đồng bộ trên nhiều loại thiết bị. Báo cáo phản ánh đầy đủ năng lực tổ chức mã nguồn, tư duy bố cục giao diện người dùng và là tài liệu tham khảo có giá trị trong học phần thiết kế web.

Trích đoạn nội dung tài liệu

lOMoARcPSD|20482156 ĐẠI HỌC SƯ PHẠM KỸ THUẬT KHOA CÔNG NGHỆ SỐ BỘ MÔN CÔNG NGHỆ THÔNG TIN BÀI TẬP THIẾT KẾ WEB XÂY DỰNG WEBSITE TRƯỜNG MẦM NON Giáo viên hướng dẫn: Th.S Trần Bữu Dung Sinh viên thực hiện: Nguyễn Đức Phước Lớp học phần: 221TKW02 Mã sinh viên: 21115053120235 Đà Nẵng, tháng 6 năm 2022 lOMoARcPSD|20482156 PHẦN I. Giao diện trang chủ. Giao diện trang tầm nhìn và nhiệm vụ. Giao diện trang đội ngũ giáo viên.64 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) BÁO CÁO CUỐI KỲ THIẾT KẾ WEB PHẦN I.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <title>TRANG CHỦ</title> <link rel="stylesheet" href="font/vendor/fontawesome/css/all.css" /> <link rel="stylesheet" href="css/grid.css" /> <link rel="stylesheet" href="css/slide-style.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style2.css" /> </head> <body> <div class="content"> <div class="header"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-2 m-4 c-6"> <div class="header__contact"> <i class="fa-solid fa-phone"></i> <span>0905624543</span> </div> </div> <div class="col l-7 m-4 c-6"> <div class="header__gmail"> <i class="fa-regular fa-envelope-open"></i> <span>[e-mail]</span> </div> </div> <div class="col l-3 m-4 c-12"> <div class="header__skechule"> <i class="fa-solid fa-user-pen"></i> <span>Đặt lịch tham quan</span> </div> </div> </div> </div> </div> <!-- header --> Lớp học phần: 221TKW02 Trang 1 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="nav"> <div class="nav__right"> <div class="nav__right--img"> <img src="img/KC_logo1.png" alt="" /> </div> </div> <div class="nav__bars-btn"> <div class="btn-bars"> <i class="fa-solid fa-bars"></i> </div> <div class="btn-search"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div> <div class="nav__left"> <div class="grid"> <div class="row no-gutters"> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab" style="color: #e73446"> TRANG CHỦ </div> </div> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab anima red__hover"> <a style="text-decoration: none;" href=".html">VỀ CHÚNG TÔI</a> <i class="fa-solid fa-angle-down"></i> </div> </div> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab sub__main"> CHƯƠNG TRÌNH HỌC <i class="fa-solid fa-angle-down"></i> <div class="sub__menu"> <ul> <li>LỚP HỌC THEO TUỔI</li> <li>EDUCATION </li> <li>HỌC TIẾNG ANH <i class="fa-solid fa-angle-right"></i> </li> </ul> </div> </div> </div> <div class="col l-2 m-0 c-0"> Lớp học phần: 221TKW02 Trang 2 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="nav__left--tab anima">TUYỂN SINH</div> </div> <div class="col l-2 m-0 c-0"> <div class="nav__left--tab"> THƯ VIỆN <i class="fa-solid fa-angle-down"></i> </div> </div> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab anima"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div> </div> </div> </div> </div> <!-- nav --> <div class="slideshow-container"> <div class="mySlides fade"> <img src="img/chung-chi-bao-mau-mam-non-5.jpg" style="width: 100%" /> </div> <div class="mySlides fade"> <img src="img/b3d590ec6ee59dbbc4f4624655341289.jpg" style="width: 100%" /> </div> <div class="mySlides fade"> <img src="img/h2.jpg" style="width: 100%" /> </div> <div class="mySlides fade"> <img src="img/h3.jpg" style="width: 100%" /> </div> <div class="mySlides fade"> <img src="img/truong-mam-non-quoc-te-da-nang1.jpg" style="width: 100%" /> </div> <div class="mySlides fade"> <img src="img/18-1.jpg" style="width: 100%" /> </div> Lớp học phần: 221TKW02 Trang 3 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <!-- slider --> <div class="module"> <div class="module__container"> <div class="module__container-text"> <h3>TIN TỨC</h3> </div> <div class="module__container-box"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-4 c-12 mtn"> <div class="box-main"> <div class="icon"> <i class="fas fa-child"></i> </div> <div class="info">Tạo nền tảng tốt nhất cho trẻ</div> <div class="text"> Tại đây, chúng tôi tin rằng trách nhiệm của mình là dành cho trẻ môi trường học tập tốt nhất và trải nghiệm để hỗ trợ lộ trình phát triển cho từng trẻ </div> <div class="frame-reseach"> <a href="">Xem thêm</a> </div> </div> </div> <div class="col l-4 c-12 mtn"> <div class="box-main"> <div class="icon"> <i class="fas fa-book"></i> </div> <div class="info">Chương trình học của chúng tôi</div> <div class="text"> Hình thức tiếp cận học tập lấy trẻ làm trung tâm.

Đảm bảo tính khoa học, hợp lí, phù hợp với nhịp điệu sinh học của trẻ theo từng lứa tuổi và cá nhân trẻ </div> <div class="frame-reseach"> <a href="">Xem thêm</a> Lớp học phần: 221TKW02 Trang 4 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) </div> </div> </div> <div class="col l-4 c-12 mtn"> <div class="box-main"> <div class="icon"> <i class="fas fa-school"></i> </div> <div class="info">Mục đích xây dựng lớp học</div> <div class="text"> Trường mầm non luôn lưu tâm để có những thiết kế thận trọng, đẹp mắt và dành cho trẻ môi trường học thực sự hỗ trợ trong mỗi hành trình học tập. </div> <div class="frame-reseach"> <a href="">Xem thêm</a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- ================== --> <div class="module module__info"> <div class="module__container"> <div class="module__container-text"> <h3 class="module__h3">THÔNG TIN CHÍNH VỀ TRƯỜNG MẦM NON DPN</h3> </div> <div class="module__container-box"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-6 c-12 mtn fix"> <div class="category"> <div class="category__item icon"> <i class="fas fa-school"></i> </div> <div class="category__info"> <div class="info item__info">Cơ sở vật chất</div> <div class="text"> Khu học tập rộng hơn 1400m2 Khu học tập rộng hơn 1400m2 Lớp học phần: 221TKW02 Trang 5 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) </div> </div> </div> </div> <div class="col l-6 c-12 mtn fix"> <div class="category"> <div class="category__item icon category__item-left"> <i class="fas fa-shapes"></i> </div> <div class="category__info"> <div class="info item__info">Chương trình học</div> <div class="text"> Đảm bào tính khoa học, hợp lí, phù hợp với nhịp điệu sinh học </div> </div> </div> </div> <div class="col l-6 c-12 mtn fix"> <div class="category"> <div class="category__item icon category__item-left"> <i class="fas fa-palette"></i> </div> <div class="category__info"> <div class="info item__info">Độ tuổi</div> <div class="text"> Việt Nam: Độ tuổi đi học mẫu giáo trung bình từ 2 - 2,5 tuổi </div> </div> </div> </div> <div class="col l-6 c-12 mtn fix"> <div class="category"> <div class="category__item icon category__item-left"> <i class="fas fa-globe-asia"></i> </div> <div class="category__info"> <div class="info item__info">Ngôn ngữ giảng dạy</div> Lớp học phần: 221TKW02 Trang 6 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="text"> 100% tiếng anh Khu học tập rộng hơn 1400m2 và ngôn ngữ khác </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- ================= --> <div class="video"> <div class="video__text module__container-text"> <h3 class="video__h3">THOÁNG QUA TRƯỜNG MẦM NON DPN</h3> </div> <div class="video__main"> <iframe width="1160" height="580" src="https://www.com/embed/ah3gcN-HFqc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe> </div> </div> <!-- ========================= --> <div class="feedback"> <div class="feedback__text module__container-text"> <h3 class="feedback__h3">CHIA SẺ CỦA MỌI NGƯỜI VỀ TRƯỜNG MẦM NON</h3> </div> <div class="feedback__person"> <span style="color: #e73446">Phụ huynh</span> <span>Học sinh</span> <span>Giáo viên</span> </div> <div class="feedback__content"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-4 c-12 mtn"> <div class="feedback__box-main"> <div class="feedback__info">Chị Thu Minh</div> Lớp học phần: 221TKW02 Trang 7 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="feedback__std">Mẹ HS Đức Toàn</div> <div class="text"> <p> Cảm nhận của mẹ Bean thấy rất tuyệt vời, Cảm ơn các thầy cô giáo đã đồng hành cùng con. Papakidz cũng chính là ngôi nhà thứ 2, con cũng rất vui vẻ khi đến trường, đôi khi con nhớ bạn, và đòi đến , mẹ rất tự hào và yên tâm khi gửi con ở một ngôi trường tốt </p> </div> </div> </div> <div class="col l-4 c-12 mtn"> <div class="feedback__box-main feedback__none"> <div class="feedback__info">Anh Tiến Minh</div> <div class="feedback__std">Bố HS Huy Đức</div> <div class="text"> <p> Cảm nhận của mẹ Bean thấy rất tuyệt vời, Cảm ơn các thầy cô giáo đã luôn đồng hành cùng con. Papakidz cũng chính là ngôi nhà thứ 2, con rất vui vẻ khi đến trường, đôi khi con nhớ bạn, nhớ cô giáo và đòi đến trường, mẹ rất tự hào và yên tâm khi gửi con ở một ngôi trường tốt </p> </div> </div> </div> <div class="col l-4 c-12 mtn"> <div class="feedback__box-main feedback__none"> <div class="feedback__info">Bà Hoàng Châu</div> <div class="feedback__std">Bà HS Gia Minh</div> <div class="text"> <p> Cảm nhận của mẹ Bean thấy rất tuyệt vời, Cảm ơn các thầy cô giáo đã luôn đồng hành cùng con.

Papakidz cũng chính là Lớp học phần: 221TKW02 Trang 8 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) ngôi nhà thứ 2, rất vui vẻ khi đến trường, đôi khi, nhớ cô giáo và đòi đến trường, mẹ rất tự hào và yên khi gửi con ở một ngôi trường tốt </p> </div> </div> </div> </div> </div> </div> </div> <!-- ======================== --> <div class="trust"> <div class="trust__left"> <div class="trust__text"> <h3 class="trust__h3">ĐIỀU GÌ KHIẾN BỐ MẸ TIN TƯỞNG</h3> </div> <div class="trust__main"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> <i class="fas fa-chalkboard-teacher"></i> </div> <div class="panel__text"> Không gian học tập hiện đại tạo cảm hứng cho trẻ </div> </div> </div> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> <i class="far fa-lightbulb"></i> </div> <div class="panel__text"> Chương trình học tập có tính tư duy cao và thú vị </div> </div> </div> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> Lớp học phần: 221TKW02 Trang 9 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <i class="fas fa-book-reader"></i> </div> <div class="panel__text"> Hành trình học riêng biệt giúp trẻ phát triển toàn diện </div> </div> </div> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> <i class="fab fa-earlybirds"></i> </div> <div class="panel__text"> Môi trường học tập an toàn và chu đáo </div> </div> </div> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> <i class="fas fa-users"></i> </div> <div class="panel__text"> Mối quan hệ tích cực và hỗ trợ khi gặp khó khăn </div> </div> </div> <div class="col l-6 c-12"> <div class="trust__panel"> <div class="panel__item icon"> <i class="fas fa-heartbeat"></i> </div> <div class="panel__text"> Đội ngũ chuyên môn nhiệt tình tậm tâm hòa đồng </div> </div> </div> </div> </div> </div> </div> <div class="trust__right"> Lớp học phần: 221TKW02 Trang 10 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="trust__img"> <img src="img/preshool-child_90af0.jpg" alt="" /> </div> </div> </div> <!-- ================================ --> <div class="footer"> <div class="footer__img"> <p><img src="img/KC_logo1.png" alt=""></p> </div> <div class="footer__main"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-4 c-12 mtn"> <div class="footer__text"> THÔNG TIN LIÊN HỆ </div> <div class="footer__icon"> <i class="fas fa-map-marker-alt"></i> Địa chỉ: 48 Cao Thắng, Đà Nẵng </div> <div class="footer__icon"> <i class="fas fa-phone"></i> Điện thoại: [phone] </div> <div class="footer__icon"> <i class="far fa-envelope"></i> Email: dpschool.com </div> <div class="footer__icon"> @2021 Bản quyền thuộc về NDP </div> </div> <div class="col l-4 c-12 mtn"> <div class="footer__text"> THỜI GIAN MỞ CỬA </div> <div class="footer__icon"> Thứ 2 - Thứ 6, 8h30 - 18h00 </div> <div class="footer__text"> THÔNG TIN HỮU ÍCH </div> <div class="footer__icon"> Giới thiệu </div> <div class="footer__icon"> Tầm nhìn và nhiệm vụ Lớp học phần: 221TKW02 Trang 11 Downloaded by Ninh Lê ([e-mail]) lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) </div> <div class="footer__icon"> Giá trị cốt lõi </div> <div class="footer__icon"> Quyền lợi </div> <div class="footer__icon"> Cơ sở </div> <div class="footer__icon"> Đội ngũ giáo viên </div> </div> <div class="col l-4 c-12 mtn"> <div class="footer__text"> NHẬN THÊM TƯ VẤN </div> <div class="footer__text-input"> <input type="text" placeholder="Họ và tên *"> <input type="text" placeholder="Địa chỉ"> <input type="text" placeholder="Số điện thoại *"> <input type="text" placeholder="Thư điện tử *"> <textarea name="" id="" cols="30" rows="10" placeholder="Nội dung liên hệ *"></textarea> <button>Gửi</button> </div> </div> </div> </div> </div> <div class="content__footer-fix"> <ul> <li class="content__footer-fb icon-fix"><i class="fab fa-facebook-f"></i></li> <li class="content__footer-twitter icon-fix"><i class="fab fa-twitter"></i></li> <li class="content__footer-gg icon-fix"><i class="fab fa-google"></i></li> <li class="content__footer-ig icon-fix"><i class="fab fa-instagram"></i></li> </ul> </div> </div> <script src="js/slide.js"></script> </body> </html> Lớp học phần: 221TKW02 Trang 12 Downloaded by Ninh Lê ([e-mail]) lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Program.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <title>TẦM NHÌN VÀ NHIỆM VỤ</title> <link rel="stylesheet" href="font/vendor/fontawesome/css/all.css" /> <link rel="stylesheet" href="css/grid.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style2.css" /> <link rel="stylesheet" href="css/program.css" /> </head> <body> <div class="content__program"> <div class="header"> <div class="grid wide"> <div class="row no-gutters"> <div class="col l-2 m-4 c-6"> <div class="header__contact"> <i class="fa-solid fa-phone"></i> <span>0905624543</span> </div> </div> <div class="col l-7 m-4 c-6"> <div class="header__gmail"> <i class="fa-regular fa-envelope-open"></i> <span>[e-mail]</span> </div> </div> <div class="col l-3 m-4 c-12"> <div class="header__skechule"> <i class="fa-solid fa-user-pen"></i> <span>Đặt lịch tham quan</span> </div> </div> </div> </div> </div> <!-- header --> <div class="nav"> Lớp học phần: 221TKW02 Trang 13 Downloaded by Ninh Lê ([e-mail]) lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) <div class="nav__right"> <div class="nav__right--img"> <img src="img/KC_logo1.png" alt="" /> </div> </div> <div class="nav__bars-btn"> <div class="btn-bars"> <i class="fa-solid fa-bars"></i> </div> <div class="btn-search"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div> <div class="nav__left"> <div class="grid"> <div class="row no-gutters"> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab red__hover" > <a style="text-decoration: none;" href=".html">TRANG CHỦ</a> </div> </div> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab anima" style="color: #e73446"> VỀ CHÚNG TÔI <i class="fa-solid fa-angle-down"></i> </div> </div> <div class="col l-2 m-3 c-0"> <div class="nav__left--tab sub__main"> CHƯƠNG TRÌNH HỌC <i class="fa-solid fa-angle-down"></i> <div class="sub__menu"> <ul> <li>LỚP HỌC THEO TUỔI</li> <li>EDUCATION</li> <li> HỌC TIẾNG ANH <i class="fa-solid fa-angle-right"></i> </li> </ul> </div> </div> </div> <div class="col l-2 m-0 c-0"> Lớp học phần: 221TKW02 Trang 14 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.