{"id":61741,"url":"https://github.com/labex-labs/web-development-practice-projects","name":"web-development-practice-projects","description":"Build real Web Development projects with 131 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.","projects_count":101,"last_synced_at":"2026-07-19T07:00:36.775Z","repository":{"id":243015011,"uuid":"811225330","full_name":"labex-labs/practice-web-development-programming-projects","owner":"labex-labs","description":"Build real Web Development projects with 131 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.","archived":false,"fork":false,"pushed_at":"2025-10-23T00:21:43.000Z","size":77,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-06-13T11:05:02.933Z","etag":null,"topics":["awesome","awesome-list","backend","beginner-friendly","css","exercises","frontend","fullstack","hands-on","html","javascript","labex","learning-path","programming","projects","responsive-design","web-development","web-technologies"],"latest_commit_sha":null,"homepage":"https://labex.io/learn/web-development","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/labex-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-06T07:24:21.000Z","updated_at":"2026-03-25T16:51:33.000Z","dependencies_parsed_at":"2025-11-15T19:00:34.973Z","dependency_job_id":null,"html_url":"https://github.com/labex-labs/practice-web-development-programming-projects","commit_stats":null,"previous_names":["labex-labs/practice-web-development-programming-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/labex-labs/practice-web-development-programming-projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-web-development-programming-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-web-development-programming-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-web-development-programming-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-web-development-programming-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/labex-labs","download_url":"https://codeload.github.com/labex-labs/practice-web-development-programming-projects/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-web-development-programming-projects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34979578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-06-13T00:00:19.842Z","updated_at":"2026-07-19T07:00:36.775Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["More","More Projects","Other Lists","Projects","Exercises"],"sub_categories":[],"readme":"# Web Development Practice Projects\n\n**Languages:** [English](README.md) · [简体中文](README_zh.md) · [日本語](README_ja.md) · [Español](README_es.md) · [Français](README_fr.md) · [Deutsch](README_de.md) · [Русский](README_ru.md) · [한국어](README_ko.md) · [Português](README_pt.md)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://labex.io/learn/web-development\"\u003e\n    \u003cimg width=\"128\" src=\"https://file.labex.io/upload/u/1991/Y5b0Qn21hQLI.png\" alt=\"Web Development\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nLearn Web Development with this comprehensive learning path designed for beginners. These structured Web Development Courses provide a clear roadmap to master both front-end and back-end technologies, from fundamentals like HTML, CSS, and JavaScript to popular frameworks. Through hands-on, non-video modules and practical coding exercises, you will build real-world websites and web applications in an interactive environment.\n\n[Explore Projects on LabEx](https://labex.io/learn/web-development)\n\n## Projects\n\nExplore 100 beginner-friendly Web Development projects that turn core language concepts into small, complete programs. Each project opens in LabEx with a ready-to-use environment, so you can focus on building instead of setup.\n\n|   Index | Project                                                                                                                                       | Difficulty   | Practice                                                                                               |\n|---------|-----------------------------------------------------------------------------------------------------------------------------------------------|--------------|--------------------------------------------------------------------------------------------------------|\n|     001 | [HTML for Beginners](https://labex.io/courses/html-for-beginners)                                                                             | Beginner     | [Start project](https://labex.io/courses/html-for-beginners)                                           |\n|     002 | [JavaScript for Beginners](https://labex.io/courses/javascript-for-beginners)                                                                 | Beginner     | [Start project](https://labex.io/courses/javascript-for-beginners)                                     |\n|     003 | [CSS for Beginners](https://labex.io/courses/css-for-beginners)                                                                               | Beginner     | [Start project](https://labex.io/courses/css-for-beginners)                                            |\n|     004 | [React for Beginners](https://labex.io/courses/react-for-beginners)                                                                           | Beginner     | [Start project](https://labex.io/courses/react-for-beginners)                                          |\n|     005 | [Build a Tic-Tac-Toe Web App](https://labex.io/courses/project-build-a-tic-tac-toe-web-app)                                                   | Beginner     | [Start project](https://labex.io/courses/project-build-a-tic-tac-toe-web-app)                          |\n|     006 | [Web Vulnerability Mastery](https://labex.io/courses/web-vulnerability-mastery)                                                               | Beginner     | [Start project](https://labex.io/courses/web-vulnerability-mastery)                                    |\n|     007 | [Create a Notes App Using React](https://labex.io/courses/project-create-a-notes-app-using-react)                                             | Beginner     | [Start project](https://labex.io/courses/project-create-a-notes-app-using-react)                       |\n|     008 | [Web Interactive Challenges](https://labex.io/courses/web-development-interactive-challenges)                                                 | Beginner     | [Start project](https://labex.io/courses/web-development-interactive-challenges)                       |\n|     009 | [Creating a Whack-a-Mole Web Game](https://labex.io/courses/project-creating-a-whack-a-mole-web-game)                                         | Beginner     | [Start project](https://labex.io/courses/project-creating-a-whack-a-mole-web-game)                     |\n|     010 | [HTTP Enumeration and Directory Traversal](https://labex.io/courses/project-http-enumeration-and-directory-traversal)                         | Beginner     | [Start project](https://labex.io/courses/project-http-enumeration-and-directory-traversal)             |\n|     011 | [Building a REST API in Flask With SQLite](https://labex.io/courses/project-building-a-rest-api-in-flask-with-sqlite)                         | Beginner     | [Start project](https://labex.io/courses/project-building-a-rest-api-in-flask-with-sqlite)             |\n|     012 | [Build a Simple URL Shortener With Flask and MySQL](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql)       | Advanced     | [Start project](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql)    |\n|     013 | [Building a Christmas Wish List Builder in React](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react)           | Intermediate | [Start project](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react)      |\n|     014 | [Creating a Task Timer Web App](https://labex.io/courses/project-creating-a-task-timer-web-app)                                               | Beginner     | [Start project](https://labex.io/courses/project-creating-a-task-timer-web-app)                        |\n|     015 | [Building a React Drag-and-Drop Puzzle Game](https://labex.io/courses/project-building-a-react-drag-and-drop-puzzle-game)                     | Beginner     | [Start project](https://labex.io/courses/project-building-a-react-drag-and-drop-puzzle-game)           |\n|     016 | [Building a Modern Expense Splitter Web App](https://labex.io/courses/project-building-a-expense-splitter-web-app)                            | Beginner     | [Start project](https://labex.io/courses/project-building-a-expense-splitter-web-app)                  |\n|     017 | [Developing a Simple Online Chat Room Using Flask](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask)         | Beginner     | [Start project](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask)     |\n|     018 | [Build a Simple Translator Using Google Translate API](https://labex.io/courses/project-build-a-simple-translator-using-google-translate-api) | Beginner     | [Start project](https://labex.io/courses/project-build-a-simple-translator-using-google-translate-api) |\n|     019 | [Creating a URL Shortener With Python and Flask](https://labex.io/courses/project-creating-a-url-shortener-with-python-and-flask)             | Beginner     | [Start project](https://labex.io/courses/project-creating-a-url-shortener-with-python-and-flask)       |\n|     020 | [Simple and Beautiful Home Page Design](https://labex.io/courses/project-labex-knowledge-network)                                             | Beginner     | [Start project](https://labex.io/courses/project-labex-knowledge-network)                              |\n|     021 | [Building a Port Scanner With Python](https://labex.io/courses/project-building-a-port-scanner-with-python)                                   | Beginner     | [Start project](https://labex.io/courses/project-building-a-port-scanner-with-python)                  |\n|     022 | [Creating a Drawing Board Web App](https://labex.io/courses/project-creating-a-drawing-board-web-app)                                         | Beginner     | [Start project](https://labex.io/courses/project-creating-a-drawing-board-web-app)                     |\n|     023 | [Building a React GitHub Heatmap Contributions](https://labex.io/courses/project-building-a-react-github-heatmap-contributions)               | Intermediate | [Start project](https://labex.io/courses/project-building-a-react-github-heatmap-contributions)        |\n|     024 | [Create a Swiper Carousel Web App](https://labex.io/courses/project-create-a-swiper-carousel-web-app)                                         | Beginner     | [Start project](https://labex.io/courses/project-create-a-swiper-carousel-web-app)                     |\n|     025 | [Responsive Navigation with Custom React Hook](https://labex.io/courses/project-browser-window-size)                                          | Intermediate | [Start project](https://labex.io/courses/project-browser-window-size)                                  |\n|     026 | [Building a User Management RESTful API with Node.js](https://labex.io/courses/project-restful-api-development)                               | Beginner     | [Start project](https://labex.io/courses/project-restful-api-development)                              |\n|     027 | [Build a Sliding Puzzle Game With JavaScript](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript)                   | Beginner     | [Start project](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript)          |\n|     028 | [2048 Web Game Using jQuery](https://labex.io/courses/project-2048-web-game-using-jquery)                                                     | Beginner     | [Start project](https://labex.io/courses/project-2048-web-game-using-jquery)                           |\n|     029 | [Movie Theater Seat Arrangement](https://labex.io/courses/project-movie-theater-seat-arrangement)                                             | Beginner     | [Start project](https://labex.io/courses/project-movie-theater-seat-arrangement)                       |\n|     030 | [React Theme Switcher Application](https://labex.io/courses/project-change-page-theme)                                                        | Intermediate | [Start project](https://labex.io/courses/project-change-page-theme)                                    |\n|     031 | [Build Interactive React Components](https://labex.io/courses/project-show-and-hide)                                                          | Beginner     | [Start project](https://labex.io/courses/project-show-and-hide)                                        |\n|     032 | [Create Responsive Business Card with React](https://labex.io/courses/project-personal-card-generator)                                        | Intermediate | [Start project](https://labex.io/courses/project-personal-card-generator)                              |\n|     033 | [Building a Web Avoiding Block Game](https://labex.io/courses/project-building-a-web-avoiding-block-game)                                     | Intermediate | [Start project](https://labex.io/courses/project-building-a-web-avoiding-block-game)                   |\n|     034 | [Create a Pixel Art Animator With React](https://labex.io/courses/project-create-a-pixel-art-animator-with-react)                             | Beginner     | [Start project](https://labex.io/courses/project-create-a-pixel-art-animator-with-react)               |\n|     035 | [Creating a Minesweeper Game With JavaScript](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript)                   | Beginner     | [Start project](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript)          |\n|     036 | [Implement Dynamic Sticky Tab Bar](https://labex.io/courses/project-dynamic-tab-bar)                                                          | Beginner     | [Start project](https://labex.io/courses/project-dynamic-tab-bar)                                      |\n|     037 | [Responsive Dice Layout with Flexbox](https://labex.io/courses/project-flex-dice-layout)                                                      | Beginner     | [Start project](https://labex.io/courses/project-flex-dice-layout)                                     |\n|     038 | [Responsive Web Design for All Screens](https://labex.io/courses/project-responsive-web-design)                                               | Beginner     | [Start project](https://labex.io/courses/project-responsive-web-design)                                |\n|     039 | [Switch Between Light and Dark](https://labex.io/courses/project-switch-between-light-and-dark)                                               | Beginner     | [Start project](https://labex.io/courses/project-switch-between-light-and-dark)                        |\n|     040 | [Building a News API with Node.js](https://labex.io/courses/project-news-api)                                                                 | Beginner     | [Start project](https://labex.io/courses/project-news-api)                                             |\n|     041 | [Building a Node.js Reverse Proxy](https://labex.io/courses/project-reverse-proxy)                                                            | Beginner     | [Start project](https://labex.io/courses/project-reverse-proxy)                                        |\n|     042 | [jQuery Flip Puzzle Game](https://labex.io/courses/project-jquery-flip-puzzle-game)                                                           | Beginner     | [Start project](https://labex.io/courses/project-jquery-flip-puzzle-game)                              |\n|     043 | [Build a Simple Markdown Editor With Live Preview](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview)         | Beginner     | [Start project](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview)     |\n|     044 | [Real-Time Sentence Search with Vue.js](https://labex.io/courses/project-beautiful-sentences)                                                 | Beginner     | [Start project](https://labex.io/courses/project-beautiful-sentences)                                  |\n|     045 | [Vue.js Search Functionality Development](https://labex.io/courses/project-do-a-search)                                                       | Beginner     | [Start project](https://labex.io/courses/project-do-a-search)                                          |\n|     046 | [Fixing Website Display Issues](https://labex.io/courses/project-fix-website-display)                                                         | Beginner     | [Start project](https://labex.io/courses/project-fix-website-display)                                  |\n|     047 | [Vanished Into Thin Air](https://labex.io/courses/project-vanished-into-thin-air)                                                             | Beginner     | [Start project](https://labex.io/courses/project-vanished-into-thin-air)                               |\n|     048 | [Implementing React Navigation Features](https://labex.io/courses/project-navigation-features)                                                | Intermediate | [Start project](https://labex.io/courses/project-navigation-features)                                  |\n|     049 | [Build a Scratch Card Web Game](https://labex.io/courses/project-scratch-card-game)                                                           | Beginner     | [Start project](https://labex.io/courses/project-scratch-card-game)                                    |\n|     050 | [Address Management Web Application](https://labex.io/courses/project-add-new-address)                                                        | Beginner     | [Start project](https://labex.io/courses/project-add-new-address)                                      |\n|     051 | [Movie Ticket Reservation System](https://labex.io/courses/project-movie-ticket-reservation)                                                  | Beginner     | [Start project](https://labex.io/courses/project-movie-ticket-reservation)                             |\n|     052 | [Building a Responsive News Website Homepage](https://labex.io/courses/project-creating-website-homepage)                                     | Beginner     | [Start project](https://labex.io/courses/project-creating-website-homepage)                            |\n|     053 | [Creative Billboard Design with Wooden Textures](https://labex.io/courses/project-creative-billboard)                                         | Beginner     | [Start project](https://labex.io/courses/project-creative-billboard)                                   |\n|     054 | [Creating Earth's Orbital Animation with CSS](https://labex.io/courses/project-exploring-the-earth)                                           | Beginner     | [Start project](https://labex.io/courses/project-exploring-the-earth)                                  |\n|     055 | [Flexbox Vegetable Layout Design](https://labex.io/courses/project-fresh-vegetables)                                                          | Beginner     | [Start project](https://labex.io/courses/project-fresh-vegetables)                                     |\n|     056 | [Give Your Page a Makeover](https://labex.io/courses/project-give-your-page-a-makeover)                                                       | Beginner     | [Start project](https://labex.io/courses/project-give-your-page-a-makeover)                            |\n|     057 | [React Colour Filter Application](https://labex.io/courses/project-colour-filter)                                                             | Intermediate | [Start project](https://labex.io/courses/project-colour-filter)                                        |\n|     058 | [Fruit Matching Game with HTML, CSS, JavaScript](https://labex.io/courses/project-fruit-for-fun)                                              | Intermediate | [Start project](https://labex.io/courses/project-fruit-for-fun)                                        |\n|     059 | [Monty Hall Simulation Web App](https://labex.io/courses/project-monty-hall-problem-simulation-web-app)                                       | Beginner     | [Start project](https://labex.io/courses/project-monty-hall-problem-simulation-web-app)                |\n|     060 | [CSS Fan-Like Hover Animation Effect](https://labex.io/courses/project-unfold-your-fan)                                                       | Beginner     | [Start project](https://labex.io/courses/project-unfold-your-fan)                                      |\n|     061 | [A Good Review for the Takeout](https://labex.io/courses/project-a-good-review-for-the-takeout)                                               | Beginner     | [Start project](https://labex.io/courses/project-a-good-review-for-the-takeout)                        |\n|     062 | [Bing Dwen Dwen Mood Scale](https://labex.io/courses/project-bing-dwen-dwen-mood-scale)                                                       | Beginner     | [Start project](https://labex.io/courses/project-bing-dwen-dwen-mood-scale)                            |\n|     063 | [Building a Traffic Lights System with JavaScript](https://labex.io/courses/project-colour-changeable-light)                                  | Intermediate | [Start project](https://labex.io/courses/project-colour-changeable-light)                              |\n|     064 | [Create Responsive Modal Boxes](https://labex.io/courses/project-naughty-modal-box)                                                           | Beginner     | [Start project](https://labex.io/courses/project-naughty-modal-box)                                    |\n|     065 | [Spell Out a Future](https://labex.io/courses/project-spell-out-a-future)                                                                     | Beginner     | [Start project](https://labex.io/courses/project-spell-out-a-future)                                   |\n|     066 | [Web-based HTML Presentation Builder](https://labex.io/courses/project-web-ppt)                                                               | Beginner     | [Start project](https://labex.io/courses/project-web-ppt)                                              |\n|     067 | [Responsive Flexible Card Layout](https://labex.io/courses/project-flexible-card)                                                             | Beginner     | [Start project](https://labex.io/courses/project-flexible-card)                                        |\n|     068 | [Fruit Arrangement with CSS Flexbox](https://labex.io/courses/project-fruit-arrangement)                                                      | Beginner     | [Start project](https://labex.io/courses/project-fruit-arrangement)                                    |\n|     069 | [Visually Appealing Fruit Platter](https://labex.io/courses/project-fruit-platter)                                                            | Beginner     | [Start project](https://labex.io/courses/project-fruit-platter)                                        |\n|     070 | [Westward Journey to Heavenly West](https://labex.io/courses/project-westward-journey-to-heavenly-west)                                       | Beginner     | [Start project](https://labex.io/courses/project-westward-journey-to-heavenly-west)                    |\n|     071 | [Mobile Phone Number Verification](https://labex.io/courses/project-account-verification)                                                     | Beginner     | [Start project](https://labex.io/courses/project-account-verification)                                 |\n|     072 | [Data Visualization with Echarts and JSON](https://labex.io/courses/project-food-protein-revealed)                                            | Beginner     | [Start project](https://labex.io/courses/project-food-protein-revealed)                                |\n|     073 | [User Permission Management System with JavaScript](https://labex.io/courses/project-permission-management)                                   | Beginner     | [Start project](https://labex.io/courses/project-permission-management)                                |\n|     074 | [Implement a Magnifying Glass Effect Using Canvas](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas)         | Beginner     | [Start project](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas)     |\n|     075 | [Don't Step on the White Tile](https://labex.io/courses/project-dont-step-on-the-white-tile)                                                  | Beginner     | [Start project](https://labex.io/courses/project-dont-step-on-the-white-tile)                          |\n|     076 | [The Boundless Sea of Learning](https://labex.io/courses/project-the-boundless-sea-of-learning)                                               | Beginner     | [Start project](https://labex.io/courses/project-the-boundless-sea-of-learning)                        |\n|     077 | [Random Greeting Card Generator](https://labex.io/courses/project-holiday-greeting-card)                                                      | Beginner     | [Start project](https://labex.io/courses/project-holiday-greeting-card)                                |\n|     078 | [Custom Form Validation with Vue.js](https://labex.io/courses/project-custom-form-validator)                                                  | Beginner     | [Start project](https://labex.io/courses/project-custom-form-validator)                                |\n|     079 | [Empty pathMatch for Correct Path Calculation](https://labex.io/courses/project-empty-pathmatch-for-correct-path-calculation)                 | Beginner     | [Start project](https://labex.io/courses/project-empty-pathmatch-for-correct-path-calculation)         |\n|     080 | [Product List with Layout Switching](https://labex.io/courses/project-layout-switch)                                                          | Beginner     | [Start project](https://labex.io/courses/project-layout-switch)                                        |\n|     081 | [Vue.js Buttons and Value Updating](https://labex.io/courses/project-magic-failure)                                                           | Beginner     | [Start project](https://labex.io/courses/project-magic-failure)                                        |\n|     082 | [Implement Efficient Virtual Scrolling with Vue.js](https://labex.io/courses/project-virtual-scroll-list)                                     | Beginner     | [Start project](https://labex.io/courses/project-virtual-scroll-list)                                  |\n|     083 | [Implement Atomic Flex Layout with CSS](https://labex.io/courses/project-atomic-css)                                                          | Beginner     | [Start project](https://labex.io/courses/project-atomic-css)                                           |\n|     084 | [Depth of Field in Images](https://labex.io/courses/project-depth-of-field-in-images)                                                         | Beginner     | [Start project](https://labex.io/courses/project-depth-of-field-in-images)                             |\n|     085 | [Creating a Koala Face with CSS Grid](https://labex.io/courses/project-draw-a-koala)                                                          | Beginner     | [Start project](https://labex.io/courses/project-draw-a-koala)                                         |\n|     086 | [Responsive Web Design with Gulp](https://labex.io/courses/project-responsive-page-layout)                                                    | Beginner     | [Start project](https://labex.io/courses/project-responsive-page-layout)                               |\n|     087 | [Create Visually Appealing Business Card](https://labex.io/courses/project-user-business-cards)                                               | Beginner     | [Start project](https://labex.io/courses/project-user-business-cards)                                  |\n|     088 | [Data Formatting and Visualization with Vue.js](https://labex.io/courses/project-table-data-conversion)                                       | Beginner     | [Start project](https://labex.io/courses/project-table-data-conversion)                                |\n|     089 | [Correctly Warn Incorrect v-Slot Usage](https://labex.io/courses/project-correctly-warn-incorrect-v-slot-usage)                               | Beginner     | [Start project](https://labex.io/courses/project-correctly-warn-incorrect-v-slot-usage)                |\n|     090 | [Building Login with Vue.js and Vuex](https://labex.io/courses/project-missing-token)                                                         | Beginner     | [Start project](https://labex.io/courses/project-missing-token)                                        |\n|     091 | [Interactive Film Collection Web App](https://labex.io/courses/project-collection-of-films)                                                   | Beginner     | [Start project](https://labex.io/courses/project-collection-of-films)                                  |\n|     092 | [Time With Your Phone](https://labex.io/courses/project-time-with-your-phone)                                                                 | Beginner     | [Start project](https://labex.io/courses/project-time-with-your-phone)                                 |\n|     093 | [Weather Trend Chart with Vue and Echarts](https://labex.io/courses/project-weather-trend)                                                    | Beginner     | [Start project](https://labex.io/courses/project-weather-trend)                                        |\n|     094 | [Druid Database Connection Pool Access](https://labex.io/courses/project-druid-database-connection-pool-access)                               | Beginner     | [Start project](https://labex.io/courses/project-druid-database-connection-pool-access)                |\n|     095 | [MyBatis Database Integration Project](https://labex.io/courses/project-input-parameter-practice)                                             | Beginner     | [Start project](https://labex.io/courses/project-input-parameter-practice)                             |\n|     096 | [Promisifying Callback-based Asynchronous Functions](https://labex.io/courses/project-encapsulate-promisify-function)                         | Beginner     | [Start project](https://labex.io/courses/project-encapsulate-promisify-function)                       |\n|     097 | [Build an Image Cropping Tool Using HTML5](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5)                         | Beginner     | [Start project](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5)             |\n|     098 | [Building a Simple Search Functionality](https://labex.io/courses/project-confusing-this)                                                     | Beginner     | [Start project](https://labex.io/courses/project-confusing-this)                                       |\n|     099 | [Pagination Implementation with Axios](https://labex.io/courses/project-course-list)                                                          | Beginner     | [Start project](https://labex.io/courses/project-course-list)                                          |\n|     100 | [Escape From the Dual Vector Foil](https://labex.io/courses/project-escape-from-the-dual-vector-foil)                                         | Beginner     | [Start project](https://labex.io/courses/project-escape-from-the-dual-vector-foil)                     |\n\n[View More on LabEx](https://labex.io/learn/web-development)\n\n## About LabEx\n\n\u003cdiv align=\"left\"\u003e\u003cp\u003e\u003ca href=\"https://labex.io\"\u003e\u003cstrong\u003eLabEx\u003c/strong\u003e\u003c/a\u003e is a \u003cstrong\u003ehands-on learning platform for beginners\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003eExplore \u003ca href=\"https://labex.io/learn/linux\"\u003e\u003cstrong\u003eLinux\u003c/strong\u003e\u003c/a\u003e, \u003ca href=\"https://labex.io/learn/devops\"\u003e\u003cstrong\u003eDevOps\u003c/strong\u003e\u003c/a\u003e, \u003ca href=\"https://labex.io/learn/cybersecurity\"\u003e\u003cstrong\u003eCybersecurity\u003c/strong\u003e\u003c/a\u003e, and \u003cstrong\u003emore\u003c/strong\u003e — all directly in your browser.\u003c/p\u003e\u003cp\u003eLearn step by step through \u003cstrong\u003einteractive labs\u003c/strong\u003e, \u003cstrong\u003eguided exercises\u003c/strong\u003e, and \u003cstrong\u003ereal-world projects\u003c/strong\u003e. 🌱\u003cbr /\u003eNo setup, no stress — just practice and grow your skills by doing.\u003c/p\u003e\u003cbr /\u003e\u003cp\u003e\u003ca href=\"https://apps.apple.com/app/id6765840991\"\u003e\u003cimg src=\"https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg\" alt=\"Download on the App Store\" height=\"54\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://apps.apple.com/app/id6765840991\"\u003e\u003cimg src=\"https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-mac-app-store.svg\" alt=\"Download on the Mac App Store\" height=\"52\" /\u003e\u003c/a\u003e\u003c/p\u003e\u003cbr /\u003e\u003cp\u003e📖 Need help? Visit our \u003ca href=\"https://support.labex.io/\"\u003eHelp Center\u003c/a\u003e or email info@labex.io\u003c/p\u003e\u003c/div\u003e\n\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/labex-labs%2Fweb-development-practice-projects/projects"}