Xin chào tất cả các bạn, mình là Quân, hôm nay mình sẽ hướng dẫn các bạn tạo một trang GitHub Profile phiên bản vũ trụ cực đẹp mà vẫn không thiếu phần chuyên nghiệp nha. Đặc biệt là phần mình hướng dẫn cách để có thể Style CSS vào file README.md (mặc định không thể viết trực tiếp trong file này được) để các bạn có thể thỏa sức sáng tạo với kỹ năng CSS, Animation…thay vì phải sử dụng tới những mẫu ảnh GIF nha.
“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“
Những nội dung có trong bài:
- Note lại kỹ năng Style CSS cho file Readme.md của GitHub
- Video hướng dẫn làm trang GitHub Profile Readme Universe mode
- Repo GitHub của bài hướng dẫn ngày hôm nay
1. Note lại kỹ năng Style CSS cho file Readme.md của GitHub
Cái này thì cũng khá đơn giản, mình sẽ liệt kê theo các bước nha:
- Chúng ta có thể sử dụng file SVG với thẻ <img> kiểu <img src=”trungquandev.svg” /> trong file Readme.md
- Trong file SVG có thể sử dụng phần tử <foreignObject>
- Phần tử <foreignObject> có cho phép chúng ta tùy biến nội dung HTML và CSS bên trong nó
- Từ đây các bạn có thể thỏa sức sáng tạo nội dung trong file SVG bằng các kỹ năng CSS Animation …vv rồi nhé.
Ngoài ra nếu bạn nào chưa biết cách sử dụng Git – GitHub như thế nào cho đúng chuẩn đi làm thực tế thì có thể tham khảo bài này của mình trước nha:
2. Video hướng dẫn làm trang GitHub Profile Readme Universe mode
(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)
3. Repo GitHub của bài hướng dẫn ngày hôm nay
Mình có để full source code của bài hôm nay ở repo này cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và tùy biến thoải mái nha.
Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ về mặt tinh thần bằng cách cho mình 1 star trên repo này để mình có động lực tiếp tục viết những bài viết chất lượng nha, cảm ơn các bạn.
https://github.com/trungquandev/trungquandev
Cảm ơn các bạn đã dành thời gian đọc bài viết.
Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.
Best Regards – ? Trungquandev Official ❤
Tham khảo kiến thức:
– Ý tưởng trái đất xoay tròn + background Space tuyệt đẹp:
https://codepen.io/manz/pen/XbjxMR
– Tổng hợp nhiều ý tưởng cho GitHub Profile Readme (chiếc Profile của mình cũng đang có sẵn một pull request ở repo này chờ tác giả Merge ^^ ):
https://github.com/abhisheknaiidu/awesome-github-profile-readme
– Nguồn ảnh Free từ Pixabay (Mình lấy cái ảnh bản đồ thế giới ở đây):
https://pixabay.com/vi/
“Thanks for awesome knowledges.”
“ From author: trungquandev ”
Khóa học lập trình làm việc thực tế:
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
