CSS Exercises
Sharpen your Cascading Style Sheets skills through a series of hands-on exercises. This collection of practical challenges is designed to test and improve your understanding of core CSS concepts. Each exercise presents a real-world styling problem, allowing you to apply your knowledge of selectors, properties, layout models like Flexbox and Grid, and responsive design principles. Work through these coding tasks to build confidence and proficiency in styling web pages.
Discover categories
AllLinuxDevOpsCybersecurityDevOps EngineerCybersecurity EngineerDevSecOpsKali LinuxRed Hat Enterprise LinuxRHCSA TrainingRHCE in Enterprise Linux TrainingLFCS TrainingShellGitCloudflareDockerKubernetesCKA TrainingCKAD TrainingCKS TrainingAnsibleRHCE in Ansible TrainingJenkinsNmapWiresharkHydraCompTIADatabaseMySQLPostgreSQLRedisMongoDBSQLitePythonGolangJavaCC++Web DevelopmentData Science
Your First CSS Lab
Hi there, welcome to LabEx! In this first lab, you'll learn the classic 'Hello, World!' program in CSS.
LabCSS
3D Rotating Cube
In this lab, we will create a 3D rotating cube using HTML and CSS. This cube will have colorful faces and will rotate infinitely, creating a visually appealing effect. We'll guide you through each step of the process to help you build this project from scratch.
LabCSS
Animations and Transitions
In the bustling world of 'Pet's House,' a virtual sanctuary for pet lovers, Taylor, a creative web designer, embarks on a journey to infuse life into the website.
LabCSS
CSS Basics and Selectors
In this lab, you will step into the shoes of a web developer tasked with creating a stylish website for a pet service using fundamental CSS techniques and selectors.
LabCSS
CSS Box Model and Margins
In the bustling digital landscape of 'Pet's House,' a website dedicated to providing premium pet care services, our protagonist, Jordan, a talented web developer, is tasked with enhancing the website's layout and design.
LabCSS
Responsive Pet's House Website with Flexbox
In the bustling city of Petville, Jordan, a web developer, is tasked with redesigning the 'Pet's House' website.
LabCSS
Pet Service Showcase with CSS Grid
In 'Pet's House,' a virtual realm for pet enthusiasts, Alex, a web developer, embarks on a quest to revamp their service showcase using CSS Grid.
LabCSS
Enhancing Personal Finance Tracker
In this Lab, Alex's journey through the development of the personal finance tracker enters an advanced stage, focusing on enhancing the application's interactivity through sophisticated event handling techniques. The scene is set in a brainstorming session at the tech startup, where Alex proposes adding a drag-and-drop feature to reorder financial records. This ambitious goal aims to provide users with an intuitive way to organize their records, reflecting the fluid nature of personal finance management. Achieving this requires Alex to explore advanced DOM events and manipulate elements in a way that's both visually appealing and user-friendly.
LabCSS
CSS Box Model
In this lab, you will learn the fundamentals of the CSS Box Model, including content, padding, border, and margin, and how to control element sizing with box-sizing.
LabCSS
CSS Colors and Backgrounds
In this lab, you will learn how to style web page elements by applying various CSS color and background properties, including setting colors, adding images, and controlling their position and repetition.
LabCSS
CSS Introduction and Linking
In this lab, you will learn the basics of CSS, including how to create an external stylesheet and link it to an HTML document to change the font of the page.
LabCSS
CSS Selectors Basics
In this lab, you will learn the fundamentals of CSS selectors, including element, class, ID, grouping, and descendant selectors to style HTML elements.
LabCSS
CSS Text Styling
In this lab, you will learn the fundamentals of CSS text styling, including how to set text color, font size, font weight, alignment, and line height.
LabCSS