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

হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স [পর্ব-০৩] :: এইচটিএমএল টিপস ও বেসিক এইচটিএমএল মার্কআপ তৈরি

11,592 দেখা 120 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

101 টিউনস 1258 টিউমেন্টস 20 ফলোয়ার

PSD2HTML পূর্ণাঙ্গ চেইন কোর্স

সবাইকে আবারো স্বাগতম জানাচ্ছি হাতে ধরে PSD2HTML পুর্ণাঙ্গ চেইন কোর্স এর ৩য় পর্বে।

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

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

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

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

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

➡ এইচটিএমএল বেসিক টিপস

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

➡ পিএসডি টেমপ্লেট এর এইচটিএমএল মার্কাপ তৈরি

আমরা পিএসডি টেমপ্লেট টিকে সম্পুর্ন এইচটিএমএল এ পরিণত করবো। এটা অবশ্য আমরা কোন মেশিন এর সাহায্যে করবো না 😛 আমরা পিএসডি ফাইল টি দেখে দেখে সেটার এইচটিএমএল মার্কাপ তৈরি করবো।

ভিডিও কোর্স

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

এইচটিএমএল টিপস

এইচটিএমএল কমেন্টস

এইচটিএমএল মার্কাপ লিখার সময় আমরা কমেন্ট ব্যবহার করবো। এটা শুধু এই প্রোজেক্ট এ না, আপনারা আপনাদের সব ধরনের এইচটিএমএল এর কাজে কমেন্ট ব্যবহার করবেন। এটি খুবি উপকারি একটি কাজ এবং কাজের দক্ষতা প্রকাশ করে।

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

এইচটিএমএল কমেন্ট এর উদাহরণঃ


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>	<!-- Main class started -->
		<h1>This is a heading</h1>	<!-- Top heading -->

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>	<!-- Main class ends -->
</body>
</html>

এখানে নিচের অংশ গুলো হচ্ছে কমেন্ট।


<!-- Main class started -->

<!-- Top heading -->

<!-- Main class ends -->

প্রথম লাইন টি দিয়ে একটি ক্লাস এর শুরু বোঝানো হয়েছে। দ্বিতীয় লাইন দিয়ে একটি হেডিং কে বোঝানো হয়েছে। ৩য় লাইনে ওই ক্লাস এর শেষ বোঝানো হয়েছে।

এভাবে আমরা একটি এইচটিএমএল পেজ এর বিভিন্ন কোড এর পাশে কমেন্ট ব্যবহার করে কোড গুলো কে ক্লিয়ার করবো।

ফায়ারবাগ

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

এটি আপনি মোজিলা ফায়ারফক্স এ ব্যবহার করতে পারবেন। যেকোনো ওয়েবপেজ এ গিয়ে রাইট ক্লিক করে Inspect elements with Firebug এ ক্লিক করলেই দেখবেন পেজের নিচে একটি বক্স ওপেন হয়ে এবং আপনি এখানে এডিট করতে পারছেন।

➡ ফায়ারবাগ ডাউনলোড করুনঃ https://getfirebug.com/

বেসিক এইচটিএমএল মার্কআপ তৈরি

প্রোজেক্ট এনভাইরনমেন্ট তৈরি

প্রথমেই আমাদের কে একটি প্রোজেক্ট এনভাইরনমেন্ট তৈরি করতে হবে। যাতে ভবিষ্যতে আমাদের কাজ করতে সুবিধা হয়।

  • প্রথমে ডেস্কটপ এ যেকোনো নামে একটি ফোল্ডার তৈরি করে নিন। (যেমনঃ PSD to HTML)
  • এটার ভিতরে images নামে একটি ফোল্ডার তৈরি করুন। এবং এর ভিতরে আমাদের গত পর্বে স্লাইস করা ইমেজ গুলো রাখুন।
  • ইমেজ গুলো ব্যবহারের সুবিধার্থে আমি এগুলোকে রিনেম করে নিয়েছি। আপনি ইমেজ গুলোকে নিচের মত করে রিনেম করে নিন।

➡ অথবা ইমেজ গুলোর জিপ ফাইল ডাউনলোড করে নিনঃ https://db.tt/BXudDETs

  • মেইন ফোল্ডার এ একটি index.html তৈরি করুন।

এইচটিএমএল ফাইল তৈরি করা

এবার এইচটিএমএল ফাইলটিতে কিছু বেসিক মার্কাপ যুক্ত করতে হবে।

  • এইচটিএমএল ফাইলের বেসিক টেমপ্লেট লিখে শুরু করুন।

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<header>
		<!-- header content -->
	</header>
	<div class="slider">
		<!-- slider content -->
	</div>
	<div class="middle">
		<!-- middle content -->
	</div>
	<div class="bottom">
		<!-- bottom content -->
	</div>
	<footer>
		<!-- footer content -->
	</footer>
</body>
</html>
  • উপরের কোড টি index.html এ লিখে পেজ টি সেভ করুন।
  • খেয়াল করুন এখানে আমরা চারটি অংশ দিয়েছি। হেডার অংশ, স্লাইডার অংশ, মিডেল অংশ, বটম অংশ এবং ফুটার অংশ।
  • <header> এ লোগো ও নেভিগেশন বার থাকবে। <div class="slider"> এ স্লাইডার থাকবে। <div class="middle"> এ কন্টেন্ট থাকবে। <div class="bottom"> এ লেটেস্ট ওয়ার্ক, টেস্টিমোনিয়াল, ক্লায়েন্টস এবং কল টু একশন (ডাউনলোড বক্স) থাকবে। <footer> এ ফুটার এর অংশ টুকু থাকবে।

হেডিং এর মার্কাপ

