Practice CSS Labs

Languages

🇨🇳 简体中文 🇯🇵 日本語 🇪🇸 Español 🇫🇷 Français 🇩🇪 Deutsch 🇷🇺 Русский 🇰🇷 한국어 🇧🇷 Português 🇺🇸 English

Learn CSS with this structured Learning Path, ideal for web development beginners. These CSS courses provide a clear roadmap to master selectors, layout, and responsive design. Develop practical skills through hands-on, non-video exercises in an interactive CSS playground to create visually appealing and responsive websites.

Browse up to 85 hands-on CSS labs from LabEx. Each lab opens in an interactive environment so you can practice by doing.

Index	Name	Skills	Difficulty	Practice
01	Your First CSS Lab	Document Structure	Beginner	Start Lab
02	3D Rotating Cube	Positioning	Beginner	Start Lab
03	Creating a Drawing Board Web App	Events	Beginner	Start Lab
04	JavaScript DOM Manipulation	DOM Selection	Beginner	Start Lab
05	Creating a Minesweeper Game with JavaScript	DOM Manipulation	Beginner	Start Lab
06	Creating a Task Timer Web App	DOM Manipulation	Beginner	Start Lab
07	Creating a Whack-a-Mole Web Game	DOM Manipulation	Beginner	Start Lab
08	Don't Step on the White Tile	DOM Manipulation	Beginner	Start Lab
09	Monty Hall Simulation Web App	DOM Manipulation	Beginner	Start Lab
10	Build a Scratch Card Web Game	DOM Manipulation	Beginner	Start Lab
11	Building Christmas Wish List App with React	Project Structure	Beginner	Start Lab
12	Create a Notes App Using React	useState	Beginner	Start Lab
13	Create a Pixel Art Animator with React	Component Definition	Beginner	Start Lab
14	Apply Background Styles in CSS	Backgrounds	Beginner	Start Lab
15	Apply Basic CSS Selectors in Web Development	Selectors	Beginner	Start Lab
16	Apply Descendant Selectors in CSS	Selectors	Beginner	Start Lab
17	Apply Margin Styles in CSS	Spacing	Beginner	Start Lab
18	Apply Relative Positioning in CSS	Positioning	Beginner	Start Lab
19	Create and Style div Elements in HTML	Element Model	Beginner	Start Lab
20	Create Box Shadows with CSS	Shadows and Filters	Beginner	Start Lab
21	Create CSS3 Animations with Keyframes	Animations	Beginner	Start Lab
22	Create CSS3 Transitions with Timing Functions	Transitions	Beginner	Start Lab
23	Create Fixed Positioning Layout in CSS	Positioning	Beginner	Start Lab
24	Create HTML Tables with Basic Attributes	Tables	Beginner	Start Lab
25	Create Inline Text Styling with span Tags in HTML	Text Semantics	Beginner	Start Lab
26	Create Paragraphs with HTML p Tag	Text Semantics	Beginner	Start Lab
27	Fruit Arrangement with CSS Flexbox	Display Modes	Beginner	Start Lab
28	Animated Social Sharing Buttons with CSS	Pseudo-Classes	Beginner	Start Lab
29	Animations and Transitions	Positioning	Beginner	Start Lab
30	CSS Basics and Selectors	Selectors	Beginner	Start Lab
31	CSS Box Model and Margins	Spacing	Beginner	Start Lab
32	Responsive Pet's House Website with Flexbox	Flexbox	Beginner	Start Lab
33	Pet Service Showcase with CSS Grid	Sizing	Beginner	Start Lab
34	Enhancing Personal Finance Tracker	Events	Beginner	Start Lab
35	Deploying MobileNet with TensorFlow.js and Flask	DOM Manipulation	Beginner	Start Lab
36	Creating a Koala Face with CSS Grid	Grid Layout	Beginner	Start Lab
37	Responsive Dice Layout with Flexbox	Flexbox	Beginner	Start Lab
38	Responsive Flexible Card Layout	Flexbox	Beginner	Start Lab
39	Flexbox Vegetable Layout Design	Flexbox	Beginner	Start Lab
40	Create a Swiper Carousel Web App	Display Modes	Beginner	Start Lab
41	Visually Appealing Fruit Platter	Display Modes	Beginner	Start Lab
42	jQuery Flip Puzzle Game	DOM Manipulation	Beginner	Start Lab
43	Develop Markdown Editor with Live Preview	DOM Manipulation	Beginner	Start Lab
44	Build URL Shortener with Flask MySQL	Form Structure	Beginner	Start Lab
45	Build a Sliding Puzzle Game with JavaScript	DOM Manipulation	Beginner	Start Lab
46	Build a Tic-Tac-Toe Web App	DOM Manipulation	Beginner	Start Lab
47	Build an Image Cropping Tool Using HTML5	DOM Manipulation	Beginner	Start Lab
48	Building a Modern Expense Splitter Web App	DOM Manipulation	Beginner	Start Lab
49	Building a React Drag-and-Drop Puzzle Game	Project Structure	Beginner	Start Lab
50	Building a React GitHub Heatmap Contributions	Project Structure	Beginner	Start Lab
51	Visually Appealing Fruit Platter	Display Modes	Beginner	Start Lab
52	Fruit Arrangement with CSS Flexbox	Display Modes	Beginner	Start Lab
53	Flexbox Vegetable Layout Design	Flexbox	Beginner	Start Lab
54	Responsive Flexible Card Layout	Flexbox	Beginner	Start Lab
55	Building a Modern Expense Splitter Web App	DOM Manipulation	Beginner	Start Lab
56	Creating a Koala Face with CSS Grid	Grid Layout	Beginner	Start Lab
57	Deploying MobileNet with TensorFlow.js and Flask	DOM Manipulation	Beginner	Start Lab
58	Enhancing Personal Finance Tracker	Events	Beginner	Start Lab
59	Pet Service Showcase with CSS Grid	Sizing	Beginner	Start Lab
60	Responsive Pet's House Website with Flexbox	Flexbox	Beginner	Start Lab
61	CSS Box Model and Margins	Spacing	Beginner	Start Lab
62	CSS Basics and Selectors	Selectors	Beginner	Start Lab
63	Animations and Transitions	Positioning	Beginner	Start Lab
64	Animated Social Sharing Buttons with CSS	Pseudo-Classes	Beginner	Start Lab
65	Monty Hall Simulation Web App	DOM Manipulation	Beginner	Start Lab
66	Create and Style div Elements in HTML	Element Model	Beginner	Start Lab
67	Apply Relative Positioning in CSS	Positioning	Beginner	Start Lab
68	Apply Margin Styles in CSS	Spacing	Beginner	Start Lab
69	Apply Descendant Selectors in CSS	Selectors	Beginner	Start Lab
70	Apply Basic CSS Selectors in Web Development	Selectors	Beginner	Start Lab
71	Apply Background Styles in CSS	Backgrounds	Beginner	Start Lab
72	Create a Pixel Art Animator with React	Component Definition	Beginner	Start Lab
73	Create a Notes App Using React	useState	Beginner	Start Lab
74	Building Christmas Wish List App with React	Project Structure	Beginner	Start Lab
75	Build a Scratch Card Web Game	DOM Manipulation	Beginner	Start Lab
76	Create Box Shadows with CSS	Shadows and Filters	Beginner	Start Lab
77	Don't Step on the White Tile	DOM Manipulation	Beginner	Start Lab
78	Creating a Whack-a-Mole Web Game	DOM Manipulation	Beginner	Start Lab
79	Creating a Task Timer Web App	DOM Manipulation	Beginner	Start Lab
80	Creating a Minesweeper Game with JavaScript	DOM Manipulation	Beginner	Start Lab
81	Creating a Drawing Board Web App	Events	Beginner	Start Lab
82	Create a Swiper Carousel Web App	Display Modes	Beginner	Start Lab
83	Building a Web Avoiding Block Game	DOM Manipulation	Beginner	Start Lab
84	Building a React GitHub Heatmap Contributions	Project Structure	Beginner	Start Lab
85	Building a React Drag-and-Drop Puzzle Game	Project Structure	Beginner	Start Lab

View all labs.

More

• 🔗 Learn more about CSS on LabEx
• 🔗 Explore more programming projects
• 🔗 Explore programming courses