Hướng dẫn advanced css projects - dự án css nâng cao
|
Tác giả: Kyle Prinsloo Show
Nội dung chính ShowShow
Cách nhanh nhất để lên trình Front end là tự triển những project thật. Bạn có thể xem tutorials, hay tham gia rất nhiều khóa học, nhưng nếu không tự ứng dụng và thực hành thì sẽ rất khó để bạn thực sự tiếp thu những kỹ năng cần thiết cho những projects thực tế. Những project từ client thì sẽ không có hướng dẫn từ A đến Z, nếu có thì họ cũng chẳng cần bạn làm gì. Với project được giao, bạn phải tự thân vận động từ solution, thực hiện từng bước, thậm chí hack quá trình để về đích.  Vì vậy cách tốt nhất để luyện skill là bắt tay tự làm những project front-end và tự rút ra bài học kinh nghiệm cá nhân luôn một thể. Chưa cần khách hàng vào thời điểm này khi tự bạn có thể build project cho riêng mình. Chọn Project cá nhân như thế nào?Xác định level kỹ năngXử lý problem cá nhân hay bài toán mà bạn quan tâm 5 project thú vị về Front-end development Xử lý problem cá nhân hay bài toán mà bạn quan tâm5 project thú vị về Front-end development Dựng bản clone front-end của một website 5 project thú vị về Front-end developmentDựng bản clone front-end của một websiteTạo một quiz game JavaScript front-end Tạo ứng dụng front-end quét mã QR Build app front-end thời tiết Thiết kế và code một website portfolio front-end của riêng bạn Nguồn thực hành front-end development Tạo một quiz game JavaScript front-endTạo ứng dụng front-end quét mã QR Build app front-end thời tiết Thiết kế và code một website portfolio front-end của riêng bạn Nguồn thực hành front-end development Cách nhanh nhất để lên trình Front end là tự triển những project thật. Bạn có thể xem tutorials, hay tham gia rất nhiều khóa học, nhưng nếu không tự ứng dụng và thực hành thì sẽ rất khó để bạn thực sự tiếp thu những kỹ năng cần thiết cho những projects thực tế. Những project từ client thì sẽ không có hướng dẫn từ A đến Z, nếu có thì họ cũng chẳng cần bạn làm gì. Với project được giao, bạn phải tự thân vận động từ solution, thực hiện từng bước, thậm chí hack quá trình để về đích. Tạo ứng dụng front-end quét mã QRTạo ứng dụng front-end quét mã QR Build app front-end thời tiết Không chỉ vì game thú vị, quiz đang dần trở nên phổ biến như các công cụ content marketing. Bạn đã bắt gặp những thứ này chưa?Trang này sẽ hướng dẫn bạn từng bước một tạo máy quét QR code của riêng mình.Trang này sẽ hướng dẫn bạn từng bước một tạo máy quét QR code của riêng mình. Quizz là công cụ marketing khá hiệu quả vì chúng có tính năng tương tác. Theo một khảo sát của Content Marketing Institute, 81% marketer cho rằng interactive content – bất kỳ nội dung nào yêu cầu người dùng phải tham gia – thu hút chú ý hiệu quả hơn hẳn content tĩnh. Vì lý do này, quiz được dùng cho các mục đích marketing khác nhau. Những câu quiz đơn giản, như hình bên trái, được dùng để đẩy traffic của web. Build app front-end thời tiếtLuyện skill: Angular 8 Angular là một trong ba frameworks front-end phổ biến nhất bên cạnh React và Vue.js. Nó thường được dùng để build app form-based (app mà phải sign up để tạo account) nhưng cũng có thể dùng để build game và thậm chí những app có yếu tố virtual reality (thực tế ảo). Trên Medium có một tutorial step-by-step rất chi tiết hướng dẫn beginner cách tạp một cái app thời tiết khá đẹp mắt với Angular 8 (phiên bản mới nhất của Angular). Cái weather app đó như thế này: Ứng dụng này có thiết kế tinh gọn và tối giản với hình minh họa bắt mắt và giao diện đơn giản. Nó còn có cả tính năng light/dark mode. Với project này bạn sẽ cảm giác như build một app responsive, hữu dụng từ đầu đến cuối. Có thể học thêm vài thứ như install Node.js và Angular CLI để test code với LightHouse. Mặc dù tác giả của tutorial này đã thiết kế giao diện của riêng ổng, nhưng bạn vẫn có thể sáng tạo thêm styling của riêng mình. Chọn thêm animation CSS, dùng thêm logo, icon và những materials khác. Tutorial này thích hợp với beginner nhưng vẫn cần một chút hiểu biết về Angular, và bạn có thể xem qua Angular.io. Thiết kế và code một website portfolio front-end của riêng bạnVới một số project, có thể bạn sẽ làm chung với web designer để quyết định phần ngoại hình của website. Mặc dù design và dev là hai khái niệm khác nhau, tuy nhiên nếu nắm bắt được web design không chỉ là bổ sung skill mà còn trang bị cho bạn khá đầy đủ nếu sau này trở thành freelancer, tự bạn có thể triển từ design tới deploy. Design và code một web portfolio của riêng mình cũng là cách tự do thể hiện đồng thời khía cạnh nghệ thuật và kỹ thuật. Bước đầu hãy nghĩ về thông điệp và branding. Core service – service cốt lõi của bạn là gì, bạn muốn làm cho ai, tại sao họ nên chọn bạn? (Đọc thêm tại đây) Thứ hai là tạo bản mock design để chi tiết hóa layout, màu sắc và chữ viết. Về theme của web thì nên là tối giản hay sôi nổi, màu đơn sắc hay đậm màu? Sau đó thì thêm một số page cần thiết, như là contact page, vài bài blog, page About me, và page terms and condition (Điều khoản và Điều kiện). Thứ ba, code đi! Dùng CSS modern để layout, thêm vài animations, chèn hình chất lượng cao. Đừng giới hạn bản thân vì bạn có thể thêm cái gì cũng được, đó là portfolio của bạn mà! Nguồn thực hành front-end developmentCách tốt nhất để thực hành front-end development là build app thực tế, tuy nhiên cũng cần một số nơi để tìm tips, tutorials và support khi bí hay cần thêm ý kiến đóng góp. Đây là một số bookmark phù hợp cho bạn:
Và đó là 5 dự án front-end cho bạn thử sức. Nhắc lần nữa là đây chỉ là điểm khởi đầu thôi. Bạn có thể nâng cấp lên để customize theo ý mình. Đây mới chỉ là thực hành thôi, bạn cần phải tự tay build cái gì đó để nâng trình bản thân. Tuyển dụng front end các vị trí công ty hot cho bạn Phỏng dịch theo bài viết gốc tại Medium Có thể bạn quan tâm:
Xem thêm các công việc IT chất trong tháng mới nhất tại Topdev.vn |
