LabEx
Log In Join For Free

CSS Techniques for Visually Appealing Designs

CSSCSSBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will delve into the world of CSS programming and explore various techniques to enhance the design and layout of web pages. Through a series of exercises and challenges, you will learn how to use CSS selectors, properties, and values to style HTML elements and create visually appealing web pages. By the end of the lab, you will have gained a solid foundation in CSS programming and be able to apply your newfound knowledge to create stunning websites.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") subgraph Lab Skills css/selectors -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/colors -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/borders -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/width_and_height -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/display_property -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/animations -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/transformations -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/mixins -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} end

Donut Spinner

index.html and style.css have already been provided in the VM.

To indicate the loading of content, create a donut spinner with a semi-transparent border for the whole element. Exclude one side to serve as the loading indicator for the donut. Then, define and use an appropriate animation, using transform: rotate() to rotate the element. Here's an example code in HTML and CSS:

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Donut Spinner lab. You can practice more labs in LabEx to improve your skills.

Other CSS Tutorials you may like

Related CSS Courses
Quick Start with CSS

Quick Start with CSS

CSS
Beginner
CSS Practice Labs

CSS Practice Labs

CSS
Beginner
CSS Practice Challenges

CSS Practice Challenges

CSS
Beginner

We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy