{"id":19984415,"url":"https://github.com/labex-labs/css-practice-plus","last_synced_at":"2025-12-31T01:06:20.551Z","repository":{"id":241067795,"uuid":"804221721","full_name":"labex-labs/css-practice-plus","owner":"labex-labs","description":"[CSS Practice Plus]-In this course, You will practice more labs of CSS. This will help you to master the skills more deeply.","archived":false,"fork":false,"pushed_at":"2024-05-23T02:43:35.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-23T08:40:32.297Z","etag":null,"topics":["awesome","awesome-list","challenges","course","css","education","hands-on","html","javascript","labex","labs","programming"],"latest_commit_sha":null,"homepage":"https://labex.io/courses/css-practice-plus","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}},"created_at":"2024-05-22T07:25:12.000Z","updated_at":"2024-05-23T02:43:38.000Z","dependencies_parsed_at":"2024-05-22T08:39:21.564Z","dependency_job_id":"85624d59-5c14-40dc-b115-2cc823dd51d3","html_url":"https://github.com/labex-labs/css-practice-plus","commit_stats":null,"previous_names":["labex-labs/css-practice-plus"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fcss-practice-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fcss-practice-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fcss-practice-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labex-labs%2Fcss-practice-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/labex-labs","download_url":"https://codeload.github.com/labex-labs/css-practice-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224386020,"owners_count":17302578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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"}},"keywords":["awesome","awesome-list","challenges","course","css","education","hands-on","html","javascript","labex","labs","programming"],"created_at":"2024-11-13T04:18:52.671Z","updated_at":"2025-12-31T01:06:20.503Z","avatar_url":"https://github.com/labex-labs.png","language":null,"readme":"# CSS Practice Plus\n\n![CSS Practice Plus](https://cover-creator.labex.io/css-practice-plus.png)\n\nIn this course, You will practice more labs of CSS. This will help you to master the skills more deeply.\n\n![CSS](https://img.shields.io/badge/CSS-whitesmoke?style=for-the-badge\u0026logo=css)\n![HTML](https://img.shields.io/badge/HTML-whitesmoke?style=for-the-badge\u0026logo=html)\n![JavaScript](https://img.shields.io/badge/JavaScript-whitesmoke?style=for-the-badge\u0026logo=javascript)\n\n\n## Scenarios\n\n|   Index | Name                                                    | Difficulty   | Practice                                                             |\n|---------|---------------------------------------------------------|--------------|----------------------------------------------------------------------|\n|      01 | 📖 3D Rotating Cube                                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/165641'\u003eStart Lab\u003c/a\u003e |\n|      02 | 📖 Animated Social Sharing Buttons With CSS              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/179618'\u003eStart Lab\u003c/a\u003e |\n|      03 | 📖 Your First CSS Lab                                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/92744'\u003eStart Lab\u003c/a\u003e  |\n|      04 | 📖 Disable Content Selection with CSS                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35189'\u003eStart Lab\u003c/a\u003e  |\n|      05 | 📖 Reset All Styles                                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35233'\u003eStart Lab\u003c/a\u003e  |\n|      06 | 📖 Stylized Quotation Marks                              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35245'\u003eStart Lab\u003c/a\u003e  |\n|      07 | 📖 Responsive Fluid Typography with CSS                  | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35200'\u003eStart Lab\u003c/a\u003e  |\n|      08 | 📖 System Font Stack                                     | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35246'\u003eStart Lab\u003c/a\u003e  |\n|      09 | 📖 Crafting Etched Text Effects with CSS                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35195'\u003eStart Lab\u003c/a\u003e  |\n|      10 | 📖 Truncate Text with CSS Overflow                       | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35253'\u003eStart Lab\u003c/a\u003e  |\n|      11 | 📖 Trim Multiline Text                                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35223'\u003eStart Lab\u003c/a\u003e  |\n|      12 | 📖 Centered Grid Layout Mastery                          | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35205'\u003eStart Lab\u003c/a\u003e  |\n|      13 | 📖 Beginner's Guide to CSS Fundamentals                  | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35251'\u003eStart Lab\u003c/a\u003e  |\n|      14 | 📖 Hide Empty Elements                                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35208'\u003eStart Lab\u003c/a\u003e  |\n|      15 | 📖 Checkerboard Background Pattern                       | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35180'\u003eStart Lab\u003c/a\u003e  |\n|      16 | 📖 Stripes Background Pattern                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35244'\u003eStart Lab\u003c/a\u003e  |\n|      17 | 📖 Creating Gradient Text with CSS                       | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35204'\u003eStart Lab\u003c/a\u003e  |\n|      18 | 📖 Evenly Distributed Children                           | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35196'\u003eStart Lab\u003c/a\u003e  |\n|      19 | 📖 Nested List Counters with CSS                         | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35184'\u003eStart Lab\u003c/a\u003e  |\n|      20 | 📖 Image Text Overlay                                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35247'\u003eStart Lab\u003c/a\u003e  |\n|      21 | 📖 Style Links With No Text                              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35190'\u003eStart Lab\u003c/a\u003e  |\n|      22 | 📖 Zebra Striped List                                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35257'\u003eStart Lab\u003c/a\u003e  |\n|      23 | 📖 Creating Responsive Tiled Layouts                     | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35248'\u003eStart Lab\u003c/a\u003e  |\n|      24 | 📖 Mastering CSS Clearfix Technique                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35182'\u003eStart Lab\u003c/a\u003e  |\n|      25 | 📖 Custom Text Selection                                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35188'\u003eStart Lab\u003c/a\u003e  |\n|      26 | 📖 CSS Styling Techniques for Web Development            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35181'\u003eStart Lab\u003c/a\u003e  |\n|      27 | 📖 Polka Dot Background Pattern                          | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35229'\u003eStart Lab\u003c/a\u003e  |\n|      28 | 📖 Scroll Progress Bar                                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35236'\u003eStart Lab\u003c/a\u003e  |\n|      29 | 📖 Zig Zag Background Pattern                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35258'\u003eStart Lab\u003c/a\u003e  |\n|      30 | 📖 Accessible Offscreen Element Hiding                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35227'\u003eStart Lab\u003c/a\u003e  |\n|      31 | 📖 Responsive Flexbox Centering Techniques               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35198'\u003eStart Lab\u003c/a\u003e  |\n|      32 | 📖 Sibling Fade CSS Effect                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35240'\u003eStart Lab\u003c/a\u003e  |\n|      33 | 📖 Fit Image in Container                                | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35197'\u003eStart Lab\u003c/a\u003e  |\n|      34 | 📖 Fundamentals of CSS Styling                           | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35202'\u003eStart Lab\u003c/a\u003e  |\n|      35 | 📖 Customizing Scrollbar Styles with CSS                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35187'\u003eStart Lab\u003c/a\u003e  |\n|      36 | 📖 Constant Width to Height Ratio                        | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35183'\u003eStart Lab\u003c/a\u003e  |\n|      37 | 📖 Dynamic CSS Shadows Creation                          | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35194'\u003eStart Lab\u003c/a\u003e  |\n|      38 | 📖 Creating Shape Separators with CSS                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35238'\u003eStart Lab\u003c/a\u003e  |\n|      39 | 📖 CSS Fundamentals for Visually Appealing Web           | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35168'\u003eStart Lab\u003c/a\u003e  |\n|      40 | 📖 Stylish Drop Cap Technique                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35193'\u003eStart Lab\u003c/a\u003e  |\n|      41 | 📖 Overflow Scroll Gradient                              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35228'\u003eStart Lab\u003c/a\u003e  |\n|      42 | 📖 Truncate Multiline Text                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35252'\u003eStart Lab\u003c/a\u003e  |\n|      43 | 📖 Border With Top Triangle                              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35170'\u003eStart Lab\u003c/a\u003e  |\n|      44 | 📖 Vertically and Horizontally Center Elements           | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35250'\u003eStart Lab\u003c/a\u003e  |\n|      45 | 📖 Hide Scroll Bars                                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35209'\u003eStart Lab\u003c/a\u003e  |\n|      46 | 📖 Shake on Invalid Input                                | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35237'\u003eStart Lab\u003c/a\u003e  |\n|      47 | 📖 Fallback for Images That Fail to Load                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35173'\u003eStart Lab\u003c/a\u003e  |\n|      48 | 📖 Responsive Layout With Sidebar                        | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35234'\u003eStart Lab\u003c/a\u003e  |\n|      49 | 📖 Enhancing Form Interactivity with CSS Focus-Within    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35201'\u003eStart Lab\u003c/a\u003e  |\n|      50 | 📖 Pretty Text Underline                                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35231'\u003eStart Lab\u003c/a\u003e  |\n|      51 | 📖 Button Fill Animation                                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35176'\u003eStart Lab\u003c/a\u003e  |\n|      52 | 📖 Responsive Container Aspect Ratio CSS                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35169'\u003eStart Lab\u003c/a\u003e  |\n|      53 | 📖 Box-Sizing Reset in CSS                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35172'\u003eStart Lab\u003c/a\u003e  |\n|      54 | 📖 Display Table Centering                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35191'\u003eStart Lab\u003c/a\u003e  |\n|      55 | 📖 Vertical Scroll Snap                                  | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35256'\u003eStart Lab\u003c/a\u003e  |\n|      56 | 📖 Show Additional Content on Hover                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35212'\u003eStart Lab\u003c/a\u003e  |\n|      57 | 📖 List With Sticky Section Headings                     | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35243'\u003eStart Lab\u003c/a\u003e  |\n|      58 | 📖 Button Grow Animation                                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35177'\u003eStart Lab\u003c/a\u003e  |\n|      59 | 📖 Button Shrink Animation                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35178'\u003eStart Lab\u003c/a\u003e  |\n|      60 | 📖 Crafting Pulsing CSS Loader Animation                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35232'\u003eStart Lab\u003c/a\u003e  |\n|      61 | 📖 Mastering CSS for Visually Stunning Websites          | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35192'\u003eStart Lab\u003c/a\u003e  |\n|      62 | 📖 Zoom in Zoom Out Animation                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35259'\u003eStart Lab\u003c/a\u003e  |\n|      63 | 📖 Button Border Animation                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35174'\u003eStart Lab\u003c/a\u003e  |\n|      64 | 📖 Fullscreen Element Styling with CSS                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35203'\u003eStart Lab\u003c/a\u003e  |\n|      65 | 📖 Hover Shadow Box Animation                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35214'\u003eStart Lab\u003c/a\u003e  |\n|      66 | 📖 Mastering CSS for Visually Stunning Websites          | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35222'\u003eStart Lab\u003c/a\u003e  |\n|      67 | 📖 Input With Prefix                                     | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35221'\u003eStart Lab\u003c/a\u003e  |\n|      68 | 📖 Image Rotate on Hover                                 | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35217'\u003eStart Lab\u003c/a\u003e  |\n|      69 | 📖 Image With Text Overlay                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35220'\u003eStart Lab\u003c/a\u003e  |\n|      70 | 📖 Smooth Transition of Dynamic Heights                  | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35207'\u003eStart Lab\u003c/a\u003e  |\n|      71 | 📖 Perspective Transform on Hover                        | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35213'\u003eStart Lab\u003c/a\u003e  |\n|      72 | 📖 CSS Fundamentals for Web Styling                      | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35206'\u003eStart Lab\u003c/a\u003e  |\n|      73 | 📖 Squiggle Link Hover Effect                            | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35241'\u003eStart Lab\u003c/a\u003e  |\n|      74 | 📖 Responsive Web Design with CSS                        | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35239'\u003eStart Lab\u003c/a\u003e  |\n|      75 | 📖 Responsive Masonry Layout with CSS                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35224'\u003eStart Lab\u003c/a\u003e  |\n|      76 | 📖 Staggered CSS Animation for List Elements             | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35242'\u003eStart Lab\u003c/a\u003e  |\n|      77 | 📖 Image Gallery With Vertical Scroll                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35255'\u003eStart Lab\u003c/a\u003e  |\n|      78 | 📖 Create CSS Toggle Switch                              | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35249'\u003eStart Lab\u003c/a\u003e  |\n|      79 | 📖 Card With Image Cutout                                | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35179'\u003eStart Lab\u003c/a\u003e  |\n|      80 | 📖 Button Swing Animation                                | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35175'\u003eStart Lab\u003c/a\u003e  |\n|      81 | 📖 Create Rotating Card with CSS                         | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35235'\u003eStart Lab\u003c/a\u003e  |\n|      82 | 📖 Image Gallery With Horizontal Scroll                  | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35210'\u003eStart Lab\u003c/a\u003e  |\n|      83 | 📖 Hover Underline Animation                             | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35215'\u003eStart Lab\u003c/a\u003e  |\n|      84 | 📖 Navigation List Item Hover and Focus Effect           | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35226'\u003eStart Lab\u003c/a\u003e  |\n|      85 | 📖 Menu on Image Hover                                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35216'\u003eStart Lab\u003c/a\u003e  |\n|      86 | 📖 Custom Radio Button                                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35186'\u003eStart Lab\u003c/a\u003e  |\n|      87 | 📖 Mouse Cursor Gradient Tracking                        | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35225'\u003eStart Lab\u003c/a\u003e  |\n|      88 | 📖 List With Floating Section Headings                   | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35199'\u003eStart Lab\u003c/a\u003e  |\n|      89 | 📖 Creating Typewriter Effect with HTML CSS JavaScrip... | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35254'\u003eStart Lab\u003c/a\u003e  |\n|      90 | 📖 Bouncing CSS Animation Loader                         | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35171'\u003eStart Lab\u003c/a\u003e  |\n|      91 | 📖 Responsive Image Mosaic                               | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35218'\u003eStart Lab\u003c/a\u003e  |\n|      92 | 📖 Animated Checkbox Styling with CSS                    | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35185'\u003eStart Lab\u003c/a\u003e  |\n|      93 | 📖 Image Overlay on Hover                                | ★☆☆          | \u003ca target='_blank' href='https://labex.io/labs/35219'\u003eStart Lab\u003c/a\u003e  |\n\n## More\n\n- 🔗 [CSS Programming Courses](https://github.com/labex-labs/awesome-programming-courses)\n- 🔗 [CSS Programming Projects](https://github.com/labex-labs/awesome-programming-projects)\n- 🔗 [CSS Free Tutorials](https://github.com/labex-labs/css-free-tutorials)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabex-labs%2Fcss-practice-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flabex-labs%2Fcss-practice-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabex-labs%2Fcss-practice-plus/lists"}