Skip to content
/ practice-web-development-programming-projects Public

Build real Web Development projects with 131 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.

labex.io/skilltrees/web-development
4 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

labex-labs/practice-web-development-programming-projects

BranchesTags

Repository files navigation

Practice Web Development Programming Projects

Languages

🇨🇳 简体中文 🇯🇵 日本語 🇪🇸 Español 🇫🇷 Français 🇩🇪 Deutsch 🇷🇺 Русский 🇰🇷 한국어 🇧🇷 Português 🇺🇸 English

Web development is a dynamic and crucial field in the digital era. This skill tree offers a systematic way to learn front - end and back - end technologies. Tailored for beginners, it provides a clear roadmap to master HTML, CSS, JavaScript, and popular frameworks. Through hands - on, non - video courses and practical coding exercises, you'll build real websites and web applications in an interactive environment.

Exercises

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

More

About

Build real Web Development projects with 131 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.

labex.io/skilltrees/web-development

Topics

awesome web-development programming projects awesome-list exercises hands-on labex

Resources

Readme
Activity
Custom properties

Stars

4 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published