CSS là một trong những công nghệ phát triển website front end phổ biến nhất. Gần như mọi trang web trên Internet ngày nay được định dạng với cascading style sheets (CSS) và HTML. Nếu bạn đã học code CSS, bạn có thể tăng cơ hội tìm việc bằng cách xây dựng một portfolio mạnh mẽ các dự án CSS.
Các dự án này cho nhà tuyển dụng tiềm năng thấy bạn có kiến thức và kỹ năng cần thiết để trở thành nhà phát triển web hoặc lập trình viên. Bài viết này bao gồm các kỹ năng bạn sẽ làm chủ khi dùng CSS, ý tưởng dự án CSS cho các cấp độ kinh nghiệm khác nhau, và ý tưởng mẫu cho trang web CSS. Chúng tôi cũng đã biên soạn mẹo để tạo portfolio CSS hoàn hảo.
5 kỹ năng mà dự án CSS giúp bạn thực hành
Có một số kỹ năng bạn có thể làm chủ bằng cách thực hiện dự án CSS trên chính mình. Các kỹ năng này giúp bạn cải thiện kiến thức CSS và trở thành lập trình viên tốt hơn. Năm kỹ năng phổ biến nhất được học qua dự án CSS, ngay cả dự án thân thiện với người mới, được liệt kê dưới đây.
- Kiểm soát phiên bản (Version Control). Kiểm soát phiên bản hoặc nguồn (source control) là thực hành lập trình phổ biến liên quan đến theo dõi các thay đổi nhỏ và lớn trên code cơ sở của phần mềm hoặc các dòng code khác. Bạn có thể theo dõi chúng với phần mềm được tạo riêng cho mục đích này. Kiểm soát phiên bản là một khía cạnh quan trọng của lập trình CSS mà bạn có thể làm chủ qua các dự án.
- Viết code (Coding). Dự án nguồn CSS thường liên quan đến viết code. CSS được dùng để viết code cho chương trình bạn đang cố gắng sửa đổi hoặc tạo ra. Càng nhiều dự án CSS bạn hoàn thành, bạn càng giỏi ngôn ngữ lập trình này.
- HTML. Bạn sẽ cần học hypertext markup language (HTML) cùng với CSS. HTML là ngôn ngữ tài liệu cho trang web. Trong khi CSS định dạng trang web, HTML cấu trúc trang và quyết định trình duyệt web hiển thị trang như thế nào. Hầu hết code HTML được sửa đổi với CSS.
- Làm chủ chuẩn W3C (Master W3C Standards). World Wide Web Consortium, thường gọi là W3C, là tổ chức toàn cầu посвященный (dedicated) đến việc thúc đẩy hiệu suất đỉnh cao cho World Wide Web. Nó đặt tiêu chuẩn vàng quốc tế cho công nghệ web như CSS và HTML. Để làm chủ CSS chuyên nghiệp, bạn cần học và triển khai chuẩn W3C.
- Kiểm thử đa nền tảng (Cross-Platform Testing). Kiểm thử đa nền tảng là phần thiết yếu của phát triển trang web. Mục tiêu là đảm bảo trang web hoặc phần mềm hoạt động hoàn hảo trên nhiều nền tảng. Bạn cần học tự động hóa kiểm thử để xác minh sản phẩm hoạt động tốt trên cả môi trường mobile và web.
Ý tưởng dự án CSS tốt nhất cho người mới bắt đầu
Nếu bạn vừa bắt đầu thiết kế và phát triển web, bạn nên bám vào các dự án dễ hoàn thành. Một dự án đơn giản đôi khi đủ để đối phó với ý tưởng thách thức và bắt đầu sự nghiệp trong công nghệ. Một số dự án người mới tốt nhất bạn có thể hoàn thành trong khi làm chủ kỹ năng CSS được liệt kê dưới đây.
Tái tạo trang chủ Google Search (Replicate the Google Search Homepage)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Tái tạo trang chủ Google là dự án mã nguồn CSS bạn có thể hoàn thành. Bằng cách tái tạo trang tìm kiếm hiện có, bạn sẽ kiểm tra khả năng thao tác màu sắc, thanh tìm kiếm, font, và nút bấm dùng CSS và HTML. Mục tiêu duy nhất của bạn cho dự án này là sao chép giao diện, không phải chức năng.
Đặt tên ô (Name Cells) với CSS
- Kỹ năng CSS thực hành: Viết code, chuẩn W3C
Dùng CSS đặt tên ô trên trang web là cách dễ dàng và hiệu quả khác để làm chủ kỹ năng. Bạn có thể bắt đầu bằng cách định nghĩa các khu vực mẫu có tên (named template areas) và tách các khu vực bạn muốn đặt tên từ những khu vực bạn không muốn. Đặt tên ô trong bố cục lưới CSS (CSS grid layout) là một trong những kỹ năng cơ bản nhất bạn sẽ học.
Tạo bộ chọn thuộc tính CSS (Create a CSS Attribute Selector)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Bộ chọn thuộc tính (attribute selector) trong CSS là quan trọng cho việc chọn phần tử cho trang web. Trong dự án của bạn, bạn sẽ học gom nhóm các phần tử HTML dựa trên thuộc tính cụ thể dùng CSS. Bộ chọn thuộc tính sẽ chọn và gom nhóm các phần tử với thuộc tính tương tự.
Tạo form khảo sát (Create a Survey Form)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Mọi chuyên gia CSS đều nên biết cách tạo form khảo sát đơn giản trên trang web. Các form khảo sát này được doanh nghiệp dùng để thu thập thông tin từ công chúng hoặc khách hàng tiềm năng. Bạn nên có thể hoàn thành form khảo sát trong vài giờ nếu bạn có kiến thức CSS và HTML.
Tạo trang Tri ân (Create a Tribute Page)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Trang tri ân yêu cầu kiến thức CSS và HTML để hoàn thành. Bạn có thể chọn một người và tìm hình ảnh và sự thật về họ để tạo trang web đơn giản và đầy thông tin. Nó có thể hoàn thành trong hai giờ hoặc ít hơn nếu bạn đã hiểu cơ bản. Hãy chắc chắn trang tri ân của bạn responsive, dù nó đơn giản đến đâu.
Sau khi bạn đã làm chủ kỹ năng và kiến thức CSS cơ bản, bạn có thể tiến lên dự án cấp trung cấp (intermediate). Thực hành CSS trung cấp sẽ chuẩn bị bạn nhận công việc chuyên nghiệp hơn.
Tạo trang đích (Landing Page)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Tạo trang đích cho trang web cho phép bạn kiểm tra khả năng trong CSS và HTML. Nó sẽ giúp bạn làm chủ thực hành định dạng như tạo cột đúng, kích thước font và hình ảnh cho trang web. Sản phẩm hoàn thành nên nhanh và dễ điều hướng, dù là trang đích sản phẩm hay dịch vụ.
Xây dựng Portfolio trực tuyến (Build an Online Portfolio)
- Kỹ năng CSS thực hành: Viết code, HTML, kiểm soát phiên bản, kiểm thử đa nền tảng, chuẩn W3C
Bạn có thể thực hành kỹ năng CSS bằng cách tạo trang web portfolio cho các dự án của chính bạn. Bằng cách truy cập trang portfolio của bạn, mọi người nên có thể đánh giá chuyên môn của bạn và quyết định dịch vụ của bạn có đáng tiền hay không. Đừng quên liên kết đến GitHub hoặc môi trường phát triển nào bạn chọn.
Tạo bố cục lưới CSS Responsive (Make a Responsive CSS Grid Layout)
- Kỹ năng CSS thực hành: Viết code, kiểm thử đa nền tảng, chuẩn W3C
CSS grid là bố cục hai chiều dùng để chia trang thành các khu vực chính như header, footer, và body. Để tạo CSS grid responsive, bạn cần xác định đúng mối quan hệ giữa hàng, cột, và các phần tử khác ảnh hưởng đến kích thước lưới. Sau khi định nghĩa lưới, bạn sẽ đặt các phần tử HTML và làm cho lưới responsive.
Thêm tính năng Responsive cho trang Thương mại điện tử (Add Responsive Features to an Ecommerce Site)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Bạn có thể làm cho trang thương mại điện tử hiện có responsive hơn bằng cách thêm font, animation, thanh điều hướng, và hình ảnh nền phù hợp. Bất cứ thứ gì có thể làm cho trang web hấp dẫn hơn mà không làm chậm tốc độ và chức năng sẽ cải thiện responsive. Nếu bạn bắt đầu trang web từ đầu, học khóa học JavaScript trực tuyến trước sẽ có lợi.
Thiết kế mô hình 3D Hệ mặt trời chuyển động (Design a 3D Model of the Solar System in Motion)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Bạn có thể tạo mô hình ba chiều của hệ mặt trời với kiến thức trung cấp về CSS và HTML. Hãy chắc chắn nó có chi tiết của tất cả hành tinh và cách chúng quay quanh mặt trời. Nó có thể là thiết kế đơn giản, nhưng nó cho phép bạn khám phá sự sáng tạo và chức năng trong CSS và HTML. Julian Garnier trên CodePen có ví dụ dự án CSS hệ mặt trời tốt.
Ý tưởng dự án CSS nâng cao
Dự án nâng cao thành công nên đặt lên đầu portfolio trước dự án người mới hoặc trung cấp. Điều này sẽ cho nhà tuyển dụng tiềm năng thấy độ sâu của kỹ năng bạn. Một số ý tưởng cho dự án nâng cao được liệt kê dưới đây.
Tái tạo trang kết quả Google (Replicate the Google Result Page)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Trong khi tạo trang chủ tìm kiếm Google yêu cầu CSS cấp người mới, bạn sẽ cần kiến thức nâng cao hơn để tái tạo toàn bộ trang kết quả tìm kiếm Google. Đây là trang hiện ra sau khi bạn đã tìm kiếm thông tin trên Google. Bạn không cần thêm backlink hoặc hệ thống điều hướng thực tế nếu bạn không muốn.
Tạo bố cục hình ảnh (Create an Image Layout)
- Kỹ năng CSS thực hành: Viết code, HTML, chuẩn W3C
Tạo bố cục cho thư viện hình ảnh (image gallery) là một trong những cách dùng CSS tốt nhất ở cấp độ nâng cao. Lưới cơ bản nên khoảng tám trên tám và đơn vị lưới nên 15 pixel mỗi cái. Nếu bạn chọn bố cục album ảnh, hãy chắc chắn bạn chọn mẫu CSS xu hướng. Bạn có thể làm một số lưới lớn hơn hoặc rõ ràng hơn để nhấn mạnh và phong cách.
Thiết kế trang web Dự báo thời tiết (Design a Weather Forecast Website)
- Kỹ năng CSS thực hành: Viết code, HTML, kiểm soát phiên bản, chuẩn W3C
Bạn có thể tạo trang web dự báo thời tiết đơn giản từ đầu với kiến thức nâng cao về CSS, HTML, và React. App nên chứa mọi thứ cần thiết để người dùng nhận được đọc thời tiết chính xác. Bao gồm ngày, giờ, nhiệt độ, độ ẩm, và bất kỳ thay đổi nào trong bầu không khí tại một thời điểm cho trước.
Tạo trang web Thương mại điện tử (Create an Ecommerce Website)
- Kỹ năng CSS thực hành: Viết code, HTML, Kiểm soát phiên bản, Chuẩn W3C
Một trong những cách tốt nhất để củng cố kỹ năng CSS là thiết kế trang web thương mại điện tử responsive từ đầu. Kiến thức CSS và HTML chỉ không đủ cho nhiệm vụ này. Bạn cũng nên có hiểu biết về JavaScript. Trang web nên có mọi thứ từ giỏ hàng (shopping cart) đến trang thanh toán trực tuyến.
Tích hợp trang đăng nhập Facebook vào trang web (Integrate a Facebook Login Page on a Website)
- Kỹ năng CSS thực hành: Viết code, HTML
Nếu bạn đã có trang web hiện có, bạn có thể tích hợp trang đăng nhập Facebook vào trang web. Facebook có kit phát triển phần mềm để tích hợp trang của bạn vào trang web. Tuy nhiên, nó không nên được dùng cho dự án này. Mục tiêu của bạn ở đây là thiết kế trang đăng nhập của bạn từ đầu với CSS và HTML.
Mẫu dự án CSS cho người mới (CSS Starter Project Templates)
Mẫu (template) hoàn hảo để cắt giảm thời gian phát triển vì bạn không cần bắt đầu từ đầu. Có hàng trăm mẫu CSS được tạo bởi nhà thiết kế website hoặc giao diện người dùng (UI) nâng cao và có sẵn cho công chúng trên GitHub. Mẫu bạn chọn nên phụ thuộc vào loại dự án bạn đang làm. Một số lựa chọn mẫu mã nguồn mở được liệt kê dưới đây.
- HTML5 Boilerplate. Đây là mẫu front end phổ biến có thể dùng cho trang web, app mobile, hoặc dự án phát triển web app. HTML5 Boilerplate được tối ưu với nhiều icon, Google analytics, và Normalize.css.
- Hackathon Starter. Đây là mẫu CSS tuyệt vời cho bất kỳ ai muốn thiết kế trang web hoặc ứng dụng web với Node.js. Nó bao gồm hướng dẫn xác thực, ví dụ API, tích hợp mạng xã hội, và cấu trúc dự án MVC. Hackathon starter hiện có giấy phép MIT.
- Mobile-First Boilerplate. Mặc dù tất cả trang web nên thân thiện mobile, một số dự án nhấn mạnh khả năng sử dụng mobile hơn bất cứ thứ gì khác. Nếu bạn làm việc trên dự án như vậy, boilerplate mobile-first Kraken có thể là mẫu khởi động lý tưởng cho bạn.
- Max Boeck's Emergency Site Kit. Đây là một trong những mẫu trang web khẩn cấp tốt nhất cho CSS và phát triển front end nói chung. Nó cho phép bạn tiết kiệm đáng kể thời gian bằng cách khởi tạo triển khai một cú nhấp chuột (one-click deployment). Bạn có thể tùy chỉnh một số phần của mẫu cho phù hợp nhu cầu dự án.
- Cookiecutters. Mẫu này có giấy phép BSD-3-Clause và lý tưởng cho phát triển đa nền tảng. Không quan trọng bạn đang tìm mẫu cho dự án mobile hay web-friendly. Hệ điều hành chính thức cho mẫu này là Windows, Linux, và Mac.
Bước tiếp theo: Bắt đầu tổ chức Portfolio CSS của bạn
Việc có mẫu thực tế (real-world samples) như một phần của portfolio CSS là quan trọng nếu bạn muốn tìm việc làm nhà phát triển web.
Portfolio CSS của bạn là tập hợp tất cả dự án CSS của bạn. Không có giới hạn về số dự án nên xuất hiện trong portfolio, nhưng hãy chắc chắn bạn chỉ liệt kê các dự án thành công và liên quan nhất. Dưới đây là một số mẹo để tạo portfolio CSS hoàn hảo.
Thêm dự án cá nhân trước (Add Personal Projects First)
Các portfolio CSS phổ biến nhất là trang web trực tuyến. Bạn phải thêm dự án cá nhân vào portfolio trước. Đừng trình bày công việc của nhà phát triển khác như của bạn. Nếu bạn muốn thêm dự án cho khách hàng cũ, hãy chắc chắn bạn xin phép khách hàng trước. Bạn cũng có thể được hưởng lợi từ việc liệt kê đóng góp mã nguồn mở (open source contributions) của bạn.
Rõ ràng nêu thông tin liên hệ (Clearly State Your Contact Information)
Mục đích chính của portfolio là trình bày kỹ năng cho khách hàng tiềm năng hoặc nhân viên. Nếu bạn không hiển thị thông tin liên hệ, bên quan tâm sẽ không có cách nào liên hệ bạn. Đăng công việc trên GitHub là cách tuyệt vời khác để tăng khả năng nhìn thấy và liên kết thông tin liên hệ.
Bao gồm Trải nghiệm người dùng và Thiết kế (Include User Experience and Design)
CSS là công cụ front end chủ yếu dùng để cải thiện trải nghiệm người dùng và thiết kế. Làm cho trang web portfolio của bạn thân thiện với người dùng sẽ chứng minh kỹ năng của bạn. Điều này tăng sự quan tâm của khách hàng tiềm năng ngay cả trước khi họ xem dự án trước của bạn.
Tôi có thể học CSS trong thời gian ngắn không?
Có, bạn có thể học cơ bản CSS nhanh chóng tại một trong những CSS bootcamp tốt nhất nếu bạn đã có một chút kiến thức lập trình máy tính. Với kiến thức nền tảng lập trình, bạn nên có thể bắt đầu dự án CSS đầu tiên chỉ trong vài ngày.
Tôi nên bắt đầu với HTML hay CSS?
Bạn nên bắt đầu với CSS trước và học HTML sau khi bạn đã có kiến thức cơ bản về CSS. Có một số khóa học kết hợp HTML và CSS. Các khóa học kết hợp này cũng là lựa chọn tốt để xây dựng kiến thức nền tảng.
CSS có khó học không?
CSS dễ học ở cấp độ cơ bản. Khi bạn học HTML, việc triển khai kiến thức CSS trong dự án định dạng sẽ dễ dàng hơn. Tuy nhiên, khái niệm CSS càng nâng cao, càng khó học.
CSS có quan trọng cho nhà thiết kế web không?
Có, CSS quan trọng cho thiết kế trang web thực tế responsive vì nó là tiêu chuẩn vàng cho việc định dạng trang web. CSS được dùng để xác định bố cục, font, nền, văn bản, và mọi thứ khác làm cho trang web rõ ràng, chính xác, và dễ truy cập cho người dùng.