গত কোর্সে আমরা যা শিখেছি

গত পর্বে আমরা সিএসএস এর সাহায্যে বেসিক বডি স্টাইলিং, সিএসএস রিসেট ও সিএসএস দিয়ে হেডার স্টাইল করা শিখেছি।

 গত কোর্সের টিউন দেখুন এখানেঃ https://www.techtunes.io/web-design/tune-id/260869

 গত কোর্সের টিউটোরিয়াল দেখুন এখানেঃ http://www.youtube.com/watch?v=Ii5yindf4GE

আজকের কোর্স এ যা শিখবেন

 সিএসএস দিয়ে কন্টেন্ট স্টাইল করা

আজকে আমরা সিএসএস এর সাহায্যে আমাদের পেজ এর কন্টেন্ট অংশটিকে স্টাইল করবো। কন্টেন্ট অংশে ইমেজ গুলোকে সঠিক সাইজ এ এড করা, ইমেজ গুলোর পজিশন ঠিক করা, ফন্ট সাইজ ঠিক করা ইত্যাদি করতে হবে।

ভিডিও কোর্স

➡ Youtube Link: https://www.youtube.com/watch?v=k8rItjQvlmY

কন্টেন্ট স্টাইলিং

আমরা পিএসডি ফাইলটি দেখে দেখে কন্টেন্ট সেকশনটি ডিজাইন করবো। পিএসডি ফাইল থেকে ফন্ট সাইজ, কালার ইত্যাদি নিয়ে আমরা ডিজাইন করবো। ভিডিও দেখে স্টাইল করা শিখে নিন, নিচে কোড গুলো শেয়ার করা হলো।

কন্টেন্ট স্টাইলিং এ প্রথমেই আমরা মিডেল সেকশন টিকে স্টাইল করবো। নিচে এর কোড টুকু দেয়া হলো।

মিডেল সেকশন কোডঃ

/*-------------------------
			Slider
-------------------------*/
.slider {
	background:#81e4ed;
	padding-top:20px;
}

/*-------------------------
			Middle
-------------------------*/
.middle {
	background:#e8ebf1;
	padding:60px 0 50px 0;
	overflow:hidden;
	border-bottom:1px solid rgba(0,0,0,.2);
}
.span3 {
	width:240px;
	margin-right:10px;
	float:left;
}
.span3:last-child {
	margin-right:0;
}
.span3 h2 {
	text-transform:uppercase;
	font-size:15px;
	font-weight:bold;
	line-height:40px;
}
.span3 img {
	float:left;
	margin-right:20px;
	margin-left:15px;
}
.span3 p {
	margin-top:20px;
}

এরপর বটম সেকশনটি স্টাইল করবো।

বটম সেকশন কোডঃ

/*-------------------------
			Bottom
-------------------------*/
.bottom {
	background:#fff;
}
.latest {
	padding-top:20px;
}
.latest img {
	margin-right:36px;
}
.latest img:last-of-type {
	margin-right:0;
}
.latest img:first-child, .testimonial img:first-child, .clients img:first-child {
	float:left;
	margin-right:15px;
}
.latest h2, .testimonial h2, .clients h2 {
	text-transform:uppercase;
	font-weight:bold;
	font-size:15px;
	line-height:25px;
}
.testimonial h2, .clients h2 {
	margin-bottom:20px;
}
.latest hr {
	margin:20px auto;
}
.testimonial {
	width:500px;
	float:left;
	margin-right:20px;
}
.testimonial p {
	font-size:14px;
	color:#363636;
	line-height:1.5em;
}

ডাউনলোড বাটনটিকে স্টাইল করে নেইঃ

ডাউনলোড বাটন কোডঃ

