/practice-javascript-programming-projects

Build real JavaScript projects with 104 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.

Practice JavaScript Programming Projects

JavaScript is the programming language of the web. This Skill Tree presents a systematic approach to learning JavaScript. Designed for web development beginners, it provides a clear roadmap to understand core concepts, DOM manipulation, and asynchronous programming. Hands-on, non-video courses and coding exercises in an interactive JS playground ensure you develop practical skills in creating dynamic web applications.

Index Name Level Project Link
001 Build an VSCode Extension With ChatGPT ★☆☆ 🚀 Start
002 Build a Tic-Tac-Toe Web App ★☆☆ 🚀 Start
003 Creating a Whack-a-Mole Web Game ★☆☆ 🚀 Start
004 Create a Notes App Using React ★☆☆ 🚀 Start
005 Building a Modern Expense Splitter Web App ★☆☆ 🚀 Start
006 Creating a Drawing Board Web App ★☆☆ 🚀 Start
007 Creating a Task Timer Web App ★☆☆ 🚀 Start
008 Create a Swiper Carousel Web App ★☆☆ 🚀 Start
009 Monty Hall Simulation Web App ★☆☆ 🚀 Start
010 Building a Web Avoiding Block Game ★★☆ 🚀 Start
011 2048 Web Game Using jQuery ★☆☆ 🚀 Start
012 Build a Sliding Puzzle Game With JavaScript ★☆☆ 🚀 Start
013 Create a Pixel Art Animator With React ★☆☆ 🚀 Start
014 jQuery Flip Puzzle Game ★☆☆ 🚀 Start
015 Creating a Minesweeper Game With JavaScript ★☆☆ 🚀 Start
016 Build a Simple Markdown Editor With Live Preview ★☆☆ 🚀 Start
017 Implement a Magnifying Glass Effect Using Canvas ★☆☆ 🚀 Start
018 Build an Image Cropping Tool Using HTML5 ★☆☆ 🚀 Start
019 Building a Christmas Wish List Builder in React ★★☆ 🚀 Start
020 Building a React Drag-and-Drop Puzzle Game ★☆☆ 🚀 Start
021 Building a React GitHub Heatmap Contributions ★★☆ 🚀 Start
022 Deploying MobileNet With TensorFlow.js and Flask ★☆☆ 🚀 Start
023 Don't Step on the White Tile ★☆☆ 🚀 Start
024 Build a Scratch Card Web Game ★☆☆ 🚀 Start
025 Build a Simple URL Shortener With Flask and MySQL ★★★ 🚀 Start
026 Real-Time Sentence Search with Vue.js ★☆☆ 🚀 Start
027 Vue.js Search Functionality Development ★☆☆ 🚀 Start
028 The Boundless Sea of Learning ★☆☆ 🚀 Start
029 A Good Review for the Takeout ★☆☆ 🚀 Start
030 Address Management Web Application ★☆☆ 🚀 Start
031 Bing Dwen Dwen Mood Scale ★☆☆ 🚀 Start
032 Building a Traffic Lights System with JavaScript ★★☆ 🚀 Start
033 Building a Simple Search Functionality ★☆☆ 🚀 Start
034 Pagination Implementation with Axios ★☆☆ 🚀 Start
035 Escape From the Dual Vector Foil ★☆☆ 🚀 Start
036 Build a Guess the Coin Game ★☆☆ 🚀 Start
037 Random Greeting Card Generator ★☆☆ 🚀 Start
038 Movie Ticket Reservation System ★☆☆ 🚀 Start
039 Axios-Driven Incantation Treasure Hunt ★☆☆ 🚀 Start
040 Create Responsive Modal Boxes ★☆☆ 🚀 Start
041 Building Reusable Pagination Component ★☆☆ 🚀 Start
042 Spell Out a Future ★☆☆ 🚀 Start
043 Web-based HTML Presentation Builder ★☆☆ 🚀 Start
044 Custom Form Validation with Vue.js ★☆☆ 🚀 Start
045 Empty pathMatch for Correct Path Calculation ★☆☆ 🚀 Start
046 Vue.js Shopping Cart with Drag and Drop ★☆☆ 🚀 Start
047 Implement Search Suggestions with Vue.js ★☆☆ 🚀 Start
048 Product List with Layout Switching ★☆☆ 🚀 Start
049 Vue.js Buttons and Value Updating ★☆☆ 🚀 Start
050 Building Dynamic Menu Tree Search with Vue.js ★☆☆ 🚀 Start
051 Fixing Vue Router's cleanPath Function ★☆☆ 🚀 Start
052 Build a Vue.js E-book Reader ★☆☆ 🚀 Start
053 Retrieving Object Parameters From Query ★☆☆ 🚀 Start
054 Building a Vue.js Shopping Cart ★☆☆ 🚀 Start
055 Building a Vue.js Store Status Switcher ★☆☆ 🚀 Start
056 Implement Efficient Virtual Scrolling with Vue.js ★☆☆ 🚀 Start
057 Depth of Field in Images ★☆☆ 🚀 Start
058 Data Formatting and Visualization with Vue.js ★☆☆ 🚀 Start
059 Responsive Navigation with Custom React Hook ★★☆ 🚀 Start
060 React Theme Switcher Application ★★☆ 🚀 Start
061 React Colour Filter Application ★★☆ 🚀 Start
062 Implementing React Navigation Features ★★☆ 🚀 Start
063 Create Responsive Business Card with React ★★☆ 🚀 Start
064 Build Interactive React Components ★☆☆ 🚀 Start
065 Mobile Phone Number Verification ★☆☆ 🚀 Start
066 Correctly Warn Incorrect v-Slot Usage ★☆☆ 🚀 Start
067 Adding Deprecation Warning to Vue Router ★☆☆ 🚀 Start
068 Dynamization of Homepage Data ★☆☆ 🚀 Start
069 Fix the Test in async.spec.js ★☆☆ 🚀 Start
070 Data Visualization with Echarts and JSON ★☆☆ 🚀 Start
071 Handling Null Values Correctly ★☆☆ 🚀 Start
072 Let’s Have a Meeting Together ★☆☆ 🚀 Start
073 Building Login with Vue.js and Vuex ★☆☆ 🚀 Start
074 Remove the Warning Generated by pathMatch ★☆☆ 🚀 Start
075 Revisit Route Triggers Too Early ★☆☆ 🚀 Start
076 Router Query Value Changed ★☆☆ 🚀 Start
077 Building Flexible Skeleton Screens ★☆☆ 🚀 Start
078 Time Conversion Tool with Vue.js ★☆☆ 🚀 Start
079 Build a Vue.js Task Manager ★☆☆ 🚀 Start
080 Interactive Film Collection Web App ★☆☆ 🚀 Start
081 Building Responsive Accordion Interfaces ★☆☆ 🚀 Start
082 Fruit Matching Game with HTML, CSS, JavaScript ★★☆ 🚀 Start
083 Fruit Stacking Game with HTML, CSS, JavaScript ★★☆ 🚀 Start
084 Simple Prize Draw Application ★★☆ 🚀 Start
085 Building a Voting Application ★★☆ 🚀 Start
086 Weekly Weather Forecast Application Development ★☆☆ 🚀 Start
087 Hard Work Pays Off ★☆☆ 🚀 Start
088 Real-Time Sales Dashboard with Echarts ★★☆ 🚀 Start
089 Creating Interactive Bar Charts with ECharts ★☆☆ 🚀 Start
090 Time With Your Phone ★☆☆ 🚀 Start
091 Weather Trend Chart with Vue and Echarts ★☆☆ 🚀 Start
092 Course Schedule CRUD With MyBatis ★☆☆ 🚀 Start
093 Configuring Logging and Batch Aliasing in MyBatis ★☆☆ 🚀 Start
094 Extending Entity with Custom Properties ★☆☆ 🚀 Start
095 Implementation of AJAX Requests Using JS ★☆☆ 🚀 Start
096 JSON Data Transfer With AJAX ★☆☆ 🚀 Start
097 Logging Project Information With Log4j2 ★☆☆ 🚀 Start
098 Operate the Course Table ★☆☆ 🚀 Start
099 Practical Use of resultMap ★☆☆ 🚀 Start
100 User Permission Management System with JavaScript ★☆☆ 🚀 Start
101 Promisifying Callback-based Asynchronous Functions ★☆☆ 🚀 Start
102 Building a News API with Node.js ★☆☆ 🚀 Start
103 Building a User Management RESTful API with Node.js ★☆☆ 🚀 Start
104 Building a Node.js Reverse Proxy ★☆☆ 🚀 Start

More Projects

Other Lists