Complete Web Designing Course for Beginners

MODULE 3 – CSS Fundamentals

🏆 Lesson 3.9 – Mini Project: Beautiful Profile Card

🎨 Building a Professional Student Profile Card Using HTML & CSS

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Combine HTML and CSS Concepts

✅ Create a Professional Profile Card

✅ Apply Colors & Backgrounds

✅ Use Fonts & Typography

✅ Apply Borders & Shadows

✅ Create Stylish Buttons

✅ Build Real-World UI Components

✅ Design Modern Website Sections

📖 Introduction

Congratulations! 🎉

You have completed:

✅ Introduction to CSS

✅ Inline CSS

✅ Internal CSS

✅ External CSS

✅ Colors & Backgrounds

✅ Fonts & Typography

✅ Borders & Shadows

✅ Styling Links & Buttons

Now it’s time to combine everything into a real project.

🌟 What is a Profile Card?

A Profile Card is a small section that displays information about a person.

Examples:

Student Profile

Teacher Profile

Employee Profile

Developer Profile

Portfolio Website Card

🎯 Real World Example

You may have seen profile cards on:

LinkedIn
Facebook
Instagram
Portfolio Websites
College Websites

Example:

---------------------------------

Rahul Kumar

Polytechnic Student

Learning Web Designing

[ Contact Me ]

---------------------------------

🎯 Project Requirements

Our Profile Card will contain:

✅ Name

✅ Student Information

✅ Skills

✅ About Section

✅ Contact Button

✅ Beautiful Design

🏗️ Project Structure

Profile Card

-------------------------

Student Name

Student Information

Skills

About

Contact Button

-------------------------

💻 Step 1 – Create HTML Structure

<!DOCTYPE html>

<html>

<head>

<title>Profile Card</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

🎯 Step 2 – Create Card Container

Inside body:

<div class="card">

</div>

Why?

The card container will hold all profile information.

🎯 Step 3 – Add Student Name

<div class="card">

<h1>Rahul Kumar</h1>

</div>

Output

Student Name appears.

🎯 Step 4 – Add Student Information

<p>Polytechnic Student</p>

<p>Computer Science Branch</p>

Example

<div class="card">

<h1>Rahul Kumar</h1>

<p>Polytechnic Student</p>

<p>Computer Science Branch</p>

</div>

🎯 Step 5 – Add Skills

<h3>Skills</h3>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Output

Skills section appears.

🎯 Step 6 – Add About Section

<h3>About Me</h3>

<p>

I am learning Web Designing and
want to become a Full Stack Developer.

</p>

🎯 Step 7 – Add Contact Button

<button>

Contact Me

</button>

HTML Structure Completed

<div class="card">

<h1>Rahul Kumar</h1>

<p>Polytechnic Student</p>

<p>Computer Science Branch</p>

<h3>Skills</h3>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h3>About Me</h3>

<p>

I am learning Web Designing and
want to become a Full Stack Developer.

</p>

<button>

Contact Me

</button>

</div>

🎨 Step 8 – Style Body

CSS

body{

background-color:#f5f5f5;

font-family:Arial;

}

Result

Light background.

Professional appearance.

🎨 Step 9 – Style Card

.card{

width:350px;

background-color:white;

padding:20px;

margin:auto;

}

Result

Card appears centered.

🎨 Step 10 – Add Border

.card{

border:2px solid blue;

}

Result

Blue border appears.

🎨 Step 11 – Add Rounded Corners

.card{

border-radius:15px;

}

Result

Modern rounded design.

🎨 Step 12 – Add Shadow

.card{

box-shadow:5px 5px 15px gray;

}

Result

Professional shadow effect.

🎨 Step 13 – Style Heading

h1{

color:blue;

text-align:center;

}

Result

Blue centered heading.

🎨 Step 14 – Style Paragraphs

p{

font-size:18px;

line-height:28px;

}

Result

Easy-to-read text.

🎨 Step 15 – Style Button

button{

background-color:green;

color:white;

padding:10px 20px;

border:none;

border-radius:10px;

}

Result

Modern green button.

🎨 Step 16 – Add Button Hover Effect