হেডার এ আমাদের দুইটি অংশ, লোগো এবং নেভিগেশন বার। তাহলে চলুন এর এইচটিএমএল কোড টি লিখে ফেলি।

	<header>
		<div class="container">
		<a href="#">
			<div class="logo"><h1>Techtunes</h1></div>
		</a>
			<nav>
				<ul>
					<li><a href="#">home</a></li>
					<li><a href="">about us</a></li>
					<li><a href="">services <span class="drop"></span></a>
						<ul>
							<li><a href="">Web Design</a></li>
							<li><a href="">Wordpress Design</a></li>
							<li><a href="">Mobile App Development</a></li>
							<li><a href="">Internet Marketing</a></li>
							<li><a href="">Social Media Management</a></li>
						</ul>
					</li>
					<li><a href="">portfolio <span class="drop"></span></a>
						<ul>
							<li><a href="">Personal</a></li>
							<li><a href="">Corporate</a></li>
						</ul>
					</li>
					<li><a href="">blog</a></li>
					<li><a href="">contact us</a></li>
				</ul>
			</nav>
		</div>
	</header>
  • <header> এর মধ্যে একটি <div> ট্যাগ করা হয়েছে, যেটা আমাদের পেজ এর উইথ ঠিক করবে এবং পেজ কন্টেন্ট গুলোকে মাঝখানে রাখবে।
  • লোগো এর জন্য একটি <div> ট্যাগ করেছি।
  • <nav> ট্যাগ এর মধ্যে আমরা আমাদের ড্রপডাউন নেভিগেশন মেনু টি করেছি। নেভিগেশন মেনু করতে আমরা Unorderd List (ul) ব্যবহার করেছি।
  • উপরের কোড এ আমরা কিছু class নেম ব্যবহার করেছি। এগুলো আমাদের সিএসএস কোডিং করতে লাগবে।
  • এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করে

স্লাইডার এর মার্কাপ

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


	<div class="slider">
		<div class="container">
			<div class="slider-wrapper theme-default">
	            <div id="slider" class="nivoSlider">
	                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
	                <img src="images/up.jpg" data-thumb="images/up.jpg" alt="" />
	                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
	                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
	            </div>
	            <div id="htmlcaption" class="nivo-html-caption">
	                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
	            </div>
        	</div>
		</div>
	</div>
  • এখানে অনেক কিছুই হয়তো বুঝবেন না। কারন এখানে আমরা স্লাইডার এর জন্য নিভো স্লাইডার নামক একটি প্লাগিন ব্যবহার করছি। সেই স্লাইডার এর জন্য উপরের এই মার্কাপ। এই মার্কাপ নিভো স্লাইডার এর ডকুমেন্টেশন থেকে নেয়া। স্লাইডার পর্বে এগুলো নিয়ে বিস্তারিত আলোচনা করা হবে। আপাতত এখানে বোঝার কিছু নেই। শুদু কোড গুলো দেখে লিখে ফেলুন।
  • এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করে

মিডেল কন্টেন্ট এর মার্কাপ

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


	<div class="middle">
		<div class="container">
			<div class="span3">
				<img src="images/eclipse1.png" alt="Icon">
				<h2 class="cf">clean theme</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas cupiditate eaque mollitia officiis esse! Atque, quia labore deleniti consequatur unde qui rem culpa autem doloremque nobis libero modi ab natus?</p>
			</div>
			<div class="span3">
				<img src="images/eclipse2.png" alt="Icon">
				<h2 class="cf">responsive design</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, iste soluta cupiditate incidunt eligendi ex dolorum maxime odio et animi necessitatibus earum dignissimos doloremque accusamus eveniet fugiat illum porro maiores.</p>
			</div>
			<div class="span3">
				<img src="images/eclipse3.png" alt="Icon">
				<h2 class="cf">fully layerd psd</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, sed, quos, illum voluptatem nisi tenetur quia ullam officia consequuntur aspernatur eius velit amet atque repellat nam explicabo totam voluptates cumque.</p>
			</div>
			<div class="span3">
				<img src="images/eclipse4.png" alt="Icon">
				<h2 class="cf">ready for coding</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, earum, dolorem voluptates recusandae tenetur voluptatum deserunt nemo beatae cupiditate et? Magni, expedita, quo fugiat pariatur consequatur maxime sapiente harum cum!</p>
			</div>
		</div>
	</div>
  • এখানে প্রতিটি অংশের জন্য span3 নামের ক্লাস দিয়ে আলাদা div ট্যাগ করেছি।
  • প্রতিটি div তে আইকন, হেডিং, ও পেরাগ্রাফ আছে।
  • এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করে

বটম কন্টেন্ট এর মার্কাপ

বটম কন্টেন্ট এর জন্য নিচের মার্কাপ টি লিখুনঃ


	<div class="bottom">
		<div class="container">
			<div class="latest">
			<img src="images/eclipse5.png" alt="Icon">
			<h2>Latest Works</h2>
			<span class="left_arrow"></span><span class="right_arrow"></span>
			<hr>
			<img src="images/thumb1.png" alt="Thumbnail 1">
			<img src="images/thumb2.png" alt="">
			<img src="images/thumb3.png" alt="">
			<img src="images/thumb4.png" alt="">
			<hr>
			</div>
			<div class="testimonial">
				<img src="images/eclipse6.png" alt="Icon">
				<h2>testimonials</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla.
				<br><br><br>
				<span>John Travis, CEO, DomainName.com</span></p>
			</div>
			<div class="clients cf">
				<img src="images/eclipse7.png" alt="Icon" class="cf">
				<h2>Clients</h2>
				<img src="images/logos.png" alt="Client Logos">
			</div>
			<div class="download">
				<p>This is a clean and modern, four column website PSD template. You can code it into a WordPress website, HTML5 responsive website for your personal or client works. So ahead and download this wonderful PSD template!</p>
				<button><img src="images/down.png" alt=""> Download</button>
			</div>
		</div>
	</div>
  • এখানে কন্টেন্ট অনুযায়ী আলাদা div করে নিয়েছি। প্রয়োজনীয় টেক্সট পেরাগ্রাফ এ এড করা হয়েছে।
  • এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করে

