Khung CSS Front-end tốt nhất, UIkit

Thiết kế giao diện người dùng tối giản, sạch sẽ và tinh tế

Kết quả danh mục đầu tư cá nhân cho việc làm nhà xuất bản
Nó thể hiện sự tinh tế nhất và tăng khả năng cạnh tranh của bạn trong việc làm.
Khung CSS tốt nhất, UIkit
Khả năng sử dụng CSS Frameworks, điều này rất cần thiết đối với các nhà xuất bản.
Học tập có hệ thống và ví dụ thực tế

Tại sao? Tôi có nên sử dụng khung CSS không?

• Bạn có thể cải thiện quy trình phát triển và xuất bản của mình bằng cách sử dụng các lớp và ID được xác định trước cho Biểu mẫu, Lưới, Thành phần, Nút, v.v. bằng cách sử dụng khung CSS.
• Khung CSS là lựa chọn tốt nhất cho khả năng tương thích giữa nhiều trình duyệt, hiển thị liền mạch trên mọi trình duyệt và phiên bản trình duyệt.
• Các khung CSS có thể giúp bạn tăng năng suất và tối ưu hóa quy trình phát triển và xuất bản .
• Tạo bố cục rõ ràng, phản hồi nhanh chóng và dễ dàng với hệ thống lưới của khung CSS.

Bạn sẽ học chi tiết cách thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code để sử dụng SCSS (SASS). Ngoài ra, chúng tôi đã chuẩn bị một nghiên cứu chi tiết về các lĩnh vực cần lưu ý trong bối cảnh này để có thể làm nền tảng cho việc học tập trong tương lai về các lý thuyết cốt lõi, các ví dụ về việc sử dụng các lý thuyết cốt lõi và xuất bản danh mục đầu tư thực tế.

Phần 2. Xuất bản thực tế sử dụng các thành phần khung UIkit

Chúng tôi sẽ giới thiệu nhiều thành phần khác nhau do UIkit cung cấp và tìm hiểu chi tiết về cấu trúc HTML và các lớp CSS để sử dụng từng thành phần. Chúng tôi tạo ra các ví dụ xuất bản thực tế dựa trên cách sử dụng. Bao gồm các thành phần cốt lõi nhất của UIkit, bao gồm Accordion, Slideshow, Dropdown, lightbox, Off-canvas, Modal, Swicher và Tab.

Phần 3. Bố cục web đáp ứng sử dụng các thành phần khung UIkit

Tìm hiểu chi tiết về cấu trúc HTML và các lớp CSS để sử dụng các thành phần riêng lẻ liên quan đến bố cục phản hồi do UIkit cung cấp. Chúng tôi sẽ tạo một ví dụ xuất bản thực tế về bố cục phản hồi bằng cách sử dụng các thành phần bố cục phản hồi như Cột, Chiều rộng, Lưới, Thanh trượt và Bộ lọc.

Mục 4. Trang chủ danh mục đầu tư cá nhân được tạo bằng các thành phần UIkit

Việc tạo trang chủ danh mục đầu tư cá nhân là điều cần thiết để có được công việc xuất bản. Bạn không thể có được việc làm chỉ bằng cách "có mặt ở đó". Trang chủ danh mục đầu tư cá nhân của bạn phải chứa nhiều kết quả xuất bản phong phú. Và điều quan trọng là phải trình bày kết quả xuất bản một cách chỉn chu cho những người tuyển dụng của bạn. Giải thích chi tiết và ví dụ về cách kết hợp các thành phần như Thanh trượt, Chế độ, Hộp đèn, Lưới và Chiều rộng để hiển thị kết quả xuất bản một cách phong cách trên trang chủ danh mục đầu tư cá nhân và cách cấu hình Phần web di động, Phần xuất bản trang web và Phần mã hóa thực tế và hiển thị kết quả. Tìm hiểu thông qua .

Mục 5. Tải xuống phiên bản hoàn chỉnh và tài liệu học tập của sinh viên

Bạn có thể tải xuống tất cả các tệp đã hoàn thành được tạo ở Phần 2, 3 và 4, bao gồm cả Tài liệu tham khảo dành cho sinh viên.

Đối với công việc xuất bản...

Điều quan trọng là phải tạo ra nhiều kết quả xuất bản khác nhau.
Và cách bạn trình bày kết quả xuất bản của mình một cách phong cách trên trang chủ danh mục đầu tư cá nhân cũng rất quan trọng để có được việc làm xuất bản.
UIkit là khung CSS cho phép bạn tạo trang chủ danh mục đầu tư cá nhân để tuyển dụng nhà xuất bản và hiển thị kết quả xuất bản theo cách tinh vi nhất.
Chúng tôi sẽ tạo ra công việc xuất bản web di động, công việc xuất bản trang web và công việc xuất bản thực tế bằng cách sử dụng các thành phần UIkit như Lightbox, Full Screen Modal, Slider, Slideshow và Filter để nhân viên HR có thể xem chúng một cách thuận tiện và rõ ràng mà không cần mở tab mới. . Bạn có thể.

Chúng tôi khuyên bạn nên học cách trình bày kết quả xuất bản của mình theo cách tinh vi nhất thông qua khóa học UIkit, framework CSS của Coding Works.

Tại sao Coding Works lại đề xuất UIkit?

• Thiết kế giao diện người dùng tối giản, sạch sẽ và tinh tế
• Phải có đối với các nhà xuất bản! Yêu cầu hỗ trợ nhiều thành phần JavaScript khác nhau
• Một khuôn khổ CSS trực quan và dễ sử dụng
• Phương pháp mã hóa CSS để kiểm soát các tùy chọn thành phần mà không cần mã hóa JavaScript
• Các thành phần dựa trên JavaScript thuần túy (Vanila JavaScript) mà không sử dụng jQuery
• Khung CSS đa trình duyệt tốt nhất
• Được xếp hạng trong Top 5 CSS Framework Nhận thức và sự ổn định

Trang web chính thức của UIkit : https://getuikit.com/docs/introduction

Các Khung CSS Tốt Nhất Cho Nhà Xuất Bản Web Liên Quan
Xem bài đăng trên blog của Inflearn về Coding Works : https://www.inflearn.com/blogs/1071

Xem trước thành phần trang web chính thức của UIkit : https://getuikit.com/docs/accordion

▲ Thành phần khung UIkit - Accordion

▲ Thành phần khung UIkit - Cảnh báo

▲ Thành phần khung UIkit - Đếm ngược

▲ Các thành phần của UIkit Framework - Drop & Tooltip

▲ Thành phần khung UIkit - Tiêu đề

▲ Thành phần UIkit Framework (Phản hồi) - Nhãn & Liên kết

▲ Thành phần khung UIkit - Người dẫn đầu

▲ Thành phần khung UIkit (phản hồi) - Lightbox

▲ Thành phần khung UIkit - Centered Modal

▲ Thành phần UIkit Framework - Chế độ toàn màn hình

▲ Thành phần khung UIkit - Off-canvas

▲ Các thành phần của khung UIkit - Cuộn & Lên trên

▲ Thành phần khung UIkit - Scrollspy (Hoạt ảnh cuộn hiện)

▲ Thành phần của UIkit Framework (Phản ứng) - Trình chiếu

▲ Các thành phần của khung UIkit - Switcher & Tab

▲ Thành phần của UIkit Framework - Chuyển đổi

▲ Thành phần khung UIkit (Phản ứng) - Cột

▲ Thành phần UIkit Framework (Phản hồi) - Chiều rộng & Lưới

▲ Thành phần UIkit Framework (Phản hồi) - Chiều rộng & Lưới

▲ Thành phần UIkit Framework (Phản hồi) - Chiều rộng & Lưới phản hồi

▲ Thành phần UIkit Framework (Phản hồi) - Thanh trượt

▲ Thành phần UIkit Framework (Phản hồi) - Thanh trượt nội dung

▲ Thành phần UIkit Framework (Phản ứng) - Bộ lọc

▲ Hiển thị danh mục trang chủ cá nhân #01 (Phần xuất bản web di động)

▲ Hiển thị danh mục trang chủ cá nhân #02 (Phần xuất bản trang web)

▲ Hiển thị danh mục trang chủ cá nhân #03 (Phần xuất bản thực tế)

H) Cần có trình độ lập trình web nào trước khi tham gia khóa học?

Đầu tiên, bạn cần có một số hiểu biết về HTML+CSS và kinh nghiệm sử dụng nó . Khóa học này được thiết kế dành cho những người có kỹ năng xuất bản cơ bản. Xin lưu ý!

Ngoài ra, vì UIkit chứa tất cả các tập lệnh của riêng nó nên không cần phải viết mã jQuery hay JavaScript để tìm hiểu và tạo các ví dụ thực tế, ngoại trừ trong những trường hợp rất đặc biệt.

Q) Tôi không thể sử dụng trình soạn thảo văn bản Brackets phải không?

Trong các phiên bản trước, Brackets không còn khả dụng do sự cố cài đặt tiện ích mở rộng và Adobe đã ngừng hỗ trợ. Nhưng với việc phát hành phiên bản mới của trình soạn thảo văn bản Brackets, mọi thứ hiện đã hoạt động bình thường trở lại.

Brackets hiện đã có sẵn trở lại trong Visual Studio Kodi.

Vui lòng gỡ cài đặt phiên bản hiện tại và tải xuống và cài đặt phiên bản mới (Phiên bản 2) từ trang web chính thức.

Trang web chính thức của Brackets: https://brackets.io/

Q) Bạn sử dụng trình soạn thảo văn bản nào trong lớp?

Khóa học này được tạo bằng Visual Studio Code . Visual Studio Code là chương trình miễn phí và không có giới hạn sử dụng. Nếu bạn không sử dụng Visual Studio Code làm trình soạn thảo văn bản, chúng tôi khuyên bạn nên sử dụng nó càng nhiều càng tốt, vì cách sử dụng và cài đặt môi trường của Live Sass Compiler được giải thích dựa trên Visual Studio Code.

_{Tải xuống Visual Studio Code (nhấp vào)}

※ Có những video chi tiết về cách sử dụng Visual Studio Code và các tiện ích mở rộng trên kênh YouTube Coding Works, vì vậy hãy nhớ xem các video liên quan nhé! Hãy đến và tự mình xem nhé.

• Cách sử dụng và thiết lập Visual Studio Code
• Cách sử dụng Emmet trong Visual Studio Code
• Ngăn chặn Full Reload xuất hiện khi sửa đổi CSS trong Visual Studio Code
• Cách cài đặt và sử dụng tiện ích mở rộng cần thiết của Visual Studio Code

🌏 Kênh YouTube của Coding Works Publishing - https://www.youtube.com/codingworks

H) Tôi có thể tải xuống toàn bộ ví dụ lý thuyết, toàn bộ ví dụ thực hành và tài liệu tham khảo ở đâu?

Thỉnh thoảng có những người hỏi trên diễn đàn Hỏi & Đáp rằng họ có thể tải xuống phiên bản hoàn chỉnh ở đâu. Tất cả các tệp hoàn chỉnh (html, css, js, tệp hình ảnh, v.v.) và tài liệu tham khảo được tạo từ các video lớp học có thể được tải xuống trong phần hiển thị bên dưới.

Q) Những hình ảnh được sử dụng trong sản phẩm mẫu có được bảo vệ bản quyền không?

Các hình ảnh được sử dụng trong ví dụ này không có bản quyền. Tôi đã tìm kiếm trên Pixabay và Freepik và sử dụng những hình ảnh tôi cần cho ví dụ. Đối với ví dụ video đầu tiên của bài giảng, sinh viên nên sử dụng hình ảnh đính kèm. Tuy nhiên, nếu bạn tải lên trang chủ danh mục đầu tư cá nhân của mình, vui lòng đảm bảo thay đổi hình ảnh trong Pixabay hoặc Freepik và tải lên. Pixabay / FreePik

H) Trình tự học các ví dụ có phải được học theo thứ tự từ đầu không?

Không có vấn đề gì nếu các bài giảng riêng lẻ được tiến hành theo thứ tự mà người học mong muốn. Tuy nhiên, nếu bạn học theo từng phần, chúng tôi khuyên bạn nên học theo thứ tự. 

Ví dụ, bạn không nên học Phần 3 rồi mới học Phần 2. Vui lòng học theo thứ tự sau: [Phần 2] → [Phần 3] → [Phần 4] .

Q) Có video nào giải thích lý thuyết CSS trung cấp trong khi tạo ví dụ không?

Khóa học này không nhằm mục đích tạo ra các ví dụ xuất bản dành cho người mới bắt đầu. Đây là quá trình tạo ra một ví dụ xuất bản trung gian. Vì vậy, bạn nên có một số kiến ​​thức về lý thuyết CSS từ cơ bản đến trung cấp. Điều đó không có nghĩa là bạn nhất thiết phải biết rõ về nó. Lý thuyết CSS cơ bản và trung cấp được lặp lại liên tục trong khi tạo ví dụ. Và trên Kênh YouTube Publishing của Coding Works, có một danh sách phát có tên là [Intermediate Theory] CSS Intermediate Theory, trong đó có các video chi tiết về lý thuyết trung gian cần thiết để tạo ví dụ. Vì vậy, trong khi học khóa học hiện tại, bạn nên nghiên cứu lý thuyết trung gian cùng một lúc.

❤ Tin tức về việc đỗ kỳ thi publisher của sinh viên Coding Works

▲ Một sinh viên học với tôi trong khoảng 4 tháng rưỡi tại một khóa học xuất bản do nhà nước tài trợ đã nhận được tin nhắn KakaoTalk nói rằng anh ấy đã có việc làm.

▲ Tôi nhận được tin nhắn KakaoTalk về kết quả phỏng vấn dành cho học viên tham gia khóa học ngoại tuyến về cách tạo hồ sơ cá nhân tại Coding Works (ngày 24 tháng 4 năm 2023).

❤ Email được gửi bởi một sinh viên Coding Works sau khi nhận được việc làm tại một nhà xuất bản

Xin chào cô giáo :)

Thưa thầy, em là Kim O-jeong, một học viên đang theo học bài giảng của Inflearn.
Tôi là một sinh viên đã gửi email vào mùa hè này để xin lời khuyên về danh mục đầu tư cá nhân của mình.
Bạn còn nhớ không?😊😊

Không có gì khác hơn là,
Tôi gửi email này để thông báo với bạn rằng tôi đã thành công khi xin được việc tại một nhà xuất bản với danh mục đầu tư mà tôi nhận được từ bạn!

Thậm chí!!
Công ty đã liên hệ với tôi trước sau khi xem danh mục đầu tư mà tôi đăng trên Saramin, và tôi đã được phỏng vấn qua Zoom và trúng tuyển!
Công ty đã trả cho tôi mức lương mà tôi mong muốn, và tôi là một nhà xuất bản thực thụ, không làm công việc thiết kế hay phát triển! Tôi đã vào một công ty mà tôi chỉ có thể làm việc.

Đó là một công ty đang tìm kiếm một nhà xuất bản có kinh nghiệm, và họ đã liên hệ với tôi, một nhân viên mới, và hỏi lý do tại sao họ lại liên hệ với tôi.
Anh ấy nói rằng anh ấy đã xem qua danh mục đầu tư của nhiều người khác, nhưng anh ấy liên hệ với tôi vì "Định nghĩa chức năng" trong danh mục đầu tư của tôi đã thu hút sự chú ý của anh ấy.

Tôi nghĩ tất cả là nhờ vào bài giảng của giáo viên.
Nếu tôi không tham gia lớp học của giáo viên, hồ sơ của tôi sẽ chỉ ở mức trung bình, nhưng tôi đã có thể xin được việc làm thành công nhờ những lời khuyên tuyệt vời mà giáo viên đã chỉ cho tôi!

Mặc dù tôi chưa bao giờ thực sự gặp anh ấy,
Khi tạo danh mục đầu tư của mình, tôi đã dựa rất nhiều vào nó, tin tưởng nó và làm việc chăm chỉ trong khi xem các bài giảng của giáo viên!

Tôi cảm thấy kỹ năng của mình đã được cải thiện rất nhiều trong ba tháng tôi dành để nghe giảng và tạo hồ sơ năng lực, nhiều hơn so với những kỹ năng tôi đã xây dựng được khi học các lớp học dài tại học viện.

Tôi vô cùng mong muốn điều đó,
Tôi đã tin tưởng và làm theo lời thầy giáo nói và kết quả thực sự tốt.

Cảm ơn bạn rất nhiều!

Hãy cẩn thận với corona
Tôi hy vọng sẽ gặp lại bạn với một bài giảng tuyệt vời nữa :)

Xin chào thầy cô~ Em là học viên Inflearn OOO~ Em tìm ra địa chỉ email từ câu trả lời của một học viên khác..😊😊

Tôi chỉ muốn nói lời cảm ơn 😊😊

Tôi đã gặp khó khăn khi tham gia lớp học của bạn và nộp hồ sơ xin việc trong khoảng hai tuần nay...
Tôi đã vượt qua cuộc phỏng vấn tại một công ty và quyết định đến làm việc.. Cảm ơn bạn rất nhiều..😭😭

Thực ra, tôi lo lắng vì tôi đã 32 tuổi. Tôi đã nộp rất nhiều hồ sơ xin việc nhưng không nhận được cuộc gọi nào.
Nhưng giám đốc nhân sự của công ty này lại nói rằng ông ấy không thích những người tốt nghiệp từ các học viện tư nhân 😊😊
Công ty mà tôi quyết định gia nhập khá nhỏ nhưng có nhiều nhà phát triển và thiết kế web.
Họ nói rằng họ sẽ đào tạo họ trong ba tháng và sau đó đưa họ vào thực hành.
Hơi xa và lương thì thấp nhưng mình sẽ cố gắng học hành chăm chỉ và cố gắng tăng lương~ 😊😊

Cảm ơn bạn rất nhiều vì mọi thứ. Thật tuyệt vời khi tôi có thể kiếm được việc làm bằng cách tham gia lớp học trực tuyến này và nhận được câu trả lời thỏa đáng cho những câu hỏi của mình.

Tôi sẽ tiếp tục học tập và nâng cao kỹ năng của mình bằng cách lắng nghe bài giảng của giáo viên. Cố lên~!

🙋🏻‍♂️ Trước khi bạn đặt câu hỏi! Hãy đọc nhé~!!

Nếu bạn có bất kỳ thắc mắc nào trong khi học, hãy hỏi. Khi đặt câu hỏi, bạn phải tải lên nội dung không hoạt động, mã và ảnh chụp màn hình kết quả của trình duyệt. Đối với mã, bạn phải tải lên tất cả mã HTML, CSS và JS để chúng tôi có thể đưa ra câu trả lời chính xác.

Nếu bạn chỉ mô tả vấn đề của mình bằng văn bản mà không đưa bất kỳ mã nào vào câu hỏi, sẽ rất khó để đưa ra câu trả lời chính xác, trừ khi vấn đề thực sự đơn giản. Sau đó, tôi không còn lựa chọn nào khác ngoài việc trả lời lại rằng 'Vui lòng tải lên mã HTML, CSS, JS và trình duyệt~', điều này gây ra nhiều phiền phức và mất nhiều thời gian hơn để tìm ra giải pháp.

▲ Vui lòng kiểm tra các câu hỏi thường gặp trong cộng đồng bài giảng có liên quan trước~

⚡ Không thể thiếu để học tập hiệu quả! Vui lòng tham khảo kênh YouTube của Coding Works Publishing.

Vui lòng xem video bài giảng lý thuyết trên kênh YouTube của Coding Works Publishing. Tất nhiên, không phải tất cả video lý thuyết đều có trên kênh YouTube, nhưng hầu hết các video lý thuyết quan trọng đều có trên đó. Vì có rất nhiều video nên bạn nên tìm kiếm những video như ví dụ bên dưới.

Kênh YouTube của Coding Works Publishing: https://www.youtube.com/codingworks

Phần 0. [Video giới thiệu] Khung CSS tốt nhất, Khung UIkit

• [Video giới thiệu bài giảng] Các framework CSS Front-End tốt nhất, UIKit
• [Video giới thiệu bài giảng] So sánh các CSS Framework - Bootstrap vs UIkit

