Các dự án JavaScript tốt nhất là gì?

Tôi đã tạo một danh sách gồm 40 hướng dẫn dự án thân thiện với người mới bắt đầu bằng Vanilla JavaScript, React và TypeScript

Lời khuyên của tôi cho các hướng dẫn là hãy xem video, xây dựng dự án, chia nhỏ và xây dựng lại theo cách của riêng bạn. Thử nghiệm với việc thêm các tính năng mới hoặc sử dụng các phương pháp khác nhau

Điều đó sẽ kiểm tra xem bạn đã thực sự học các khái niệm hay chưa

Bạn có thể nhấp vào bất kỳ dự án nào được liệt kê bên dưới để chuyển đến phần đó của bài viết

Dự án JavaScript vani

1. Cách tạo Flipper màu
2. Cách tạo bộ đếm
3. Cách tạo băng chuyền đánh giá
4. Cách tạo thanh điều hướng đáp ứng
5. Cách tạo thanh bên
6. Làm thế nào để tạo ra một phương thức
7. Cách tạo trang Câu hỏi thường gặp
8. Cách tạo trang thực đơn nhà hàng
9. Cách tạo nền video
10. Cách tạo thanh điều hướng khi cuộn
11. Cách tạo tab hiển thị nội dung khác nhau
12. Cách tạo đồng hồ đếm ngược
13. Cách tạo Lorem ipsum của riêng bạn
14. Cách tạo danh sách tạp hóa
15. Cách tạo thanh trượt hình ảnh
16. Cách tạo trò chơi Oẳn tù tì
17. Cách tạo trò chơi Simon
18. Cách tạo trò chơi Platformer
19. Cách tạo Doodle Jump
20. Cách tạo Flappy Bird
21. Cách tạo trò chơi Trí nhớ
22. Cách tạo trò chơi Whack-a-mole
23. Cách tạo trò chơi Connect Four
24. Cách tạo trò chơi Snake
25. Cách tạo trò chơi Space Invaders
26. Cách tạo trò chơi Frogger
27. Cách tạo trò chơi Tetris

dự án phản ứng

1. Cách xây dựng trò chơi Tic-Tac-Toe bằng React Hook
2. Cách xây dựng trò chơi Tetris bằng React Hooks
3. Cách tạo ứng dụng nhắc nhở sinh nhật
4. Cách tạo trang du lịch
5. Cách tạo menu đàn accordion
6. Cách tạo tab cho trang danh mục đầu tư
7. Cách tạo thanh trượt đánh giá
8. Cách tạo bộ tạo màu
9. Cách tạo trang menu thanh toán Stripe
10. Cách tạo trang giỏ hàng
11. Cách tạo trang tìm kiếm cocktail

Dự án TypeScript

1. Cách xây dựng ứng dụng Quiz bằng React và TypeScript
2. Cách tạo trò chơi Arkanoid bằng TypeScript

Dự án JavaScript vani

Nếu bạn chưa học các nguyên tắc cơ bản về JavaScript, thì tôi khuyên bạn nên xem khóa học này trước khi tiếp tục với các dự án

Nhiều ảnh chụp màn hình bên dưới là từ đây

Cách tạo Flipper màu

Trong hướng dẫn John Smilga này, bạn sẽ học cách tạo một bộ đổi màu nền ngẫu nhiên. Đây là một dự án tốt để giúp bạn bắt đầu làm việc với DOM

Trong bài báo của Leonardo Maldonado về lý do tại sao điều quan trọng là phải tìm hiểu về DOM, ông nói

Bằng cách thao túng DOM, bạn có vô số khả năng. Bạn có thể tạo các ứng dụng cập nhật dữ liệu của trang mà không cần làm mới. Ngoài ra, bạn có thể tạo các ứng dụng mà người dùng có thể tùy chỉnh và sau đó thay đổi bố cục của trang mà không cần làm mới

Các khái niệm chính được đề cập

• mảng
• tài liệu. getElementById[]
• tài liệu. truy vấnSelector[]
• addEventListener[]
• tài liệu. thân thể. Phong cách. màu nền
• môn Toán. tầng lầu[]
• môn Toán. ngẫu nhiên[]
• mảng. chiều dài