ফুটার এর মার্কাপ

ফুটার এর জন্য নিচের কোডটুকু লিখুনঃ


	<footer>
		<div class="container">
			<div class="about">
				<h2>About Us</h2>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros. Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
				</p>
			</div>
			<div class="explore">
				<h2>Explore</h2>
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Portfolio</a></li>
					<li><a href="">Blog</a></li>
				</ul>
			</div>
			<div class="browse">
				<h2>Browse</h2>
				<ul>
					<li><a href="">Careers</a></li>
					<li><a href="">Press &amp; Media</a></li>
					<li><a href="">Contact Us</a></li>
					<li><a href="">Terms of Service</a></li>
					<li><a href="">Privacy Policy</a></li>
				</ul>
			</div>
			<div class="contact">
				<h2>Contact us</h2>
				<p><b>BisLite Inc.</b><br>
				Always Street 265<br>
				0X - 125 - Canada</p>

				<p>Phone: 987-6543-210 <br>
				Fax: 987-6543-210</p>
			</div>
			<div class="connect">
				<h2>Connect with us</h2>
				<ul>
					<li><a href=""><img src="images/social_1.png" alt=""></a></li>
					<li><a href=""><img src="images/social_2.png" alt=""></a></li>
					<li><a href=""><img src="images/social_3.png" alt=""></a></li>
					<li><a href=""><img src="images/social_4.png" alt=""></a></li>
					<li><a href=""><img src="images/social_5.png" alt=""></a></li>
					<li><a href=""><img src="images/social_6.png" alt=""></a></li>
				</ul>
			</div>
			<div class="logo"></div>
			<div class="copyright">
				<p>© Copyright 2012 - BisLite Inc. All rights reserved. Some free icons used here are created by Brankic1979.com.
				Client Logos are copyright and trademark of the respective owners / companies. </p>
			</div>
		</div>
	</footer>
  • ফুটার এর প্রয়োজনীয় ইমেজ, টেক্সট ইত্যাদি দেয়া হয়েছে।
  • এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করে

সম্পুর্ন পেজ

উপরের মার্কাপ সবগুলো লেখার পর আমাদের পুরো এইচটিএমএল কোড টি হবেঃ


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Techtunes</title>
</head>
<body>
	<header>
		<div class="container">
		<a href="#">
			<div class="logo"><h1>Techtunes</h1></div>
		</a>
			<nav>
				<ul>
					<li><a href="#">home</a></li>
					<li><a href="">about us</a></li>
					<li><a href="">services <span class="drop"></span></a>
						<ul>
							<li><a href="">Web Design</a></li>
							<li><a href="">Wordpress Design</a></li>
							<li><a href="">Mobile App Development</a></li>
							<li><a href="">Internet Marketing</a></li>
							<li><a href="">Social Media Management</a></li>
						</ul>
					</li>
					<li><a href="">portfolio <span class="drop"></span></a>
						<ul>
							<li><a href="">Personal</a></li>
							<li><a href="">Corporate</a></li>
						</ul>
					</li>
					<li><a href="">blog</a></li>
					<li><a href="">contact us</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="slider">
		<div class="container">
			<div class="slider-wrapper theme-default">
	            <div id="slider" class="nivoSlider">
	                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
	                <img src="images/up.jpg" data-thumb="images/up.jpg" alt="" />
	                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
	                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
	            </div>
	            <div id="htmlcaption" class="nivo-html-caption">
	                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
	            </div>
        	</div>
		</div>
	</div>
	<div class="middle">
		<div class="container">
			<div class="span3">
				<img src="images/eclipse1.png" alt="Icon">
				<h2 class="cf">clean theme</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas cupiditate eaque mollitia officiis esse! Atque, quia labore deleniti consequatur unde qui rem culpa autem doloremque nobis libero modi ab natus?</p>
			</div>
			<div class="span3">
				<img src="images/eclipse2.png" alt="Icon">
				<h2 class="cf">responsive design</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, iste soluta cupiditate incidunt eligendi ex dolorum maxime odio et animi necessitatibus earum dignissimos doloremque accusamus eveniet fugiat illum porro maiores.</p>
			</div>
			<div class="span3">
				<img src="images/eclipse3.png" alt="Icon">
				<h2 class="cf">fully layerd psd</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, sed, quos, illum voluptatem nisi tenetur quia ullam officia consequuntur aspernatur eius velit amet atque repellat nam explicabo totam voluptates cumque.</p>
			</div>
			<div class="span3">
				<img src="images/eclipse4.png" alt="Icon">
				<h2 class="cf">ready for coding</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, earum, dolorem voluptates recusandae tenetur voluptatum deserunt nemo beatae cupiditate et? Magni, expedita, quo fugiat pariatur consequatur maxime sapiente harum cum!</p>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="container">
			<div class="latest">
			<img src="images/eclipse5.png" alt="Icon">
			<h2>Latest Works</h2>
			<span class="left_arrow"></span><span class="right_arrow"></span>
			<hr>
			<img src="images/thumb1.png" alt="Thumbnail 1">
			<img src="images/thumb2.png" alt="">
			<img src="images/thumb3.png" alt="">
			<img src="images/thumb4.png" alt="">
			<hr>
			</div>
			<div class="testimonial">
				<img src="images/eclipse6.png" alt="Icon">
				<h2>testimonials</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla.
				<br><br><br>
				<span>John Travis, CEO, DomainName.com</span></p>
			</div>
			<div class="clients cf">
				<img src="images/eclipse7.png" alt="Icon" class="cf">
				<h2>Clients</h2>
				<img src="images/logos.png" alt="Client Logos">
			</div>
			<div class="download">
				<p>This is a clean and modern, four column website PSD template. You can code it into a WordPress website, HTML5 responsive website for your personal or client works. So ahead and download this wonderful PSD template!</p>
				<button><img src="images/down.png" alt=""> Download</button>
			</div>
		</div>
	</div>
	<footer>
		<div class="container">
			<div class="about">
				<h2>About Us</h2>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros. Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
				</p>
			</div>
			<div class="explore">
				<h2>Explore</h2>
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Portfolio</a></li>
					<li><a href="">Blog</a></li>
				</ul>
			</div>
			<div class="browse">
				<h2>Browse</h2>
				<ul>
					<li><a href="">Careers</a></li>
					<li><a href="">Press &amp; Media</a></li>
					<li><a href="">Contact Us</a></li>
					<li><a href="">Terms of Service</a></li>
					<li><a href="">Privacy Policy</a></li>
				</ul>
			</div>
			<div class="contact">
				<h2>Contact us</h2>
				<p><b>BisLite Inc.</b><br>
				Always Street 265<br>
				0X - 125 - Canada</p>

				<p>Phone: 987-6543-210 <br>
				Fax: 987-6543-210</p>
			</div>
			<div class="connect">
				<h2>Connect with us</h2>
				<ul>
					<li><a href=""><img src="images/social_1.png" alt=""></a></li>
					<li><a href=""><img src="images/social_2.png" alt=""></a></li>
					<li><a href=""><img src="images/social_3.png" alt=""></a></li>
					<li><a href=""><img src="images/social_4.png" alt=""></a></li>
					<li><a href=""><img src="images/social_5.png" alt=""></a></li>
					<li><a href=""><img src="images/social_6.png" alt=""></a></li>
				</ul>
			</div>
			<div class="logo"></div>
			<div class="copyright">
				<p>© Copyright 2012 - BisLite Inc. All rights reserved. Some free icons used here are created by Brankic1979.com.
				Client Logos are copyright and trademark of the respective owners / companies. </p>
			</div>
		</div>
	</footer>