/*-------------------------
			Download
-------------------------*/
.download {
	padding:30px;
	background:#e8fcfe;
	border:1px solid #81e4ed;
	overflow:hidden;
	margin-top:40px;
}
.download button {
	width:240px;
	height:60px;
	padding:15px;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	line-height:25px;
	outline:none;
	border:1px solid #2aacc8;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 2px 5px rgba(0,0,0,.3);
	box-shadow: 0px 2px 5px rgba(0,0,0,.3);

	background: #80e3ed; /* Old browsers */
	background: -moz-linear-gradient(top,  #80e3ed 0%, #94f7ff 1%, #80e3ec 2%, #73dbe7 49%, #5bcbdc 88%, #2aacc8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80e3ed), color-stop(1%,#94f7ff), color-stop(2%,#80e3ec), color-stop(49%,#73dbe7), color-stop(88%,#5bcbdc), color-stop(100%,#2aacc8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #80e3ed 0%,#94f7ff 1%,#80e3ec 2%,#73dbe7 49%,#5bcbdc 88%,#2aacc8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80e3ed', endColorstr='#2aacc8',GradientType=0 ); /* IE6-9 */
}
.download p {
	font-size:16px;
	color:#363636;
	width:610px;
	float:left;
	margin-right:80px;
	line-height:1.5em;
}
.download button img {
	margin-right:25px;
}

৪র্থ কোর্স থেকে কিছু প্রশ্নের উত্তর

 হেডার এ লোগো হিসেবে ইমেজ ব্যবহার করা হলেও এইচটিএমএল এ টেক্সট ব্যবহার করা হয়েছে কেন? আর লোগো ইমেজ টি সরাসরি এইচটিএমএল এ ব্যবহার না করে সিএসএস দিয়ে করা হয়েছে কেন?

এটি হচ্ছে স্টেন্ডার্ড স্টাইল। এছাড়াও এতে সার্চ ইঞ্জিন অপটিমাইজেশন এর কিছু সুবিধা রয়েছে। তাই এভাবে করা হয়।

৫ম কোর্সের উপসংহার

কন্টেন্ট অংশটিকে সিএসএস দিয়ে স্টাইল করে দেখিয়েছি। ডাউনলোড বাটন স্টাইল করা, আইকন ব্যবহার করা, টেক্সট পজিশন সাইজ ঠিক করা ইত্যাদি দেখিয়েছি। আশা করছি সহজ এবং সুন্দর ভাবেই আপনাদের বোঝাতে পেরেছি। কোন প্রকার সমস্যা থাকলে বা কোন প্রশ্ন থাকলে টিউমেন্ট করে ফেলুন এক্ষুনি... আর আমাকে পার্সোনালি নক করতেঃ https://www.facebook.com/r4k18ul

আগামী কোর্সের জন্য হোম টাস্ক

কন্টেন্ট অংশটি সিএসএস এর সাহায্যে নিজে নিজে স্টাইল করুন। এবং সম্পুর্ন প্রোজেক্ট এর ফোল্ডারটি জিপ করে নিচের ঠিকানায় সাবমিট করুন। এই হোমটাস্ক গুলোর মার্কিং হবে এবং মার্ক এর উপর ভিত্তি করে সার্টিফিকেট দেয়া হবে। তাই নিয়মিত হোমটাস্ক সাবমিট করতে ভুলবেন না।

 প্রোজেক্ট ফাইল জমা দেয়ার লিঙ্কঃ http://techtun.es/1iEFv5n

চুপ করে না থেকে প্রাসঙ্গিক প্রশ্ন করুন, করুন গঠনমূলক প্রশ্ন, তাহলেই শিখতে পারবেন

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

আগামী কোর্সে যা শিখবেন

আগামী পর্বে আমরা আমাদের এইচটিএমএল পেজটির কন্টেন্ট অংশটিকে স্টাইল করবো। কন্টেন্ট অংশে ইমেজ যোগ করা। তা সঠিক সাইজ এ পেজ এ ব্যবহার করা ইত্যাদি বিষয় গুলো আগামী পর্বে দেখানো হবে। অর্থাৎ আগামী পর্বও সিএসএস নিয়ে। সিএসএস দিয়ে পেজ এর আরেকটি অংশ স্টাইল করবো।

হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স এ আপনি ভর্তি হয়েছেন তো?

হাতে ধরে PSD2HTML পুর্নাঙ্গ চেইন কোর্স এ আপনি ভর্তি হয়েছেন তো? না হলে ভর্তি হয়ে যান বিশাল কমিউনিটির এই চেইন কোর্স এ এবং নিজেকে ঝালাই করে নিন PSD2HTML এ!

প্রায় ৩০০০ টিউজিটর ও টিউমেন্টর ভর্তি হয়েছেন বাংলাদেশের এই প্রথম ও সবচেয়ে বড় অনলাইন PSD2HTML পুর্নাঙ্গ কোর্স এ। আপনি বাদ থাকবেন কেন?

কোর্স এ ভর্তি হতে এই টিউনটি দেখুনঃ

টেকটিউনস এ চালু হচ্ছে!! “হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স”!! সম্পূর্ণ ফ্রি করুন PSD2HTML এর পূর্ণাঙ্গ কোর্স! সফল ও সঠিক ভাবে কোর্স সম্পন্নকারীরা পাবেন টেকটিউনস ভেরিফাইড সার্টিফিকেট!

কম্পিউটার লাভার () রাকিবুল হাসান।

 ইমেইলে পেয়ে যান আমার সকল টিউনের আপডেট! ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুনঃ টেকটিউনস » কম্পিউটার লাভার