Trước khi bạn bắt đầu, tôi khuyên bạn nên xem phần giới thiệu nơi John giới thiệu cách truy cập các tệp thiết lập cho tất cả các dự án của anh ấy

Cách tạo Bộ đếm

Trong hướng dẫn John Smilga này, bạn sẽ học cách tạo bộ đếm và viết các điều kiện thay đổi màu sắc dựa trên số dương hoặc số âm được hiển thị

Dự án này sẽ giúp bạn thực hành nhiều hơn khi làm việc với DOM và bạn có thể sử dụng bộ đếm đơn giản này trong các dự án khác như đồng hồ pomodoro

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelectorAll[]
• cho mỗi[]
• addEventListener[]
• thuộc tính mục tiêu hiện tại
• danh sách lớp học
• văn bảnnội dung

Cách tạo Băng chuyền đánh giá

Trong hướng dẫn này, bạn sẽ học cách tạo băng chuyền đánh giá bằng nút tạo đánh giá ngẫu nhiên

Đây là một tính năng tốt cần có trên trang web thương mại điện tử để hiển thị đánh giá của khách hàng hoặc danh mục đầu tư cá nhân để hiển thị đánh giá của khách hàng

Các khái niệm chính được đề cập

• các đối tượng
• DOMNội dung được tải
• addEventListener[]
• mảng. chiều dài
• văn bảnnội dung

Cách tạo Thanh điều hướng đáp ứng

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo thanh điều hướng đáp ứng sẽ hiển thị menu hamburger cho các thiết bị nhỏ hơn

Học cách phát triển trang web đáp ứng là một phần quan trọng để trở thành nhà phát triển web. Đây là một tính năng phổ biến được sử dụng trên rất nhiều trang web

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelector[]
• addEventListener[]
• danh sách lớp học. chuyển đổi []

Cách tạo Thanh bên

Trong hướng dẫn này, bạn sẽ học cách tạo một thanh bên với hoạt ảnh

Đây là một tính năng thú vị mà bạn có thể thêm vào trang web cá nhân của mình

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelector[]
• addEventListener[]
• danh sách lớp học. chuyển đổi []
• danh sách lớp học. gỡ bỏ[]

Cách tạo Modal

Trong hướng dẫn này, bạn sẽ học cách tạo một cửa sổ phương thức được sử dụng trên các trang web để khiến người dùng thực hiện hoặc xem điều gì đó cụ thể

Một ví dụ điển hình về cửa sổ phương thức sẽ là nếu người dùng thực hiện các thay đổi trong một trang web mà không lưu chúng và cố gắng truy cập một trang khác. Bạn có thể tạo một cửa sổ phương thức cảnh báo họ lưu các thay đổi của họ nếu không thông tin đó sẽ bị mất

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelector[]
• addEventListener[]
• danh sách lớp học. cộng[]
• danh sách lớp học. gỡ bỏ[]

Cách tạo trang Câu hỏi thường gặp

Trong hướng dẫn này, bạn sẽ học cách tạo một trang câu hỏi thường gặp để giáo dục người dùng về doanh nghiệp và hướng lưu lượng truy cập đến trang web thông qua kết quả tìm kiếm không phải trả tiền.    

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelectorAll[]
• addEventListener[]
• cho mỗi[]
• danh sách lớp học. gỡ bỏ[]
• danh sách lớp học. chuyển đổi []

Cách tạo trang thực đơn nhà hàng

Trong hướng dẫn này, bạn sẽ học cách tạo một trang thực đơn nhà hàng lọc qua các thực đơn thức ăn khác nhau. Đây là một dự án thú vị sẽ dạy cho bạn các chức năng bậc cao hơn như bản đồ, thu nhỏ và lọc

Trong bài báo của Yazeed Bzadough về các hàm bậc cao hơn, ông nói

lợi ích lớn nhất của HOF là khả năng tái sử dụng lớn hơn

Các khái niệm chính được đề cập

• mảng
• các đối tượng
• cho mỗi[]
• DOMNội dung được tải
• bản đồ, thu nhỏ và lọc
• bên trongHTML
• bao gồm phương pháp

Cách tạo nền video

Trong hướng dẫn này, bạn sẽ học cách tạo nền video với tính năng phát và tạm dừng. Đây là một tính năng phổ biến được tìm thấy trong rất nhiều trang web

Các khái niệm chính được đề cập

