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-css-programming-projects

[Practice CSS Programming Projects] This repository collects 50 of programming projects for CSS. CSS is a language that describes the style of an HTML document. It's used to make web pages look good and work well on different devices. In this skill tree, you'll learn how to use CSS to style your ...
https://github.com/labex-labs/practice-css-programming-projects

List: practice-css-programming-projects

awesome awesome-list css education hands-on labex programming projects

Last synced: about 1 month ago
JSON representation

[Practice CSS Programming Projects] This repository collects 50 of programming projects for CSS. CSS is a language that describes the style of an HTML document. It's used to make web pages look good and work well on different devices. In this skill tree, you'll learn how to use CSS to style your ...

Awesome Lists containing this project

README

        

# Practice CSS Programming Projects



CSS is a language that describes the style of an HTML document. It's used to make web pages look good and work well on different devices. In this skill tree, you'll learn how to use CSS to style your web pages.

| Index | Name | Level | Project Link |
|---------|-----------------------------------------------------------------------------------------------------------------------------------------|---------|-----------------------------------------------------------------------------------------------|
| 01 | [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) |
| 02 | [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) |
| 03 | [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) |
| 04 | [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) |
| 05 | [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) |
| 06 | [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) |
| 07 | [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) |
| 08 | [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) |
| 09 | [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) |
| 10 | [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) |
| 11 | [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) |
| 12 | [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) |
| 13 | [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) |
| 14 | [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) |
| 15 | [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) |
| 16 | [jQuery Flip Puzzle Game](https://labex.io/courses/project-jquery-flip-puzzle-game) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-jquery-flip-puzzle-game) |
| 17 | [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) |
| 18 | [Build a Scratch Card Web Game](https://labex.io/courses/project-scratch-card-game) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-scratch-card-game) |
| 19 | [Building a React Drag-and-Drop Puzzle Game](https://labex.io/courses/project-building-a-react-drag-and-drop-puzzle-game) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-building-a-react-drag-and-drop-puzzle-game) |
| 20 | [Building a React GitHub Heatmap Contributions](https://labex.io/courses/project-building-a-react-github-heatmap-contributions) | ★★☆ | [🚀 Start](https://labex.io/courses/project-building-a-react-github-heatmap-contributions) |
| 21 | [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) |
| 22 | [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) |
| 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 | [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) |
| 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 | [CSS Fan-Like Hover Animation Effect](https://labex.io/courses/project-unfold-your-fan) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-unfold-your-fan) |
| 28 | [Implement Atomic Flex Layout with CSS](https://labex.io/courses/project-atomic-css) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-atomic-css) |
| 29 | [Creative Billboard Design with Wooden Textures](https://labex.io/courses/project-creative-billboard) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-creative-billboard) |
| 30 | [Creating Earth's Orbital Animation with CSS](https://labex.io/courses/project-exploring-the-earth) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-exploring-the-earth) |
| 31 | [Create Responsive Modal Boxes](https://labex.io/courses/project-naughty-modal-box) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-naughty-modal-box) |
| 32 | [Manage MySQL User Permissions](https://labex.io/courses/project-user-permission-management) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-user-permission-management) |
| 33 | [Web-based HTML Presentation Builder](https://labex.io/courses/project-web-ppt) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-web-ppt) |
| 34 | [Building a Responsive News Website Homepage](https://labex.io/courses/project-creating-website-homepage) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-creating-website-homepage) |
| 35 | [Depth of Field in Images](https://labex.io/courses/project-depth-of-field-in-images) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-depth-of-field-in-images) |
| 36 | [Creating a Koala Face with CSS Grid](https://labex.io/courses/project-draw-a-koala) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-draw-a-koala) |
| 37 | [Fixing Website Display Issues](https://labex.io/courses/project-fix-website-display) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-fix-website-display) |
| 38 | [Responsive Dice Layout with Flexbox](https://labex.io/courses/project-flex-dice-layout) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-flex-dice-layout) |
| 39 | [Responsive Flexible Card Layout](https://labex.io/courses/project-flexible-card) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-flexible-card) |
| 40 | [Flexbox Vegetable Layout Design](https://labex.io/courses/project-fresh-vegetables) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-fresh-vegetables) |
| 41 | [Fruit Arrangement with CSS Flexbox](https://labex.io/courses/project-fruit-arrangement) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-fruit-arrangement) |
| 42 | [Visually Appealing Fruit Platter](https://labex.io/courses/project-fruit-platter) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-fruit-platter) |
| 43 | [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) |
| 44 | [Simple and Beautiful Home Page Design](https://labex.io/courses/project-labex-knowledge-network) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-labex-knowledge-network) |
| 45 | [Movie Theater Seat Arrangement](https://labex.io/courses/project-movie-theater-seat-arrangement) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-movie-theater-seat-arrangement) |
| 46 | [Responsive Web Design with Gulp](https://labex.io/courses/project-responsive-page-layout) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-responsive-page-layout) |
| 47 | [Responsive Web Design for All Screens](https://labex.io/courses/project-responsive-web-design) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-responsive-web-design) |
| 48 | [Create Visually Appealing Business Card](https://labex.io/courses/project-user-business-cards) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-user-business-cards) |
| 49 | [Westward Journey to Heavenly West](https://labex.io/courses/project-westward-journey-to-heavenly-west) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-westward-journey-to-heavenly-west) |
| 50 | [User Permission Management System with JavaScript](https://labex.io/courses/project-permission-management) | ★☆☆ | [🚀 Start](https://labex.io/courses/project-permission-management) |

## More Projects

- [Linux Programming Projects](https://github.com/labex-labs/practice-linux-programming-projects)
- [Python Programming Projects](https://github.com/labex-labs/practice-python-programming-projects)
- [DevOps Programming Projects](https://github.com/labex-labs/practice-devops-programming-projects)
- [Web Development Programming Projects](https://github.com/labex-labs/practice-web-development-programming-projects)
- [Data Science Programming Projects](https://github.com/labex-labs/practice-data-science-programming-projects)
- [Big Data Programming Projects](https://github.com/labex-labs/practice-bigdata-programming-projects)
- [Cyber Security Programming Projects](https://github.com/labex-labs/practice-cysec-programming-projects)
- [Machine Learning Programming Projects](https://github.com/labex-labs/practice-ml-programming-projects)
- [Docker Programming Projects](https://github.com/labex-labs/practice-docker-programming-projects)
- [Kubernetes Programming Projects](https://github.com/labex-labs/practice-kubernetes-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)
- [Go Programming Projects](https://github.com/labex-labs/practice-go-programming-projects)
- [Rust Programming Projects](https://github.com/labex-labs/practice-rust-programming-projects)
- [OpenCV Programming Projects](https://github.com/labex-labs/practice-opencv-programming-projects)
- [Django Programming Projects](https://github.com/labex-labs/practice-django-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)
- [jQuery Programming Projects](https://github.com/labex-labs/practice-jquery-programming-projects)

## Other Lists

- 🔗 [CSS Free Tutorials](https://github.com/labex-labs/css-free-tutorials)
- 🔗 [Awesome Programming Projects](https://github.com/labex-labs/awesome-programming-projects)
- 🔗 [Awesome Programming Courses](https://github.com/labex-labs/awesome-programming-courses)