button:hover{

background-color:darkgreen;

cursor:pointer;

}

Result

Interactive button.

💻 Complete Project Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>Beautiful Profile Card</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="card">

<h1>Rahul Kumar</h1>

<p>Polytechnic Student</p>

<p>Computer Science Branch</p>

<h3>Skills</h3>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h3>About Me</h3>

<p>

I am learning Web Designing and
want to become a Full Stack Developer.

</p>

<button>

Contact Me

</button>

</div>

</body>

</html>

style.css

body{

background-color:#f5f5f5;

font-family:Arial;

}

.card{

width:350px;

background-color:white;

padding:20px;

margin:auto;

border:2px solid blue;

border-radius:15px;

box-shadow:5px 5px 15px gray;

}

h1{

color:blue;

text-align:center;

}

p{

font-size:18px;

line-height:28px;

}

button{

background-color:green;

color:white;

padding:10px 20px;

border:none;

border-radius:10px;

}

button:hover{

background-color:darkgreen;

cursor:pointer;

}

🎯 Expected Output

--------------------------------

Rahul Kumar

Polytechnic Student

Computer Science Branch

Skills

• HTML
• CSS
• JavaScript

About Me

Learning Web Designing

[ Contact Me ]

--------------------------------

With:

✅ Blue Border

✅ Rounded Corners

✅ Shadow Effect

✅ Professional Button

🏫 Real World Applications

Profile cards are used in:

✅ Portfolio Websites

✅ College Websites

✅ Student Management Systems

✅ Employee Management Systems

✅ Company Websites

🌟 Enhancement Ideas

Add:

✅ Student Photo

✅ Social Media Links

✅ Email Address

✅ Phone Number

✅ Skill Progress Bars

⚠️ Common Beginner Mistakes

Mistake 1

Not Using External CSS

Keep CSS separate.

Mistake 2

Very Large Shadow

Wrong:

box-shadow:20px 20px 50px black;

Use:

box-shadow:5px 5px 15px gray;

Mistake 3

Too Many Colors

Limit to:

Blue
White
Gray
Green

Professional appearance.

🌟 Best Practices

✅ Use professional colors.

✅ Use rounded corners.

✅ Add subtle shadows.

✅ Use proper spacing.

✅ Keep design clean.

🏆 Final Mini Project Challenge

Create your own:

Student Profile Card

Include:

✅ Name

✅ College

✅ Branch

✅ Skills

✅ About Me

✅ Contact Button

Add your own styling.

📝 Practical Activity

Create a profile card for yourself.

Include:

Name
College Name
Branch
Skills
Career Goal

Apply:

✅ Border

✅ Border Radius

✅ Shadow

✅ Hover Button

Run it in Chrome Browser.

📋 Assignment

Assignment 3.9

What is a Profile Card?
Why are profile cards used?
Which property creates shadows?
Which property creates rounded corners?
Create a profile card using HTML and CSS.
Add a contact button.
Add hover effects.

🧠 Quiz

Q1. Which property creates rounded corners?

A. border

B. radius

C. border-radius

D. round

✅ Answer: C

Q2. Which property creates element shadows?

A. shadow

B. box-shadow

C. text-shadow

D. border-shadow

✅ Answer: B

Q3. Which property changes background color?

A. color

B. bg

C. background-color

D. fill

✅ Answer: C

Q4. Which property changes font style?

A. font-family

B. text-family

C. style

D. family

✅ Answer: A

Q5. Which pseudo-class creates hover effects?

A. click

B. active

C. hover

D. over

✅ Answer: C

📌 Module 3 Summary – CSS Fundamentals

You have successfully learned:

✅ Lesson 3.1 – Introduction to CSS

✅ Lesson 3.2 – Inline CSS

✅ Lesson 3.3 – Internal CSS

✅ Lesson 3.4 – External CSS

✅ Lesson 3.5 – Colors & Backgrounds

✅ Lesson 3.6 – Fonts & Typography

✅ Lesson 3.7 – Borders & Shadows

✅ Lesson 3.8 – Styling Links & Buttons

✅ Lesson 3.9 – Mini Project: Beautiful Profile Card