menu Đóng

Học CSS thông qua tương tác trò chơi dành cho Front-end Developer (Phần 2)

thumbnail Học CSS thông qua tương tác trò chơi dành cho Front-end Developer (Phần 2)

🎮  Công cụ học các skills CSS khác

CSS SELECTORS CHEATSHEET

CSS Selectors Cheatsheet là một bài tập tương tác để kiểm tra sự hiểu biết của bạn về CSS Selectors. Một số câu đầu tiên khá dễ dàng nhưng các bài tập sẽ dần tăng độ khó khi bạn đi vào các câu hỏi sâu hơn, nâng cao hơn như các selectors ít được sử dụng nhiều.

Học tại đây: https://frontend30.com/css-selectors-cheatsheet/

Cfd Circle

 

CSS ANIMATIONS

Nếu bạn muốn nâng cao kỹ năng của mình trong việc tạo animation trên web, CSS Animations là một nền tảng vững chắc, đầy đủ tính năng để học và thử nghiệm với các phần khác nhau của CSS Animations. Khóa học gồm 32 phần này có rất nhiều đồ họa dựng sẵn được sử dụng trong khóa học làm cơ sở cho các hình ảnh động. Đây là một cách thú vị để học keyframe animation với CSS.

Học tại đây: https://css-animations.io/

Cfd Circle

 

CSS RULER

CSS Ruler cung cấp cho bạn bản trình bày trực quan về ba loại đơn vị CSS mà bạn có thể thử nghiệm: font relative (ví dụ: rem, ch), tỷ lệ phần trăm cửa sổ (ví dụ: vh, vw) và giá trị tuyệt đối (ví dụ: px, in).

Học tại đây: https://katydecorah.com/css-ruler/

Cfd Circle

 

FILTER BLEND

Filter Blend là một trang web nhỏ gọn cho phép bạn xử lý các giá trị khác nhau được sử dụng cho các thuộc tính mix-blend-mode, background-blend-mode và filter của CSS. Bạn có thể thêm một hoặc nhiều hình ảnh của riêng mình trong các lớp, cùng với màu nền, sau đó điều khiển các cài đặt để xem các giá trị khác nhau hoạt động như thế nào.

Học tại đây: https://ilyashubin.github.io/FilterBlend/

Cfd Circle

 

CSSBATTLE

CSSBattle có thể là công cụ học tập tương tác cho phép bạn thực hiện các thử thách tương tác trong đó mục tiêu là sử dụng CSS thuần túy để sao chép một hình ảnh nhất định với số lượng mã ít nhất. Ngoài ra, việc tích hợp các bảng xếp hạng, các thử thách được cập nhật thường xuyên khiến website này trở nên cực kỳ thú vị đối với người chơi.

Học tại đây: https://cssbattle.dev/

Cfd Circle

 

CSS DINNER

CSS Diner rất tốt cho người mới bắt đầu CSS hoặc những người không quen với các bộ CSS Selectors nâng cao. Trò chơi này cho phép bạn sử dụng các CSS Selectos thực trên các mặt hàng thực phẩm, với trình xem HTML hữu ích để bạn có thể thấy mối quan hệ giữa đồ họa và các đoạn code mà bạn đã viết ra sẽ hiển thị rất trực quan.

Học tại đây: https://flukeout.github.io/

Cfd Circle

 

Bạn đã tìm được công cụ mình muốn học chưa?

Có rất nhiều công cụ học tập tương tác khác có sẵn và mình chắc chắn rằng nhiều người trong số các bạn đã bắt gặp một số công cụ mà bạn thấy hữu ích.

Hãy chăm chỉ, rèn luyện kỹ năng hằng ngày nhé!

Đọc lại phần 1: https://cfdcircle.vn/ hoc-css-thong-qua-tuong-tac-tro-choi-danh-cho-front-end-developer-phan-1 -67 

________

Khoá học lập trình

Frontend Master

Lộ trình học hơn 7 tháng và hoàn thành 5 dự án thực tế. Môi trường học như khi bạn đi làm.

Đăng ký hoặc đăng nhập để bình luận
Nguyễn Đức Huy
1 năm trước
Bài viết hay lắm
Trần Nghĩa
1 năm trước
Cảm ơn bạn nhé