আসসালামু আলাইকুম। কেমন আছেন প্রিয় টেকটিউনস এর বন্ধুরা। আলহামদুলিল্লাহ আমিও ভালো আছি। ওবে ডিজাইন এর বাংলা সিরিজ টিউটোরিয়ালের আজকের ১৫ তম পর্বে আমি আপনাদেরকে স্বাগত জানাচ্চি ইন্জিনিয়ার মোঃ মারুফ সিদ্দিকী। আজ আমরা আলোচনা করবো HTML5 Responsive ওয়েব ডিজাইন নিয়ে। প্রথমেই আসুন জেনে নেই Responsive Web Design কি? Responsive Web Design এর সংঞ্জায় আমরা এক কথায় বলতে পারি, আমরা বিভিন্ন ডিভাইজ এ সাইটকে নিচের স্ক্রোল বাড় ছারা যেভাবে দেখতে পারি। ইংরেজিতে যদি আমরা বলি তাহলে তা দাড়ায় Responsive web design is about using HTML and CSS to automatically resize, hide, shrink or enlarge a website to make it look good on all devices (desktop, tablets and phones)
নিচের কোডটি আপনি আপনার HTML5 ফাইলে html সেকশান এর <body> section এ লিখুন। আমি এখানে কোডগুলো দিয়ে দিলাম। তবে অনুরোধ রইলো যদি কাজ শিখতে চান তাহলে আমার লেখা কোডগুলো কপি পেস্ট না করে টাইপ করুন।
<body style=”font-family: Verdana”>
<div style=”background-color: #1f1f1; padding: 15px;”>
<h1>Engineer Maruf</h1>
<h3>Engineer Maruf is the Founder of Saad Academy</h3>
</div>
<div style=”overflow: auto;”>
<div class=”menu”>
<div class=”menuitem”>The Walk</div>
<div class=”menuitem”>Transport</div>
<div class=”menuitem”>History</div>
<div class=”menuitem”>Gallery</div>
</div>
<div class=”main”>
<h2>The walk</h2>
<p>Take greeting from Saad acedemy. Saad acedemy is the largest online platform for learning freelancing</p>
<img src=”img/steve-jobs.jpg”>
</div>
<div class=”right”>
<h2>What?</h2>
<p>From Saad academy you will learn all about web design and development</p>
<h2>Where</h2>
</div>
</div>
</body>
এবারে আমরা এই html কোডগুলোকে CSS এর মাধ্যমে ডিজাইন করবো। আমি এখানে External CSS ব্যাবহার করেছি । আপনি কোর method ব্যাবহার করবেন এটা নিতান্তই আপনার ব্যাক্তিগত বিষয়। তবে প্রফেশনালি External Style ই ব্যাবহার করা হয়ে থাকে। নিচের কোডগুলো আপনার CSS ফাইলে গিয়ে টােইপ করুন।
*{
box-sizing: border-box;
}
.menu{
float: left;
width: 20%;
}
.menuitem{
padding: 8px;
margin-top: 7px;
border-bottom: 2px solid #1f1f1;
}
.main{
float: left;
width: 60%
padding0 20px;
overflow: hidden;
}
.right{
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
এবারে ব্রাউজপর এ গিয়ে সাইটটিকে রিলোড দিন। সাইটটিকে মাউস এর সাহায্যে ছোট বড় করে দেখুন। পুরো সাইটটি তার স্ক্রিন এর অনুপাতে ছোট বড় হচ্ছে।
এবার আমরা <head> section এ কেন এবং কিভাবে Viewport যোগ করতে হয় তা দেখাবো। viewport একটি মেটা ট্যাগ। যা নিম্নোক্তভাবে সাইটে সংযুক্ত করতে হয়।
<head>
<title>Engineer Maruf</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.00″>
</head>
আর্টিকেলটির সাথে সংযুক্ত ভিডিওটি ভালোভাবে দেখুন। আমি এই আর্টিকেলটির বিস্তারিত নিচের ভিডিওটিতে practically দেখিয়েছি। যারা লেখাটি পরে পরির্পর্ণভাবে বুঝতে পারেননি, তারা নিচের ভিডিওটি দেখে নিবেন। তার পরও কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।
 এইসটিএমএল৫ পর্ব–১৭-১){kind=link}