Tìm kiếm các dự án phát triển web thật dễ dàng nếu bạn biết mình đang tìm kiếm điều gì. Nhưng thường thì những dự án này cũng bao gồm Javascript mà bạn có thể không muốn. Có thể, bạn là người mới bắt đầu và chỉ muốn tập trung vào thiết kế web hơn là phát triển?
Các trang web tốt nhất để tìm các dự án HTML và CSS
Hãy bắt đầu với trang web thân thiện với người mới bắt đầu nhất
1. Cố vấn giao diện người dùng
Trang web này cung cấp một danh sách các thách thức để giúp phát triển các phong cách thiết kế khác nhau. Mặc dù một số thử thách cần có Javascript, nhưng bạn có thể dễ dàng nhận ra chúng vì nó được đề cập ngay bên dưới tên dự án. Bạn có thể lọc kết quả để chỉ hiển thị các dự án HTML và CSS nếu đó là những gì bạn đang theo đuổi. Các dự án được chia thành các phần Người mới, Sơ cấp và Trung cấp giúp bạn dễ dàng chọn dự án theo kinh nghiệm của mình
Khi mở dự án, bạn có thể tải xuống các tệp khởi động cho hình ảnh và các chi tiết thiết kế khác. Bạn có thể hoàn thành dự án và gửi nó lên trang web để truy cập các tệp dự án từ những người khác. Phân tích công việc của họ sẽ cho bạn thấy những cách khác để hoàn thành nó. Các dự án HTML và CSS trong trang web này không yêu cầu bạn sử dụng một cách cụ thể, vì vậy bạn có thể tự do sử dụng grid, flex-box hoặc thậm chí bất kỳ khung CSS nào nếu muốn.
Cố vấn giao diện người dùng mở
2. Thực hành giao diện người dùng
Mặc dù Frontend Mentor cung cấp các dự án cho trình độ trung cấp, nhưng nó cung cấp các dự án nâng cao hơn. Về cơ bản, dịch vụ sẽ hiển thị một trang web demo từ các trang web thực và muốn bạn tạo lại nó. Ví dụ: trang giới thiệu của Ableton, trang phần thưởng của Starbucks, trang phát hành Album Monstercat, v.v.
Ngoại trừ các chi tiết về bảng màu, bạn không nhận được bất kỳ tệp khởi động nào để bắt đầu. Bạn được yêu cầu tìm những bức ảnh tương tự trên web hoặc tải xuống trực tiếp từ trang demo. Dịch vụ không cung cấp bất kỳ mã giải pháp nào nhưng bạn có thể mở trang web và sử dụng các công cụ dành cho nhà phát triển của trình duyệt để tìm mã đó. Trang web dự án HTML và CSS phổ biến chỉ giới thiệu 10 dự án duy nhất
Thực hành Frontend mở
3. Daily UI
Giao diện người dùng hàng ngày đi kèm với một khái niệm hoàn toàn khác. Mở trang web và đăng ký nhận bản tin. Bạn sẽ nhận được một bản tin mỗi ngày với thông tin chi tiết về dự án mà bạn cần hoàn thành trong cùng ngày đó. Bạn sẽ nhận được tới 100 dự án nhưng chỉ vào các ngày trong tuần. Thử thách giao diện người dùng hàng ngày sẽ được hoàn thành khi bạn hoàn thành và gửi tất cả 100 dự án
Đây không phải là những dự án lớn. Hầu hết yêu cầu bạn tạo một phần trên trang web như tạo bảng giá, trang thanh toán, thẻ công thức, vé máy bay, v.v.
Mở giao diện người dùng hàng ngày
4. Codewell
Bạn sẽ chỉ tìm thấy khoảng 25 dự án CSS và HTML ở đây nhưng chúng hơi khác một chút so với các dự án khác trong danh sách. Ví dụ: tạo bố cục cho phần bình luận, trang đăng ký, bảng điều khiển, nguồn cấp dữ liệu mạng xã hội, v.v. là một số dự án được liệt kê bởi Codewell. Các dự án này thường cần Javascript, nhưng Codewell chỉ thách thức bạn tạo bố cục. Điều này có nghĩa là các trang đăng nhập và bảng điều khiển mà bạn tạo không cần phải hoạt động
Ứng dụng này cũng có đăng ký trả phí $8/tháng. Đăng ký trả phí sẽ mở khóa các thử thách và cũng giới thiệu các tệp thiết kế Figma
Mở Codewell
5. rê bóng
Dribble là một thị trường nơi bạn có thể làm việc như một nhà thiết kế tự do. Đây là nơi bạn có thể bắt đầu nghĩ về việc tiến lên một bước và kiếm tiền. Dribble không chỉ dành cho các nhà thiết kế web. Bạn có thể tìm thấy tất cả các loại nhà thiết kế như nhà thiết kế đồ họa, biên tập video, nhà thiết kế thời trang, nhiếp ảnh gia, minh họa, v.v. Nhưng thiết kế web là một phần chính của nền tảng nơi bạn sẽ tìm thấy nhiều công việc. Mặc dù một số thiết kế nâng cao yêu cầu Javascript, nhưng bạn có thể thực hiện các hợp đồng nhỏ chỉ yêu cầu HTML và CSS để tạo
Nó cũng là một loại nền tảng truyền thông xã hội dành cho các nhà phát triển web. Nhiều người chỉ cần tải thiết kế của họ lên hồ sơ của họ. Bạn có thể tạo thiết kế của riêng mình và tải nó lên hoặc chỉ cần tạo lại các thiết kế đã được xuất bản để thực hành
Mở rê bóng
6. thái độ
Behance giống như Dribble đối với tất cả các loại nhà thiết kế. Cũng giống như Dribble, bạn cũng có thể tìm việc làm trong phần việc làm và cả các dự án trong phần Khám phá. Điều khiến Behance trở nên độc đáo là tùy chọn lọc của nó. Bạn có thể thu hẹp tìm kiếm của mình để chỉ hiển thị các thiết kế web, các dự án chỉ có HTML và CSS, chọn một màu để nhận các dự án được thiết kế theo một màu cụ thể, vị trí để nhận các dự án được gửi từ một vị trí cụ thể, v.v.
Một số dự án cũng đi kèm với các tệp nguồn để bạn có thể kiểm tra mã của dự án đó để phân tích
Hành vi mở
7. Trận chiến CSS
CSS Battle là trang web hoàn hảo nếu bạn đang muốn trở thành một chuyên gia thiết kế CSS. Dịch vụ cung cấp mục tiêu và bạn cần sử dụng các kỹ năng HTML và CSS của mình để cung cấp đầu ra giống hệt như nguồn. Không giống như các trang web HTML và CSS khác, bạn không thiết kế bảng hoặc bố cục ở đây, bạn lấy phong cách biểu tượng hoặc thiết kế giống nghệ thuật trừu tượng làm mục tiêu. Các quy tắc rất đơn giản, bạn không được sử dụng javascript, hiển thị không bao gồm bất kỳ hình ảnh nào và phải đạt được thiết kế mục tiêu với càng ít mã càng tốt
Người đạt được mục tiêu với ít mã nhất sẽ cao hơn trên bảng xếp hạng. Bạn không phải sử dụng bất kỳ trình chỉnh sửa mã nào, ứng dụng cung cấp trình chỉnh sửa trực tuyến hiển thị cho bạn đầu ra trong thời gian thực. Khi bạn cho rằng đầu ra của mình giống hệt như mục tiêu, hãy nhấn nút gửi để kiểm tra điểm số
Mở trận chiến CSS
8. Pinterest
Pinterest là một cách tuyệt vời để tìm và thu thập hình ảnh của các thiết kế web. Tại đây, bạn có thể không nhận được mã nguồn hoặc bất kỳ tệp có thể tải xuống nào, nhưng bạn có vô số thiết kế để lựa chọn. Chỉ cần tìm kiếm thiết kế web và bạn sẽ tìm thấy rất nhiều kết quả mà bạn có thể biến thành các dự án. Công cụ đề xuất của Pinterest sẽ điều chỉnh kết quả tìm kiếm trong tương lai để đáp ứng sở thích của bạn tốt hơn
Ngoài các thiết kế, đây cũng là một nền tảng tuyệt vời để tìm các mẹo về phát triển web, đồ họa thông tin, đề xuất, v.v.
Thiết kế web mở trên Pinterest
9. YouTube
Mặc dù hầu hết các dịch vụ chỉ đơn giản liệt kê các dự án là một thách thức với mã nguồn, nhưng ngược lại, YouTube có rất nhiều hướng dẫn sử dụng HTML và CSS. Chỉ cần tìm kiếm các dự án HTML và CSS trên tìm kiếm YouTube để bắt đầu
Hầu hết các dự án cũng cung cấp liên kết đến mã nguồn và cung cấp cho bạn các tệp khởi động cho hình ảnh. Vì đây là những hướng dẫn nên chúng là một lựa chọn tuyệt vời cho người mới bắt đầu muốn viết mã trong khi học. Ngoài ra, các mẹo và chiến thuật được cung cấp ở giữa sẽ hữu ích về lâu dài
Mở Dự án HTML và CSS trong YouTube
Sân chơi HTML và CSS
Là một lập trình viên mới bắt đầu, bạn nên coi Google là người bạn tốt nhất của mình. Vì vậy, tìm kiếm nhanh trên Google các dự án HTML và CSS sẽ mang đến cho bạn rất nhiều dự án từ các trang web khác nhau. Không cần phải đề cập, bạn cũng có thể tạo lại các trang web phổ biến như YouTube, Apple, Tesla, Amazon, Netflix, Starbucks, v.v. hoặc bất kỳ trang web nào mà bạn cảm thấy có thiết kế tuyệt vời. Dù sao đi nữa, ngày nay bạn có các tùy chọn để tạo trang web mà không cần sử dụng bất kỳ mã nào