</body>
</html>

➡ পেজ টি দেখুন এখান থেকেঃ সম্পুর্ন ইন্ডেক্স পেজ

➡ প্রোজেক্ট ফাইল ডাউনলোড করুনঃ এখানে ক্লিক করে

২য় কোর্স থেকে কিছু প্রশ্নের উত্তর

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

তবে অনেকেই হোম টাস্ক জমা দিয়েছেন। ধন্যবাদ আপনাদের। আমি হয়তো সবগুলো হোম টাস্ক ঠিক মত দেখতে পারি নি। যেগুলো দেখেছি সবগুলো টিউমেন্ট এ রিপ্লাই দিতে পারিনি। তবে যেটা বুঝলাম যে সবাই মোটামোটি ভালো করেছেন। দুই একবার প্র্যাক্টিস করলে ছোট খাটো সমস্যা এবং ভুল গুলো ঠিক হয়ে যাবে।

৩য় কোর্সের উপসংহার

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

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

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

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

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

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

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

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

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

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

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

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

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

➡ নিয়মিত আমার টিউনের আপডেট পেতে চাইলে সাবস্ক্রাইব করুনঃ টেকটিউনস » কম্পিউটার লাভার (ক্লিক করে আপনার ইমেইল দিন এবং ইমেইল থেকে ভেরিফাই করুন)

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

আমার টিউনার পাতা

ফেসবুক ~ টুইটার ~ গুগল প্লাস

Level 0

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

Also known as "Raiku Saiko". React.js & Javascript Developer. Former Wordpress Developer, Front-end Designer. Technology Addicted.

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 3

thanks

Level 0

আজ সকালে ভাবতেছিলাম.. আমাদের রাকিব ভাই ৩য় পর্বটা কবে রিলিজ দিবে। ভাবতে না ভাবতেই একটা পেজ রিফ্রেশ দিয়ে পেয়ে গেলাম কাঙ্ক্ষিত পর্বটি।
অসংখ্য ধন্যবাদ আপনাকে রাকিব ভাই।

Level 0

রাকিব ভাই চলে আসছেন! Thank you……

    Level 0

    @sopnocharini: চলে আসলাম কি? আমি কি কোথাও গিয়েছিলাম নাকি? 😛

      Level 0

      @কম্পিউটার লাভার:
      ভেবেছিলাম নতুন পর্ব নিয়ে আসতে আরো দেরি হতে পারে, তাই বলা………।।
      ছোট একটা প্রশ্ন,
      স্লাইডার এর এইচটিএমএল মার্কাপ এ আপনি যে ইমেজ গুলু ব্যবহার করেছেন(মানে toystory.jpg, up.jpg”, walle.jpg”,nemo.jpg), ওখানে কি আমি আমার চয়েস মত ইমেজ ব্যবহার করতে পারব?

Level 0

apni video capture koren kon software diye aktu bolle valo hoy….

Level 0

আস্তে আস্তে শিখতে আছি PSD 2 HTML @ ধন্যবাদ রাকিব ভাই।

Level 0

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

    Level 0

    @S Rahman: আমার পক্ষে সম্ভব হলে হয়তো করা হতো 😀 হেলথপ্রায়োর ২১ এর মত আমার একটি কোম্পানি থাকলে আমিও করতাম 😛
    যাই হোক, আসলেই ঠিক খুজে নিয়ে শিখলে সেটি ভালো শেখা যায় 🙂 তবে আর খুঁজতে হবে না, এখন থেকে প্রতি শনি, রবিবারের মধ্যে পোস্ট পাবলিশ করা হবে। আর ফেসবুক হয়তো সবময়ই ব্যবহার করেন, আমি টিউন পাবলিশ করার সাথে সাথেই ফেসবুক এ পোস্ট করে দেই। আমাকে ফেসবুক এ এড করে থাকতে পারেন।
    ধন্যবাদ।

Level 0

ভাইয়া আমি আস্তে আস্তে শিখতে পারতেছি। আপনাকে অনেক ধন্যবাদ।

    Level 0

    @kousar: ইনশাল্লাহ আস্তে আস্তে পুরোটাই শিখতে পারবেন 🙂 ধন্যবাদ টিউমেন্ট করার জন্য।

Level 0

ধন্যবাদ রাকিব ভাই।

Level 0

ভিডিও এর সাউন্ড কোয়ালিটিতে কোন কথা বোঝা যাচ্ছে না। প্রোগ্রামিং এর কোড ভিডিও তে অস্পষ্ট। সাদা ব্যাকগ্রাউন্ডে কোডগুলো থাকলে ভাল হত। তবে কারোর অসুবিধা হবে না কারণ টিউনের লেখা পড়ে বোঝা যাচ্ছে।

    Level 0

    @writerbuddha: সাউন্ড এ কিছুটা নয়েজ আছে তবে কথা না বোঝার কথা না। আর কোড গুলো ইউটিউব এ দেখলে অস্পষ্ট দেখবেন, ইউটিউব থেকে এইচডি (1080p) ডাউনলোড করে নিলে আর সমস্যা হবে না আশা করি।
    ধন্যবাদ।

Level 0

thanks vai

Level 0

রাকিব ভাই আপনাকে অসংক্ষ্য ধন্যবাদ ।একটু সময় নিয়ে টিউনগুলো করাতে আমার জন্য ভালই হচ্ছে মনে হয় ।

Level 0

ভাই , home work টা , ঠিক বুঝলাম না … কি কি করতে হবে একটু বুঝাইয়া বলবেন ? @রাকিব ভাই ..

    Level 0

    @anisur: আপনি একটি ফোল্ডার তৈরি করুন। তার ভিতরে images নামে আরেকটা ফোল্ডার করুন। এবং একটি index.html নামের পেজ তৈরি করুন। index.html এ পিএসডি টেমপ্লেট এর এইচটিএমএল মার্কাপ গুলো লিখুন এবং পুরো ফোল্ডার টি জিপ করে জমা দিন। টিউনে আমার দেয়া প্রোজেক্ট ফাইল টি ডাউনলোড করে দেখুন। ঠিক এইভাবে নিজে একটি তৈরি করে জমা দিন।

Level 0

<a href="http://dev7studios.com“><img src=”images/up.jpg” data-thumb=”images/up.jpg” alt=”” title=”This is an example of a caption” />
এই কোড টুকু কাজ করে না ….

Level 0

খুব ভালো লাগলো তাড়াতাড়ি টিউন উপহার পাওয়ার জন্য।আপনাকে অনেক ধন্যবাদ।

Level 0

XML, লাইন 1, কলাম বিশ্লেষণ ত্রুটি3: The markup in the document preceding the root element must be well-formed.
ভাই এই টা লেখা ওঠে কি করব?

    Level 0

    @ridoy khan: এই এরর আসার কথা না :O আপনি প্রোজেক্ট ফাইল টি ডাউনলোড করে প্রোজেক্ট ফাইল থেকে কোড টি কপি করে দেখুন এরর দেখায় কিনা।

Level New

এত তাড়াতাড়ি পাব ভাবতেও পারি নি। সামনে পরীক্ষা তাই সময় বেশি দিতে পারছি না। দোয়া করবেন।

Level 0

আবারো আরেকবার ধন্যবাদ এই টিউনটির জন্য। একটা সমস্যা পাচ্ছি, সেটা হচ্ছে ইমেজ বক্স এ toystory.jpg, up.jpg, wall.jpg এই তিনটি ইমেজ তো আমার ইমেজ বক্স এ নাই, এটা কোথায় পেলেন জানালে খুবই উপকৃত হতাম। এটা র সমাধান পেলে তারপর সামনে যেতে পারব, (HTML ও CSS), আশা রাখি উত্তরটি পাব।

    Level 0

    @orchid: এগুলো নিভো স্লাইডার থেকে নেয়া হয়েছে। স্লাইডার এর পর্বে এগুলো বলা হবে।

      Level 0

      @কম্পিউটার লাভার:
      আমি এই ইমেজগুলো কোথায় পাব, বা আপাতত না হলে চলবে কি না?

Level 2

তাড়াতাড়ি টিউন উপহার পাওয়ার জন্য।আপনাকে অনেক ধন্যবাদ।

Level 0

Excellent Brother

Level 0

