পোর্টফোলিও ওয়েবসাইট ডিজাইন - পর্ব ২ - প্রথমে একটা বেসিক পোর্টফোলিও ওয়েবসাইট ডিজাইন শিখো

এবার আমরা একটা বেসিক পোর্টফলিও সাইট করে দেখবো।তো যারা জানো তারা জানো, যারা জানো না তারা তাদের এডিটর খুলো প্লিজ।
যেকোনো এডিটর ইউজ করা যেতে পারে, যার যেটা ভালো লাগে। আমি এনপিপি ইউজ করি :)



এবার আমরা তাহলে শুরু করি। আবার বলে রাখি, পোস্টটি নতুন্দের জন্য।

আমাদের আজকের প্রোজেক্টের ডেমো এবং কোডের ডাউনলোড লিঙ্ক পোস্টের একেবারে শেষে দেওয়া হয়েছে :)
প্রথমে একটা এইচটিএমএল ফাইল তৈরি করো, আমাদের একটা ডিরেক্টরি প্রয়োজন হবে। যারা লোকালহোস্ট দিয়ে কাজ করবে, তারা ইনডেক্স নাম দিয়ে করলে সুবিধা পাবে।
তো আমি ইনডেক্স ফাইলে প্রয়োজনীয় মেটা ট্যাগ দিয়ে নিচ্ছি, এখানে কেবল ব্যাসিক দেখাবো বলে কেবল দুইটি মেটা ট্যাগ দিচ্ছি। এর পরের পর্বে আরও কিছু দেখানো হবে :)

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


শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট