Share Code Web giới thiệu bản thân AboutMe2 cực đẹp

Lần trước mình có share code web giới thiệu bản thân AboutMe1. Nhận được phản hồi tích cực từ mọi người, cho nên mình làm thêm một trang nữa. Nếu muốn xem lại AboutMe1 của mình thì ấn vào liên kết dưới đây.

Xem AboutMe1

Điểm nổi bậc của Source Code AboutMe2 này

Trang AboutMe2 mình không dùng thư viện Javascript nữa và cũng lượt bỏ hoàn toàn AngularJS. Cho nên so với trang trước thì nó nhẹ hơn rất nhiều lần, tốc độ load cũng nhanh hơn cả trăm lần.

Lần này, mình chỉ dùng bộ dàn trang của Bootstrap 4 và Javascript nguyên thủy và kết hợp CSS3 & HTML5. Mọi thứ đều đều có sẵn trên mọi trình duyệt cho nên website sẽ trở nên cực kỳ nhẹ và không tốn nhiều thời gian tải.

Giao diện trang Web giới thiệu bản thân

Vẫn giữ các chức năng như cũ, trang web được viết cho mục đích làm trang giới thiệu bản thân. Giao diện đơn giản, dễ dùng và dễ chỉnh sửa. Tương thích đa nền tảng thiết bị và giao diện đơn giản nhưng hiện đại.

Khi bạn rê chuột lên tên nhân vật thì sẽ xuất hiện thêm dòng chữ xác thực Verified đẹp mắt.

Khi sang trình duyệt của Tablet hoặc di động thì trang web sẽ tự sắp xếp và co dãn nội dung. Do đó, bạn không cần phải chỉnh sửa gì nhiều cả.

Hướng dẫn tải về và chỉnh sửa

Bạn cần tải về và chỉnh sửa lại thành thông tin của bạn. Sau đó, upload lên host hoặc trang blogspot để sử dụng. Mình sẽ hướng dẫn từng bước, bạn hãy tải source code về theo liên kết dưới đây.

Tải về Source Code

Nhớ bỏ qua quảng cáo để ủng hộ mình nha.

Giải nén File AboutMe2.zip ra bạn sẽ có được toàn bộ source code. Kiểm tra xem có đầy đủ các File như trong ảnh dưới đây không. Nếu thiếu thì báo cáo mình qua Facebook nhé.

Hướng dẫn chỉnh sửa code web

Bạn mở File index.html bằng chương trình chỉnh sửa code website (mình dùng Sublime Text 3 để chỉnh sửa – theo thói quen ).

Ấn tổ hợp phím Ctrl + F để mở chức năng tìm kiếm. Sau đó tìm kiếm từ khóa infoBox để đến khu vực chỉnh sửa đầu tiên.

Tiếp theo, tìm kiếm từ khóa detailInfo để chỉnh sửa nội dung trong khu vực tiếp theo.

Tìm kiếm từ khóa Facebook để chỉnh sửa các liên kết.

Thay đổi ảnh đại diện

Đầu tiên, chọn ra ảnh đại diện mà bạn muốn. Sau đó, để vào thư mục img trong file đã giải nén.

Để thay đổi ảnh đại diện thì bạn tìm từ khóa avatarBox để chỉnh sửa liên kết hình ảnh lại là được.

Vậy là xong, giờ upload lên host và tận hưởng thôi nào.

Chúc bạn thành công
Lmint.

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

AboutMe2 có khác gì so với AboutMe1?

AboutMe2 nhẹ hơn rất nhiều so với AboutMe1 vì không sử dụng thư viện Javascript và AngularJS. Nó chỉ sử dụng Bootstrap 4, Javascript nguyên thủy, CSS3 và HTML5, giúp tốc độ tải trang nhanh hơn đáng kể.

Tôi có thể chỉnh sửa thông tin cá nhân như thế nào?

Bạn mở file index.html, sử dụng chức năng tìm kiếm (Ctrl+F) để tìm các từ khóa như infoBox, detailInfo và thay đổi thông tin tương ứng. Bạn cũng có thể thay đổi ảnh đại diện bằng cách tìm từ khóa avatarBox và cập nhật đường dẫn hình ảnh.

Làm thế nào để thay đổi ảnh đại diện?

Thay thế ảnh đại diện trong thư mục img, sau đó tìm và cập nhật đường dẫn hình ảnh trong file index.html bằng cách tìm kiếm từ khóa avatarBox và chỉnh sửa liên kết hình ảnh.