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ọ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á các demo thực tế với Storybook và source code
Nhận kế hoạch chuẩn bị cho buổi phỏng vấn được tạo bởi AI
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
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
Demo thực tế
Khám phá các demo thực tế với Storybook và source code
Interview Lab
Nhận kế hoạch chuẩn bị cho buổi phỏng vấn được tạo bởi AI
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ả.
Giới thiệu về kiến trúc dự án NX
Tìm hiểu các khái niệm cốt lõi của NX monorepo, kiến trúc workspace, cách tổ chức thư viện và các NX commands phổ biến.
Xây dựng NX Workspace
Xây dựng NX workspace đầu tiên của bạn từ đầu với các bài tập thực hành về plugins, tasks và CI/CD.
Sẵ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 Interview Lab hoạt động
Xem cách AI phân tích CV và tạo kế hoạch ôn tập phỏng vấn dành riêng cho bạn
Thố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
Hướng dẫn tương tác
Build User Profile Page với React, Tailwind và HeroUI
Bài hướng dẫn này giúp bạn build trang user profile với React và HeroUI. Bạn sẽ tạo các reusable components để hiển thị user information, thêm photo carousel, và hiển thị posts và photos—đồng thời học các React skills và UI design quan trọng.
Setup và khởi tạo React project mới
Tạo FeaturePhotos Component
Tạo Profile Info Section
Tạo Profile Stats Section
Tạo Profile Posts Timeline
Tạo Profile Photos Timeline
Tạo Profile Timeline Tabs
Hoàn thiện Profile UI
Build Flight Booking UI với React, Tailwind và HeroUI
Bài hướng dẫn này giúp bạn build trang đặt vé máy bay đẹp, user-friendly sử dụng React và HeroUI. Bạn sẽ tạo các reusable components, thêm filtering và sorting, và học React fundamentals cùng UI design.
Setup và khởi tạo React project mới
Tạo Flight Header Component
Tạo Flight Card Component
Tạo Flight List Component
Tạo Flight Filter Form Component
Tạo Flight Filter Drawer Component
Tạo Flight Sort Menu Component
Tạo Flight Options Component
Hoàn thiện Flight Booking UI
Hiểu về TypeScript Generics
Generics là core feature trong các statically-typed languages như TypeScript. Chúng cho phép bạn define các components, functions, hoặc data structures hoạt động với nhiều types khác nhau trong khi vẫn duy trì type safety. Điều này cải thiện flexibility, reusability, và giúp loại bỏ duplicate code.
Generics trong TypeScript là gì?
Làm cho code flexible với Generics
Default Values cho Generic Parameters
Generic Constraints
Conditional Types với Generics
Closing Thoughts
Demo thực tế
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ế.
Pin | Employee ID | Name | Email | Role | Country | Annual Salary | Date of Joining | Hire Type | Contract Type | Contract End Date | Probation End Date | Manager Name | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
EMP001 | John Smith | john.smith@company.com | Senior Software Engineer | United States | $120,000.00 | 3/15/2020 | Direct | Permanent | 12/9/2025 | 6/15/2020 | Sarah Johnson | ||
EMP002 | Sarah Johnson | sarah.johnson@company.com | Engineering Manager | United States | $145,000.00 | 1/10/2019 | Direct | Permanent | - | 4/10/2019 | James Wilson | ||
EMP003 | Miguel Rodriguez | miguel.rodriguez@company.com | Frontend Developer | Spain | $65,000.00 | 5/22/2021 | Direct | Permanent | - | 8/22/2021 | Sarah Johnson | ||
EMP004 | Priya Patel | priya.patel@company.com | Product Manager | India | $95,000.00 | 11/3/2020 | Direct | Permanent | - | 2/3/2021 | James Wilson | ||
EMP005 | James Wilson | james.wilson@company.com | CTO | United Kingdom | $185,000.00 | 6/1/2018 | Direct | Permanent | - | 9/1/2018 | |||
EMP006 | Fatima Al-Farsi | fatima.alfarsi@company.com | Backend Developer | United Arab Emirates | $78,000.00 | 1/15/2022 | Direct | Permanent | - | 4/15/2022 | Sarah Johnson | ||
EMP007 | Chen Wei | chen.wei@company.com | Data Scientist | China | $88,000.00 | 9/20/2021 | Direct | Permanent | - | 12/20/2021 | Vikram Patel | ||
EMP008 | Lisa Thompson | lisa.thompson@company.com | UX Designer | Canada | $82,000.00 | 8/3/2020 | Agency | Permanent | - | 11/3/2020 | Emma Watson | ||
EMP009 | Tomas Novak | tomas.novak@company.com | DevOps Engineer | Czech Republic | $72,000.00 | 11/15/2021 | Direct | Permanent | - | 2/15/2022 | Sarah Johnson | ||
EMP010 | Emily Baker | emily.baker@company.com | HR Manager | United States | $92,000.00 | 7/12/2019 | Direct | Permanent | - | 10/12/2019 | Robert Chen | ||
EMP011 | Alejandro Gomez | alejandro.gomez@company.com | Software Engineer | Mexico | $68,000.00 | 3/1/2022 | Direct | Permanent | - | 6/1/2022 | John Smith | ||
EMP012 | Sophia Müller | sophia.muller@company.com | Marketing Specialist | Germany | $71,000.00 | 2/15/2021 | Agency | Permanent | - | 5/15/2021 | Jasmine Wong | ||
EMP013 | Hiroshi Tanaka | hiroshi.tanaka@company.com | QA Engineer | Japan | $75,000.00 | 10/5/2020 | Direct | Permanent | - | 1/5/2021 | Sarah Johnson | ||
EMP014 | Anna Kowalski | anna.kowalski@company.com | Frontend Developer | Poland | $62,000.00 | 5/10/2022 | Direct | Contract | 5/10/2023 | 8/10/2022 | John Smith | ||
EMP015 | Robert Chen | robert.chen@company.com | CFO | United States | $175,000.00 | 3/15/2018 | Direct | Permanent | - | 6/15/2018 | James Wilson | ||
EMP016 | Olivia Bennett | olivia.bennett@company.com | Content Writer | Australia | $65,000.00 | 7/20/2021 | Direct | Permanent | - | 10/20/2021 | Jasmine Wong | ||
EMP017 | Lukas Eriksson | lukas.eriksson@company.com | Backend Developer | Sweden | $79,000.00 | 4/12/2020 | Direct | Permanent | - | 7/12/2020 | Thomas Wagner | ||
EMP018 | Aisha Mbeki | aisha.mbeki@company.com | Data Analyst | South Africa | $70,000.00 | 8/5/2021 | Agency | Contract | 8/5/2023 | 11/5/2021 | Vikram Patel | ||
EMP019 | Carlos Santos | carlos.santos@company.com | Project Manager | Brazil | $85,000.00 | 10/15/2019 | Direct | Permanent | - | 1/15/2020 | Priya Patel | ||
EMP020 | Emma Watson | emma.watson@company.com | Senior UX Designer | United Kingdom | $95,000.00 | 5/23/2019 | Direct | Permanent | - | 8/23/2019 | Priya Patel |
Cài đặt tính năng
Ghim tiêu đề
Ghim tiêu đề ở trên cùng để giữ nó hiển thị khi cuộn.
Chọn hàng
Chọn các hàng bằng cách nhấp vào ô đánh dấu của hàng.
Đã chọn 0 trên 50
Ghim hàng
Ghim các hàng lên trên hoặc xuống dưới để giữ chúng luôn hiển thị.
Phân trang
Phân trang cho phép bạn chia tập dữ liệu lớn thành các phần nhỏ hơn.
Lọc dữ liệu
Lọc toàn bộ hoặc theo tiêu chí cụ thể.
Sắp xếp cột
Sắp xếp các cột bằng cách nhấp vào tiêu đề cột. Nhấp lại để đảo ngược thứ tự sắp xếp.
Ghim cột
Ghim các cột vào bên trái hoặc phải của bảng để giữ chúng hiển thị khi cuộn ngang.
Thay đổi kích thước cột
Thay đổi kích thước cột bằng cách kéo cạnh của tiêu đề cột.
Sắp xếp lại cột
Sắp xếp lại các cột bằng cách kéo tiêu đề cột.
Hiển thị cột
Bật/tắt hiển thị các cột bằng cách chọn hoặc bỏ chọn các ô đánh dấu.
Theo dõi Upskills.dev
Cập nhật các bài hướng dẫn và coding tips mới nhất.