ভাই আপনাকে আবারও ধন্যবাদ। কোডিং এর ”স্লাইডার এর মার্কাপ” অংশ টা যখন শেখাচ্ছেন আমার মনে হয় ওই অংশে কোনো ভুল আছে তবে, এই পর্যায়ে পেজ টি লাইভ দেখুনঃ এখানে ক্লিক করলে ওই ভুল টা দেখা যাচ্ছেনা কিন্তু হাতে করে করতে গেলে ভুল টা ধরা পড়ছে। এবং toystory.jpg, up.jpg, wall.jpg nemo.jpg এই চারটা ইমেজ তো আমার ইমেজ বক্স এ নাই, তবে আপনার ফোল্ডাটা যখন ডাউনলোড করলাম তখন ওর ভেতর থেকে পেলাম সেজন্য আমি আমার ইমেজ এবং এইচটিএমএল ফাইল সহ প্রোজেক্ট ফোল্ডার টি জমা দিতে আপনার ইমেজ ফোল্ডার টি ব্যবহার করেছি।

    Level 0

    @kjmreza: ওয়ার্ডপ্রেস এর একটি বাগ এর কারণে এই সমস্যা হয়েছিলো। এখন ঠিক আছে। আর ইমেজ গুলো আমি স্লাইডার প্লাগিন থেকে নিয়েছি। এটা আমি স্লাইডার নিয়ে যে পর্ব লিখবো সেখানে বিস্তারিত জানাবো। আপাতত আমার ইমেজেস ফোল্ডার টি ব্যবহার করতে পারেন।

Level 0

once again gud one. thank you

Level 0

এত সুন্দর ঝকঝকে, তকতকে ও তরতাজা টিউনের জন্য ধন্যবাদ।

Level 0

Complete kore joma dilam.
kono error thakle janaben plz..

Level 0

আমি কিন্তু বক্ত আপনার। সাথে সাথে কোর্সটাও শিকতাছি।…………শুনছেন? অসাধারন লিখেছেন….ধন্যবাদ

Level 0

nice tune

Level 0

সাদা ব্যাকগ্রাউন্ডে কোডগুলো থাকলে ভাল হত।Next tune_e_ white background _e black font_e code write karar anurod thaklo.again thanks.

Level 0

কম্পিউটার লাভার ভাই একটু দেখেন তো … tag ses korar age akta ব্যবহার করা হইছে এটা শুরু কোথায় হইছে খুজে পাই না তো।

Level 0

ওহ পাইসি তবে tag কি বার বার ব্যাবহার করার প্রয়োজন আছে? একবারে প্রথমে এবং শেষে ব্যবহার করলে হয় না ?

Level 0

HTML TAG GULO COMMENT A SHOW KORE NA 🙁

#container tag ki bar bar use korar dorkar ase? ata body tag er por abong sob sese dile valo hotona?
#middle section deksi br tag 3 bar use kora hoise keno?

    Level 0

    @rosesamiul: হ্যা বডি ট্যাগ এর শুরুতে এবং শেষে দিলে হত। কিন্তু আমি ভিডিও তে বলেছে, আমাদের হেডার, মিডেল, স্লাইডার, ফুটার ইত্যাদির ব্যাকগ্রাউন্ড ভিন্ন এবং তা ফুল উইথ। কন্টেইনার যদি শুরুতে ও শেষে দেই তাহলে ব্যাকগ্রাউন্ড গুলো ফুল উইথ হবে না।

Level 2

লেখাটি খুব সুন্দর এবং গোছানো হয়েছে। ধাপগুলো অনেক সুন্দর হয়েছে। কোনটার পর কোনটা প্রয়োজন একদম ঠিক মতই দিয়েছেন। আবার লাইভ পেইজ দেখার সুযোগ করে দিয়েছেন। কষ্ট করে গুছিয়ে টিউন করার জন্য ধন্যবাদ।

Level 0

Thank you

Very well writting. Explanaation and steps are clear to understand.

Valo thakben.

Thanks

Level 0

ভাই আমি আপনারটা দেখে করেছি….একটু দেখেন
https://dl.dropboxusercontent.com/u/228276936/%E0%A6%B9%E0%A6%BE%E0%A6%A4%E0%A7%87%20%E0%A6%A7%E0%A6%B0%E0%A7%87%20PSD%202%20HTML/index.html

Level 0

সাদা ব্যাকগ্রাউন্ডে কোডগুলো থাকলে ভাল হত।prorer tune guli shada background rekhe record kroben please.

    Level 0

    @S Rahman: এটা প্লাগিন এর থীম এখানে আমার কিছু করার নেই। তাও চেষ্টা করবো।

Level New

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

Level 0

vai ‘data-thumb’ mark up টির কি কাজ?

    Level 0

    @tech_freak: এটি স্লাইডার এর জন্য একটি জাভাস্ক্রিপ্ট কোড। স্লাইডার পর্বে বিস্তারিত জানানো হবে।

Level 0

ভ্যাই সুন্দর একটি tune হইছে ।ভাল লাগ্ল আই রকম তুনে দেখে । HW করার জন্য যে লিঙ্ক তা দিলেন ওইখানে zip file ছাড়া upload নেয় না । আমার গুলো rar এ convert করা যার ফলে upload দিতে পারছি না ।এই বিষয়টা এক্তু দেখবেন ।

Level 0

lovely………..lesson!!!!!!!!!

Level 0

রাকিবুল হাসান ভাই, ৫টি লিস্ট তৈরির জন্য ul>li*5>a[href=#] লিখে কি key press করলে ৫টি লিস্ট অটো তৈরি হবে, জানালে উপকৃত হব।

Level 0

যদি Sublime,ও notepad++ এর shortcut key গুলি জানাতেন তাহলে উপকৃত হতাম।

Level 0

span.drop লিখে কোন key press করলে এটা হবে। আমি নোটপেট ++ ইউজ করি।

Level 0

এই মাত্র প্রাকটিস শেষ করলাম, এবং খাতা জমা দেওয়ার জন্য প্রস্তুতি নিচ্ছি।

Level New

আপনি ভাই আমাদের জন্য অনেক শ্রম দিচ্ছেন/ আল্লাহ্‌-পাক আপনাকে উত্তম প্রতিদান দিন। ধন্যবাদ।

Level 0

ভাই আমি mozzila 7.1 verson ব্যবহার করি। ভাই এর জন্য firebug কোনটা ব্যবহার করব ভাই আমি বুঝতে পারতেছিনা আমাকে একটু যদি বলতেন তাহলে খুব ভাল হত। আমি অনেক নামাইয়া দেখেছি কিন্তু কাজ হয় নি।শুধু বলে not installaing firebug for firfoxe 7.1.ভাই দয়া করে একটু সাহায্য করেন।

Level 0

emmet নামে software টি খুবী দারুণ আমার ভাল লেগেছে। আগে জানতাম না, এইরকম Software আছে। যেনে খুব উপকৃত হলাম (কম্পিউটার লাভার)। আপনাকে আবারও ধন্যবাদ, সুন্দর টিউন করার জন্য।

Level 0

ধন্যবাদ, রাকিব ভাই বিস্তারিত বর্ণনা করার জন্য I ধীরে ধীরে শিখছি I firebug এর alternative, crome এ কোন প্লাগিন use করা যায়? মিডল কন্টেন্ট মার্কআপ এ use করা হয়েছে, কিন্তু স্লাইডার এর মার্কআপ এ use করেছেন I পার্থক্যটা কি বুজলাম না I আমি স্লাইডার এর মার্কআপ alt = “…” –এ টাইটেল দিলে শো করছে না I

Level New

Present sir.

Level 0

ভাই, আমার browser এ এর জন্য কোডিং এ &t ও &G আসছে। How to solve this problem?

Level 0

Bhi salam neban, Bottom contant ar “left_arrow” & “right_arrow” code lekar por o browser a show
korcha na .

Level 0

Bhi ” < , >” na leka ” ” symbol use korla bujta subeda hoi

    Level 0

    Bhi salam neban, “< , >” na leka “” tag use corla bujta subida hoi

Level 0

ভাইয়া লিখার সময় যদি code গুলো যদি zoom করে করে দেখাতে তাহলে খুব ভাল হত। আর sublime ব্যবাহার না করে node pade ++ যদি ব্যাবহার করতে তাহলে খুব ভাল হত কারন node pade ++ এর background সাদা আর sublime এর background হচ্ছে কালো তাই যদি একটু বিবেচনা করতেন তাহলে আমার জন্য খুব ভালো হত। আর ভাইয়া এর আগের পর্বে ভাইয়া আমি যখন গ্রিড করতেছি তখন আমার computer a সঠিক মাপ হচ্ছে না হয় পয়েন্ট ১ অথবা ২ বেশি হচ্ছে।ভাইয়া অনেক চেস্টা করেও পারতেচায়না। ভাইয়া এর সমাধান কি? ভাইয়া আপনার টিউন খুব ভাল হচ্ছে আমি আপনার সাথে শেষ পর্যন্ত আছি।

Level 3

@কম্পিউটার লাভার
আপনাকে অনেক ধন্যবাদ। এই মাত্র প্রাকটিস শুরু করলাম…….

Level 0

&lt এর পরিবর্তে <' ব্যাবহার করলে কোডটা পরতে অনেক সহজ হত, আমার মত নতুনদের কাছে পোরা জগা খিছুরি মনে হচ্ছে।

Level 0

অনেক গুছানো এবং সুন্দর পোস্ট… পরবর্তি পোস্টের জন্য অপেক্ষায় আছি। ধন্যবাদ এই চেইন টিউনটি চালিয়ে যাওয়ার জন্য।

Level 3

অফিসের ব্যস্ততার কারণে আজকে প্রজেক্ট জমা দিলাম। পরের টিউনের জন্য wait করছি। আমি html, css শিখে কয়েক বছর আগে বন্ধ করে দিয়েছিলাম। আপনার এ উদ্যোগের জন্য আবার নতুন করে শিখছি। Thanks for this nice effort…

Level 0

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

Level 0

ভাইয়া চিহ্ন ব্যবহার করার কারনে প্রথম বার বুঝাতে খুব কষ্ট হয়েছিল।তবে ভাইয়া আপডেট করার পর বুঝতে অনেক সুবিধা হয়েছে।ভাইয়া আপনাকে অসংখ্য ধন্যবাদ।

Level 0

ভাইয়া চিহ্ন ব্যবহার না করার কারনে প্রথম বার বুঝাতে খুব কষ্ট হয়েছিল।তবে ভাইয়া আপডেট করার পর বুঝতে অনেক সুবিধা হয়েছে।ভাইয়া আপনাকে অসংখ্য ধন্যবাদ।

Level 2

আমিও কাজটি করে জমা দিলাম এইমাত্র। আর অপেক্ষায় আছি সিএসএস পর্বের জন্য। 🙂

Level 0

ধন্যবাদ ভাই…।

Level 0

একটু জটিল লাগছে তবে। চেষ্টা করছি। আরও একটু সহজ করার জন্য অনুরুধ রইল। ধন্যবাদ।

Level 0

I am also going on boss. i don’t get enough time to practice. but don’t worry. I am trying. Thanks boss. going on .

Level 2

Carry On Boss.Being with you..
Thanks.

Level 0

Great Boss. Very helpful to learn web design. You are great. 🙂 🙂 🙂 🙂 🙂

Level 0

sorry for dealy

Level New

প্রোজেক্ট ফাইলটি এই মাত্র জমা দিলাম. ভাই Sublime text এর সিরিয়াল key টা দিতে পারবেন ?

মিডল কনটেন্ট এর Read more এর HTML code কিভাবে করব?

Level 0

waiting for css part of this tutorial with white background…

Level 0

সাইটটা কমপ্লিট করে ফেললাম 😀 কেমন হইছে ?? এইবার সার্টিফিকেট টা দেন ভাই… খুব দরকার 🙁
https://dl.dropboxusercontent.com/u/186394241/Asif%27s%20Psd/home.html

    Level 0

    @আসিফ রেজা: হাহাহা… এত তারাতারি সার্টিফিকেট? 😀

    হুম পেজ টি সুন্দর হয়েছে। ছোটখাটো অনেক ভুল আছে, টিউন গুলো ফলো করুন তাহলে সেগুলো ঠিক হয়ে যাবে।
    ধন্যবাদ।

Level 0

really awesome!

Level 0

জনাব আসিফ সাহেব,আমি যদি ও এই লাইনে একেবারে নতুন ,তবে যারা ঝানু তার আপনাকে বোধহয় ১০০ থেকে ৯০ দিতে পারে।আপনার স্টাইল সিট টা পেতে পারি কি?কম্পিউটার লাভারের টিউন পেতে পেতে দেখে দেখে ট্রাই করি।[email protected]___mail me.

Level 0

Mr. Asif reza. wanderful design. you got 100% marks. if possible plz send me style sheet to [email protected] in your highly cooperation.thanks

Level 0

ধন্যবাদ।
কিছু image html এ আর কিছু image css এ দেয়ার কারণটা দয়াকরে ব্যাখ্যা করবেন।

    Level 0

    @ফারহান: এটা এসইও ফ্রেন্ডলি করার জন্য, আবার কিছু ক্ষেত্রে ডিজাইন এর সুবিধার জন্য। লোগো এর ইমেজ টি আমরা সিএসএস এ দিয়েছি, আর এইচটিএমএল এ টেক্সট টাইটেল দিয়েছি। এটি ডিজাইনকে এসইও ফ্রেন্ডলি করে।

      Level 0

      @কম্পিউটার লাভার: ধন্যবাদ। কিছুটা বোধগম্য হয়েছে।

Level 0

ভাই পরের টিউনটার জন্য অধীর আগ্রহে অপেক্ষা করছি।

Level 0

অপেক্ষার মূহূর্তগুলি আসলে খুবই সুন্দর!আশা করছি খুবই দ্রুত এই অপেক্ষার অবসান হবে ইনশাল্লাহ্।

Level 0

আমি আজকে প্রজেক্ট ফাইল জমা দিলাম। আমি নোটপ্যাড++ দিয়ে কোডিং করেছি। ইমেজ আমি স্লাইস করেছিলাম কিনতে রিনেম করার ছবিটা ভাল্ভাবে পরতে পারিনাই তাই আপনার দেয়া ইমেজ ডাউনলোড করেছি। আর প্রজেক্ট ফাইলে সেই ইমেজ আপলোড করেছি।

Level 0

Opekhar pohor jano sas hoyna. next tunetar jonno r kotodin wait korta hobe?

Level 2

দুটো প্রশ্ন ছিলোঃ
১. cf ক্লাসটা কিজন্য?
২. অনেক alt এট্রিবিউটের ভিলু দাও নাই। কেনো?
আরো দুটো প্রশ্ন ছিলো। ভুলে গেছি 🙁

হোম টাস্কঃ https://www.dropbox.com/sh/ygmw81r95llslmb/XG4gi4Y33v

Level 2

@কম্পিউটার লাভার
আপনাকে ধন্যবাদ।
তবে আমার মনে হয় আপনাকে ধন্যবাদ দেয়ার চেয়ে অনুশীলন ফাইলটা দিলে বেশি খুশি হবেন
প্রচণ্ড কাজের ঝামেলায় থাকি তাই ১,২ ও ৩ নং টিউটোরিয়ালের অনুশীলন এক সাথে দিলাম
আমার একটা সমস্যা : আমি কি পারব? নেট থেকে PSD নামিয়ে চেষ্টা করছি কিন্তু মাথা মুন্ডু কিছুই বুঝতে পারছি না। আগে কোনটা করব পরে কোনটা করব এই আর কি।
তবে আমার চেষ্টা থাকবে আপনার পরিস্রমকে সম্মান করা , আমরা যদি কাজেই না লাগাই তাহলে আপনার পরিশ্রমের কি দাম।
বকবক করা আমার অভ্যাস ধন্যবাদ

Level 2

@কম্পিউটার লাভার
আপনাকে ধন্যবাদ।
তবে আমার মনে হয় আপনাকে ধন্যবাদ দেয়ার চেয়ে অনুশীলন ফাইলটা দিলে বেশি খুশি হবেন
প্রচণ্ড কাজের ঝামেলায় থাকি তাই ১,২ ও ৩ নং টিউটোরিয়ালের অনুশীলন এক সাথে দিলাম
আমার একটা সমস্যা : আমি কি পারব? নেট থেকে PSD নামিয়ে চেষ্টা করছি কিন্তু মাথা মুন্ডু কিছুই বুঝতে পারছি না। আগে কোনটা করব পরে কোনটা করব এই আর কি।
তবে আমার চেষ্টা থাকবে আপনার পরিস্রমকে সম্মান করা , আমরা যদি কাজেই না লাগাই তাহলে আপনার পরিশ্রমের কি দাম।
বকবক করা আমার অভ্যাস ধন্যবাদ
নিচে লিঙ্ক দিলামঃ
http://goo.gl/MssqdI

Level 0

@কম্পিউটার লাভার
এই মাত্র Home Task জমা দিলাম।
প্রশ্ন করার আগেই টিউমেন্ট থেকে উত্তর পেয়ে যাচ্ছি তাই আর প্রশ্ন করছি না।
আর একটি কথা কম্পিউটার লাভার ভাই আমার পক্ষ থেকে আপনাকে ধন্যবাদ জানাই আমাদের কে দারুন সুযোগ করে দেবার জন্য।