Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/labex-labs/css-practice-labs
[CSS Practice Labs] This repository collects 92 of programming scenarios (labs and challenges) for CSS Practice Labs. This course contains lots of labs for CSS, each lab is a small CSS project with detailed guidance and solutions. You can practice your CSS skills by completing these labs, improve...
https://github.com/labex-labs/css-practice-labs
List: css-practice-labs
awesome awesome-list challenges course css education hands-on labex labs programming
Last synced: 5 days ago
JSON representation
[CSS Practice Labs] This repository collects 92 of programming scenarios (labs and challenges) for CSS Practice Labs. This course contains lots of labs for CSS, each lab is a small CSS project with detailed guidance and solutions. You can practice your CSS skills by completing these labs, improve...
- Host: GitHub
- URL: https://github.com/labex-labs/css-practice-labs
- Owner: labex-labs
- Created: 2024-05-24T09:04:30.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-08-01T01:29:25.000Z (4 months ago)
- Last Synced: 2024-08-02T04:24:05.916Z (4 months ago)
- Topics: awesome, awesome-list, challenges, course, css, education, hands-on, labex, labs, programming
- Homepage: https://labex.io/skilltrees/css
- Size: 18.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Practice Labs
[](https://labex.io/courses/css-practice-labs)
[](https://labex.io/courses/css-practice-labs)
This course contains lots of labs for CSS, each lab is a small CSS project with detailed guidance and solutions. You can practice your CSS skills by completing these labs, improve your coding 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 | 📖 Disable Content Selection with CSS | ★☆☆ | Start Lab |
| 02 | 📖 Reset All Styles | ★☆☆ | Start Lab |
| 03 | 📖 Stylized Quotation Marks | ★☆☆ | Start Lab |
| 04 | 📖 Responsive Fluid Typography with CSS | ★☆☆ | Start Lab |
| 05 | 📖 System Font Stack | ★☆☆ | Start Lab |
| 06 | 📖 Crafting Etched Text Effects with CSS | ★☆☆ | Start Lab |
| 07 | 📖 Truncate Text with CSS Overflow | ★☆☆ | Start Lab |
| 08 | 📖 Trim Multiline Text | ★☆☆ | Start Lab |
| 09 | 📖 Centered Grid Layout Mastery | ★☆☆ | Start Lab |
| 10 | 📖 Beginner's Guide to CSS Fundamentals | ★☆☆ | Start Lab |
| 11 | 📖 Hide Empty Elements | ★☆☆ | Start Lab |
| 12 | 📖 Checkerboard Background Pattern | ★☆☆ | Start Lab |
| 13 | 📖 Stripes Background Pattern | ★☆☆ | Start Lab |
| 14 | 📖 Evenly Distributed Children | ★☆☆ | Start Lab |
| 15 | 📖 Creating Gradient Text with CSS | ★☆☆ | Start Lab |
| 16 | 📖 Nested List Counters with CSS | ★☆☆ | Start Lab |
| 17 | 📖 Style Links With No Text | ★☆☆ | Start Lab |
| 18 | 📖 Image Text Overlay | ★☆☆ | Start Lab |
| 19 | 📖 Zebra Striped List | ★☆☆ | Start Lab |
| 20 | 📖 Creating Responsive Tiled Layouts | ★☆☆ | Start Lab |
| 21 | 📖 CSS Clearfix Technique | ★☆☆ | Start Lab |
| 22 | 📖 Custom Text Selection | ★☆☆ | Start Lab |
| 23 | 📖 CSS Styling Techniques for Web Development | ★☆☆ | Start Lab |
| 24 | 📖 Accessible Offscreen Element Hiding | ★☆☆ | Start Lab |
| 25 | 📖 Polka Dot Background Pattern | ★☆☆ | Start Lab |
| 26 | 📖 Scroll Progress Bar | ★☆☆ | Start Lab |
| 27 | 📖 Zig Zag Background Pattern | ★☆☆ | Start Lab |
| 28 | 📖 Responsive Flexbox Centering Techniques | ★☆☆ | Start Lab |
| 29 | 📖 Sibling Fade CSS Effect | ★☆☆ | Start Lab |
| 30 | 📖 Fit Image in Container | ★☆☆ | Start Lab |
| 31 | 📖 Fundamentals of CSS Styling | ★☆☆ | Start Lab |
| 32 | 📖 Customizing Scrollbar Styles with CSS | ★☆☆ | Start Lab |
| 33 | 📖 Constant Width to Height Ratio | ★☆☆ | Start Lab |
| 34 | 📖 Dynamic CSS Shadows Creation | ★☆☆ | Start Lab |
| 35 | 📖 Creating Shape Separators with CSS | ★☆☆ | Start Lab |
| 36 | 📖 CSS Fundamentals for Visually Appealing Web | ★☆☆ | Start Lab |
| 37 | 📖 Stylish Drop Cap Technique | ★☆☆ | Start Lab |
| 38 | 📖 Overflow Scroll Gradient | ★☆☆ | Start Lab |
| 39 | 📖 Truncate Multiline Text | ★☆☆ | Start Lab |
| 40 | 📖 Border With Top Triangle | ★☆☆ | Start Lab |
| 41 | 📖 Vertically and Horizontally Center Elements | ★☆☆ | Start Lab |
| 42 | 📖 Hide Scroll Bars | ★☆☆ | Start Lab |
| 43 | 📖 Shake on Invalid Input | ★☆☆ | Start Lab |
| 44 | 📖 Fallback for Images That Fail to Load | ★☆☆ | Start Lab |
| 45 | 📖 Enhancing Form Interactivity with CSS Focus-Within | ★☆☆ | Start Lab |
| 46 | 📖 Pretty Text Underline | ★☆☆ | Start Lab |
| 47 | 📖 Responsive Layout With Sidebar | ★☆☆ | Start Lab |
| 48 | 📖 Button Fill Animation | ★☆☆ | Start Lab |
| 49 | 📖 Responsive Container Aspect Ratio CSS | ★☆☆ | Start Lab |
| 50 | 📖 Box-Sizing Reset in CSS | ★☆☆ | Start Lab |
| 51 | 📖 Display Table Centering | ★☆☆ | Start Lab |
| 52 | 📖 Vertical Scroll Snap | ★☆☆ | Start Lab |
| 53 | 📖 Show Additional Content on Hover | ★☆☆ | Start Lab |
| 54 | 📖 List With Sticky Section Headings | ★☆☆ | Start Lab |
| 55 | 📖 Button Grow Animation | ★☆☆ | Start Lab |
| 56 | 📖 Button Shrink Animation | ★☆☆ | Start Lab |
| 57 | 📖 Crafting Pulsing CSS Loader Animation | ★☆☆ | Start Lab |
| 58 | 📖 CSS Techniques for Visually Appealing Designs | ★☆☆ | Start Lab |
| 59 | 📖 Zoom in Zoom Out Animation | ★☆☆ | Start Lab |
| 60 | 📖 Button Border Animation | ★☆☆ | Start Lab |
| 61 | 📖 Fullscreen Element Styling with CSS | ★☆☆ | Start Lab |
| 62 | 📖 Hover Shadow Box Animation | ★☆☆ | Start Lab |
| 63 | 📖 Crafting Visually Appealing Web Layouts | ★☆☆ | Start Lab |
| 64 | 📖 Input With Prefix | ★☆☆ | Start Lab |
| 65 | 📖 Image Rotate on Hover | ★☆☆ | Start Lab |
| 66 | 📖 Smooth Transition of Dynamic Heights | ★☆☆ | Start Lab |
| 67 | 📖 Image With Text Overlay | ★☆☆ | Start Lab |
| 68 | 📖 Perspective Transform on Hover | ★☆☆ | Start Lab |
| 69 | 📖 CSS Fundamentals for Web Styling | ★☆☆ | Start Lab |
| 70 | 📖 Squiggle Link Hover Effect | ★☆☆ | Start Lab |
| 71 | 📖 Responsive Web Design with CSS | ★☆☆ | Start Lab |
| 72 | 📖 Responsive Masonry Layout with CSS | ★☆☆ | Start Lab |
| 73 | 📖 Staggered CSS Animation for List Elements | ★☆☆ | Start Lab |
| 74 | 📖 Create CSS Toggle Switch | ★☆☆ | Start Lab |
| 75 | 📖 Image Gallery With Vertical Scroll | ★☆☆ | Start Lab |
| 76 | 📖 Card With Image Cutout | ★☆☆ | Start Lab |
| 77 | 📖 Button Swing Animation | ★☆☆ | Start Lab |
| 78 | 📖 Create Rotating Card with CSS | ★☆☆ | Start Lab |
| 79 | 📖 Image Gallery With Horizontal Scroll | ★☆☆ | Start Lab |
| 80 | 📖 Hover Underline Animation | ★☆☆ | Start Lab |
| 81 | 📖 Menu on Image Hover | ★☆☆ | Start Lab |
| 82 | 📖 Navigation List Item Hover and Focus Effect | ★☆☆ | Start Lab |
| 83 | 📖 Custom Radio Button | ★☆☆ | Start Lab |
| 84 | 📖 Mouse Cursor Gradient Tracking | ★☆☆ | Start Lab |
| 85 | 📖 List With Floating Section Headings | ★☆☆ | Start Lab |
| 86 | 📖 Creating Typewriter Effect with HTML CSS JavaScrip... | ★☆☆ | Start Lab |
| 87 | 📖 Bouncing CSS Animation Loader | ★☆☆ | Start Lab |
| 88 | 📖 Responsive Image Mosaic | ★☆☆ | Start Lab |
| 89 | 📖 Animated Checkbox Styling with CSS | ★☆☆ | Start Lab |
| 90 | 📖 Image Overlay on Hover | ★☆☆ | Start Lab |
| 91 | 📖 3D Rotating Cube | ★☆☆ | Start Lab |
| 92 | 📖 Animated Social Sharing Buttons With CSS | ★☆☆ | Start Lab |
## 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)