Lập trình JavaScript với FCC – Personal Portfolio

Cập nhật ngày 17/10/2021

Tiếp tục series lập trình JavaScript với FCC, bài viết này mình sẽ chia sẻ với bạn project thứ hai mà mình đã làm trên freeCodeCamp đó là Build a personal portfolio webpage thuộc chuyên mục Basic Front End.

Build a personal portfolio webpage trên codepen

Một số điểm cần ghi nhớ

Các thư viện sử dụng

Đối với cách config thư viện sử dụng trên codepen, mình đã giới thiệu trong bài viết Lập trình JavaScript với FCC - Build a Tribute Page. Bạn có thể tham khảo lại để biết cách sử dụng.

Trong project này, mình sử dụng các công cụ như sau:

Như vậy, so với project, mình đã không sử dụng Bootstrap nữa mà thay vào đó, mình tự triển khai design website responsive trong main.css. Ngoài ra, mình còn sử dụng thêm thư viện Mustache.js để xử lý template trong HTML.

Các mục cần có của một Personal Portfolio

Theo mình, một Personal Portfolio cần phải có các mục sau:

  • Navigation bar: dùng để điều hướng tới các mục trên trang web.
  • About: dùng để giới thiệu cho mọi người biết bạn là ai, một chút thông tin về học tập, bằng cấp hay kinh nghiệm làm việc.
  • Work (Projects hay Portfolio): dùng để show ra các project mà bạn đã làm. Vì hiện tại mình chưa làm được nhiều các web project nên mục này hầu như vẫn là "comming soon".
  • Contact: giúp người đọc có thể dễ dàng liên lạc với bạn nếu muốn.

Đó, về cơ bản, một personal portfolio sẽ gồm các thông tin như vậy.

Kết luận

Trong bài viết này mình sẽ không giới thiệu chi tiết về code nữa. Thay vào đó, nếu bạn đọc có hứng thú, mời bạn xem qua trang personal portfolio của mình. Nếu bạn thấy trong giao diện có phần nào hay và muốn áp dụng thì có thể đặt câu hỏi cho mình ở phần bình luận. Mình sẽ cố gắng giải đáp.

Xin chào và hẹn gặp lại bạn ở bài viết tiếp theo, thân ái!

Tham khảo

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

Lập trình JavaScript với FCC - Build a Tribute Page
Lập trình JavaScript với FCC - Random Quote Machine
Chia sẻ:

Bình luận