• tài liệu. truy vấnSelector[]
• addEventListener[]
• danh sách lớp học. chứa[]
• danh sách lớp học. cộng[]
• danh sách lớp học. gỡ bỏ[]
• chơi[]
• tạm ngừng[]

Cách tạo thanh điều hướng khi cuộn

Trong hướng dẫn này, bạn sẽ học cách tạo thanh điều hướng trượt xuống khi cuộn và sau đó giữ nguyên vị trí cố định ở một độ cao nhất định

Đây là một tính năng phổ biến được tìm thấy trên nhiều trang web chuyên nghiệp

Các khái niệm chính được đề cập

• tài liệu. getElementById[]
• getFullYear[]
• getBoundingClientRect[]
• phương pháp lát
• cửa sổ. scrollTo[]

Cách tạo tab hiển thị nội dung khác nhau

Trong hướng dẫn này, bạn sẽ học cách tạo các tab sẽ hiển thị các nội dung khác nhau, hữu ích khi tạo các ứng dụng trang đơn.

Các khái niệm chính được đề cập

• danh sách lớp học. cộng[]
• danh sách lớp học. gỡ bỏ[]
• cho mỗi[]
• addEventListener[]

Cách tạo đồng hồ đếm ngược

Trong hướng dẫn này, bạn sẽ học cách tạo đồng hồ đếm ngược có thể được sử dụng khi sản phẩm mới sắp ra mắt hoặc đợt giảm giá sắp kết thúc trên trang web thương mại điện tử

Các khái niệm chính được đề cập

• getFullYear[]
• getMonth[]
• hẹn gặp[]
• môn Toán. tầng lầu[]
• setInterval[]
• ClearInterval[]

Cách tạo Lorem ipsum của riêng bạn

Trong hướng dẫn này, bạn sẽ học cách tạo trình tạo Lorem ipsum của riêng mình

Lorem ipsum là văn bản giữ chỗ cho các trang web. Đây là một dự án thú vị để thể hiện sự sáng tạo của bạn và tạo văn bản của riêng bạn

Các khái niệm chính được đề cập

• parseInt[]
• môn Toán. tầng lầu[]
• môn Toán. ngẫu nhiên[]
• isNaN[]
• phương pháp lát
• Sự kiện. ngăn chặn Mặc định[]

Cách tạo danh sách tạp hóa

Trong hướng dẫn này, bạn sẽ học cách cập nhật và xóa các mặt hàng khỏi danh sách tạp hóa và tạo một ứng dụng CRUD [Tạo, Đọc, Cập nhật và Xóa] đơn giản

CRUD đóng vai trò rất quan trọng trong việc phát triển các ứng dụng full stack. Không có nó, bạn sẽ không thể thực hiện những việc như chỉnh sửa hoặc xóa bài đăng trên nền tảng mạng xã hội yêu thích của mình.  

Các khái niệm chính được đề cập

• DOMNội dung được tải
• Ngày mới[]
• tạoAttribute[]
• setAttributeNode[]
• appendChild[]
• lọc[]
• bản đồ[]

Cách tạo thanh trượt hình ảnh

Trong hướng dẫn này, bạn sẽ học cách tạo thanh trượt hình ảnh mà bạn có thể thêm vào bất kỳ trang web nào

Các khái niệm chính được đề cập

• truy vấnSelectorAll[]
• addEventListener[]
• cho mỗi[]
• câu lệnh if/else

Cách tạo trò chơi Oẳn tù tì

Trong hướng dẫn này, Tenzin sẽ hướng dẫn bạn cách tạo trò chơi Oẳn tù tì. Đây là một dự án thú vị sẽ giúp bạn thực hành nhiều hơn khi làm việc với DOM

Các khái niệm chính được đề cập

• addEventListener[]
• môn Toán. tầng lầu[]
• môn Toán. ngẫu nhiên[]
• báo cáo chuyển đổi

Cách tạo trò chơi Simon

Trong hướng dẫn này, Beau Carnes sẽ dạy bạn cách tạo Trò chơi Simon cổ điển. Đây là một dự án hay sẽ giúp bạn suy nghĩ về các thành phần khác nhau đằng sau trò chơi và cách bạn xây dựng từng chức năng đó

Các khái niệm chính được đề cập

