আমি আপনাকে সাধারণ একটি পোর্টফোলিও ওয়েবসাইট তৈরি করার পদ্ধতি দেখাবো HTML এবং CSS ব্যবহার করে। এটি এমন একটি সাইট হবে যেখানে আপনি আপনার পরিচয়, কাজের উদাহরণ, যোগাযোগের তথ্য এবং অন্যান্য গুরুত্বপূর্ণ বিষয় শেয়ার করতে পারবেন।
How to Build a Simple Portfolio Website with HTML & CSS
একটি পোর্টফোলিও ওয়েবসাইট ডিজাইন করা আপনার কাজের প্রদর্শন এবং আপনার দক্ষতা সম্পর্কে তথ্য প্রদান করার একটি সেরা উপায়। এই গাইডে, আমরা একটি সিম্পল পোর্টফোলিও ওয়েবসাইট ডিজাইন করব যেখানে আপনার নাম, সম্পর্কে তথ্য, কিছু কাজের উদাহরণ এবং যোগাযোগের তথ্য থাকবে।
ধাপ ১: HTML স্ট্রাকচার তৈরি করা
প্রথমে, HTML দিয়ে পেজের কাঠামো তৈরি করবো। এখানে আমরা কিছু সাধারণ সেকশন যুক্ত করব:
- হেডার
- সম্পর্কে তথ্য
- কাজের উদাহরণ
- যোগাযোগের তথ্য
- ফুটার
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>আমার পোর্টফোলিও</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<div class="container">
<h1>নোমান আহমেদ</h1>
<p>ওয়েব ডেভেলপার | ডিজাইনার</p>
</div>
</header>
<!-- About Me Section -->
<section id="about">
<div class="container">
<h2>আমার সম্পর্কে</h2>
<p>আমি একজন passionate ওয়েব ডেভেলপার। আমি বিভিন্ন ওয়েবসাইট ডিজাইন এবং ডেভেলপ করতে ভালোবাসি। আমার লক্ষ্য একটি ইউজার-ফ্রেন্ডলি এবং পারফরম্যান্ট ওয়েবসাইট তৈরি করা।</p>
</div>
</section>
<!-- My Work Section -->
<section id="work">
<div class="container">
<h2>আমার কাজ</h2>
<div class="work-item">
<h3>প্রকল্প ১</h3>
<p>এটি আমার প্রথম ওয়েবসাইট প্রজেক্ট। আমি এখানে HTML, CSS এবং JavaScript ব্যবহার করেছি।</p>
</div>
<div class="work-item">
<h3>প্রকল্প ২</h3>
<p>এটি একটি ই-কমার্স ওয়েবসাইট যা আমি সম্প্রতি ডেভেলপ করেছি।</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<h2>যোগাযোগ করুন</h2>
<p>আপনি যদি আমার কাজ নিয়ে কথা বলতে চান বা সহযোগিতা করতে চান, তাহলে নিচের যোগাযোগ ফর্ম ব্যবহার করতে পারেন।</p>
<form action="#" method="POST">
<input type="text" placeholder="আপনার নাম" required>
<input type="email" placeholder="আপনার ইমেল" required>
<textarea placeholder="আপনার বার্তা" required></textarea>
<button type="submit">পাঠান</button>
</form>
</div>
</section>
<!-- Footer Section -->
<footer>
<div class="container">
<p>© 2026 নোমান আহমেদ। সর্বস্বত্ব সংরক্ষিত।</p>
</div>
</footer>
</body>
</html>
এখানে, আমরা সিম্পলভাবে একটি হেডার, অ্যাবাউট সেকশন, ওয়ার্ক সেকশন, কন্টাক্ট সেকশন, এবং ফুটার সেকশন তৈরি করেছি। এটি সহজেই এক পেজে দেখানো যায় এবং পরবর্তীতে আপনি এটি কাস্টমাইজ করতে পারবেন।
ধাপ ২: CSS দিয়ে ডিজাইন তৈরি করা
এখন আমরা CSS দিয়ে ওয়েবসাইটটি সুন্দরভাবে ডিজাইন করবো। এখানে আমরা কিছু বেসিক স্টাইল যোগ করবো যাতে পেজটি পরিষ্কার এবং আধুনিক দেখায়।
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header Section */
header {
background: #333;
color: #fff;
padding: 30px 0;
text-align: center;
}
header h1 {
font-size: 2.5em;
}
header p {
font-size: 1.2em;
margin-top: 10px;
}
/* About Me Section */
#about {
background: #fff;
padding: 50px 0;
text-align: center;
}
#about h2 {
font-size: 2em;
margin-bottom: 20px;
}
#about p {
font-size: 1.2em;
width: 70%;
margin: 0 auto;
}
/* Work Section */
#work {
background: #f9f9f9;
padding: 50px 0;
text-align: center;
}
#work h2 {
font-size: 2em;
margin-bottom: 30px;
}
.work-item {
margin-bottom: 30px;
}
.work-item h3 {
font-size: 1.5em;
margin-bottom: 10px;
}
.work-item p {
font-size: 1.1em;
color: #555;
}
/* Contact Section */
#contact {
background: #fff;
padding: 50px 0;
text-align: center;
}
#contact h2 {
font-size: 2em;
margin-bottom: 20px;
}
#contact form {
max-width: 600px;
margin: 0 auto;
}
#contact input, #contact textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1em;
}
#contact button {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
}
#contact button:hover {
background-color: #555;
}
/* Footer Section */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
কোড ব্যাখ্যা:
-
হেডার: এটি আপনার নাম এবং পেশা প্রদর্শন করে। ব্যাকগ্রাউন্ড কালার হিসেবে গা dark ় #333 ব্যবহার করা হয়েছে এবং টেক্সট সাদা (white) রাখা হয়েছে যাতে এটি স্পষ্ট দেখায়।
-
অ্যাবাউট সেকশন: এখানে আপনার সম্পর্কে তথ্য প্রদর্শিত হবে। এই অংশে আপনি আপনার দক্ষতা এবং আগ্রহ নিয়ে বিস্তারিত বর্ণনা করতে পারেন।
-
ওয়ার্ক সেকশন: এখানে আপনার কাজের উদাহরণ থাকবে। আপনি ইমেজ বা প্রজেক্ট লিঙ্ক যোগ করতে পারেন। প্রতিটি কাজের জন্য একটি ছোট বর্ণনা থাকবে।
-
কন্টাক্ট সেকশন: এই অংশে একটি সিম্পল কন্টাক্ট ফর্ম রাখা হয়েছে, যেখানে ব্যবহারকারীরা আপনাকে তাদের নাম, ইমেল এবং বার্তা পাঠাতে পারবেন।
-
ফুটার: আপনার পোর্টফোলিও ওয়েবসাইটের নিচে একটি সাধারণ কপিরাইট ফুটার থাকবে।
ধাপ ৩: কাস্টমাইজেশন
- আপনি এই পোর্টফোলিও ওয়েবসাইটটি নিজের প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।
- আপনার কাজের উদাহরণ এবং সম্পর্কিত তথ্য আপডেট করুন।
- আপনি ইমেজ বা ভিডিও যুক্ত করতে পারেন কাজের অংশে, যেমন আপনার প্রজেক্টের স্ক্রিনশট বা ডেমো লিঙ্ক।
সমাপ্তি:
এটি একটি সহজ, এক পৃষ্ঠার পোর্টফোলিও ওয়েবসাইট ডিজাইন করার জন্য HTML এবং CSS এর ব্যবহার ছিল। আপনি যদি চাইলে আরও উন্নত ফিচার যেমন, এনিমেশন, JavaScript ইন্টিগ্রেশন, বা অন্য কোন ফিচার যোগ করতে পারেন।
এটি দিয়ে আপনি নিজের পরিচয়, কাজের উদাহরণ এবং যোগাযোগের তথ্য খুব সহজেই প্রদর্শন করতে পারবেন এবং এটি আপনাকে একটি প্রফেশনাল অনলাইন উপস্থিতি তৈরি করতে সাহায্য করবে।
এইভাবে আপনি একটি সিম্পল পোর্টফোলিও ওয়েবসাইট তৈরি করতে পারবেন HTML ও CSS দিয়ে।
