Awesome! টিউনস
সকল Awesome! টিউনস

CSS Template কীভাবে তৈরী করবেন? শিখুন

1,327 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

হ্যালো বন্ধুরা আপনারা কেমন আছেন? আজকে আপনাদের জন্য নিয়ে আশাকরি আগে যা আলোচনা করা হয়েছে তা আপনারা ভালোভাবে প্রাকটিস করেছেন বা করছেন। তো আজকে যে টপিক নিয়ে আলোচনা হবে তা আপনাদের খুব ভালোভাবে প্র্রাকটিস করতে হবে।
তো চলুন শুরু করা যাক আমাদের আজকের আলোচনা তার আগে আমরা কোডিং করে নিই।

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}

body {margin: 0; font-family: Arial, Helvetica, sans-serif;}

/* Style the top navigation bar */.topnav {overflow: hidden; background-color: #333;}

/* Style the topnav links */.topnav a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;}

/* Change color on hover */.topnav a:hover {background-color: #ddd; color: black;}

/* Style the content */.content {background-color: #ddd; padding: 10px; height: 800px; /* Should be removed. Only for demonstration */}

/* Style the footer */.footer {background-color: #f1f1f1; padding: 10px;}
</style>
</head>
<body>

<div class="topnav"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a>
</div>

<div class="content"> <h2>CSS Template</h2> <p>A topnav, content and a footer.</p><br> <p>Such as: Oval is the most imprtant city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it.</p><br>
<p>In this example, we have created a header, two columns/boxes and a footer.Resize the browser window to see the responsive effect you will learn more about this in our next chapter.</p>
</div>

<div class="footer"> <p>Footer</p>
</div>

</body>
</html>

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

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

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস