Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/labex-labs/quick-start-with-css
[Quick Start with CSS] This repository collects 6 of programming scenarios (labs and challenges) for Quick Start with CSS. In this course, you will try to understand the basics of CSS and how to use it to style your web pages. At the end of this course, you will be able to create a simple web pag...
https://github.com/labex-labs/quick-start-with-css
List: quick-start-with-css
awesome awesome-list challenges course css education hands-on labex labs programming
Last synced: 5 days ago
JSON representation
[Quick Start with CSS] This repository collects 6 of programming scenarios (labs and challenges) for Quick Start with CSS. In this course, you will try to understand the basics of CSS and how to use it to style your web pages. At the end of this course, you will be able to create a simple web pag...
- Host: GitHub
- URL: https://github.com/labex-labs/quick-start-with-css
- Owner: labex-labs
- Created: 2024-05-22T09:03:26.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-08-01T01:28:11.000Z (4 months ago)
- Last Synced: 2024-08-02T04:23:18.698Z (4 months ago)
- Topics: awesome, awesome-list, challenges, course, css, education, hands-on, labex, labs, programming
- Homepage: https://labex.io/skilltrees/css
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quick Start with CSS
[](https://labex.io/courses/quick-start-with-css)
[](https://labex.io/courses/quick-start-with-css)
In this course, you will try to understand the basics of CSS and how to use it to style your web pages. At the end of this course, you will be able to create a simple web page with CSS.
## 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 |
|---------|---------------------------------------------------------|--------------|----------------------------------------------------------------------------------------------------------------------------------|
| 001 | 📖 Your First CSS Lab | ★☆☆ | Start Lab |
| 002 | 📖 CSS Basics and Selectors | ★☆☆ | Start Lab |
| 003 | 📖 CSS Box Model and Margins | ★☆☆ | Start Lab |
| 004 | 📖 Responsive Pet's House Website with Flexbox | ★☆☆ | Start Lab |
| 005 | 📖 Pet Service Showcase with CSS Grid | ★☆☆ | Start Lab |
| 006 | 📖 Animations and Transitions | ★☆☆ | Start Lab |
| 007 | 📖 Reset All Styles | ★☆☆ | Start Lab |
| 008 | 📖 Box-Sizing Reset in CSS | ★☆☆ | Start Lab |
| 009 | 📖 System Font Stack | ★☆☆ | Start Lab |
| 010 | 📖 CSS Clearfix Technique | ★☆☆ | Start Lab |
| 011 | 📖 Responsive Flexbox Centering Techniques | ★☆☆ | Start Lab |
| 012 | 📖 Centered Grid Layout Mastery | ★☆☆ | Start Lab |
| 013 | 📖 Vertically and Horizontally Center Elements | ★☆☆ | Start Lab |
| 014 | 📖 Display Table Centering | ★☆☆ | Start Lab |
| 015 | 📖 Evenly Distributed Children | ★☆☆ | Start Lab |
| 016 | 📖 Creating Responsive Tiled Layouts | ★☆☆ | Start Lab |
| 017 | 📖 Fundamentals of CSS Styling | ★☆☆ | Start Lab |
| 018 | 📖 Responsive Container Aspect Ratio CSS | ★☆☆ | Start Lab |
| 019 | 📖 Constant Width to Height Ratio | ★☆☆ | Start Lab |
| 020 | 📖 Fit Image in Container | ★☆☆ | Start Lab |
| 021 | 📖 List with Sticky Section Headings | ★☆☆ | Start Lab |
| 022 | 📖 Responsive Layout with Sidebar | ★☆☆ | Start Lab |
| 023 | 📖 Accessible Offscreen Element Hiding | ★☆☆ | Start Lab |
| 024 | 📖 Fullscreen Element Styling with CSS | ★☆☆ | Start Lab |
| 025 | 📖 Truncate Text with CSS Overflow | ★☆☆ | Start Lab |
| 026 | 📖 Trim Multiline Text | ★☆☆ | Start Lab |
| 027 | 📖 Stylized Quotation Marks | ★☆☆ | Start Lab |
| 028 | 📖 Crafting Etched Text Effects with CSS | ★☆☆ | Start Lab |
| 029 | 📖 Responsive Fluid Typography with CSS | ★☆☆ | Start Lab |
| 030 | 📖 Creating Gradient Text with CSS | ★☆☆ | Start Lab |
| 031 | 📖 Custom Text Selection | ★☆☆ | Start Lab |
| 032 | 📖 Stylish Drop Cap Technique | ★☆☆ | Start Lab |
| 033 | 📖 Truncate Multiline Text | ★☆☆ | Start Lab |
| 034 | 📖 Pretty Text Underline | ★☆☆ | Start Lab |
| 035 | 📖 Disable Content Selection with CSS | ★☆☆ | Start Lab |
| 036 | 📖 Nested List Counters with CSS | ★☆☆ | Start Lab |
| 037 | 📖 Beginner's Guide to CSS Fundamentals | ★☆☆ | Start Lab |
| 038 | 📖 CSS Styling Techniques for Web Development | ★☆☆ | Start Lab |
| 039 | 📖 Border with Top Triangle | ★☆☆ | Start Lab |
| 040 | 📖 Checkerboard Background Pattern | ★☆☆ | Start Lab |
| 041 | 📖 Stripes Background Pattern | ★☆☆ | Start Lab |
| 042 | 📖 Polka Dot Background Pattern | ★☆☆ | Start Lab |
| 043 | 📖 Zig Zag Background Pattern | ★☆☆ | Start Lab |
| 044 | 📖 Creating Shape Separators with CSS | ★☆☆ | Start Lab |
| 045 | 📖 Dynamic CSS Shadows Creation | ★☆☆ | Start Lab |
| 046 | 📖 Overflow Scroll Gradient | ★☆☆ | Start Lab |
| 047 | 📖 Hide Scroll Bars | ★☆☆ | Start Lab |
| 048 | 📖 Customizing Scrollbar Styles with CSS | ★☆☆ | Start Lab |
| 049 | 📖 Image Text Overlay | ★☆☆ | Start Lab |
| 050 | 📖 Zebra Striped List | ★☆☆ | Start Lab |
| 051 | 📖 Sibling Fade CSS Effect | ★☆☆ | Start Lab |
| 052 | 📖 CSS Fundamentals for Visually Appealing Web | ★☆☆ | Start Lab |
| 053 | 📖 Crafting Visually Appealing Web Layouts | ★☆☆ | Start Lab |
| 054 | 📖 Responsive Image Mosaic | ★☆☆ | Start Lab |
| 055 | 📖 Create Interactive CSS Popout Menu | ★☆☆ | Start Lab |
| 056 | 📖 Horizontal Scroll Snap | ★☆☆ | Start Lab |
| 057 | 📖 Vertical Scroll Snap | ★☆☆ | Start Lab |
| 058 | 📖 Scroll Progress Bar | ★☆☆ | Start Lab |
| 059 | 📖 Enhancing Form Interactivity with CSS Focus-Within | ★☆☆ | Start Lab |
| 060 | 📖 Show Additional Content on Hover | ★☆☆ | Start Lab |
| 061 | 📖 Button Fill Animation | ★☆☆ | Start Lab |
| 062 | 📖 Button Grow Animation | ★☆☆ | Start Lab |
| 063 | 📖 Button Shrink Animation | ★☆☆ | Start Lab |
| 064 | 📖 Crafting Pulsing CSS Loader Animation | ★☆☆ | Start Lab |
| 065 | 📖 CSS Techniques for Visually Appealing Designs | ★☆☆ | Start Lab |
| 066 | 📖 Zoom in Zoom Out Animation | ★☆☆ | Start Lab |
| 067 | 📖 Button Border Animation | ★☆☆ | Start Lab |
| 068 | 📖 Hover Shadow Box Animation | ★☆☆ | Start Lab |
| 069 | 📖 Image Rotate on Hover | ★☆☆ | Start Lab |
| 070 | 📖 Smooth Transition of Dynamic Heights | ★☆☆ | Start Lab |
| 071 | 📖 Perspective Transform on Hover | ★☆☆ | Start Lab |
| 072 | 📖 CSS Fundamentals for Web Styling | ★☆☆ | Start Lab |
| 073 | 📖 Squiggle Link Hover Effect | ★☆☆ | Start Lab |
| 074 | 📖 Responsive Web Design with CSS | ★☆☆ | Start Lab |
| 075 | 📖 Staggered CSS Animation for List Elements | ★☆☆ | Start Lab |
| 076 | 📖 Create CSS Toggle Switch | ★☆☆ | Start Lab |
| 077 | 📖 Image Gallery with Vertical Scroll | ★☆☆ | Start Lab |
| 078 | 📖 Card with Image Cutout | ★☆☆ | Start Lab |
| 079 | 📖 Button Swing Animation | ★☆☆ | Start Lab |
| 080 | 📖 Create Rotating Card with CSS | ★☆☆ | Start Lab |
| 081 | 📖 Image Gallery with Horizontal Scroll | ★☆☆ | Start Lab |
| 082 | 📖 Hover Underline Animation | ★☆☆ | Start Lab |
| 083 | 📖 Menu on Image Hover | ★☆☆ | Start Lab |
| 084 | 📖 Navigation List Item Hover and Focus Effect | ★☆☆ | Start Lab |
| 085 | 📖 Custom Radio Button | ★☆☆ | Start Lab |
| 086 | 📖 Mouse Cursor Gradient Tracking | ★☆☆ | Start Lab |
| 087 | 📖 Creating Typewriter Effect with HTML CSS JavaScrip... | ★☆☆ | Start Lab |
| 088 | 📖 List with Floating Section Headings | ★☆☆ | Start Lab |
| 089 | 📖 Bouncing CSS Animation Loader | ★☆☆ | Start Lab |
| 090 | 📖 3D Rotating Cube | ★☆☆ | Start Lab |
| 091 | 📖 Image Overlay on Hover | ★☆☆ | Start Lab |
| 092 | 📖 Animated Social Sharing Buttons with CSS | ★☆☆ | Start Lab |
| 093 | 📖 Animated Checkbox Styling with CSS | ★☆☆ | Start Lab |
| 094 | 📖 Responsive Masonry Layout with CSS | ★☆☆ | Start Lab |
| 095 | 📖 Image with Text Overlay | ★☆☆ | Start Lab |
| 096 | 📖 Shake on Invalid Input | ★☆☆ | Start Lab |
| 097 | 📖 Fallback for Images That Fail to Load | ★☆☆ | Start Lab |
| 098 | 📖 Input with Prefix | ★☆☆ | Start Lab |
| 099 | 📖 Hide Empty Elements | ★☆☆ | Start Lab |
| 100 | 📖 Style Links with No Text | ★☆☆ | 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)