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 liên quan
10 Extensions VS Code người mới học HTML&CSS cần phải biết
các extension dành cho người mới học HTML & CSS, giúp bạn có cảm hứng code nhiều hơn và code hiệu quả hơn, năng suất hơn...
Các Frontend Frameworks phổ biến nhất hiện nay
Framework là các đoạn code viết sẵn và được cấu tạo thành một bộ khung, các thư viện lập trình được đóng gói....
Front End là gì? 11 kỹ năng để trở thành Front End Developer
Front end là một phần của một website ở đó người dùng có thể tương tác với web, xem video, đăng ký trang mua sắm trực tuyến,......
Tìm hiểu các phương thức call, apply, bind trong JavaScript
Trong bài "Tìm hiểu về this trong JavaScript", chúng ta có sử dụng phương thức bind() để fix một số bug khi sử dụng this. Cụ thể nó là phương thức như thế nào thì chúng ta cùng nhau tìm hiểu trong bài này nhé 😉....
Frontend Du Ký | EGANY Apps : Đừng thấy hoa nở mà ngỡ xuân về
Bài viết lần này sẽ kể về quá trình khắc phục hệ thống khi phía đối tác có thay đổi lớn cũng như các điều chỉnh về quy trình git để mọi thứ được suôn sẻ trong quá trình phát triển....