NỘI DUNG BÀI VIẾT
Để trở thành một lập trình viên Front-end giỏi việc thành thạo các kỹ năng về HTML cũng như CSS là rất cần thiết. Để một trang web có thể có những giao diện đẹp mắt, thu hút người dùng thì CSS là một trong những yếu tố quạ trọng nhất. Nhưng việc tìm tài liệu học CSS khá khó khăn với người mới bắt đầu, đặc biệt là có quá nhiều thông tin trên Internet, khiến cho bạn không biết nên bắt đầu từ đâu.
Vì vậy, trong bài viết này mình đã tập hợp một danh sách gồm các tài liệu học CSS mà cá nhân mình đánh giá là rất tốt. Nó sẽ giúp bạn nắm vững những khái niệm cơ bản về CSS cũng như giúp bạn khi gặp khó khăn và nâng cao kỹ năng CSS của mình nhanh chóng.
Không mất thêm thời gian nữa, hãy cùng mình đi xem danh sách những tài liệu này nhé!
1. Awesome CSS Learning
“Awesome CSS Learning” là một kho lưu trữ GitHub chứa các liên kết đến các tài liệu học CSS chất lượng. Tài nguyên này chủ yếu là về các khái niệm CSS và các mô-đun của nó. Bạn có thể tìm thấy các liên kết để tìm hiểu các khái niệm như:
- Fundamental concepts
- CSS units
- Selectors
- Custom properties (aka CSS variables)
- Layout
- Animation
- Related
Nếu bạn đang tìm kiếm tài liệu để hiểu các nguyên tắc cơ bản về CSS, thì kho lưu trữ này rất tuyệt vời!
2. Magic of CSS
Kho lưu trữ GitHub này là kho lưu trữ đằng sau trang web Magic of CSS. Theo mô tả trên GitHub, đây là một khóa học CSS và nó dành cho các nhà phát triển web muốn trở thành “ảo thuật gia”. Nghe có vẻ hấp dẫn đúng không nào.
Khóa học “Magic of CSS” được chia thành sáu chương:
- Chapter 1: The Box
- Chapter 2: Layout
- Chapter 3: Tables
- Chapter 4: Color
- Chapter 5: Typography
- Chapter 6: Transitions
Về cơ bản, khóa học này dạy bạn các nguyên tắc cơ bản về CSS. Một trong những điều tốt nhất về khóa học này là nó bao gồm các liên kết đến các tài liệu học CSS khác. Ví dụ, nếu bạn muốn tìm hiểu thêm về một khái niệm, bạn có thể sử dụng các tài nguyên được liên kết.
3. CSS Trick
Khi nó ra mắt vào năm 2007, trang web này có tất cả mọi thứ về CSS. Bây giờ nó đã được mở rộng khá nhiều, nhưng vẫn có rất nhiều thông tin và hướng dẫn hữu ích về CSS và HTML cho bạn mới bắt đầu. Nó chắc chắn đáng để ghé thăm.
4. CSS Separator Generator
Chia các phần trang web của bạn với phong cách riêng! Trình tạo CSS này cho phép bạn tạo các dấu phân tách phần khác nhau của trang web. Bạn có thể tùy chỉnh dấu phân cách và bạn có thể xem bản xem trước trong thời gian thực. Khi bạn quyết định sử dụng dấu phân tách nào, trang web sẽ cung cấp cho bạn HTML và CSS.
5. Shadow Generator
Ứng dụng tạo bóng này cho phép bạn tạo và tùy chỉnh bóng đổ (box-shadow). Xem hình ảnh với trình tạo bóng dưới đây!
Bạn có thẻ tùy chỉnh các thông số như:
- layers of shadows
- final transparency
- final vertical distance
- final blur strength
- reduce spread
Đó là một nguồn tài nguyên tuyệt vời vì bạn có thể thấy bóng trông như thế nào trong thời gian thực. Nếu bạn muốn tạo bóng đẹp, trang web này sẽ giúp ích cho bạn rất nhiều.
6. CSS Hover
Gói “CSS Hover” là một tập hợp các hiệu ứng di chuột mà bạn sử dụng trên các liên kết, nút, biểu tượng, SVG và hơn thế nữa. Bạn có thể sử dụng và sửa đổi chúng khi bạn thấy phù hợp! Bạn có thể sử dụng gói này theo ba cách:
- Cài đặt qua npm
- Cài đặt qua bower
- Download trực tiếp file CSS
Nếu bạn không muốn cài đặt nó hoặc thêm tất cả các hoạt ảnh vào dự án của mình, chỉ cần mở tệp CSS và chỉ sao chép hiệu ứng bạn muốn. Bạn có thể kiểm tra từng hiệu ứng di chuột trên trang web chính thức của Hover.
7. CSS Grid Generator
Trình tạo CSS grid cho phép bạn tạo lưới CSS và tùy chỉnh theo ý mình. Bạn có thể chỉ định số cột và số hàng. Ngoài ra, bạn có thể đặt khoảng cách cột và hàng theo pixel.
Không có nhiều điều để nói về trình tạo CSS này ngoài việc nó quá tuyệt vời! Xem ứng dụng trong hình trên.
8. Awesome CSS
Kho lưu trữ “Awesome CSS” là danh sách các tài nguyên CSS. Theo mô tả của nó, đó là danh sách các Framework, style guide ,tool kit và các loại tài liệu thú vị khác để viết CSS dễ dàng và nhanh chóng hơn.
Điều quan trọng cần lưu ý là nó không bao gồm tài liệu để học CSS. Tài nguyên này được khuyến nghị cho những người đã biết CSS hoặc ít nhất là những điều cơ bản. Một số thông tin bạn có thể tìm thấy trong kho này bao gồm:
- Parsers
- Preprocessors
- Frameworks
- Toolkits
- CSS Structure
Và còn nhiều hơn nữa! Bạn hãy thử truy cập nó nhé.
9. Fancy Border Generator
Nói lời tạm biệt với những border nhàm chán. Từ bây giờ, bạn có thể sử dụng trình tạo đường viền này để tạo một số đường viền đẹp mắt!
Bạn có thể tạo đường viền theo ý thích bằng cách chỉ định tám giá trị cho thuộc tính bán kính đường viền, nó có thể tạo các hình dạng trông tự nhiên. Một công cụ hay đúng không nào.
10. Gradients Generator
Các linear gradient thông thường thường có các cạnh cứng nơi chúng bắt đầu hoặc kết thúc. Tuy nhiên, bạn có thể làm cho chúng trông mượt mà hơn bằng cách nới lỏng(easing) chúng.
Hình dưới đây minh họa sự khác biệt giữa linear gradient và easing. Bạn có thể thấy rằng giảm độ dốc tuyến tính làm cho nó trông đẹp hơn nhiều!
Điều quan trọng cần lưu ý là nó chưa phải là một tính năng CSS. Bạn có thể tạo một plugin PostCSS / Figma cho nó hoặc trình chỉnh sửa từ trang web.
Kêt luận
Trên đây là top 10 tài liệu học CSS miễn phí mà mình tổng hợp được. Mình hy vọng những tài liệu mình liệt kê trên đây sẽ một phần nào đó giúp bạn học tập tốt hơn trên con đường học lập trình của mình. Chúc các bạn thành công!
Cảm ơn các bạn đã theo dõi bài viêt!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
