These 23 open source items have been sorted out, and beginners can use them to practice!

A new series is out: Vue2 and Vue3 Tips Booklet

Wechat search [Great Relocation to the World], I will share with you the front-end industry trends, learning methods, etc. as soon as possible.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Many beginners will ask me from time to time, often watching tutorials such as videos or books, but it is easy to forget after a long time of useless, how to solve this? This is really difficult to understand, because I often do this, I mostly recommend doing more projects to consolidate memory, but beginners are very difficult to get started with more complex projects, so today I will share 25 open source projects that are relatively easy for beginners to get started with , I hope it will be helpful to you beginners. If you have time, you can refer to the example yourself. If you have no idea, just look at how the source code is implemented. I believe you will gain a lot.

1. Colors

github: https://github.com/iamcodefoxx/Colors

Online demo example: https://iamcodefoxx.github.io/Colors/

2. Hex colors gradient

github: https://github.com/iamcodefoxx/Hex-Colors-Gradient

Online demo example: https://iamcodefoxx.github.io/Hex-Colors-Gradient/

3. Random quote generator

GitHub: https://github.com/iamcodefoxx/Random-Quote-Generator

Online demo example: https://iamcodefoxx.github.io/Random-Quote-Generator/

4. The message

github: https://github.com/iamcodefoxx/The-message

Online demo example: https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h

5. Counter

github: https://github.com/iamcodefoxx/Counter

Online demo example: https://iamcodefoxx.github.io/Counter/

6. Image carousel

github: https://github.com/iamcodefoxx

Online demo example: https://github.com/iamcodefoxx/ImageCarousel

7. Digital clock

github: https://github.com/iamcodefoxx/DigitalClock

Online demo example: https://iamcodefoxx.github.io/DigitalClock/

8. Calculator

github: https://github.com/iamcodefoxx

Online demo example: https://iamcodefoxx.github.io/Calculator/

9. Grocery list

github: https://github.com/iamcodefoxx/Grocery-List

Online demo example: https://github.com/iamcodefoxx/Grocery-List

10. Tip calculator

github: https://github.com/iamcodefoxx/TipCalculator

Online demo example: https://iamcodefoxx.github.io/TipCalculator/

11. Flashcards

github: https://github.com/iamcodefoxx

Online demo example: https://iamcodefoxx.github.io/Flashcards/

12. To-do list

github: https://github.com/iamcodefoxx/To-do-list

Online demo example: https://iamcodefoxx.github.io/To-do-list/

13. Sticky notes

github: https://github.com/iamcodefoxx/Sticky-Notes

Online demo example: https://iamcodefoxx.github.io/Sticky-Notes/

14. Timer

github: https://github.com/iamcodefoxx/Timer

Online demo example: https://iamcodefoxx.github.io/Timer/

15. Math

github: https://github.com/iamcodefoxx/Math4Kids

Online demo example: https://iamcodefoxx.github.io/Math4Kids/

16. Unsplash API

github: https://github.com/iamcodefoxx/UnsplashAPI

Online demo example: https://iamcodefoxx.github.io/UnsplashAPI/

17. Typewriter

github: https://github.com/iamcodefoxx

Online demo example: https://iamcodefoxx.github.io/Typewriter/

18. Square cards

github: https://github.com/iamcodefoxx/SquareCards

Online demo example: https://iamcodefoxx.github.io/SquareCards/

19. Weather application

github: https://github.com/iamcodefoxx/Weather-App

Online demo example: https://iamcodefoxx.github.io/Weather-App/

20. Wikipedia API

github: https://github.com/iamcodefoxx

Online demo example: https://iamcodefoxx.github.io/WikipediaAPI/

21. Marvel API

github: https://github.com/iamcodefoxx/Marvel-API

Online demo example: https://iamcodefoxx.github.io/Marvel-API/

22. Marvel API

github: https://github.com/iamcodefoxx/Quiz-App

Online demo example: https://iamcodefoxx.github.io/Quiz-App/

23. Recipe API

github: https://github.com/iamcodefoxx/RecipeAPI

Online demo example: https://iamcodefoxx.github.io/RecipeAPI/

---

Author: Miguel Nunez Translator: Front-end Xiaozhi Source: dev

Original: https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.