Lesson 1: Understanding HTML Elements
This lesson will introduce HTML elements and how to create them.
Elements Covered:
<div>
<button>
<h1>
<body>
<header>
<footer>
Example:
html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Elements</title>
</head>
<body>
<header>This is the header</header>
<div>This is a div</div>
<button>Click me</button>
<h1>This is a heading</h1>
<footer>This is the footer</footer>
</body>
</html>
Lesson 2: Attributes
In this lesson, you will explain attributes like style, width, height, and class.
Example:
html
Copy
<div style="background-color: yellow; width: 100px; height: 100px;">Styled Div</div>
Lesson 3: Basic Styling
This lesson will cover basic styling such as background color, font color, and font size.
Example:
html
Copy
<div style="background-color: lightblue; color: navy; font-size: 20px;">Styled Text</div>
Lesson 4: CSS Selectors
Teach different types of CSS selectors: universal (*), element (div), ID (#id), and class (.class).
Example:
html
Copy
<style>
* { color: red; }
div { background-color: lightgrey; }
#unique { font-size: 25px; }
.highlight { background-color: yellow; }
</style>
<div>This is a div</div>
<div id="unique">This is a unique div</div>
<div class="highlight">This is a highlighted div</div>
Lesson 5: Box Model & Layout
Explain margin, padding, flex, and position with examples.
Example:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: lightblue;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
</style>
<div class="container">
<div class="box">Box with margin and padding</div>
</div>
Lesson 6: Creating a Login Box
HTML Structure:
html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
CSS Styling:
css
Copy
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
text-align: left;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: white;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
This example provides a basic login form with a username and password field, along with a submit button. The CSS styles ensure the form is centered on the page and gives it a clean, modern look.
Lesson 7: Centering a Login Box Using Flexbox and Positioning
HTML Structure:
html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
CSS Styling with Flexbox:
css
Copy
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
text-align: left;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: white;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
CSS Styling with Positioning:
css
Copy
body {
position: relative;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
text-align: left;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: white;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
With these methods, you can use either flexbox or absolute positioning to center the login box both horizontally and vertically.
Lesson 8: Positioning in CSS
Explanation:
This lesson will cover different CSS position properties: static, relative, absolute, fixed, and sticky.
Examples:
Static Positioning:
html
Copy
<div style="position: static; background-color: lightblue;">Static Position</div>
Relative Positioning:
html
Copy
<div style="position: relative; top: 10px; background-color: lightgreen;">Relative Position</div>
Absolute Positioning:
html
Copy
<div style="position: absolute; top: 20px; left: 50px; background-color: lightcoral;">Absolute Position</div>
Fixed Positioning:
html
Copy
<div style="position: fixed; bottom: 10px; right: 10px; background-color: lightgoldenrodyellow;">Fixed Position</div>
Sticky Positioning:
html
Copy
<div style="position: sticky; top: 0; background-color: lightpink;">Sticky Position</div>
Lesson 9: Margin in CSS
Explanation:
This lesson will explain how to use margin in CSS to create space around elements.
Examples:
Margin Top:
html
Copy
<div style="margin-top: 20px; background-color: lightblue;">Margin Top</div>
Margin Right:
html
Copy
<div style="margin-right: 20px; background-color: lightgreen;">Margin Right</div>
Margin Bottom:
html
Copy
<div style="margin-bottom: 20px; background-color: lightcoral;">Margin Bottom</div>
Margin Left:
html
Copy
<div style="margin-left: 20px; background-color: lightgoldenrodyellow;">Margin Left</div>
Margin All Sides:
html
Copy
<div style="margin: 20px; background-color: lightpink;">Margin All Sides</div>
Lesson 10: Padding in CSS
Explanation:
This lesson will demonstrate how to use padding to create space inside elements.
Examples:
Padding Top:
html
Copy
<div style="padding-top: 20px; background-color: lightblue;">Padding Top</div>
Padding Right:
html
Copy
<div style="padding-right: 20px; background-color: lightgreen;">Padding Right</div>
Padding Bottom:
html
Copy
<div style="padding-bottom: 20px; background-color: lightcoral;">Padding Bottom</div>
Padding Left:
html
Copy
<div style="padding-left: 20px; background-color: lightgoldenrodyellow;">Padding Left</div>
Padding All Sides:
html
Copy
<div style="padding: 20px; background-color: lightpink;">Padding All Sides</div>
Lesson 11: CSS Transitions
Explanation:
CSS transitions allow you to change property values smoothly over a given duration.
Examples:
Basic Transition:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 2s;
}
.box:hover {
background-color: lightgreen;
}
</style>
<div class="box"></div>
Transition Multiple Properties:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 2s, height 2s;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
<div class="box"></div>
Timing Function:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
Delay Transition:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 2s ease-in-out 1s;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
Multiple States:
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 1s, transform 1s;
}
.box:hover {
background-color: lightgreen;
transform: rotate(45deg);
}
.box:active {
background-color: coral;
transform: scale(1.2);
}
</style>
<div class="box"></div>
Lesson 12: CSS Gradients
Explanation:
Gradients can be linear, radial, or conic. Here are 10 examples to illustrate different types and uses.
Examples:
Simple Linear Gradient:
css
Copy
.simple-linear {
background: linear-gradient(to right, red, yellow);
}
Diagonal Linear Gradient:
css
Copy
.diagonal-linear {
background: linear-gradient(to bottom right, blue, green);
}
Repeating Linear Gradient:
css
Copy
.repeating-linear {
background: repeating-linear-gradient(45deg, pink, pink 10px, purple 10px, purple 20px);
}
Radial Gradient:
css
Copy
.radial {
background: radial-gradient(circle, red, yellow, green);
}
Elliptical Radial Gradient:
css
Copy
.elliptical {
background: radial-gradient(ellipse at center, blue, green, yellow);
}
Repeating Radial Gradient:
css
Copy
.repeating-radial {
background: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
}
Conic Gradient:
css
Copy
.conic {
background: conic-gradient(from 0deg, red, yellow, green, blue, purple, red);
}
Gradient with Transparency:
css
Copy
.transparent-gradient {
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
}
Gradient Border:
css
Copy
.gradient-border {
border: 5px solid;
border-image: linear-gradient(to right, red, yellow) 1;
}
Text Gradient:
css
Copy
.text-gradient {
background: linear-gradient(to right, red, yellow);
-webkit-background-clip: text;
color: transparent;
}
Lesson 13: CSS Borders and Transparency
Explanation:
This lesson will cover how to use borders, border-radius, and transparency with the opacity property.
Examples:
Basic Border:
html
Copy
<div style="border: 2px solid black; width: 100px; height: 100px;">Basic Border</div>
Rounded Border:
html
Copy
<div style="border: 2px solid black; border-radius: 15px; width: 100px; height: 100px;">Rounded Border</div>
Dashed and Dotted Borders:
html
Copy
<div style="border: 2px dashed black; width: 100px; height: 100px;">Dashed Border</div>
<div style="border: 2px dotted black; width: 100px; height: 100px;">Dotted Border</div>
Different Borders on Each Side:
html
Copy
<div style="border-top: 2px solid black; border-right: 2px dashed black; border-bottom: 2px dotted black; border-left: 2px solid black; width: 100px; height: 100px;">Different Borders</div>
Transparent Background with Border:
html
Copy
<div style="border: 2px solid black; background-color: rgba(0, 0, 0, 0.1); width: 100px; height: 100px;">Transparent Background</div>
Opacity:
html
Copy
<div style="opacity: 0.5; background-color: lightblue; width: 100px; height: 100px;">50% Opacity</div>
Border and Opacity Combined:
html
Copy
<div style="border: 2px solid black; opacity: 0.5; background-color: lightblue; width: 100px; height: 100px;">Border & Opacity</div>
Border Radius with Transparency:
html
Copy
<div style="border: 2px solid black; border-radius: 50%; opacity: 0.7; background-color: lightgreen; width: 100px; height: 100px;">Rounded & Transparent</div>
Fancy Border and Transparency:
html
Copy
<div style="border: 4px double red; border-radius: 10px; opacity: 0.8; background-color: lightcoral; width: 100px; height: 100px;">Fancy Border</div>
Transparent Text with Border:
html
Copy
<div style="border: 2px solid black; color: rgba(0, 0, 0, 0.5); width: 100px; height: 100px;">Transparent Text</div>
Lesson 14: CSS Animations
Explanation:
This lesson will cover the basics of CSS animations, including defining keyframes and using the animation property.
Examples:
Simple Animation:
css
Copy
@keyframes changeColor {
from { background-color: red; }
to { background-color: yellow; }
}
.simple-animation {
width: 100px;
height: 100px;
background-color: red;
animation: changeColor 2s infinite;
}
Move Element:
css
Copy
@keyframes moveRight {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.move-element {
width: 100px;
height: 100px;
background-color: blue;
animation: moveRight 2s infinite;
}
Rotate Element:
css
Copy
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate-element {
width: 100px;
height: 100px;
background-color: green;
animation: rotate 2s infinite;
}
Fade In and Out:
css
Copy
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.fade-element {
width: 100px;
height: 100px;
background-color: pink;
animation: fadeInOut 3s infinite;
}
Scale Element:
css
Copy
@keyframes scaleUp {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
.scale-element {
width: 100px;
height: 100px;
background-color: purple;
animation: scaleUp 2s infinite;
}
HTML Structure:
html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Man</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="man-container">
<div class="head"></div>
<div class="body"></div>
<div class="feet"></div>
</div>
</body>
</html>
CSS Styling:
css
Copy
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.man-container {
display: grid;
grid-template-rows: auto 1fr auto;
width: 200px;
text-align: center;
}
.head {
background-color: #ffd700; /* Golden head */
height: 50px;
}
.body {
background-color: #87cefa; /* Stylish blue clothes */
height: 300px;
}
.feet {
background-color: #d2b48c; /* Skin-colored feet */
height: 50px;
}
