Category: React • Beginner
Published on 04 Mar 2026
Explanation
Create a box and center the text both horizontally and vertically using Flexbox. Create a simple profile card with padding, shadow, and rounded corners.
Code Example
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">Center Me</div>
</body>
Explanation
Create a simple horizontal navigation bar using Flexbox.
Code Example
<head>
<style>
.nav {
display: flex;
gap: 20px;
background: black;
padding: 10px;
}
.nav a {
color: white;
text-decoration: none;
}
</style></head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
Explanation
Create a simple profile card with padding, shadow and rounded corners.
Code Example
<head>
<style>
.card {
width: 250px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 10px;
}
</style>
</head>
<body>
<div class="card">
<h3>Profile Card</h3>
<p>This is a simple card design.</p>
</div>
</body>
Explanation
Create a button with hover effect using CSS pseudo-class :hover.
Code Example
<head>
<style>
button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
Explanation
Create a 3-column layout using CSS Grid.
Code Example
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
background: lightgreen;
padding: 20px;
text-align: center;
}
</style></head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>