Series về cách tạo một CV đơn giản nhưng cực chất cho dev cực chất

1. Phần 1: Chuẩn bị và cấu trúc project html, css, js cùng BEM thần thánh (Link)
2. Phần 2: Thiết kế, lắp ráp index-page và deploy lên github-page (Link)
3. Phần 3: Refactor code và các chú ý về BEM
4. Phần 4: Thiết kế và fetch Gist, lắp ráp blog-page và deploy lên github-page

1. Phần 1: Chuẩn bị và cấu trúc project html, css, js cùng BEM thần thánh

Mục lục

1. Vấn đề
2. Những thứ cần chuẩn bị
3. Tạo repository trên github.com
4. BEM là gì, sao phải dùng BEM
5. Cấu trúc Project
6. Kết bài

0. Vấn đề

Heyzo what's up

Xin chào tất cả mọi người, trước đây khi mà mình đi xin việc thì đến giai đoạn nộp CV, thì mình hay lên topcv.vn hay là cvsimply.com để tậu cho mình một cái CV phải không nào, việc đó rất tiện nhưng mình cảm thấy nếu mình là dev có thể xây dựng cho mình một CV theo phong cách của riêng mình thì gây ấn tượng mạnh hơn với nhà tuyển dụng nha (Biết đâu lọt vào vòng gửi xe ^^)

Hôm nay ở nhà chống dịch deadline cũng không nhiều, vì vậy mình sẽ viết một series về cách tạo CV đơn giản nhưng cực chất cho dev he, à không riêng gì dev các bạn nào muốn tạo cho mình một CV của riêng mình thì cứ đọc. Cái này mình chỉ muốn chia sẻ cho mọi người nên có gì đắc tội mong mọi người nhẹ tay cho em

Let's go

1. Những thứ cần chuẩn bị

Nào cặp nào bút, nào sách nào vở, không không

• Editor (Mình sài VScode nha ai thích thì sài không thích thì sài ^^)
• Một ít kiến thức về HTML, CSS, JS không biết gì lên đây tìm nha
• Biết dùng git căn bản, ai chưa rành vô đây để học, học hết video đảm bảo biết sài git
• Có một repository trên git hub không có thì xem dưới mình bày tạo

2. Tạo repository trên github.com

• Truy cập vào trang web https://github.com/, chọn đăng nhập bằng google hoặc đăng kí mới

• New repository, giao diện hiện ra như hình dưới điền tên vào nha (Mà điền tên nào liên quan tí vì cái này sẽ là domain của mình luôn ấy)

• Sau đó nhấn Create repository và làm theo các bước dưới đây (gõ trong command line nhé)

mkdir MY_PROFILE 
README.md // Tạo file tên như vậy nhá
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/NguyenThienLy/MY_PROFILE.git
git push -u origin master

Như vậy, sau khi thao tác xong reponsitory của bạn sẽ giống hình dưới đây, rồi chuẩn bị xong rồi đó @-@

3. BEM là gì, sao phải dùng BEM

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

Qui ước đặt tên

.block {}   /* Block */

.block__element {}  /* Element */

.block--modifier {}  /* Modifier */

Định nghĩa ở trên đây (Đọc thêm về BEM ở đây) nhưng mình chỉ muốn nói rằng trước đây khi chúng ta đặt tên class trong css đôi khi đã xảy ra những lỗi về mức độ ưu tiên trong css, hay đặt tên không chuẩn một khi project lớn lên sẽ gây nhiều phiền phức ... Có nhiều quy tắc để giải quyết vấn đề này nhưng mình thấy BEM là dễ hiểu và thực hành mà vẫn giải quyết được các vấn đề liên quan

Cách thực hành BEM mình sẽ làm ứng dụng trực tiếp vào cái Project CV này luôn ^^

4. Cấu trúc Project

Các bạn có thể tự thiết kế cho mình một bản PSD theo ý thích nhưng mình thiết kế không đẹp, nên mình sẽ chọn một CV đã có sẵn để clone lại nha. Từ bản clone này các bạn có thể thêm mắm, muối để biến nó thành một bản CV của chính mình !!

CV này mình được một người bạn gửi cho và thực sự mình cảm thấy nó quá đẹp và đáng để mình học hỏi nha, link đây brittanychiang.com

Bắt đầy với việc chia cấu trúc project như dưới đây (Mình chia như vầy để deploy lên git-hub chạy được luôn nha)

Cây thư mục sẽ trông như vậy

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     └─── component
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html

Giờ mình sẽ bắt đầu phân tích một thành phần dưới đây trong trang web theo BEM nhé

Bạn để ý rằng block header này có 3 Element gồm:

• Logo bên trái
• Menu ở giữa
• button bên phải

Một chú ý là Element button sẽ được dùng lại trong project này vì vậy mình cũng sẽ xem Element Button như một Block độc lập và nằm trong Block Header

Vậy giờ sẽ thêm các file thích hợp vào cây thư mục, nó sẽ trông như vầy ^^

└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     └─── component
│            └─── button.css
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html

Khi bắt đầu với BEM mình đã dùng sai về nguyên tắc của nó, vì vậy vào phần sau mình sẽ chia sẽ cho các bạn nghe nhé ^^

5. Kết bài

Đến đây cũng đã hết phần này rồi, để tiếp tục theo dõi mấy bạn kích vào đây để đi qua phần 2 nhé

Chúc mọi người vượt qua mùa dịch an toàn, và làm những điều thật có ít nhé

Mày không thoát được đâu con trai, tu be không tình yêu

Link tham khảo:

• https://www.w3schools.com/
• https://www.topcv.vn/
• https://www.cvsimply.com/
• http://getbem.com/