Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/labex-labs/practice-html-programming-projects

Practice HTML Programming Projects | This repo collects 57 of programming projects for HTML. HTML is the foundation of web development. This Skill Tree offers a comprehensive learning path for mastering HTML. Ideal for web development beginners, it provides a structured roadmap to understand docu...
https://github.com/labex-labs/practice-html-programming-projects

List: practice-html-programming-projects

awesome awesome-list exercises hands-on html labex programming projects

Last synced: about 2 months ago
JSON representation

Practice HTML Programming Projects | This repo collects 57 of programming projects for HTML. HTML is the foundation of web development. This Skill Tree offers a comprehensive learning path for mastering HTML. Ideal for web development beginners, it provides a structured roadmap to understand docu...

Awesome Lists containing this project

README

        

# Practice HTML Programming Projects



HTML is the foundation of web development. This Skill Tree offers a comprehensive learning path for mastering HTML. Ideal for web development beginners, it provides a structured roadmap to understand document structure, tags, and semantic markup. Through hands-on, non-video courses and practical exercises in a dynamic HTML playground, you'll gain real-world experience in creating well-structured web pages.

| Index | Name | Level | Project Link |
|---------|-----------------------------------------------------------------------------------------------------------------------------------------|---------|-----------------------------------------------------------------------------------------------|
| 01 | [Build a Tic-Tac-Toe Web App](https://labex.io/courses/project-build-a-tic-tac-toe-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-build-a-tic-tac-toe-web-app) |
| 02 | [Creating a Whack-a-Mole Web Game](https://labex.io/courses/project-creating-a-whack-a-mole-web-game) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creating-a-whack-a-mole-web-game) |
| 03 | [Create a Notes App Using React](https://labex.io/courses/project-create-a-notes-app-using-react) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-create-a-notes-app-using-react) |
| 04 | [Building a Modern Expense Splitter Web App](https://labex.io/courses/project-building-a-expense-splitter-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-building-a-expense-splitter-web-app) |
| 05 | [Creating a Drawing Board Web App](https://labex.io/courses/project-creating-a-drawing-board-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creating-a-drawing-board-web-app) |
| 06 | [Creating a Task Timer Web App](https://labex.io/courses/project-creating-a-task-timer-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creating-a-task-timer-web-app) |
| 07 | [Create a Swiper Carousel Web App](https://labex.io/courses/project-create-a-swiper-carousel-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-create-a-swiper-carousel-web-app) |
| 08 | [Monty Hall Simulation Web App](https://labex.io/courses/project-monty-hall-problem-simulation-web-app) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-monty-hall-problem-simulation-web-app) |
| 09 | [Building a Web Avoiding Block Game](https://labex.io/courses/project-building-a-web-avoiding-block-game) | β˜…β˜…β˜† | [πŸš€ Start](https://labex.io/courses/project-building-a-web-avoiding-block-game) |
| 10 | [2048 Web Game Using jQuery](https://labex.io/courses/project-2048-web-game-using-jquery) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-2048-web-game-using-jquery) |
| 11 | [Developing a Simple Online Chat Room Using Flask](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-developing-a-simple-online-chat-room-using-flask) |
| 12 | [Build a Sliding Puzzle Game With JavaScript](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript) |
| 13 | [Create a Pixel Art Animator With React](https://labex.io/courses/project-create-a-pixel-art-animator-with-react) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-create-a-pixel-art-animator-with-react) |
| 14 | [jQuery Flip Puzzle Game](https://labex.io/courses/project-jquery-flip-puzzle-game) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-jquery-flip-puzzle-game) |
| 15 | [Creating a Minesweeper Game With JavaScript](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript) |
| 16 | [Build a Simple Markdown Editor With Live Preview](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview) |
| 17 | [Implement a Magnifying Glass Effect Using Canvas](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas) |
| 18 | [Build an Image Cropping Tool Using HTML5](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5) |
| 19 | [Building a Christmas Wish List Builder in React](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react) | β˜…β˜…β˜† | [πŸš€ Start](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react) |
| 20 | [Deploying MobileNet With TensorFlow.js and Flask](https://labex.io/courses/project-deploying-mobilenet-with-tensorflowjs-and-flask) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-deploying-mobilenet-with-tensorflowjs-and-flask) |
| 21 | [Don't Step on the White Tile](https://labex.io/courses/project-dont-step-on-the-white-tile) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-dont-step-on-the-white-tile) |
| 22 | [Build a Scratch Card Web Game](https://labex.io/courses/project-scratch-card-game) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-scratch-card-game) |
| 23 | [Build a Simple URL Shortener With Flask and MySQL](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql) | β˜…β˜…β˜… | [πŸš€ Start](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql) |
| 24 | [Build a Web Based TCP Port Scanner](https://labex.io/courses/project-build-a-web-based-tcp-port-scanner) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-build-a-web-based-tcp-port-scanner) |
| 25 | [Vue.js Search Functionality Development](https://labex.io/courses/project-do-a-search) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-do-a-search) |
| 26 | [Implement Dynamic Sticky Tab Bar](https://labex.io/courses/project-dynamic-tab-bar) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-dynamic-tab-bar) |
| 27 | [A Good Review for the Takeout](https://labex.io/courses/project-a-good-review-for-the-takeout) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-a-good-review-for-the-takeout) |
| 28 | [Address Management Web Application](https://labex.io/courses/project-add-new-address) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-add-new-address) |
| 29 | [Random Greeting Card Generator](https://labex.io/courses/project-holiday-greeting-card) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-holiday-greeting-card) |
| 30 | [Movie Ticket Reservation System](https://labex.io/courses/project-movie-ticket-reservation) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-movie-ticket-reservation) |
| 31 | [Web-based HTML Presentation Builder](https://labex.io/courses/project-web-ppt) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-web-ppt) |
| 32 | [Vue.js Shopping Cart with Drag and Drop](https://labex.io/courses/project-fun-shopping) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-fun-shopping) |
| 33 | [Product List with Layout Switching](https://labex.io/courses/project-layout-switch) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-layout-switch) |
| 34 | [Build a Vue.js E-book Reader](https://labex.io/courses/project-read-it) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-read-it) |
| 35 | [Building a Vue.js Store Status Switcher](https://labex.io/courses/project-switch-business-status) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-switch-business-status) |
| 36 | [Implement Atomic Flex Layout with CSS](https://labex.io/courses/project-atomic-css) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-atomic-css) |
| 37 | [Building a Responsive News Website Homepage](https://labex.io/courses/project-creating-website-homepage) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creating-website-homepage) |
| 38 | [Creative Billboard Design with Wooden Textures](https://labex.io/courses/project-creative-billboard) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-creative-billboard) |
| 39 | [Fixing Website Display Issues](https://labex.io/courses/project-fix-website-display) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-fix-website-display) |
| 40 | [Responsive Dice Layout with Flexbox](https://labex.io/courses/project-flex-dice-layout) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-flex-dice-layout) |
| 41 | [Give Your Page a Makeover](https://labex.io/courses/project-give-your-page-a-makeover) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-give-your-page-a-makeover) |
| 42 | [Simple and Beautiful Home Page Design](https://labex.io/courses/project-labex-knowledge-network) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-labex-knowledge-network) |
| 43 | [Movie Theater Seat Arrangement](https://labex.io/courses/project-movie-theater-seat-arrangement) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-movie-theater-seat-arrangement) |
| 44 | [Responsive Web Design with Gulp](https://labex.io/courses/project-responsive-page-layout) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-responsive-page-layout) |
| 45 | [Responsive Web Design for All Screens](https://labex.io/courses/project-responsive-web-design) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-responsive-web-design) |
| 46 | [Data Formatting and Visualization with Vue.js](https://labex.io/courses/project-table-data-conversion) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-table-data-conversion) |
| 47 | [Vanished Into Thin Air](https://labex.io/courses/project-vanished-into-thin-air) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-vanished-into-thin-air) |
| 48 | [Wish Sticky Note App with Vue.js](https://labex.io/courses/project-wish-sticky-note) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-wish-sticky-note) |
| 49 | [Dynamization of Homepage Data](https://labex.io/courses/project-dynamization-of-homepage-data) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-dynamization-of-homepage-data) |
| 50 | [Data Visualization with Echarts and JSON](https://labex.io/courses/project-food-protein-revealed) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-food-protein-revealed) |
| 51 | [Let’s Have a Meeting Together](https://labex.io/courses/project-lets-have-a-meeting-together) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-lets-have-a-meeting-together) |
| 52 | [Building Login with Vue.js and Vuex](https://labex.io/courses/project-missing-token) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-missing-token) |
| 53 | [Build a Vue.js Task Manager](https://labex.io/courses/project-time-management-master) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-time-management-master) |
| 54 | [Implement User Login Function](https://labex.io/courses/project-implement-user-login-function) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-implement-user-login-function) |
| 55 | [Time With Your Phone](https://labex.io/courses/project-time-with-your-phone) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-time-with-your-phone) |
| 56 | [Weather Trend Chart with Vue and Echarts](https://labex.io/courses/project-weather-trend) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-weather-trend) |
| 57 | [Counting Access Times by IP](https://labex.io/courses/project-counting-access-times-by-ip) | β˜…β˜†β˜† | [πŸš€ Start](https://labex.io/courses/project-counting-access-times-by-ip) |

## More Projects

- [Linux Programming Projects](https://github.com/labex-labs/practice-linux-programming-projects)
- [DevOps Programming Projects](https://github.com/labex-labs/practice-devops-programming-projects)
- [Cybersecurity Programming Projects](https://github.com/labex-labs/practice-cybersecurity-programming-projects)
- [Python Programming Projects](https://github.com/labex-labs/practice-python-programming-projects)
- [Docker Programming Projects](https://github.com/labex-labs/practice-docker-programming-projects)
- [Data Science Programming Projects](https://github.com/labex-labs/practice-data-science-programming-projects)
- [Kubernetes Programming Projects](https://github.com/labex-labs/practice-kubernetes-programming-projects)
- [Big Data Programming Projects](https://github.com/labex-labs/practice-bigdata-programming-projects)
- [Machine Learning Programming Projects](https://github.com/labex-labs/practice-ml-programming-projects)
- [Web Development Programming Projects](https://github.com/labex-labs/practice-web-development-programming-projects)
- [Git Programming Projects](https://github.com/labex-labs/practice-git-programming-projects)
- [Ansible Programming Projects](https://github.com/labex-labs/practice-ansible-programming-projects)
- [Jenkins Programming Projects](https://github.com/labex-labs/practice-jenkins-programming-projects)
- [Shell Programming Projects](https://github.com/labex-labs/practice-shell-programming-projects)
- [Java Programming Projects](https://github.com/labex-labs/practice-java-programming-projects)
- [Hadoop Programming Projects](https://github.com/labex-labs/practice-hadoop-programming-projects)
- [C++ Programming Projects](https://github.com/labex-labs/practice-cpp-programming-projects)
- [C Programming Projects](https://github.com/labex-labs/practice-c-programming-projects)
- [MySQL Programming Projects](https://github.com/labex-labs/practice-mysql-programming-projects)
- [Golang Programming Projects](https://github.com/labex-labs/practice-go-programming-projects)
- [Pandas Programming Projects](https://github.com/labex-labs/practice-pandas-programming-projects)
- [NumPy Programming Projects](https://github.com/labex-labs/practice-numpy-programming-projects)
- [scikit-learn Programming Projects](https://github.com/labex-labs/practice-sklearn-programming-projects)
- [Matplotlib Programming Projects](https://github.com/labex-labs/practice-matplotlib-programming-projects)
- [Algorithm Programming Projects](https://github.com/labex-labs/practice-algorithm-programming-projects)
- [HTML Programming Projects](https://github.com/labex-labs/practice-html-programming-projects)
- [CSS Programming Projects](https://github.com/labex-labs/practice-css-programming-projects)
- [JavaScript Programming Projects](https://github.com/labex-labs/practice-javascript-programming-projects)
- [React Programming Projects](https://github.com/labex-labs/practice-react-programming-projects)

## Other Lists

- πŸ”— [HTML Free Tutorials](https://github.com/labex-labs/html-free-tutorials)
- πŸ”— [Awesome Programming Projects](https://github.com/labex-labs/awesome-programming-projects)
- πŸ”— [Awesome Programming Courses](https://github.com/labex-labs/awesome-programming-courses)