মোবাইল দিয়ে ওয়েব ডিজাইন কেন শিখবেন?
বর্তমানে সকল ব্যবসা প্রতিষ্ঠান অনলাইনমূখী হচ্ছে। আগামী কয়েক বছরের মধ্যেই সবগুলো অনলাইনভিত্তিক হয়ে যাবে। জামা, কাপড়, থেকে শুরু করে নিত্যপ্রয়োজনীয় বাজার ঘাট সবকিছুই মানুষ বাড়িতে বসে থেকে করছে। ফুটপান্ডা থেকে খাবার অর্ডার করে অল্প সময়ের মধ্যেই খাবার তাদের বাড়ীতে পৌঁছে দিচ্ছে। আপনি কোথাও যাবেন, উবার, পাঠাও, আপনাকে তাদের গাড়ীতে করে পৌঁছে দিচ্ছে। এটা আরো দিন দিন বাড়তেই থাকবে। যারা যুগের সাথে তাল মিলিয়ে চলতে পারবে না তারা ঝরে পড়বে। অনলাইন ব্যবসা যত বাড়বে ততই ওয়েবসাইট বেশী করে প্রয়োজন হবে। যতগুলো ওয়েবসাইট প্রয়োজন হবে ততোগুলো ওয়েব ডেভলপার, ওয়েব ডিজাইনার কিন্তু খুঁজে পাওয়া যাবে না। হাতে গোনা যারা থাকবেন তাদের মূল্যায়নটা কেমন হবে সহজে আন্দাজ করুন।
এটাতো বললাম আমার নিজের দেশের কথা। গোটা বিশ্বের কথা ভেবে দেখুন। বিভিন্ন মার্কেটপ্লেসগুলো ঘুরে দেখুন ওয়েব ডিজাইনের উপর হাজার হাজার কাজ আছে কিন্তু হাজার হাজার ডিজাইনার নাই।
একটা ই-কমার্স ওয়েবসাইট ডিজাইন করে কমপক্ষে 200$ থেকে 700$ ডলার পর্যন্ত ইনকাম করা যায়। এর থেকেও আরো বেশী ইনকাম করা যায়। এটা কোন স্বপ্ন নয় এটাই বাস্তব। আমাদের দেশের শত শত ছেলে মেয়ে ফ্রিল্যান্সিং করে হাজার হাজার ডলার ইনকাম করছে। তাহলে আপনি পিছিয়ে থাকবেন কেন? এখনই শুরু করে দিন ওয়েব ডিজাইন শেখা।
দয়া করে পেইজটিতে লাইক, কমেন্ট করুন আর শেয়ার করে দিন আপনার বন্ধুদের সাথে। মূল্যবান কথাগুলো কারো না কারো উপকারে আসবে।
প্রবাদে আমরা পড়েছি,
“হয় মন্ত্রের সাধন, নয় শরীর পাতন।”
আপনি যখন ছাত্র তখন আপনি একটা বিষয়কে কেন্দ্র করে লেখা-পড়া চালিয়ে যান। আপনি যখন ব্যবসায়ী তখনো আপনার একটা উদ্দেশ্য থাকে। আপনি যখন কোন বৃক্ষরোপন করেন তখনো আপনার একটা উদ্দেশ্য থাকে।
আসলে প্রত্যেকে আমরা একটা উদ্দেশ্যকে সাথে নিয়েই পথ চলি। তাইতো আমরা যাকিছুই করি না কেন আমাদের উদ্দেশ্য থেকে কিন্তু আমরা পিছপা হই না।
এরকম একটা পাকাপোক্ত উদ্দেশ্যকে নিয়ে আমাদেরকে ডিজাইন শিখতে হবে। কাজটাকে মন থেকে ভালোবেসে শিখতে হবে। কি পেলাম, কি হারালাম এমন চিন্তা কখনোই মাথায় আনা যাবে না।
আমার কি কি নেই?
প্রথমেই আমাদের মাথায় আসে, আমারতো কম্পিউটার নেই, আমারতো ওয়াইফাই কানেকশন নেই, আমারতো আইফোন নেই, এটা নেই, সেটা নেই। শুধু নেই আর নেই। সব ব্যাপারেই আমরা নেগেটিভ চিন্তা ভাবনা করি।
আজ থেকে নেগেটিভ চিন্তা ভাবনা বাদ দিয়ে দেখুন আপনার কি কি আছে, তাই দিয়ে শুরু করুন।
ওয়েব ডিজাইন শিখতে আপনার কি লাগবেঃ
১। একটা স্মার্ট ফোন
২। ভিডিও দেখার জন্য, পেইজে এ্যাক্টিভ থাকার জন্য সামান্য নেট কানেকশন
৩। মজার বিষয় হচ্ছে কোডিং করার জন্য আপনার কোন নেট কানেকশনই লাগবে না। সম্পূর্ণ অফলাইনেই কোডিং করতে পারবেন।
৪। আর একটি বড় জিনিস লাগবে সেটা হচ্ছে, সময়। প্রতিদিন কমপক্ষে ২ ঘন্টা সময় দিয়ে আপনি প্রাক্টিস করবেন। ভেবে দেখুন তো ২ ঘন্টা সময় আমরা কত বেহুদা কাজে শেষ করে ফেলি।
৫। আর একটি সবচেয়ে বড় জিনিস লাগবে সেটা হচ্ছে, ধর্য্য। আপনার যদি ধর্য্য না থাকে তাহলে আপনি কখনোই এই কাজ শিখতে পারবেন না।
ওয়েবসাইট কাকে বলে?
(এখানে আমি সম্পূর্ণ আমার নিজের ভাষায় বুঝানোর চেষ্টা করবো ইনশাআল্লাহ। যথাসম্ভব বইয়ের ভাষা এড়িয়ে চলবো। কারণ, বইয়ের ভাষা ব্যবহার করলে আমার উদ্দেশ্য সফল হবে না। ঠিক আমি যেভাবে শিখেছি সেভাবেই চেষ্টা করবো। মূল বিষয়টি হচ্ছে কাজের দক্ষতা অর্জন করা। সেটি থাকলেই হলো।)
আরো পড়ুন-
মোবাইল টিপস নতুনদের জন্য ২০২৫ পর্বঃ ০১
মোবাইল টিপস নতুনদের জন্য ২০২৫ পর্বঃ ০২
এন্ড্রয়েড মোবাইল টিপস এ টু জেট ২০২৫
ওয়েবসাইট কি?
আমরা যখন কোন বিষয়ে জানার জন্য গুগলে সার্চ দেই তখন মুহূর্তের ভিতর গুগল আমাদের কাংখিত বিষয়টি আমাদের সামনে এনে দেয়। তখন কাংখিত লিংকটির ভিতর প্রবেশ করে আমরা সহজেই কাংখিত বিষয়টি জানতে পারি। এখন যেখান থেকে আমি আমার প্রয়োজনীয় বিষয়টি জানতে পারলাম। সেটিকে বলে ওয়েবসাইট। (আমার নিজের ভাষায় প্রকাশ করছি)
ওয়েব পেইজ কি?
ওয়েব পেইজ হচ্ছে, আপনার কাংখিত বিষয়টি যেখান থেকে জানতে পারছেন অর্থাৎ আপনি যেখানে কোন লেখা পড়ছেন, ছবি দেখছেন, ভিডিও দেখছেন এমনকি আমার এই লেখাটি যেখানে পড়ছেন সেটিই হচ্ছে ওয়েব পেইজ। এইরকম কয়েকটি ওয়েব পেইজ নিয়েই হয় একটি ওয়েবসাইট। যেমন,
1. Home page
2. About page
3. Contact page
4. Service page
5. Portfolio page
6. Gallery page
7. Video page. ইত্যাদি।
নিচে কাজগুলোকে ক্লাস আকারে সাজানো হয়েছে এভাবেই অনুশীলন করুন।
ক্লাসঃ ১) html code editor and html document
প্রিয় বন্ধুরা,
আসসালামু আলাইকুম, ওয়া রহমাতুল্লাহ।
ওয়েব ডিজাইন ক্লাসে আপনাদেরকে স্বাগতম!
আমরা যেহেতু মোবাইল দিয়ে ওয়েব ডিজাইন শিখবো সেহেতু আমাদেরকে কোড এডিটরের জন্য একটি সফটওয়্যার লাগবে। প্রথমে প্লেস্টোর থেকে সফটওয়্যারটি ডাউনলোড করে নিন। প্লেস্টোরে গিয়ে সার্চ করুন SPCK তারপর সবার উপরে যে সফটওয়্যারটা আসবে সেটা ইনস্টল করে নিন। অথবা এখান থেকে ডাউনলোড করুন
ডাউনলোড করা হলে সেটিকে ওপেন করুন।
তারপর নিউ প্রোজেক্ট থেকে একটি নাম দিয়ে HTML সিলেক্ট করুন। HTML file এ ক্লিক করুন। তারপর তিনটি ফাইল তৈরী হবে সেখান থেকে index.html ক্লিক করুন। তারপর কিছু কোড লেখা আসবে সেগুলোকে মুছে ফেলুন। তারপর নিচের কোডগুলো লিখুন। কোড লেখা হলে আউটপুট দেখার জন্য ডান পাশের ভিডিও আইকনে ক্লিক করুন। এখানে আপনার লেখা কোডের আউটপুট দেখুন।
ক্লাসটি বাসায় চর্চা করুন। তারপর আপনার করা এ্যাসাইনমেন্ট স্ক্রিনশট নিয়ে আমাদের ফেইসবুক পেইজে Web design Class 1 লিখে পোস্ট করুন। উক্ত ক্লাসের যে কোন সমস্যা সমাধানের জন্য পেইজে কমেন্ট করুন। সমাধান দেয়া হবে। ইনশাআল্লাহ
আমাদের ফেইসবুক পেইজের লিংক -
Class: 2) html tutorials
আস্সালামু আলাইকুম
মোবাইল দিয়ে ওয়েব ডিজাইন ২য় ক্লাসে আপনাদেরকে স্বাগতম। আজকে আমরা শিখবো html heading tag.
html heading tag হচ্ছে, ৬টি।
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
কোড লেখার সময় আমাদেরকে মনে রাখতে হবে যে, শুরুর tag আর শেষের tag যেনো close করা হয়।
যেমন,
<h1> এটা হচ্ছে শুরুর tag
</h1> আর এটা হচ্ছে, শেষের tag
class: 03) html tutorials
আস্সালামু আলাইকুম
আজকে আমরা শিখবো html paragraph.
Paragraph tag এর উদাহরণঃ
<p>This is a paragraph tag</p>
<p>This is a paragraph tag</p>
<p>This is a paragraph tag</p>
আরো উদাহরণঃ
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
class: 04 Web design
আস্সালামু আলাইকুম
মোবাইল দিয়ে ওয়েব ডিজাইনের ক্লাসে আপনাদেরকে স্বাগতম। আজকে আমরা কয়েকটি html tag শিখবো।
<b></b> tag যে কোন লেখাকে বোল্ড বা মোটা করার জন্য এই tag টি ব্যবহার করা হয়।<i></i> tag যে কোন লেখাকে ইতালিক বা এক পার্শে হেলানোর জন্য এই tag টি ব্যবহার করা হয়। <u></u> tag যে কোন লেখার নিচে আন্ডার লাইন দেয়ার জন্য এই tag টি ব্যবহার করা হয়। <strong></strong> tag যে কোন লেখাকে বোল্ড করার জন্য এই tag টি ব্যবহার করা হয় <big></big> tag যে কোন লেখাকে বড় করার জন্য এই tag টি ব্যবহার করা হয়।
<small></small> tag যে কোন লেখাকে ছোট করার জন্য এই tag টি ব্যবহার করা হয়।
</br> tag এই tag এ শুরুর tag হয় না। কোন বাক্যকে একের পর এক নিচের দিকে সাজানোর জন্য এই tag টি ব্যবহার করা হয়।
Example:
<b>This is bold tag</b>
<i>This is italic tag</i>
<u>This is underline tag</u>
<strong>This is strong tag</strong>
<big>This is big tag</big>
<small>This is small tag</small>
class: 05 html basic elements
আস্সালামু আলাইকুম
আজকে আমরা শিখবো কিছু Basic elements লেখার শুরুতে এবং শেষে যে tag গুলো বসাতে হয় সেগুলোই একেকটা elements. html elements অনেক আছে তার মধ্যে যেগুলো বহুল ব্যবহৃত হয়ে থাকে মূলত সেগুলো নিয়েই আজকে আমাদের এই ক্লাসটি সাজানো হয়েছে।
প্রথম পর্যায়ে আমরা Basic elements গুলো শিখবো পরে Advance level এর elements গুলো জানতে পারবেন।
Some basic elements list:
<html></html>
<head></head>
<title></title>
<body></body>
<a></a>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p>
<b></b>
<i></i>
<u></u>
<img></img>
<strong></strong>
<big></big>
<small></small>
<marquee></marquee>
<button></button>
<font></font>
<form></form>
<div></div>
<iframe></iframe>
<input></input>
<style></style>
<footer></footer>
আপাতত এগুলো মুখস্ত করে রাখুন। এগুলোর ব্যবহার আমরা ধাপে ধাপে শিখবো।
ক্লাসটি প্রাক্টিস করুন। কোথাও বুঝতে সমস্যা হলে কমেন্ট করুন। ধন্যবাদ
class: 06 html bgcolor, img tag
আস্সালামু আলাইকুম
আজকে আমরা শিখবো bgcolor tag, img tag এর ব্যবহার। bgcolor tag টি ব্যবহার করে আমরা ওয়েব সাইটের ব্যাকগ্রাউন্ড কালার দিতে পারবো। পেইজের কালার দিতে পারবো। যে কোন text এর ব্যাকগ্রাউন্ড কালার দিতে পারবো
Background color দেয়ার জন্য bgcolor tag টি body তে দিতে হবে। যেমন,
<body bgcolor=”red”>
আমি এখানে red color টি ব্যবহার করেছি। আপনি আপনার পছন্দমত যে কোন কালার দিতে পারেন।
img tag এটি ব্যবহার করে আপনি আপনার ওয়েব সাইটে যে কোন ছবি বসাতে পারেন। সেজন্য প্রথমে আপনার কোডিং ফাইলে আগে থেকে কিছু ছবি আপলোড করে রাখতে হবে। তারপর ইমেজ ফাইলের ডান দিকে ক্লিক করে Rename থেকে লিংকটি কপি করে কোডের মাঝখানে বসাবেন।
আপনার জন্য আরো পোস্ট ---
ব্লগিং করে কত টাকা ইনকাম হয় ২০২৫
ব্লগার ওয়েবসাইট বানিয়ে মাসে ৭০/৮০ হাজার টাকা আয় করুন
সম্পূর্ণ নতুনদের জন্য ব্লগিং টিপস ২০২৫
কিভাবে ছবি আপলোড করবেন?
প্রথমে আপনার কোডিং ফোল্ডারের ডান পাশে ক্লিক করুন তারপর Import এ ক্লিক করুন। তারপর আপনার পছন্দমত ছবিটি আপলোড করুন।
ক্লাসটি প্রাক্টিস করুন। কোথাও বুঝতে সমস্যা হলে কমেন্ট করুন। ধন্যবাদ
class: 07 Image size html code
আস্সালামু আলাইকুম
প্রিয় বন্ধুরা, গত ক্লাসে আমরা দেখেছি কিভাবে ওয়েবসাইটে ইমেজ আপলোড করতে হয়। এই পর্বে আমরা দেখবো সেই আপলোড করা ইমেজের সাইজ কিভাবে দেবো।
প্রথমে img টি আপলোড করে কোডিং ফাইলে width, height mention করে দিতে হবে। নিচে দেখুনঃ
<img src=”link hear” width=”250″ height=”250″>
class: 08 html link tag Web design
আস্সালামু আলাইকুম
গত ক্লাসে আমরা দেখেছি ওয়েবসাইটে ছবি কিভাবে আনতে হয় এবং সাইজ দিতে হয়। এই ক্লাসে আমরা দেখবো ওয়েবসাইটে কিভাবে অন্য ওয়েবসাইটের লিংক তৈরী করতে হয়।
ওয়েবসাইটে লিংক তৈরী করার জন্য index.html Coding file এ একটি tag দিতে হবে। আমি এখানে দুটি লিংক দিয়ে দেখাচ্ছি।
<a href=”https://islamicsite10.blogspot.com”>Islamic Site</a>
<a href=”https://masikalaksa.blogspot.com”>Masik al Aksa</a>
class: 09) html mark tag, del tag
আস্সালামু আলাইকুম
আজকে আমরা শিখবো mark tag, del tag এর ব্যবহার।
কোন শব্দ বা বাক্যকে মার্ক করে দেখাতে চাইলে mark tag ব্যবহার করতে হয়।
কোন শব্দ বা বাক্যকে delete হিসেবে দেখাতে চাইলে del tag ব্যবহার করতে হয়।
Example:
<mark>This is mark tag</mark>
<del>This is delete tag</del>
class: 10 html sub tag, sup tag
আস্সালামু আলাইকুম
আজকে আমরা শিখবো subscripted tag, superscripted tag এর ব্যবহার। সংক্ষেপে এই tag হচ্ছে, sub tag এবং sup tag.
<sub></sub> এই tag ব্যবহার করে কোন শব্দ বা বাক্যকে লাইন থেকে একটু নিচে লেখা হয়।
<sup></sup> এই tag ব্যবহার করে কোন শব্দ বা বাক্যকে লাইন থেকে একটু উপরে লেখা হয়।
Example:
This is the <sub>subscripted</sub> Text
This is the <sup>superscripted</sup> Text
class: 11 html hr tag
আস্সালামু আলাইকুম
আজকে আমরা শিখবো হরিজন্টাল লাইন সম্পর্কে। এটি সংক্ষেপে <hr> tag.
যে কোন পেইজ বা প্যারাগ্রাফের নিচে লাইন দিতে হলে এই tag টি ব্যবহার করতে হয়।
এই লাইনকে ইচ্ছে মত সাইজ, কালার দেয়া যায়। চলুন এর ব্যবহার সম্পর্কে জেনে নেই।
Example:
tag
<hr>
Line no. 1
<hr color=”blue”>
Line no. 2
<hr size=”10px” color=”red”>
Line no. 3
<hr size=”30px” color=”green”>
class: 12 html center tag, address tag, blockquote tag
আস্সালামু আলাইকুম
আজকে আমরা শিখবো center tag, address tag, blockquote tag এদের ব্যবহার। চলুন শুরু করা যাক।
<center></center> এই tag টি কোন শব্দ বা বাক্যকে মাঝখান বরাবর রাখতে এই tag টি ব্যবহার করা হয়।
<address></address> এই tag টির মাঝখানে address তথা কোন কোম্পানীর ঠিকানা বা বাড়ীর ঠিকানা লিখতে হয়।
<blockquote></blockquote> ব্লগের ভিতর অন্য কোথাও থেকে উদ্ধৃতি দেয়ার জন্য এই tag টি ব্যবহার করতে হয়।
Example:
<center>This is center tag
</center>
<address>
Coding Enjoy<br/>
Head office: <br/>
Mirpur<br/>
Dhaka-1200
</address>
Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<blockquote>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</blockquote>
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.
শেষ কথাঃ সকলের আইটি ওয়েবসাইটে আজকে যে পোস্টটি পাবলিশ করা হলো তা অনেক গুরুত্বপূর্ণ। ভালোভাবে অনুশীলন করলে মোবাইল দিয়ে ওয়েব ডিজাইন শিখে একটি ওয়েবসাইট তৈরী করতে পারবেন।
FAQ
প্রশ্নঃ মোবাইল দিয়ে ফ্রি ওয়েবসাইট তৈরি?
উত্তরঃ মোবাইল দিয়ে ব্লগার ডট কম থেকে ফ্রিতেই একটি ওয়েবসাইট তৈরী করতে পারবেন। কিভাবে করবেন জানতে হলে আমাদের এই ওয়েবসাইটের অন্যান্য পোস্টগুলো ভালোভাবে পড়ুন।
প্রশ্নঃ ফোন দিয়ে কি ওয়েবসাইট তৈরি করা যায়?
উত্তরঃ হ্যাঁ যায়। প্রথমে আপনাকে ডিসিশন নিতে হবে যে, আপনি কোন প্লাটফর্ম থেকে ওয়েবসাইট তৈরী করবেন। দুটি প্লাটফর্ম অত্যন্ত জনপ্রিয় প্রায় ৯০ ভাগ ওয়েবসাইট এই দুটো প্লাটফর্ম দ্বারা তৈরী। প্লাটফর্ম দুটি হচ্ছে, ব্লগার ডট কম অন্যটি ওয়ার্ডপ্রেস ডট কম। তারপর সেখানে গিয়ে আপনার জিমেইল দিয়ে প্রথমে একটি একাউন্ট তৈরী করবেন। তারপর পরবর্তী ধাপগুলো নির্দেশনা অনুযায়ী অতিক্রম করবেন।
প্রশ্নঃ ফোনে এইচটিএমএল কিভাবে করতে হয়?
উত্তরঃ ফোন দিয়ে এইচটি এম এল শিখতে চাইলে প্রথমে আপনাকে একটি কোড এডিটর লাগবে। গুগল প্লে স্টোরে গিয়ে সার্চ দিন SPCK Code Editor লিখে। তারপর এপসটি ডাউনলোড করে অনুশীলন করুন। কিভাবে অনুশীলন করবেন তা জানতে হলে উপরের পোস্টটি ভালোভাবে পড়ুন এবং বাসায় অনুশীলন করুন।
প্রশ্নঃ ফোনে কোড লেখা যায়?
উত্তরঃ হ্যাঁ, অবশ্যই যাবে। সেজন্য প্রথমে আপনাকে একটি কোড এডিটর লাগবে। গুগল প্লে স্টোরে গিয়ে সার্চ দিন SPCK Code Editor লিখে। তারপর এপসটি ডাউনলোড করে অনুশীলন করুন।
প্রশ্নঃ ওয়েবসাইট তৈরি করতে কত টাকা লাগে?
উত্তরঃ ওয়েবসাইট তৈরী করতে একেক কোম্পানী একেক রকম ডিমান্ট করে থাকে। যদি আমাদের নিকট থেকে তৈরী করে নেন তাহলে মাত্র ২৫০০ টাকা হলে আপনি যে কোন ধরনের ওয়েবসাইট তৈরী করে নিতে পারবেন। ওয়ার্ডপ্রেস হলে ডোমেইন, হোস্টিং আপনাকে কিনে দিতে হবে।
ট্যাগ
ফোন দিয়ে ওয়েবসাইট ডিজাইন করা যায়, মোবাইল দিয়ে কি ওয়েব ডেভেলপমেন্ট করা যায়
ফোনে ওয়েব ডিজাইন কিভাবে শুরু করব, মোবাইলে ওয়েব অ্যাপ ব্যবহার করা যায়
মোবাইল অ্যাপ ও ওয়েব অ্যাপ এর মধ্যে পার্থক্য কি?, কিভাবে অ্যাপের মতো ওয়েবসাইট তৈরি করা যায়?