• truy vấnSelector[]
• addEventListener[]
• setInterval[]
• ClearInterval[]
• setTimeout[]
• chơi[]
• môn Toán. tầng lầu[]
• môn Toán. ngẫu nhiên[]

Cách tạo trò chơi Platformer

Trong hướng dẫn này, Frank Poth sẽ dạy bạn cách xây dựng một trò chơi platformer. Dự án này sẽ giới thiệu cho bạn các nguyên tắc Lập trình hướng đối tượng và mẫu phần mềm Model, View, Controller

Các khái niệm chính được đề cập

• từ khóa này
• cho vòng lặp
• báo cáo chuyển đổi
• nguyên tắc OOP
• mẫu MVC
• API vải

Cách tạo Doodle Jump và Flappy Bird

Trong loạt video này, Ania Kubow sẽ hướng dẫn bạn cách xây dựng Doodle Jump và Flappy Bird

Trò chơi xây dựng là một cách thú vị để tìm hiểu thêm về JavaScript và sẽ bao gồm nhiều phương pháp JavaScript phổ biến

Các khái niệm chính được đề cập

• tạo phần tử []
• cho mỗi[]
• setInterval[]
• ClearInterval[]
• removeChild[]
• appendChild[]
• addEventListener[]
• removeEventListener[]

Cách tạo bảy trò chơi cổ điển với Ania Kubow

Bạn sẽ có rất nhiều niềm vui khi tạo bảy trò chơi trong khóa học này của Ania Kubow

1. Trò chơi trí nhớ
2. Whack-a-nốt ruồi
3. Kết nối bốn
4. Con rắn
5. Kẻ xâm lược không gian
6. ếch nhái
7. xếp hình

Các khái niệm chính được đề cập

• cho các vòng lặp
• sự kiện title
• chức năng mũi tên
• loại[]
• nhạc pop[]
• bỏ dịch []
• đẩy[]
• Chỉ số[]
• bao gồm[]
• nối[]
• concat[]

dự án phản ứng

Nếu bạn không quen thuộc với các nguyên tắc cơ bản của React, thì tôi khuyên bạn nên tham gia khóa học này trước khi tiếp tục với các dự án

Cách xây dựng trò chơi Tic-Tac-Toe bằng React Hook

Trong bài viết freeCodeCamp này, Per Harald Borgen nói về hướng dẫn trò chơi Tic-Tac-Toe của Scrimba do Thomas Weibenfalk hướng dẫn. Bạn có thể xem khóa học video trên Kênh YouTube của Scimba

Đây là một dự án tốt để bắt đầu làm quen với những kiến ​​thức cơ bản về React và làm việc với hook

Các khái niệm chính được đề cập

• useState[]
• nhập khẩu xuất khẩu
• JSX

Cách xây dựng trò chơi Tetris bằng React Hooks

Trong hướng dẫn này, Thomas Weibenfalk sẽ hướng dẫn bạn cách xây dựng trò chơi Tetris bằng cách sử dụng React Hook và các thành phần được tạo kiểu

Các khái niệm chính được đề cập

• useState[]
• sử dụngEffect[]
• sử dụngRef[]
• sử dụngCallback[]
• các thành phần theo kiểu

Cách tạo ứng dụng nhắc nhở sinh nhật

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong khóa học John Smilga này, bạn sẽ học cách tạo ứng dụng nhắc nhở sinh nhật. Đây là một dự án tốt để bắt đầu làm quen với những kiến ​​thức cơ bản về React và làm việc với hook

Tôi cũng khuyên bạn nên xem video của John về các tệp khởi động cho dự án này

Các khái niệm chính được đề cập

• useState[]
• nhập khẩu xuất khẩu
• JSX
• bản đồ[]

Cách tạo Trang tham quan

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo trang tham quan nơi người dùng có thể xóa những chuyến tham quan mà họ không quan tâm

Điều này sẽ giúp bạn thực hành với các hook React và mẫu async/await

Các khái niệm chính được đề cập

• cố gắng. tuyên bố bắt
• mẫu không đồng bộ/chờ đợi
• sử dụngEffect[]
• useState[]

Cách tạo menu đàn accordion

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo menu câu hỏi và câu trả lời cho đàn accordion. Các menu này có thể hữu ích trong việc hiển thị nội dung cho người dùng theo cách tiến bộ

Các khái niệm chính được đề cập

• Biểu tượng phản ứng
• useState[]
• bản đồ[]

Cách tạo tab cho trang danh mục đầu tư

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo các tab cho trang danh mục đầu tư giả. Các tab hữu ích khi bạn muốn hiển thị nội dung khác nhau trong các ứng dụng trang đơn

Các khái niệm chính được đề cập

• mẫu không đồng bộ/chờ đợi
• Biểu tượng phản ứng
• sử dụngEffect[]
• useState[]

Cách tạo thanh trượt đánh giá

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo thanh trượt đánh giá thay đổi thành đánh giá mới cứ sau vài giây

Đây là một tính năng thú vị mà bạn có thể kết hợp vào trang web thương mại điện tử hoặc danh mục đầu tư

Các khái niệm chính được đề cập

• Biểu tượng phản ứng
• sử dụngEffect[]
• useState[]
• bản đồ[]

Cách tạo bộ tạo màu

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo một bộ tạo màu. Đây là một dự án tốt để tiếp tục thực hành làm việc với hook và setTimeout

Các khái niệm chính được đề cập

• setTimeout[]
• ClearTimeout[]
• sử dụngEffect[]
• useState[]
• cố gắng. tuyên bố bắt
• Sự kiện. ngăn chặn Mặc định[]

Cách tạo trang menu thanh toán Stripe

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo trang menu thanh toán Stripe. Dự án này sẽ giúp bạn thực hành tốt về cách thiết kế trang đích sản phẩm bằng các thành phần React

Các khái niệm chính được đề cập

• Biểu tượng phản ứng
• sử dụngRef[]
• sử dụngEffect[]
• useState[]
• sử dụngContext[]

Cách tạo trang giỏ hàng

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo trang giỏ hàng cập nhật và xóa các mặt hàng. Dự án này cũng sẽ là một phần giới thiệu tốt về hook useReducer

Các khái niệm chính được đề cập

• bản đồ[]
• lọc[]
• phần tử
• sử dụngReducer[]
• sử dụngContext[]

Cách tạo trang tìm kiếm cocktail

Ảnh chụp màn hình từ https. // dự án phản ứng. netlify. ứng dụng/

Trong hướng dẫn này, bạn sẽ học cách tạo một trang tìm kiếm cocktail. Dự án này sẽ giới thiệu cho bạn cách sử dụng bộ định tuyến React

Bộ định tuyến phản ứng cung cấp cho bạn khả năng tạo điều hướng trên trang web của bạn và thay đổi chế độ xem thành các thành phần khác nhau như trang giới thiệu hoặc liên hệ

Các khái niệm chính được đề cập

• sử dụngCallback[]
• sử dụngContext[]
• sử dụngEffect[]
• useState[]

Dự án TypeScript

Nếu bạn không quen với TypeScript, thì tôi khuyên bạn nên xem khóa học này trước khi tiếp tục với dự án này

Cách xây dựng ứng dụng Quiz bằng React và TypeScript

Trong hướng dẫn này, Thomas Weibenfalk sẽ hướng dẫn bạn cách xây dựng một ứng dụng đố vui bằng React và TypeScript. Đây là một cơ hội tốt để thực hành những kiến ​​thức cơ bản về TypeScript

Các khái niệm chính được đề cập

• Phản ứng. FC
• các thành phần theo kiểu
• nguy hiểmSetInnerHTML

Cách tạo trò chơi Arkanoid bằng TypeScript

Trong hướng dẫn này, Thomas Weibenfalk sẽ hướng dẫn bạn cách xây dựng trò chơi Arkanoid cổ điển trong TypeScript. Đây là một dự án tốt sẽ giúp bạn thực hành làm việc với các khái niệm cơ bản cho TypeScript

Các khái niệm chính được đề cập

• các loại
• Các lớp học
• mô-đun
• HTMLCanvasYếu tố

Tôi hy vọng bạn thích danh sách 40 dự án hướng dẫn về Vanilla JavaScript, React và TypeScript này

Mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Jessica Wilkins

Tôi là một nhạc sĩ và một lập trình viên

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Một số dự án JavaScript tốt là gì?

Dự án JavaScript đầu tiên tốt là gì?

JavaScript có còn phù hợp vào năm 2022 không?

Tôi nên xây dựng cái gì sau khi học JavaScript?