Instagram là một trong những social media được rất nhiều người quan tâm và sử dụng, đặc biệt là những bạn trẻ vì chất lượng hình ảnh, nội dung, sự kết nối đến những người nổi tiếng và xu hướng mới.
Vậy bạn còn chờ gì nữa mà không khai phá "mảng đất" đầy tiềm năng này thông qua series Home Feed UI Instagram with TailwindCSS của 200Lab.
Đặc biệt là series này hoàn toàn free và được public full bộ trên website và kênh youtube của 200Lab. Nếu bạn kiên trì "cày" hết series này thì chắc chắn bạn sẽ xây dựng được cho bản thân một nền tảng kiến thức vững chắc về ReactJS. Từ đó, bạn có thể áp dụng vào những dự án tiếp theo, xây dựng một showcase demo "xịn sò" để làm portfolio cho bản thân.
Các bạn có thể tải tài liệu (Slide, Source Code) của series ở cuối bài viết.
Bạn còn chờ gì nữa, bắt tay vào học ngay thôi nào!
Lộ trình series
Lộ trình của series sẽ bao gồm các tiêu điểm chính:
- Khởi tạo project và tips sử dụng Git để khởi tạo base repository.
- Cài đặt TailwindCSS và các thư viện cần thiết cho dự án.
- Phân tích layout và thực hiện triển khai build các item, component.
- Cài đặt React Router và build Sidebar.
- Thực hiện layout Home feed.
- Responsive Sidebar và Home feed.
- Deploy web.
- ....
Đối tượng của series
- Dành cho các bạn mới học, muốn tìm hiểu về cách dựng giao diện ReactJS.
- Muốn nâng cao kỹ năng phân tích UI và luyện tay làm giao diện.
- Mobile Developer
Mục tiêu của series
- Giúp các bạn tự tin xây dựng giao diện bất kỳ.
- Không chỉ kỹ năng lập trình mà còn biết cách phân tích UI, giao diện và thiết lập các Component riêng cho bản thân.
- Showcase demo "xịn sò" để làm portfolio cho bản thân.
Thành quả sau khi hoàn thành series
Sau khi xem hết chuỗi video trong series, bạn sẽ xây dựng được:
- Giao diện gồm có sidebar
- List user story
- List post
- List suggestions
Lưu ý quan trọng
- Quản lý code trên Github & commit source code sau mỗi video.
- Bạn hãy tự tay xây dựng code từ đầu đến cuối, để luyện tập code.
- Phát triển dự án lên một tầm cao mới.
Tài liệu
Tải tài liệu của series tại link bên dưới bạn nhé!
Bài viết chỉ dành cho người dùng trả phí
Sign up now and upgrade your account to read the post and get access to the full library of posts for paying subscribers only.
Khu vực nội dung chỉ dành cho các subscribers
Sign up now to read the post. To get access to the full library of posts, you can be a paying subscriber
Đã có tài khoản ? Sign in
Pum
Life is short. Smile while you still have teeth :)
Bài viết liên quan
React Toastify là gì? Hướng dẫn sử dụng Toast Notification với React Toastify
Nov 21, 2024 • 7 min read
Hướng dẫn sử dụng Zustand trong NextJS
Nov 21, 2024 • 8 min read
Lazy Loading: Kỹ thuật Tối ưu Hiệu suất Website
Nov 17, 2024 • 14 min read
Hướng dẫn sử dụng Redux Toolkit và Redux Saga trong dự án React
Nov 15, 2024 • 10 min read
WebGL là gì? Hướng dẫn tạo đồ họa đơn giản với WebGL
Nov 13, 2024 • 7 min read
Test-Driven Development (TDD) là gì? Hướng dẫn thực hành TDD
Nov 13, 2024 • 6 min read