Build landing page with html css

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH TIN HỌC QUẢN LÝ BUILD LANDING PAGE WITH HTML & CSS Đơn vị thực tập : AgilityIO (Asnet) Giảng viên hướng dẫn : ThS Cao Thị Nhâm LỜI CẢM ƠN Em xin gửi đến Quý thầy cô Khoa Thống kê – Tin học trường Đại học Kinh tế Đại học Đà Nẵng hướng dẫn dõi theo em suốt trình em thực tập cơng ty để em hồn thành khóa học thực tập nghề nghiệp tiếp thu nhiều kiến thức Và hết em xin chân thành cảm ơn cô Cao Thị Nhâm, người tận tình hướng dẫn cho em suốt trình làm đề tài thực tập Em cảm ơn đơn vị thực tập AgilityIO, đặc biệt anh Nguyễn Văn Cư với hỗ trợ nhiệt tình anh chị công ty giúp em học thêm nhiều kiến thức có trải nghiệm thực tế vị trí làm việc Trong q trình thực tập, trình làm báo cáo thực tập, khả nghiên cứu kinh nghiệm thực tế cịn hạn chế nên báo cáo có thiếu sót Em mong nhận đóng góp cảm thông, chia sẻ Quý thầy, Q cơng ty để em có điều kiện bổ sung, nâng cao kiến thức tốt cho việc học tập, nghiên cứu công việc sau Cuối chúng em kính chúc Q thầy dồi sức khỏe, niềm tin để tiếp tục nghiệp cao quý truyền đạt kiến thức cho hệ mai sau Kính chúc Q cơng ty ngày phát triển Em xin chân thành cảm ơn! LỜI CAM ĐOAN Em xin cam đoan kết đạt báo cáo em nghiên cứu, tổng hợp thực suốt trình thực tập công ty dựa tài liệu công ty cung cấp hướng dẫn TS Cao Thị Nhâm, không chép lại điều người khác Những nội dung trình bày báo cáo em, tham khảo tổng hợp từ nguồn tài liệu khác Tất tài liệu tham khảo, tổng hợp trích dẫn rõ ràng nguồn thơng tin mục tài liệu tham khảo Em xin hoàn toàn chịu trách nhiệm lời cam đoan Nếu có điều sai trái, em xin chịu hồn tồn trách nhiệm MỤC LỤC LỜI CẢM ƠN iii LỜI CAM ĐOAN iv MỤC LỤC v DANH MỤC HÌNH ẢNH viii DANH MỤC BẢNG BIỂU x DANH MỤC CÁC TỪ VIẾT TẮT xi LỜI MỞ ĐẦU 1.1 Giới thiệu tổng quát doanh nghiệp thực tập 1.1.1 Tổng quan doanh nghiệp 1.1.2 Lĩnh vực hoạt động 1.1.3 Cơ cấu tổ chức 1.1.4 Chính sách đãi ngộ 1.2 Tổng quan vị trí việc làm 1.2.1 Yêu cầu kiến thức kỹ 1.2.2 Công việc Front-end 1.2.3 Mức lương 1.2.4 Con đường phát triển 2.1 Giới thiệu HTML & CSS 2.2 Giới thiệu Git 3.1 Tổng quan hệ thống 3.1.1 Tổng quan website Travlog 3.1.2 Workflow website 3.2 Yêu cầu chức 3.2.1 Sơ đồ Use case 3.2.2 Mô tả chi tiết Use case 3.3 Yêu cầu phi chức 4.1 Mô tả tổng quan website Travlog 10 4.1.1 Phần Hero 10 4.1.2 Phần Brand 10 4.1.3 Phần Services 10 4.1.4 Phần Top destination 10 4.1.5 Phần Travel point 10 4.1.6 Phần Key features 11 4.1.7 Phần Testimonials 11 4.1.8 Phần Subscribe 11 4.2 Thiết kế giao diện 11 4.3 Công cụ kỹ thuật 15 4.4 Xây dựng giao diện 16 4.4.1 Khởi tạo cấu trúc code 16 4.4.2 Tạo component cho website 17 4.4.3 Tạo index.html 20 4.4.4 Tạo header 21 4.4.5 Tạo hero section 22 4.4.6 Tạo brand section 23 4.4.7 Tạo services section 24 4.4.8 Tạo top destination section 25 4.4.9 Tạo travel point section 26 4.4.10 Tạo key features section 27 4.4.11 Tạo testimonials section 28 4.4.12 Tạo subscribe section 29 4.4.13 Tạo footer 30 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 31 TÀI LIỆU THAM KHẢO 32 CHECK LIST CỦA BÁO CÁO 33 PHỤ LỤC 34 DANH MỤC HÌNH ẢNH Hình 1.1.1 Logo Agility Hình 1.1.2 Sơ đồ cấu tổ chức cơng ty Hình 2.1.1 HTML - CSS Hình 2.2.1 Git Hình 3.1.1 Workflow hệ thống Hình 3.2.1 Sơ đồ Use case Hình 4.2.1 Header desktop 11 Hình 4.2.2 Phần Hero desktop 12 Hình 4.2.3 Phần Brands desktop 12 Hình 4.2.4 Phần Services desktop 12 Hình 4.2.5 Phần Top destination desktop 13 Hình 4.2.6 Phần Travel point desktop 13 Hình 4.2.7 Phần Key features desktop 14 Hình 4.2.8 Phần Testimonials desktop 14 Hình 4.2.9 Phần Subscribe desktop 15 Hình 4.2.10 Footer desktop 15 Hình 4.4.1 Cấu trúc code 16 Hình 4.4.2 File button.css 17 Hình 4.4.3 File container.css 17 Hình 4.4.4 File icon.css 18 Hình 4.4.5 File text.css 19 Hình 4.4.6 File index.html 20 Hình 4.4.7 File header.css 21 Hình 4.4.8 File hero.css 22 Hình 4.4.9 File brand.css 23 Hình 4.4.10 File services.css 24 Hình 4.4.11 File top-destination.css 25 Hình 4.4.12 File travel-point.css 26 Hình 4.4.13 File key-features.css 27 Hình 4.4.14 File testimonials.css 28 Hình 4.4.15 File subscribe.css 29 Hình 4.4.16 File footer.css 30 Hình 4.4.1 Header mobile 34 Hình 4.4.2 Phần hero mobile 34 Hình 4.4.3 Phần brands mobile 35 Hình 4.4.4 Phần services mobile 36 Hình 4.4.5 Phần top destination mobile 37 Hình 4.4.6 Phần travel point mobile 38 Hình 4.4.7 Phần Key features mobile 39 Hình 4.4.8 Phần Testimonials mobile 40 Hình 4.4.9 Phần Subscribe mobile 41 Hình 4.4.10 Phần footer mobile 42 Hình 4.4.11 Header tablet 43 Hình 4.4.12 Phần Hero tablet 43 Hình 4.4.13 Phần Brands tablet 43 Hình 4.4.14 Phần Services tablet 44 Hình 4.4.15 Phần Top destination tablet 45 Hình 4.4.16 Phần Travel point tablet 46 Hình 4.4.17 Phần Key features tablet 47 Hình 4.4.18 Phần Testimonials tablet 48 Hình 4.4.19 Phần Subscribe tablet 49 Hình 4.4.20 Footer tablet 49 DANH MỤC BẢNG BIỂU Bảng 3.2.1 Use case truy cập landing page Bảng 3.2.2 Use case khám phá điểm đến hàng đầu Bảng 3.2.3 Use case đăng kí nhận thơng tin Bảng 3.2.4 Use case đặt tour du lịch 10 DANH MỤC CÁC TỪ VIẾT TẮT API : Application Programming Interface CSS : Cascading Style Sheets HTML : Hyper Text Markup Language UI : User Interface UX : User Experience 11