Lấy cảm hứng để viết code với những thử thách tuyệt vời này

Ảnh của Ferenc Almasi trên Unsplash.
Ảnh của Ferenc Almasi trên Unsplash.

 

Một trong những cách hiệu quả nhất để trở nên giỏi hơn trong việc viết code là chỉ cần xây dựng càng nhiều thứ càng tốt.

Thử thách code là một cách thú vị để nâng cấp kỹ năng của bạn bằng cách xây dựng mọi thứ. Sử dụng bài viết này như một nguồn cảm hứng, lấy một cái gì đó từ danh sách và bắt đầu xây dựng!

Nếu bạn đang vội và không bao giờ muốn hết ý tưởng để code - tôi đã biên soạn danh sách hơn 100 thách thức tại đây.

Bạn có thể sử dụng bất kỳ công cụ nào bạn thích cho các thử thách, vì vậy nếu bạn có điều gì đó bạn muốn thực hành, hãy thử.

1. Giao diện người dùng Trình quản lý Tác vụ

Thật là một ứng dụng đẹp! Giao diện người dùng sạch sẽ, hiện đại và thông minh.

“Giao diện người dùng Task Manager với CSS Grid” - Bởi Aysenur Turk
“Giao diện người dùng Task Manager với CSS Grid” - Bởi Aysenur Turk

 

Những gì bạn sẽ học bằng cách xây dựng giao diện người dùng trình quản lý tác vụ 

  • Cách sử dụng CSS với HTML. Điểm thưởng nếu bạn dùng thử CSS grid mới.
  • Cách tạo các ứng dụng web có giao diện đẹp.

2. Trình tạo mật khẩu ngẫu nhiên

Chọn độ dài của mật khẩu mới của bạn, áp dụng bộ lọc, số, ký hiệu, v.v. và tạo mật khẩu mới!

Những gì bạn sẽ học bằng cách xây dựng Trình tạo mật khẩu ngẫu nhiên

Cách sử dụng JavaScript để tạo mật khẩu an toàn. Hãy thoải mái sử dụng bất kỳ thư viện NPM mã nguồn mở nào khi bạn thấy phù hợp!

Cách tạo các phần tử biểu mẫu đầu vào theo chủ đề tùy chỉnh. Lưu ý các nút bật tắt - đây là các phần tử input HTML5.

3. Nút animated

Đây là một nút trông mượt mà sẽ hoạt ảnh khi bạn chuyển đổi các chế độ khác nhau. Hãy thoải mái thử nghiệm với các phong cách và hình ảnh động khác nhau.

“Giao diện người dùng // Loại lựa chọn nút” - Bởi Cosimo Scarpa
“Giao diện người dùng // Loại lựa chọn nút” - Bởi Cosimo Scarpa

 

Những gì bạn sẽ học bằng cách xây dựng Nút hoạt hình

Cách hoạt động, chuyển đổi và chuyển tiếp CSS hoạt động. Bạn sẽ cần thực hiện chuyển đổi văn bản trong và ngoài.

4. VU Meter (CSS Only)

“Máy đo đơn vị âm lượng (VU) hoặc chỉ báo âm lượng tiêu chuẩn (SVI) là một thiết bị hiển thị biểu thị mức tín hiệu trong thiết bị âm thanh.” - Wikipedia

“VU meter (CSS thuần túy trong một div)” - Bởi Noah
“VU meter (CSS thuần túy trong một div)” - Bởi Noah

 

Những gì bạn sẽ học bằng cách xây dựng Công cụ VU chỉ CSS

  • Cách chỉ sử dụng CSS để tạo các đối tượng trên trang web.
  • Áp dụng hoạt ảnh CSS, chuyển đổi, chuyển tiếp, v.v.

5. Clubhouse Clone

Với sự thành công tràn lan của Clubhouse, ai chưa xây dựng bản sao Clubhouse? Tại sao không tìm hiểu cách nó hoạt động bằng cách xây dựng một bản sao? Hãy làm điều đó!

Ứng dụng Clubhouse chính thức.
Ứng dụng Clubhouse chính thức.

 

Bạn sẽ học được gì khi xây dựng bản sao Clubhouse

  • Cách tạo ứng dụng di động gốc trông giống như Clubhouse. Hãy thoải mái thêm nhiều chức năng tùy thích.

6. Trang tổng quan của nhà tuyển dụng

Biểu đồ, chủ đề tối, trò chuyện - mọi thứ bạn thấy trong một ứng dụng web hiện đại. Mọi nhà tuyển dụng đều mong bạn biết cách viết code những thứ đó. Hãy thử xem bạn có thể tái tạo bảng điều khiển không!

'Công việc Tuyển dụng Bảng điều khiển UI' — Bởi Aybüke Ceylan
'Công việc Tuyển dụng Bảng điều khiển UI' — Bởi Aybüke Ceylan

 

Những gì bạn sẽ học được bằng cách xây dựng Trang tổng quan của Nhà tuyển dụng Việc làm

  • Cách tạo biểu đồ dữ liệu đẹp bằng JavaScript và CSS.
  • Cách tạo một cuộc trò chuyện nhanh chóng và thời gian thực trong WebSockets.
  • Cách tạo bố cục đáp ứng.

Tổng kết

Cảm ơn vì đã đọc. Chúc bạn viết code vui vẻ!

Tìm kiếm thêm ý tưởng để code? Không bao giờ hết ý tưởng để code, một lần nữa. Hãy truy cập vào đây với một loạt các thử thách giao diện người dùng của tôi.

Bài viết gốc tại đây.

Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.

Chi tiết khóa học: https://frontend.techmaster.vn/.

Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).