Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/labex-labs/css-practice-challenges
[CSS Practice Challenges] This repository collects 51 of programming scenarios (labs and challenges) for CSS Practice Challenges. This course contains lots of challenges for CSS, each challenge is a small CSS project with detailed instructions and solutions. You can practice your CSS skills by so...
https://github.com/labex-labs/css-practice-challenges
List: css-practice-challenges
awesome awesome-list challenges course css education hands-on labex labs programming
Last synced: 2 months ago
JSON representation
[CSS Practice Challenges] This repository collects 51 of programming scenarios (labs and challenges) for CSS Practice Challenges. This course contains lots of challenges for CSS, each challenge is a small CSS project with detailed instructions and solutions. You can practice your CSS skills by so...
- Host: GitHub
- URL: https://github.com/labex-labs/css-practice-challenges
- Owner: labex-labs
- Created: 2024-05-24T09:04:37.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-08-01T01:29:21.000Z (6 months ago)
- Last Synced: 2024-08-02T04:24:05.746Z (6 months ago)
- Topics: awesome, awesome-list, challenges, course, css, education, hands-on, labex, labs, programming
- Homepage: https://labex.io/skilltrees/css
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Practice Challenges
[](https://labex.io/courses/css-practice-challenges)
[](https://labex.io/courses/css-practice-challenges)
This course contains lots of challenges for CSS, each challenge is a small CSS project with detailed instructions and solutions. You can practice your CSS skills by solving these challenges, improve your problem-solving skills, and learn how to write clean and efficient code.
## Environment
LabEx is an interactive, hands-on learning platform dedicated to coding and technology. It combines labs, AI assistance, and virtual machines to provide a no-video, practical learning experience.
- A strict “Learn by Doing” approach with exclusive hands-on labs and no videos.
- Interactive online environments within the browser, with automated step-by-step checks.
- A structured content organization with the Skill Tree based learning system.
- A growing learning resource of 30 Skill Trees and over 6,000 Labs.
- The AI learning assistant Labby, built on ChatGPT, providing a conversational learning experience.
Learn more about [LabEx VM](https://support.labex.io/using-labex/virtual-machine).
## Exercises
| Index | Name | Difficulty | Practice |
|---------|----------------------------------------------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 | 🎯 Creating Earth's Orbital Animation with CSS (Chall... | ★☆☆ | Start Challenge |
| 02 | 🎯 Responsive Web Design with Gulp (Challenge) | ★☆☆ | Start Challenge |
| 03 | 🎯 Fruit Arrangement with CSS Flexbox (Challenge) | ★☆☆ | Start Challenge |
| 04 | 🎯 Visually Appealing Fruit Platter (Challenge) | ★☆☆ | Start Challenge |
| 05 | 🎯 Creating a Koala Face with CSS Grid (Challenge) | ★☆☆ | Start Challenge |
| 06 | 🎯 CSS Fan-Like Hover Animation Effect (Challenge) | ★☆☆ | Start Challenge |
| 07 | 🎯 Flexbox Vegetable Layout Design (Challenge) | ★☆☆ | Start Challenge |
| 08 | 🎯 Responsive Flexible Card Layout (Challenge) | ★☆☆ | Start Challenge |
| 09 | 🎯 Westward Journey to Heavenly West (Challenge) | ★☆☆ | Start Challenge |
| 10 | 🎯 Create Visually Appealing Business Card (Challenge... | ★☆☆ | Start Challenge |
| 11 | 🎯 Building a Responsive News Website Homepage (Chall... | ★☆☆ | Start Challenge |
| 12 | 🎯 Give Your Page a Makeover (Challenge) | ★☆☆ | Start Challenge |
| 13 | 🎯 Simple and Beautiful Home Page Design (Challenge) | ★☆☆ | Start Challenge |
| 14 | 🎯 Responsive Web Design for All Screens (Challenge) | ★☆☆ | Start Challenge |
| 15 | 🎯 Three-Line Love Letter | ★☆☆ | Start Challenge |
| 16 | 🎯 Creative Billboard Design with Wooden Textures (Ch... | ★☆☆ | Start Challenge |
| 17 | 🎯 Movie Theater Seat Arrangement (Challenge) | ★☆☆ | Start Challenge |
| 18 | 🎯 Responsive Dice Layout with Flexbox (Challenge) | ★☆☆ | Start Challenge |
| 19 | 🎯 Create a Swiper Carousel Web App (Challenge) | ★☆☆ | Start Challenge |
| 20 | 🎯 Create a Pixel Art Animator With React (Challenge) | ★☆☆ | Start Challenge |
| 21 | 🎯 Depth of Field in Images (Challenge) | ★☆☆ | Start Challenge |
| 22 | 🎯 Create Responsive Modal Boxes (Challenge) | ★☆☆ | Start Challenge |
| 23 | 🎯 User Permission Management System with JavaScript ... | ★☆☆ | Start Challenge |
| 24 | 🎯 Slot Machine Application Completion | ★☆☆ | Start Challenge |
| 25 | 🎯 Implement Dynamic Sticky Tab Bar (Challenge) | ★☆☆ | Start Challenge |
| 26 | 🎯 Implement Atomic Flex Layout with CSS (Challenge) | ★☆☆ | Start Challenge |
| 27 | 🎯 Christmas Wish List Builder with React | ★★☆ | Start Challenge |
| 28 | 🎯 Building a React Drag-and-Drop Puzzle Game (Challe... | ★☆☆ | Start Challenge |
| 29 | 🎯 Create a Notes App Using React (Challenge) | ★☆☆ | Start Challenge |
| 30 | 🎯 Building a Modern Expense Splitter Web App (Challe... | ★☆☆ | Start Challenge |
| 31 | 🎯 Build a Sliding Puzzle Game With JavaScript (Chall... | ★☆☆ | Start Challenge |
| 32 | 🎯 Build a Tic-Tac-Toe Web App (Challenge) | ★☆☆ | Start Challenge |
| 33 | 🎯 Monty Hall Simulation Web App (Challenge) | ★☆☆ | Start Challenge |
| 34 | 🎯 Building a React GitHub Heatmap Contributions (Cha... | ★★☆ | Start Challenge |
| 35 | 🎯 Creating a Drawing Board Web App (Challenge) | ★☆☆ | Start Challenge |
| 36 | 🎯 Creating a Whack-a-Mole Web Game (Challenge) | ★☆☆ | Start Challenge |
| 37 | 🎯 2048 Web Game Using jQuery (Challenge) | ★☆☆ | Start Challenge |
| 38 | 🎯 Creating a Task Timer Web App (Challenge) | ★☆☆ | Start Challenge |
| 39 | 🎯 Build an Image Cropping Tool Using HTML5 (Challeng... | ★☆☆ | Start Challenge |
| 40 | 🎯 Building a Web Avoiding Block Game (Challenge) | ★★☆ | Start Challenge |
| 41 | 🎯 Parsing and Highlighting Text Content | ★☆☆ | Start Challenge |
| 42 | 🎯 Fixing Website Display Issues (Challenge) | ★☆☆ | Start Challenge |
| 43 | 🎯 Build Markdown Editor with Live Preview | ★☆☆ | Start Challenge |
| 44 | 🎯 Creating a Minesweeper Game With JavaScript (Chall... | ★☆☆ | Start Challenge |
| 45 | 🎯 Don't Step on the White Tile (Challenge) | ★☆☆ | Start Challenge |
| 46 | 🎯 Implement a Magnifying Glass Effect Using Canvas (... | ★☆☆ | Start Challenge |
| 47 | 🎯 jQuery Flip Puzzle Game (Challenge) | ★☆☆ | Start Challenge |
| 48 | 🎯 Deploying MobileNet With TensorFlow.js and Flask (... | ★☆☆ | Start Challenge |
| 49 | 🎯 Web-based HTML Presentation Builder (Challenge) | ★☆☆ | Start Challenge |
| 50 | 🎯 Build URL Shortener with Flask MySQL (Challenge) | ★★★ | Start Challenge |
| 51 | 🎯 Build a Scratch Card Web Game (Challenge) | ★☆☆ | Start Challenge |
## More
- 🔗 [CSS Programming Courses](https://github.com/labex-labs/awesome-programming-courses)
- 🔗 [CSS Programming Projects](https://github.com/labex-labs/awesome-programming-projects)
- 🔗 [CSS Free Tutorials](https://github.com/labex-labs/css-free-tutorials)