এবার আমরা একটা বেসিক পোর্টফলিও সাইট করে দেখবো।তো যারা জানো তারা জানো, যারা জানো না তারা তাদের এডিটর খুলো প্লিজ।
যেকোনো এডিটর ইউজ করা যেতে পারে, যার যেটা ভালো লাগে। আমি এনপিপি ইউজ করি :)
এবার আমরা তাহলে শুরু করি। আবার বলে রাখি, পোস্টটি নতুন্দের জন্য।
আমাদের আজকের প্রোজেক্টের ডেমো এবং কোডের ডাউনলোড লিঙ্ক পোস্টের একেবারে শেষে দেওয়া হয়েছে :)
এবার আমরা এইচটিএমএল এবং সিএসএস কোড লেখা শুরু করতে পারি
আমাদের প্রথমে ওয়েবপেইজের মেইন স্ট্রাকচার দাড়া করাতে হবে।
নিচে আমার ওয়েবপেইজের স্ট্রাকচারের কোড দিলাম :)
এবং সিএসএস কোড,
এবার আমরা কোড রান করলে দেখতে পাবো,
এবার আমরা পোর্টফলিও করা শুরু করবো,
আগে আমরা আমাদের স্টাইলশিটে নিচের সিএসএস কোড অ্যাড করে নেই,
এবার আমাদের প্রতিটি ছবির জন্য একবার করে একটা ইমেজ কন্টেইনার বসাতে হবে।
কন্টেইনারের কোড হলো,
প্রশ্ন করতে পারো যে, আমি কেনো আবার ইমেজ কন্টেইনার নামে আবার আরেকটা ডিভিশন তৈরি করেছি। এটা বাদ দিলেও তো হতো... আচ্ছা, বাদ দিয়ে দেখ।
এটা তোমার পোর্টফলিও ইমেজ গুলোকে রেস্পন্সিভ করে এবং অভারফ্লো দেখাতে দেয় না। ফলে আমরা একটা ক্লিন ডিজাইনের পোর্টফলিও দেখতে পাই।
এবার আমরা সেইভ করে ফলাফল দেখি,
এবার ফাইনাল কোড;
HTML:
এবং CSS কোডঃ
এবার তোমরা চাইলে প্রোজেক্টের ফাইল ডাউনলোড করে নিতে পারো বা এখানে এই লিঙ্ক থেকে ডেমো দেখে নিতে পারো। এরপরের পর্বে তোমাদের আমার ডিজাইন করা টেম্পলেটটি দেবো এবং শিখিয়ে দেবো কিভাবে প্রফেশনাল এইচটিএমএল পোর্টফলিও টেম্পলেট ডিজাইন করা।
তাই আমার সাথেই থাকো। আমার সাথে অথবা আমাদের ফেইসবুক পেইজে লাইক অথবা ফলো দিয়ে একটিভ থাকো, তবে আমি ফেইসবুক পোস্টের মাধ্যমে তোমাদের নোটিফাই করতে পারবো।
যেকোনো এডিটর ইউজ করা যেতে পারে, যার যেটা ভালো লাগে। আমি এনপিপি ইউজ করি :)
আমাদের আজকের প্রোজেক্টের ডেমো এবং কোডের ডাউনলোড লিঙ্ক পোস্টের একেবারে শেষে দেওয়া হয়েছে :)
প্রথমে একটা এইচটিএমএল ফাইল তৈরি করো, আমাদের একটা ডিরেক্টরি প্রয়োজন হবে। যারা লোকালহোস্ট দিয়ে কাজ করবে, তারা ইনডেক্স নাম দিয়ে করলে সুবিধা পাবে।
তো আমি ইনডেক্স ফাইলে প্রয়োজনীয় মেটা ট্যাগ দিয়ে নিচ্ছি, এখানে কেবল ব্যাসিক দেখাবো বলে কেবল দুইটি মেটা ট্যাগ দিচ্ছি। এর পরের পর্বে আরও কিছু দেখানো হবে :)
Meta Tag দেওয়া
Meta Tag দেওয়া
<html>
<head>
<title>Tawsif Torabi's Portfolio Website</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
</body>
</html>
এই হেড ট্যাগে ওয়েবপেইজের টাইটেল এবং একটি সিএসএস ফাইলকে লিঙ্ক করা হয়েছে।
এবার আমাদের স্টাইলশিট ফাইল বা সিএসএস ফাইল তৈরি করতে হবে।
নোটঃ
যে নাম লিঙ্ক করা হবে সেটির নামেই স্টাইলশিট ফাইলের নাম দিতে হবে।
যে নাম লিঙ্ক করা হবে সেটির নামেই স্টাইলশিট ফাইলের নাম দিতে হবে।
এবার আমরা এইচটিএমএল এবং সিএসএস কোড লেখা শুরু করতে পারি
আমাদের প্রথমে ওয়েবপেইজের মেইন স্ট্রাকচার দাড়া করাতে হবে।
নিচে আমার ওয়েবপেইজের স্ট্রাকচারের কোড দিলাম :)
<html>
<head>
<title>Tawsif Torabi's Portfolio Website</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<center>
<div class="header">
<h2>Simple Portfolio Website</h2>
<h4>My Photography and Graphics Works</h4>
</div>
</center>
</body>
</html>
এবং সিএসএস কোড,
body{ background-color: skyblue; font-family: Arial;}h2{ font-size: 35px; text-shadow: 1px 1px 2px black;}.header{ border-radius: 9px; padding: 2px 6px; background-color: white; box-shadow: 0px 0px 8px black;}
এবার আমরা কোড রান করলে দেখতে পাবো,
এবার আমরা পোর্টফলিও করা শুরু করবো,
আগে আমরা আমাদের স্টাইলশিটে নিচের সিএসএস কোড অ্যাড করে নেই,
.portfolio-item { width: 182px; padding: 4px; background: #eee; text-align: center; float: left; margin: 0 7px 14px 7px;}.portfolio-item p.btn { margin: 0;}
.picture-items { height: 150px; width: auto;}
.portfolio-item p.btn a { display: block; width: 183px; height: 29px; padding: 7px 0 0 0; background-color: #b5deff; font-weight: bold; text-align: center; text-decoration: none;}#content { padding: 57px 69px 50px 69px; overflow: hidden;}.imageContainer { overflow: hidden;}
এবার আমাদের প্রতিটি ছবির জন্য একবার করে একটা ইমেজ কন্টেইনার বসাতে হবে।
কন্টেইনারের কোড হলো,
<div class="portfolio-item">
<div class="imageContainer">
<a href="#">
<img class="picture-items" src="images/9.jpg" alt="View more info" />
</a>
</div>
<p class="btn"><a href="#">See more</a></p>
</div>
See More লেখার মাঝে কোনো লিঙ্ক বা ইমেইজের ডিটেইল দেওয়া যেতে পারে।
উপরের কোডটি প্রতিটী ইমেজের জন্য ডুপ্লিকেট করে নিতে হবে।
যেমন,
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/1.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div> <div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/2.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/3.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/4.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
প্রশ্ন করতে পারো যে, আমি কেনো আবার ইমেজ কন্টেইনার নামে আবার আরেকটা ডিভিশন তৈরি করেছি। এটা বাদ দিলেও তো হতো... আচ্ছা, বাদ দিয়ে দেখ।
এটা তোমার পোর্টফলিও ইমেজ গুলোকে রেস্পন্সিভ করে এবং অভারফ্লো দেখাতে দেয় না। ফলে আমরা একটা ক্লিন ডিজাইনের পোর্টফলিও দেখতে পাই।
এবার আমরা সেইভ করে ফলাফল দেখি,
HTML:
<html>
<head>
<title>Tawsif Torabi's Portfolio Website</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<center>
<div class="header">
<h2>Simple Portfolio Website</h2>
<h4>My Photography and Graphics Works</h4>
</div>
<div id="content">
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/1.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/2.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/3.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/4.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/5.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/6.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/7.png" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/8.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/9.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/9.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/9.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
<div class="portfolio-item">
<div class="imageContainer"><a href="#"><img class="picture-items" src="images/9.jpg" alt="View more info" /></a></div>
<p class="btn"><a href="#">See more</a></p>
</div>
</div>
</center>
</body>
</html>
এবং CSS কোডঃ
body{
background-color: skyblue;
font-family: Arial;
}
h2{
font-size: 35px;
text-shadow: 1px 1px 2px black;
}
.header{
border-radius: 9px;
padding: 2px 6px;
background-color: white;
box-shadow: 0px 0px 8px black;
}
.clear{
height: 100px;
}
.portfolio-item {
width: 182px;
padding: 4px;
background: #eee;
text-align: center;
float: left;
margin: 0 7px 14px 7px;
}
.portfolio-item
p.btn {
margin: 0;
}
.picture-items {
height: 150px;
width: auto;
}
.portfolio-item
p.btn
a {
display: block;
width: 183px;
height: 29px;
padding: 7px 0 0 0;
background-color: #b5deff;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#content {
padding: 57px 69px 50px 69px;
overflow: hidden;
}
.imageContainer {
overflow: hidden;
}
এবার তোমরা চাইলে প্রোজেক্টের ফাইল ডাউনলোড করে নিতে পারো বা এখানে এই লিঙ্ক থেকে ডেমো দেখে নিতে পারো। এরপরের পর্বে তোমাদের আমার ডিজাইন করা টেম্পলেটটি দেবো এবং শিখিয়ে দেবো কিভাবে প্রফেশনাল এইচটিএমএল পোর্টফলিও টেম্পলেট ডিজাইন করা।
তাই আমার সাথেই থাকো। আমার সাথে অথবা আমাদের ফেইসবুক পেইজে লাইক অথবা ফলো দিয়ে একটিভ থাকো, তবে আমি ফেইসবুক পোস্টের মাধ্যমে তোমাদের নোটিফাই করতে পারবো।
আমার সাথে ফেইসবুকে অ্যাড হতে পারো :)
fb.com/tawsif.torabi