Nâng Cao Kỹ Năng Của Bạn
Nền tảng giúp nâng cao kỹ năng nghề nghiệp với các hướng dẫn có tính tương tác cao, các demo thực tế và các tính năng hỗ trợ phỏng vấn bằng AI
Hướng dẫn tương tác
Học trực quan với các bài hướng dẫn lập trình từng bước có live preview
Khám phá hướng dẫnCông Cụ Phát Triển
Bộ công cụ thực tế tích hợp AI giúp tăng tốc quy trình làm việc của bạn.
Khám phá công cụHướng dẫn tương tác
Học trực quan với các bài hướng dẫn lập trình từng bước có live preview
Khám phá hướng dẫn- Tính năng01
Hướng dẫn tương tác
Học trực quan với các bài hướng dẫn lập trình từng bước có live preview
Khám phá hướng dẫn - Tính năng02
Demo thực tế
Khám phá các demo thực tế với Storybook và source code
Khám phá demo - Tính năng03
Công Cụ Phát Triển
Bộ công cụ thực tế tích hợp AI giúp tăng tốc quy trình làm việc của bạn.
Khám phá công cụ
Chuỗi bài hướng dẫn
Đi sâu vào chuỗi các bài hướng dẫn. Tìm hiểu về các chủ đề phức tạp với lộ trình học tập có cấu trúc được thiết kế cho ứng dụng thực tế.
Indie Dev Toolkit
Giới thiệu về bộ tech stack hiện đại dành cho indie full-stack dev. Hiểu sâu hơn cách sử dụng tools, frameworks để tự build product nhanh và hiệu quả.
Chỉnh một token, cả giao diện đổi theo
Design token dễ hiểu nhất khi bạn được tự tay kéo thử. Chọn một preset, chỉnh màu nhấn, bo góc và elevation, xem một giao diện thật đổi ngay trước mắt - rồi export tất cả thành CSS variables cho project của bạn.
--accent: oklch(0.69 0.15 237);
--radius: 0.5rem;
Đổi màu nhấn, kéo thanh bo góc - mọi button và card cập nhật cùng lúc. Ưng ý rồi thì export theme về dùng.
Mở StudioBắt đầu từ preset
Chọn một theme có sẵn làm điểm xuất phát, rồi chỉnh từng token đến khi bảng màu mang dấu ấn của bạn.
Xem thay đổi trên UI thật
Button, card, badge và form control đổi ngay khi bạn kéo control, nên bạn thấy rõ token nào điều khiển phần nào trên giao diện.
Export CSS dùng được ngay
Tải theme về dưới dạng CSS variables, CSS-in-JS, hoặc JSON để dùng trong project của bạn.
Gọi đúng thuật ngữ mà AI và dev team thật sự dùng
Biết mình muốn gì nhưng không biết gọi là gì? Tool này giúp bạn tìm đúng thuật ngữ, hiểu nó bằng lời giải thích dễ hiểu kèm với một ví dụ bằng hình ảnh, rồi sau đó có thể viết prompt hiệu quả hơn hoặc có thể theo kịp các cuộc nói chuyển của dev team.
Accordion
UI & LayoutCác phần xếp chồng lên nhau, mở ra đóng vào khi bạn bấm, như danh sách câu hỏi FAQ.
Bạn có thể đã gọi nó là: phần mở rộng thu gọn, danh sách bấm mở, kiểu dropdown faq
Đặt mấy phần này vào accordion để mỗi phần mở ra thu lại khi bấm.
Mô tả thứ bạn muốn — nhận tên gọi, ý nghĩa, và một prompt có thể dán ngay.
Khám phá từ vựngTìm đúng thuật ngữ
Mô tả một mẫu giao diện hay khái niệm bằng lời thường ngày để nhận đúng tên gọi mà lập trình viên và AI thật sự dùng.
Hiểu bằng lời đơn giản
Mỗi thuật ngữ đi kèm một giải thích không thuật ngữ và một ví dụ cụ thể, để ý nghĩa được nhớ lâu.
Viết prompt đúng ý
Sao chép prompt mẫu có sẵn cho mỗi thuật ngữ và nhận đúng kết quả bạn hình dung ngay lần đầu.
Hướng dẫn tương tác
Hướng dẫn thực hành build các giao diện thực tế. Xem trước thành quả, rồi build theo từng bước.
Build User Profile Page với React, Tailwind và HeroUI
- 01Setup và khởi tạo React project mới
- 02Tạo FeaturePhotos Component
- 03Tạo Profile Info Section
- 04Tạo Profile Stats Section
- +4phần khác
Build Flight Booking UI với React, Tailwind và HeroUI
- 01Setup và khởi tạo React project mới
- 02Tạo Flight Header Component
- 03Tạo Flight Card Component
- 04Tạo Flight List Component
- +5phần khác
Hiểu về TypeScript Generics
- 01Generics trong TypeScript là gì?
- 02Làm cho code flexible với Generics
- 03Default Values cho Generic Parameters
- 04Generic Constraints
- +2phần khác
Demo thực tế
Các UI thực tế. Xem thiết kế, đọc source code, áp dụng vào project của bạn.
Build complex Data Table với TanStack Table
Demo này build dựa trên ShadcnUI Table, thêm các tính năng thực tế như sorting, filtering và pagination. Bạn có thể sử dụng nó làm ví dụ để tạo các data tables có tính flexible cao, có thể sử dụng trong các project thực tế.
Xem DemoBuild Text UI pattern thực tế với Pretext
Cùng nhau khám phá các UI patterns thực tế được chia thành nhiều categories, mỗi pattern có DevTools panel hiển thị layout metrics real-time. Mỗi ví dụ đều có source code và một lệnh shadcn install, giúp bạn copy pattern thẳng vào project của mình.
Xem DemoSẵn sàng cho buổi phỏng vấn tiếp theo
Nhận kế hoạch chuẩn bị phỏng vấn dành riêng cho bạn được tạo bởi AI dựa trên CV của bạn và yêu cầu công việc
Xem demo trước, rồi tạo kế hoạch riêng của bạn trong chưa đầy một phút.
Khám phá tính năngThống kê được AI phân tích
Upload CV và yêu cầu công việc để nhận kế hoạch chuẩn bị phỏng vấn dành riêng cho bạn được tạo bởi AI
Lộ trình ôn tập rõ ràng
Nhận lộ trình rõ ràng dựa trên kinh nghiệm và công việc bạn đang nhắm đến
Theo dõi tiến trình
Theo dõi tiến trình chuẩn bị cho buổi phỏng vấn với giao diện trực quan và dễ sử dụng