Vì ngành này thay đổi rất nhanh nên việc học các kỹ năng mới là điều thường xuyên đối với hầu hết chúng ta. Trong thời gian gần đây, tôi đã có thể thu thập các liên kết đến một số công cụ và ứng dụng mã hóa tương tác có thể giúp bạn bổ sung các kỹ năng của mình trong các lĩnh vực khác nhau của phát triển web.
Bất cứ điều gì bạn muốn học từ CSS đến SQL, danh sách được phân loại này sẽ giúp bạn. Cuộn xuống để xem tổng quan chung hoặc bỏ qua mục lục.
Bất cứ điều gì bạn muốn học từ CSS đến SQL, danh sách được phân loại này sẽ giúp bạn. Cuộn xuống để xem tổng quan chung hoặc bỏ qua mục lục.
- CSS Flexbox
- Bố cục lưới CSS
- Bảng hướng dẫn chọn CSS
- Hoạt ảnh CSS
- Thước CSS
- Bộ lọc CSS
- Trò chơi CSS: CSSBattle
- Trò chơi CSS: CSS Diner
- Phân nhánh Git
- Jamstack
- Mẫu thiết kế JS
- Trò chơi JS: Thang máy
- Trò chơi JS: Screeps
- Trò chơi JS: Không tin cậy
- Lời hứa của JS
- Trò chơi JS: JSChallenger
- Trò chơi JS: JSRobot
- Ngôn ngữ lập trình, Codewars
- React
- Biểu thức chính quy
- Câu đố Regex
- RegexOne
- Service Workers
- SQL
- SQL: SQLBolt
- SQL Police Department
- TypeScript
- Vim
Công cụ để học Flexbox
Flex Box Adventure
Flex Box Adventure là một trò chơi phiêu lưu tương tác cho phép bạn sử dụng các kỹ năng flexbox của mình để hỗ trợ nhân vật trong trò chơi giải quyết 24 thử thách.Knights Of The Flexbox Table
Knights of the Flexbox Table là một khóa học tương tác được thiết kế tốt khác giúp bạn tìm hiểu các khía cạnh khác nhau của thông số kỹ thuật flexbox. Khóa học này bao gồm 18 "ngục tối" để dạy bạn về flexbox. Khóa học này độc đáo vì bạn không viết CSS thuần túy mà thay vào đó, bạn sử dụng các lớp CSS Tailwind, nghĩa là bạn sẽ học flexbox cùng với cú pháp cho các lớp tiện ích Tailwind.Flexbox Froggy
Flexbox Froggy đã xuất hiện trong một thời gian khá dài và vẫn là lựa chọn phổ biến để học cú pháp flexbox. Sử dụng các phần khác nhau của thông số kỹ thuật flexbox để sắp xếp các chú ếch theo yêu cầu để vượt qua các cấp độ khác nhau.Flexbox Zombies
Flexbox Zombies là một trò chơi giáo dục khác để học cú pháp flexbox. Mỗi phần sẽ phát triển một cốt truyện liên quan đến zombie trong khi cung cấp cho bạn chuyên môn về khái niệm flexbox mới, cùng với các thử thách sinh tồn giúp bạn sử dụng các kỹ năng flexbox mới của mình.Flexbox Defense
Flexbox Defense là một trò chơi theo thể loại trò chơi chiến lược 'phòng thủ tháp' dạy bạn flexbox thông qua 12 thử thách, trong đó bạn phải sử dụng cú pháp flexbox để ngăn chặn kẻ thù tiến đến vượt qua hàng phòng thủ của bạn.Hộp Flexy
Nếu bạn thấy một số công cụ flexbox khác khó sử dụng hơn một chút, Hộp Flexy có thể là một lựa chọn tốt. Đây là một sân chơi flexbox đơn giản, đồng thời cũng tạo mã cho bạn. Là một công cụ cũ hơn, công cụ này cũng cung cấp mã flexbox cũ và tiền tố nhà cung cấp nhưng bạn có thể chọn "Vanilla CSS" cho mã mà bạn sẽ sử dụng trong hầu hết các trường hợp.Công cụ học bố cục lưới CSS
Grid Garden
Grid Garden, từ Codepip, cùng nhà sản xuất với Flexbox Froggy, bao gồm 28 cấp độ khác nhau để hướng dẫn bạn về các phần khác nhau của thông số kỹ thuật CSS Grid Layout. Và nếu bạn muốn biết thêm từ những người này, gói Pro của họ bao gồm một số các trò chơi tương tác CSS và JS khác.Bảng hướng dẫn CSS Grid
CSS Grid Cheat Sheet là hướng dẫn trực quan và tương tác để hiểu về CSS Grid. Chọn một hộp trong lưới, sau đó sử dụng các tùy chọn và cài đặt ở thanh bên trái để tùy chỉnh các phần khác nhau của thông số Bố cục lưới.Tấn công lưới
Grid Attack cũng đến từ cùng một nhóm sáng tạo với Flexbox Adventure đã được đề cập ở trên. Trò chơi này không miễn phí nhưng bao gồm 80 thử thách tương tác tương tự như các bài toán bố trí lưới trong thế giới thực.Grid Critters
Grid Critters là một thử thách tương tác khác dựa trên nền tảng để tìm hiểu các phần khác nhau của thông số Bố cục lưới trong môi trường giống như trò chơi điện tử. Khóa học bao gồm 10 chương, mỗi chương được chia thành nhiều cấp độ khác nhau, một số chương có tới 20-26 cấp độ.Công cụ để học thêm các kỹ năng CSS
Bộ chọn CSS 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ề các bộ chọn CSS. Một số bài đầu tiên khá dễ nhưng các bài tập sẽ tăng dần độ khó khi bạn tìm hiểu các bộ chọn nâng cao hơn như các lớp giả ít được sử dụng.CSS Animations
Nếu bạn muốn nâng cao kỹ năng làm hoạt hình trên web, CSS Animations là một nền tảng vững chắc, đầy đủ tính năng dành cho học và thử nghiệm các phần khác nhau của thông số kỹ thuật hoạt ảnh CSS. 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 hoạt ảnh. Đây là một cách thú vị để học hoạt ảnh khung hình chính bằng CSS.CSS Ruler
CSS Ruler cung cấp cho bạn biểu diễn trực quan về ba loại đơn vị CSS mà bạn có thể thử nghiệm: phông chữ tương đối (ví dụ: rem, ch), phần trăm khung nhìn (ví dụ: vh, vw) và tuyệt đối (ví dụ: px, in).Bộ lọc pha trộn
Bộ lọc Blend là một trang web nhỏ gọn cho phép bạn tùy chỉnh các giá trị khác nhau được sử dụng cho các thuộc tínhmix-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 vào các lớp, cùng với màu nền, sau đó chỉnh sửa cài đặt để xem các giá trị khác nhau hoạt động như thế nào.CSSBattle
Phải thừa nhận rằng, CSSBattle có thể là công cụ học tập tương tác duy nhất trong danh sách này có khả năng biến bạn thành một nhà phát triển tệ hơn! Công cụ này 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 lượng mã ít nhất (tức là "code golf"). Bạn chắc chắn sẽ học được rất nhiều về HTML và CSS với các bài tập này, nhưng các kỹ thuật này thường sẽ không hữu ích trong một tình huống thực tế.CSS Diner
CSS Diner rất phù hợp với người mới bắt đầu học CSS hoặc những người không quen thuộc với các bộ chọn CSS nâng cao. Trò chơi này cho phép bạn sử dụng các bộ chọn CSS 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à mã.Công cụ để học JavaScript
Bài tập TypeScript
Bài tập TypeScript là một sân chơi tương tác để khám phá các tính năng khác nhau của TypeScript, siêu tập JavaScript phổ biến đã trở nên phổ biến trong vài năm qua. Nếu bạn có hiểu biết cơ bản về TypeScript và muốn mở rộng kiến thức đó, ứng dụng này có thể phù hợp với bạn.Trò chơi mẫu thiết kế
Trò chơi Design Patterns rất độc đáo và không dành cho người mới bắt đầu sử dụng JavaScript. Nếu bạn có nhiều kinh nghiệm lập trình hoặc khá thành thạo JavaScript nói chung, nhưng chưa bao giờ thực sự nghiên cứu các mẫu thiết kế JavaScript, thì đây có thể là nơi tốt để bắt đầu.Hướng dẫn React
Hiện nay, có rất nhiều nơi để học React và React Tutorial là một lựa chọn tốt khác. Điều tôi thích ở đây là cách nó bắt đầu với một số khái niệm JavaScript quan trọng cần hiểu để có hiệu quả hơn với React. Ngoài ra, trình chỉnh sửa trong trang cung cấp cho bạn các gợi ý tự động hoàn thành cũng như các gợi ý để giải quyết các thách thức. Không phải tất cả các bài học đều miễn phí nhưng có đủ nội dung để bạn hiểu sâu hơn về các nguyên tắc cơ bản của React trước khi trả phí.Elevator Saga
Elevator Saga khá khác biệt so với nhiều công cụ tương tác trong danh sách này. Tính năng này cho phép bạn sử dụng JavaScript để lập trình chuyển động của thang máy thông qua API tích hợp được thiết kế riêng cho trò chơi. Vì vậy, bạn không chỉ ôn lại JavaScript mà còn học cách sử dụng API nước ngoài.Screeps
Screeps là một trò chơi chiến lược thời gian thực trực tuyến nhiều người chơi mã nguồn mở cho phép bạn sử dụng mã JavaScript thực để xây dựng thuộc địa, khai thác tài nguyên, chinh phục lãnh thổ và nhiều hơn thế nữa. Trò chơi này có lối chơi khá tiên tiến và được nhiều nhà phát triển và nhóm phát triển đánh giá cao.Untrusted
Untrusted là một trò chơi phiêu lưu JavaScript, trong đó bạn phải hướng dẫn một nhân vật tên là Tiến sĩ Eval vượt qua nhiều mê cung khác nhau. Bạn thực hiện điều này bằng cách thay đổi và chạy lại mã được sử dụng cho thử thách hiện tại để cho phép Tiến sĩ Eval thoát sang thử thách tiếp theo.Promisees
Promisees giúp bạn tìm hiểu một một phần của thông số kỹ thuật ECMAScript – JavaScript Promises, một tính năng được thêm vào ngôn ngữ trong ES6. Bạn có thể sử dụng ứng dụng nhỏ này để hình dung cách thức hoạt động của lời hứa và cách chúng có thể được sử dụng trong cơ sở mã thực tế.JSchallenger
JSchallenger là một nền tảng đơn giản cho phép bạn học JavaScript bằng cách giải quyết các thử thách mã hóa khác nhau. Thật hữu ích khi thử thách này bao gồm danh sách nhanh các thử thách “phổ biến nhất” và “thất bại nhất”, vì vậy đó có thể là những nơi tốt để bắt đầu.JSRobot
JSRobot là một trò chơi tương tác, trong đó bạn sử dụng JavaScript cùng với API theo chủ đề robot để điều khiển robot thu thập tiền xu, tránh chướng ngại vật và đến được lá cờ ở cuối cấp độ được giao.Dịch vụ Workies
Service Workies là một trò chơi phiêu lưu tương tác giúp bạn tìm hiểu nhiều tính năng khác nhau để phát triển Ứng dụng web tiến bộ (PWA). Môi trường giống như trò chơi điện tử này trải qua vòng đời của service worker, chặn các yêu cầu, làm việc với bộ đệm, v.v.Công cụ để học các kỹ năng phát triển web khác nhau
Học Git Phân nhánh
Hình ảnh thường thiếu khi học các công cụ dòng lệnh như Git. Learn Git Branching hướng đến mục tiêu giải quyết vấn đề đó bằng cách hướng dẫn trực quan và tương tác về các tính năng khác nhau của Git bằng cách sử dụng trình trực quan hóa kho lưu trữ Git, hộp cát và một loạt các hướng dẫn và thử thách giáo dục.Chọn Sao SQL
Select Star SQL cho phép bạn tìm hiểu các khái niệm SQL. Điều này được thực hiện bằng cách làm theo các hướng dẫn chạy truy vấn SQL trên một tập dữ liệu thực, trải qua 5 chương, mỗi chương mất khoảng 30 phút để hoàn thành.Regex101
Regex101 giống như JSFiddle dành cho biểu thức, nhưng có thêm một số tính năng bổ sung giúp bạn học cách xây dựng biểu thức chính quy. Nó bao gồm một trình soạn thảo regex, một thư viện các biểu thức chính quy do cộng đồng viết, một tài liệu tham khảo nhanh về cú pháp và thậm chí là một bài kiểm tra tương tác.SQL Police Department
SQL Police Department cho phép bạn học cú pháp SQL bằng cách giải quyết các vụ án. Các bài tập được gọi là "bài tóm tắt" được sử dụng làm cơ sở để giải quyết từng tội phạm và ứng dụng cũng bao gồm hướng dẫn giúp giải quyết cú pháp nếu bạn gặp khó khăn.CodinGame
CodinGame là một nền tảng học tập đầy đủ tính năng cho phép bạn học 25+ ngôn ngữ lập trình trong khi giải quyết các thử thách thú vị.OpenVim
OpenVim là một hướng dẫn tương tác dạy bạn cách sử dụng Vim, trình soạn thảo văn bản đa nền tảng phổ biến trong số người dùng Unix. Nếu bạn muốn nhiều Vim hơn, bạn cũng có thể thử vim.so, mặc dù nó không miễn phí.Ô chữ chính quy
Ô chữ chính quy sử dụng các thử thách dựa trên ô chữ để giúp bạn học cú pháp biểu thức chính quy. Đối với mỗi thử thách, bạn phải nhập một chuỗi trùng khớp với tất cả các biểu thức 'đã gạch chéo'.Codewars
Codewars là một nền tảng khác giúp bạn cải thiện kỹ năng của mình bằng cách giải quyết các nhiệm vụ lập trình có nhiều cấp độ khó và cho một nhiều ngôn ngữ khác nhau, bao gồm JavaScript, TypeScript, Python, Ruby, Go, v.v.Jamstack Attack
Jamstack Attack là một loạt các trò chơi nhỏ để thực hành các khía cạnh khác nhau của phát triển front-end.RegexOne
RegexOne sử dụng một loạt khoảng 25 bài tập và bài toán tương tác để dạy cú pháp biểu thức chính quy. Cũng bao gồm hướng dẫn về regex cho 5 ngôn ngữ lập trình khác nhau.SQLBolt
SQLBolt (cùng tác giả với RegexOne) bao gồm 19 bài tập tương tác đơn giản để hướng dẫn bạn cách sử dụng SQL một cách dần dần.Công cụ tương tác yêu thích của bạn là gì?
Có rất nhiều công cụ học tập tương tác khác và tôi chắc rằng nhiều bạn đã từng bắt gặp một số công cụ mà bạn thấy hữu ích. Hãy thoải mái đăng những mục yêu thích của bạn trong phần bình luận bên dưới.Tóm tắt nhanh
Có rất nhiều cách tương tác để học các kỹ năng phát triển web mới. Louis chia sẻ danh sách toàn diện, được phân loại về các công cụ như vậy, bao gồm nhiều công nghệ phát triển khác nhau.Đọc thêm
- Giới thiệu về CSS Scroll-Driven Animations: Dòng thời gian tiến trình cuộn và xem
- Tạo biểu mẫu nhiều bước hiệu quả để có trải nghiệm người dùng tốt hơn
- Danh sách kiểm tra UX dành cho nhà thiết kế giao diện
- Bộ công cụ và khung thiết kế bền vững
