{"id":61713,"url":"https://github.com/labex-labs/practice-html-programming-projects","name":"practice-html-programming-projects","description":"Build real HTML projects with 57 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.","projects_count":60,"last_synced_at":"2026-04-24T21:00:31.571Z","repository":{"id":243021181,"uuid":"811226254","full_name":"labex-labs/practice-html-programming-projects","owner":"labex-labs","description":"Build real HTML projects with 57 beginner-friendly challenges. Learn by doing with guided coding exercises and practical applications.","archived":false,"fork":false,"pushed_at":"2025-10-23T00:22:12.000Z","size":47,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-04-09T04:02:15.783Z","etag":null,"topics":["awesome","awesome-list","beginner-friendly","coding-tutorial","educational","exercises","frontend","hands-on","html","html-course","html5","labex","learning-resource","markup-language","programming","projects","web-design","web-development","web-fundamentals"],"latest_commit_sha":null,"homepage":"https://labex.io/learn/html","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:26:34.000Z","updated_at":"2025-10-23T00:22:18.000Z","dependencies_parsed_at":"2025-11-17T07:03:53.911Z","dependency_job_id":null,"html_url":"https://github.com/labex-labs/practice-html-programming-projects","commit_stats":null,"previous_names":["labex-labs/practice-html-programming-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/labex-labs/practice-html-programming-projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-html-programming-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-html-programming-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-html-programming-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-html-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-html-programming-projects/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fpractice-html-programming-projects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32240613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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"}},"readme":"# Practice HTML Programming Projects\n\n## Languages\n\n🇨🇳 [简体中文](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) 🇺🇸 [English](README.md) \n\n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"128px\" src=\"https://file.labex.io/path/NrasuEoAvSam.png\"\u003e\n\u003c/div\u003e\n\nLearn HTML, the cornerstone of web development, with this comprehensive learning path. Designed for beginners, this roadmap provides a structured approach to mastering HTML. The interactive HTML courses cover document structure, tags, and semantic markup. Gain real-world experience by completing hands-on, non-video exercises in a dynamic HTML playground to create well-structured web pages.\n\n## Exercises\n\n|   Index | Name                                                                                                                                    | Difficulty   | Practice                                                                                           |\n|---------|-----------------------------------------------------------------------------------------------------------------------------------------|--------------|----------------------------------------------------------------------------------------------------|\n|      01 | [Build a Tic-Tac-Toe Web App](https://labex.io/courses/project-build-a-tic-tac-toe-web-app)                                             | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-build-a-tic-tac-toe-web-app)                       |\n|      02 | [Creating a Whack-a-Mole Web Game](https://labex.io/courses/project-creating-a-whack-a-mole-web-game)                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creating-a-whack-a-mole-web-game)                  |\n|      03 | [Create a Notes App Using React](https://labex.io/courses/project-create-a-notes-app-using-react)                                       | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-create-a-notes-app-using-react)                    |\n|      04 | [Building a Modern Expense Splitter Web App](https://labex.io/courses/project-building-a-expense-splitter-web-app)                      | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-building-a-expense-splitter-web-app)               |\n|      05 | [Creating a Drawing Board Web App](https://labex.io/courses/project-creating-a-drawing-board-web-app)                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creating-a-drawing-board-web-app)                  |\n|      06 | [Creating a Task Timer Web App](https://labex.io/courses/project-creating-a-task-timer-web-app)                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creating-a-task-timer-web-app)                     |\n|      07 | [Create a Swiper Carousel Web App](https://labex.io/courses/project-create-a-swiper-carousel-web-app)                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-create-a-swiper-carousel-web-app)                  |\n|      08 | [Monty Hall Simulation Web App](https://labex.io/courses/project-monty-hall-problem-simulation-web-app)                                 | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-monty-hall-problem-simulation-web-app)             |\n|      09 | [Building a Web Avoiding Block Game](https://labex.io/courses/project-building-a-web-avoiding-block-game)                               | Intermediate | [🚀 Start Lab](https://labex.io/courses/project-building-a-web-avoiding-block-game)                |\n|      10 | [2048 Web Game Using jQuery](https://labex.io/courses/project-2048-web-game-using-jquery)                                               | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-2048-web-game-using-jquery)                        |\n|      11 | [Developing a Simple Online Chat Room Using Flask](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask)   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask)  |\n|      12 | [Build a Sliding Puzzle Game With JavaScript](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript)             | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript)       |\n|      13 | [Create a Pixel Art Animator With React](https://labex.io/courses/project-create-a-pixel-art-animator-with-react)                       | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-create-a-pixel-art-animator-with-react)            |\n|      14 | [jQuery Flip Puzzle Game](https://labex.io/courses/project-jquery-flip-puzzle-game)                                                     | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-jquery-flip-puzzle-game)                           |\n|      15 | [Creating a Minesweeper Game With JavaScript](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript)             | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript)       |\n|      16 | [Build a Simple Markdown Editor With Live Preview](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview)   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview)  |\n|      17 | [Implement a Magnifying Glass Effect Using Canvas](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas)   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas)  |\n|      18 | [Build an Image Cropping Tool Using HTML5](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5)                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5)          |\n|      19 | [Building a Christmas Wish List Builder in React](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react)     | Intermediate | [🚀 Start Lab](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react)   |\n|      20 | [Deploying MobileNet With TensorFlow.js and Flask](https://labex.io/courses/project-deploying-mobilenet-with-tensorflowjs-and-flask)    | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-deploying-mobilenet-with-tensorflowjs-and-flask)   |\n|      21 | [Don't Step on the White Tile](https://labex.io/courses/project-dont-step-on-the-white-tile)                                            | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-dont-step-on-the-white-tile)                       |\n|      22 | [Build a Scratch Card Web Game](https://labex.io/courses/project-scratch-card-game)                                                     | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-scratch-card-game)                                 |\n|      23 | [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 Lab](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql) |\n|      24 | [Build a Web Based TCP Port Scanner](https://labex.io/courses/project-build-a-web-based-tcp-port-scanner)                               | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-build-a-web-based-tcp-port-scanner)                |\n|      25 | [Vue.js Search Functionality Development](https://labex.io/courses/project-do-a-search)                                                 | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-do-a-search)                                       |\n|      26 | [Implement Dynamic Sticky Tab Bar](https://labex.io/courses/project-dynamic-tab-bar)                                                    | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-dynamic-tab-bar)                                   |\n|      27 | [A Good Review for the Takeout](https://labex.io/courses/project-a-good-review-for-the-takeout)                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-a-good-review-for-the-takeout)                     |\n|      28 | [Address Management Web Application](https://labex.io/courses/project-add-new-address)                                                  | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-add-new-address)                                   |\n|      29 | [Random Greeting Card Generator](https://labex.io/courses/project-holiday-greeting-card)                                                | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-holiday-greeting-card)                             |\n|      30 | [Movie Ticket Reservation System](https://labex.io/courses/project-movie-ticket-reservation)                                            | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-movie-ticket-reservation)                          |\n|      31 | [Web-based HTML Presentation Builder](https://labex.io/courses/project-web-ppt)                                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-web-ppt)                                           |\n|      32 | [Vue.js Shopping Cart with Drag and Drop](https://labex.io/courses/project-fun-shopping)                                                | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-fun-shopping)                                      |\n|      33 | [Product List with Layout Switching](https://labex.io/courses/project-layout-switch)                                                    | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-layout-switch)                                     |\n|      34 | [Build a Vue.js E-book Reader](https://labex.io/courses/project-read-it)                                                                | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-read-it)                                           |\n|      35 | [Building a Vue.js Store Status Switcher](https://labex.io/courses/project-switch-business-status)                                      | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-switch-business-status)                            |\n|      36 | [Implement Atomic Flex Layout with CSS](https://labex.io/courses/project-atomic-css)                                                    | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-atomic-css)                                        |\n|      37 | [Building a Responsive News Website Homepage](https://labex.io/courses/project-creating-website-homepage)                               | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creating-website-homepage)                         |\n|      38 | [Creative Billboard Design with Wooden Textures](https://labex.io/courses/project-creative-billboard)                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-creative-billboard)                                |\n|      39 | [Fixing Website Display Issues](https://labex.io/courses/project-fix-website-display)                                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-fix-website-display)                               |\n|      40 | [Responsive Dice Layout with Flexbox](https://labex.io/courses/project-flex-dice-layout)                                                | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-flex-dice-layout)                                  |\n|      41 | [Give Your Page a Makeover](https://labex.io/courses/project-give-your-page-a-makeover)                                                 | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-give-your-page-a-makeover)                         |\n|      42 | [Simple and Beautiful Home Page Design](https://labex.io/courses/project-labex-knowledge-network)                                       | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-labex-knowledge-network)                           |\n|      43 | [Movie Theater Seat Arrangement](https://labex.io/courses/project-movie-theater-seat-arrangement)                                       | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-movie-theater-seat-arrangement)                    |\n|      44 | [Responsive Web Design with Gulp](https://labex.io/courses/project-responsive-page-layout)                                              | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-responsive-page-layout)                            |\n|      45 | [Responsive Web Design for All Screens](https://labex.io/courses/project-responsive-web-design)                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-responsive-web-design)                             |\n|      46 | [Data Formatting and Visualization with Vue.js](https://labex.io/courses/project-table-data-conversion)                                 | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-table-data-conversion)                             |\n|      47 | [Vanished Into Thin Air](https://labex.io/courses/project-vanished-into-thin-air)                                                       | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-vanished-into-thin-air)                            |\n|      48 | [Wish Sticky Note App with Vue.js](https://labex.io/courses/project-wish-sticky-note)                                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-wish-sticky-note)                                  |\n|      49 | [Dynamization of Homepage Data](https://labex.io/courses/project-dynamization-of-homepage-data)                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-dynamization-of-homepage-data)                     |\n|      50 | [Data Visualization with Echarts and JSON](https://labex.io/courses/project-food-protein-revealed)                                      | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-food-protein-revealed)                             |\n|      51 | [Let’s Have a Meeting Together](https://labex.io/courses/project-lets-have-a-meeting-together)                                          | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-lets-have-a-meeting-together)                      |\n|      52 | [Building Login with Vue.js and Vuex](https://labex.io/courses/project-missing-token)                                                   | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-missing-token)                                     |\n|      53 | [Build a Vue.js Task Manager](https://labex.io/courses/project-time-management-master)                                                  | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-time-management-master)                            |\n|      54 | [Implement User Login Function](https://labex.io/courses/project-implement-user-login-function)                                         | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-implement-user-login-function)                     |\n|      55 | [Time With Your Phone](https://labex.io/courses/project-time-with-your-phone)                                                           | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-time-with-your-phone)                              |\n|      56 | [Weather Trend Chart with Vue and Echarts](https://labex.io/courses/project-weather-trend)                                              | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-weather-trend)                                     |\n|      57 | [Counting Access Times by IP](https://labex.io/courses/project-counting-access-times-by-ip)                                             | Beginner     | [🚀 Start Lab](https://labex.io/courses/project-counting-access-times-by-ip)                       |\n\n## More\n\n- 🔗 [HTML Learn more about](https://labex.io/skilltrees/html)\n- 🔗 [Awesome Programming Projects](https://github.com/labex-labs/awesome-programming-projects)\n- 🔗 [Awesome Programming Courses](https://github.com/labex-labs/awesome-programming-courses)\n\n","created_at":"2024-06-13T00:00:19.423Z","updated_at":"2026-04-24T21:00:31.571Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["More","More Projects","Other Lists","Exercises"],"sub_categories":[],"projects_url":"https://awesome.ecosyste.ms/api/v1/lists/labex-labs%2Fpractice-html-programming-projects/projects"}