Phần 1. Thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code

• Cách sử dụng và thiết lập Visual Studio Code
• Cách sử dụng Emmet trong Visual Studio Code
• Cách cài đặt và sử dụng tiện ích mở rộng cần thiết của Visual Studio Code
• Ngăn chặn Full Reload xuất hiện khi sửa đổi CSS trong Visual Studio Code

Phần 2. Xuất bản thực tế sử dụng các thành phần khung UIkit

• Cách cài đặt khung UIkit và giới thiệu các thành phần chính
• Thành phần UIkit (Cách sử dụng) – Accordion
• Thành phần UIkit (Xuất bản thực tế) - Accordion
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Cảnh báo
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Đếm ngược
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Bìa
• Thành phần UIkit (Cách sử dụng) - Drop & Tooltip
• Thành phần UIkit (Xuất bản thực tế) - Drop & Tooltip
• Các thành phần UIkit (cách sử dụng và xuất bản trong thực tế) - tiêu đề (xác định tiêu đề với nhiều kiểu khác nhau)
• Thành phần UIkit (Sử dụng, Xác thực) - Nhãn & Liên kết
• Thành phần UIkit (Xuất bản thực tế) - Nhãn & Liên kết
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Leader
• Thành phần UIkit (Cách sử dụng) – Lightbox
• Thành phần UIkit (Xuất bản thực tế) – Lightbox (Thư viện ảnh)
• Thành phần UIkit (Xuất bản thực tế) – Lightbox (Hiển thị kết quả HTML của Portfolio)
• Thành phần UIkit (Cách sử dụng) – Modal
• Thành phần UIkit (Xuất bản thực tế) – Modal (Cửa sổ Modal Đăng ký Bản tin)
• Thành phần UIkit (Xuất bản thực tế) – Modal (iframe portfolio full-screen modal)
• Các thành phần UIkit (cách sử dụng và xuất bản trong thực tế) - Off-canvas
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) – Cuộn & Lên đầu
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Scrollspy
• Các thành phần UIkit (sử dụng và xuất bản thực tế) – Trình chiếu (sử dụng cơ bản, Viewport)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) – Trình chiếu (Lớp phủ Nội dung, Chuyển tiếp)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Switcher & Tab (Nội dung Menu Tab)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Switcher & Tab (Ứng dụng Nội dung Menu Tab)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Chuyển đổi
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) - Video

Phần 3. Bố cục web đáp ứng sử dụng các thành phần khung UIkit

• Thành phần UIkit (Cách sử dụng) - Bố cục web đáp ứng (Cột)
• Thành phần UIkit (Xuất bản thực tế) - Bố cục web đáp ứng (Sử dụng chiều rộng cơ bản)
• Thành phần UIkit (Xuất bản thực tế) - Bố cục web đáp ứng (Bố cục đáp ứng theo chiều rộng)
• Thành phần UIkit (Xuất bản thực tế) - Bố cục web đáp ứng (Lưới)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) – Thanh trượt (Phản hồi)
• Thành phần UIkit (Sử dụng và Xuất bản Thực tế) – Bộ lọc (Bộ lọc Lộ trình Công việc Mã hóa)

Mục 4. Trang chủ danh mục đầu tư cá nhân được tạo bằng các thành phần UIkit

• Trưng bày danh mục trang chủ cá nhân của bạn #01 (Phần xuất bản web di động)
• Hiển thị danh mục trang chủ cá nhân của bạn #02 (Phần xuất bản trang web)
• Trưng bày danh mục trang chủ cá nhân của bạn #03 (Phần xuất bản thực tế)

Mục 5. Tải xuống phiên bản hoàn chỉnh và tài liệu học tập của sinh viên

• [Phiên bản hoàn thiện] Phần 2. Xuất bản thực tế bằng cách sử dụng các thành phần của UIkit Framework
• [Hoàn thành] Phần 3. Bố cục web đáp ứng sử dụng các thành phần của khung UIkit
• [Hoàn thành] Mục 4. Trang chủ danh mục đầu tư cá nhân được tạo bằng các thành phần UIkit
• Mô tả chức năng cho việc xuất bản toàn bộ trang web (PDF)