ওয়েব ডিজাইনিং কিভাবে শুরু করব? ওয়েব ডিজাইনিং এর জন্য কি কি ভাষা শিখতে হয়?

ওয়েব ডিজাইনিং, অনেকের কাছে স্বপ্ন, অনেকের কাছে ধরাছোঁয়ার বাইরের কিছু আবার এমন অনেকেই আছেন যাদের কাছে ওয়েব ডিজাইনিংটা হাতের মোয়া। ওয়েব ডিজাইনিং আসলে কি?

Web Design

ওয়েব ডিজাইনিং কি?

ইন্টারেনেট জগতে যেখানেই বিচরণ করেন না কেনো, সবটাই কোনো না কোনো ওয়েব পেজ। এই ওয়েব পেজ গুলো বিভিন্ন মার্ক আপ ল্যাংগুয়েজ এবং প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করে তৈ করতে হয়। আপনি এই মূহুর্তে পাঠগৃহের এই লেখাটি পড়ছেন যেই পেজে সেটাও ওয়েব ডিজাইনিং মাধ্যমেই তৈরি মূলত। এর পেছনে থাকা কোডের একাংশ খুঁজে পাবেন আপনার কম্পিউটারের মাউসের রাইট বাটনে ক্লিক করে View Source Code এ ক্লিক করে।


ওয়েব ডিজাইনিং কেনো প্রয়োজন?

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


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


ওয়েব ডিজাইনিং শিখতে হলে কোন কোন ভাষা শিখতে হবে?

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

  • ওয়েব ডিজাইনিংকে তুলনা করে নিলাম একটা বিল্ডিং এর উপর। বিল্ডিং এর ভিত্তি, ছাদ আর ৪ দিকের দেয়াল তুলে দেয়ার জন্য প্রয়োজন যে ভাষাটা তা হচ্ছে HTML5 বা এইচ টি এম এল ৫। এটা কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ না, বরং মার্ক আপ ল্যাঙুয়েজ। Hypertext Markup Language এর ৫ম সংস্করণটা শিখতে হবে একেবারে শুরুতেই।
  • বিল্ডিং এ রঙ করা, ওয়ালের পুরুত্ব, জানালার গ্রিল লাগানো এক কথায় তাকে সুন্দর করে সাজাতে প্রয়োজন CSS3 নামের স্টাইলশিট।
  • ডিজাইনের কাজ নিজ হাতে পুরোটা না করে যদি অন্য কারো করা কাজটাকে ফলো করতে চান তাওলে আছে Bootstrap4 আর 5

নিজের পোর্টফোলিও সহ অন্য যেকোনো স্ট্যাটিক ওয়েবসাইট তৈরি করতে এইটুকুই যথেষ্ট। ডায়নামিক ওয়েবসাইট তৈরি করতে চাইলে সাথে শিখতে হবে JavaScript.  একটা ওয়েব সাইট তৈরিতে একান্ত প্রয়োজনীয় সব কিছুই শিখে ফেললেন অলরেডি। তার মানে ওয়েব ডিজাইনিং শিখতে হলে প্রয়োজন

  • HTML5
  • CSS3
  • Bootstrap
  • JavaScript
  • JQuery
  • My SQL

ওয়েব ডিজাইন শিখতে যা যা শিখতে হবে সেগুলোকে ৫ ভাগে ভাগ করা যাক:

১. ক্যাম্নে কি? (ওয়েব সাইট কিভাবে কাজ করে? কোডিং লিখব কোন এডিটরে আর সেটাই বা ক্যম্নে কি)

২. আবশ্যক (HTML, CSS, JavaScript)

৩. পরোপকারী (Bootstrap, J Query)

৪. যন্ত্রপাতি (প্যাকেজ ম্যানেজারস, বিল্ড টুলস, ভার্সন কন্ট্রোল)

৫. Additional Front-End (Sass, মোবাইল, ট্যাব, কম্পিউটার স্ক্রিনের জন্য রেসপন্সিভ করা, JavaScript Frameworks)

৬. Back-End জিনিসপাতি (Servers and Database/Git and SQL, Programming Languages যেমন C, C++, Python ইত্যাদি) 


১. ক্যাম্নে কি?

ক) ওয়েব ডিজাইনিং আর ডেভেলপমেন্টের মধ্যে পার্থক্য কি?

আছে আছে, তবে আপাতত না জানলেও ক্ষতি নেই।

খ) Front-End এবং Back-End এর মধ্যে পার্থক্য কি?

গণিতে চলে যাই কিছুক্ষনের জন্য।

মনে করি,

একটি ওয়েবপেইজ তৈরি করব যেটাতে একটা ক্যালকুলেটর থাকবে এবং তা ঠিকভাবে হিসাব করে দিতে সক্ষম হবে। তাহলে ক্যালকুলেটরটা দেখতে কেমন হবে, কোথায় কয়টা বাটন থাকবে, + - * / % কোথায় থাকবে সবই Front-End এর কাজ। এক কথায় খালি চোখে যা দেখা যাবে তাই ই Front-End। অন্যদিকে আপনি ক্যালকুলেটরের বাটন চাপলে সেই ইনপুট গ্রহন করে আপনার আদেশ অনুযায়ী কাজ কর্ম মানে যোগ বিয়োগ ইত্যাদি করে ফলাফল বের করে আনাটা আপনি আমি খালি চোখে ওয়েবপেজে দেখতে পারব না, এই কাজ গুলোই Back-End।

 

গ) কোড এডিটর কোনটা ব্যবহার করব?

একেবারে সাধারন Notepad দিয়েই করা যায় কোডিং। তবে একটু রঙ মাখিয়ে চোখের আরাম করতে Notepad এর ছোট ভাই কিন্তু ব্লুটুথ বয় Notepad++ ব্যবহার করা যায়। সবথেকে ভালো হবে Visual Studio Code বা সংক্ষেপে VS Code ব্যবহার করলে। এটা আপনার চোখের আরামের পাশাপাশি এক্সটেনশনের মাধ্যমে কাজ কমিয়ে হাতের আর ব্রেইনের আরামেও সাহায্য করবে।

ওয়েব ডিজাইনিং/ডেভেলপে যে টেক্সট এডিটর গুলো ব্যবহার করতে পারেন:

  1. VS Code
  2. Sublime Text
  3. Atom
  4. Vim
  5. Notepad++

তবে আমরা কোনো টাকা না পেয়েও সাজেস্ট করব VS Code তাদের ওয়েবসাইট থেকে ফ্রি তে ডাওনলোড করে নিয়ে কাজ কর্ম শুরু করে দিতে।

 

ঘ) ওয়েব সাইট কিভাবে কাজ করে?

ভাইরে ভাই, এটাতো প্রথমে বলা উচিত ছিলো। যাজ্ঞা, ওয়েব সাইট অনেকগুলো ফাইলের সমষ্টি। একটি HTML ফাইলের মাঝেই থাকে অথবা লিংক করা থাকে আরও ৪/৫ টা ফাইল, থাকে অনেক সাহায্যকারী সাইটের CDN (এটা কি? আচ্ছা, পরে বলুমনে একদিন)। আপনি যখন ব্রাউজারে কোনো একটা পেজ ওপেন করেন তখনই ব্রাউজার সেই ফাইলগুলোর আধ্যাত্মিক ভাষাগুলোকে পরে নিয়ে একটা পেইজ প্রদর্শন করে। আপনি যখনই মাউস ক্লিক করে কিংবা ফোনের স্ক্রিনে টাচ করে কিছু করতে চাইলেন তখনই কমান্ড চলে যায় সেই ফাইল গুলোর কাছে যেগুলো রাখা আছে এক সার্ভারে। সেই ফাইল থেকে উত্তর খুঁজে নিয়ে আবার আপনাকে দেখায় নতুন কিছু। এভাবেই কাজ করে থাকে ওয়েবসাইট।

 

২. Front-End এর উপর হালকা প্যাঁচাল:

ফ্রন্ট এন্ডের জন্য শিখতে হবে HTML5 এবং CSS3 (পরবর্তী আপডেট আসলে এবং বহুল ব্যবহৃত হলে অবশ্যই সেই ভার্সন গুলোই ব্যবহৃত হবে, সেক্ষেত্রে বলা যায় HTML এবং CSS)। JavaScript ও ফ্রন্টএন্ডের একটা বড় অংশ। আলাদা আলাদা করে খানিকটা আলোচনা করা যাক।

 

ক) HTML বা এইচটিএমএল

HTML হচ্ছে একটি মার্কআপ ল্যাঙ্গুয়েজ যা পৃথিবীর সমস্ত ওয়েবসাইটের ফাউন্ডেশন তৈরি করতে ব্যবহৃত হয়। একটি ওয়েবসাইটের জন্য এটিই প্রধান ফাইল এবং এতে অন্যগুলো internal হিসেবে থাকে কিংবা external হিসেবে লিংক করে দেয়া হয়। এটি বিভিন্ন ট্যাগ ব্যাবহার করে কাজ করে। একটি সাধারণ HTML কোড নিচে উদাহারণ হিসেবে দেয়া হলো:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title> Experimental One from Pathgriho </title>

    <style>

    </style>

</head>

<body>

<div class=Tech.pathgriho.com>

    <h1> It is Powered by TechKib </h1>

<div>

</body>

</html>

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

 

খ) CSS বা সিএসএস

CSS এর পূর্নরূপ Cascading Style Sheets যার মাধ্যমে HTML ভাষায় লেখা অংশগুলোকে স্টাইল দেয়া হয়। CSS ৩ ভাবে ব্যবহার করা যেতে পারে।

১. Inline CSS

২. Internal CSS

৩. External CSS

 

ইনলাইন সিএসএস হলো এইচটিএমএল এর যে অংশের স্টাইল করা হবে ওই অংশেই ট্যাগের ভেতর style এট্রিবিউট ব্যবহার করে কাজ করাকে বলে ইনলাইন সিএসএস। ওই লাইনে না করে ক্লাশ, আইডি কিংবা সরাসরি ট্যাগ ব্যবহার করে <head></head> এর ভেতরে <style></style> ট্যাগের ভেতরের অংশে কাজ করাকে বলা হয় ইনটারনাল সিএসএস। আর একেবারে আলাদা একটি ফাইল তৈরি করে সেখানে স্টাইল করার কাজ করে তাকে <head> এর ভেতর <link> এর মাধ্যমে লিংক করে দেয়াকে বলে এক্সটার্নাল সিএসএস। নিচে ৩ টিরই উদাহারণ দেয়া হলো একই লাইনের উপর।

HTML:

<div class=Tech.pathgriho.com>

    <h1> It is Powered by TechKib </h1>

<div>

 

Inline CSS:

<div class=Tech.pathgriho.com>

    <h1 style=”text-align:center;”> It is Powered by TechKib </h1>

<div>

 

Internal CSS:

<head>

<style>

    h1 {

    text-align:center;

    }

</style>

</head>

<body>

    <div class=Tech.pathgriho.com>

        <h1> It is Powered by TechKib </h1>

<div>

 

External CSS:

ধরে নেই style.css নামে নতুন একটি ফাইল তৈরি করলাম এবং সেখানে লিখলাম

h1 {

text-align:center;

}

এবং html ফাইলে লিংক করতে লিখতে হবে

<head>

<link rel=”stylesheet” href=”style.css”/>

</head>

 

গ) JavaScript বা জাভাস্ক্রিপ্ট:

এতক্ষন ধরে আমরা যা জানলাম তা দিয়ে তৈরি ওয়েবসাইট হবে স্ট্যাটিক বা একমুখি ওয়েবসাইট। ডাইনামিক ওয়েবসাইট তৈরি করতে প্রয়োজন এই JavaScript। ঠিক যেমন উপরে বলে এসেছি ক্যালকুলেটরের ব্যাক এন্ড কাজ অর্থাৎ হিসাব করার কাজটা করতে দরকার হবে JavaScript.

ফ্রন্ট এন্ড শেষ হলো।

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


  1. Bootstrap: এটি সিএসএসকে সহজ করেছে। মূলত সিএসএস এর ঝাক্কাস এক কালেকশন যা প্রোগ্রামারের সময় বাঁচাবে কয়েকগুন।
  2. Git & GitHub: আপাতত এটিকে শুধু ফ্রি তে আপনার ডিজাইন করা ওয়েবসাইট গুলোকে পাবলিশ করার মাধ্যম হিসেবে ধরে নিন, আসলে এটি তার থেকেও অনেক বড় কিছু।
  3. Responsive Design: @media ব্যবহার করে কোডকে রেসপন্সিভ করা হয়, অর্থাৎ পিসিতে কেমন দেখাবে ওয়েবসাইটটি আবার মোবাইলেই বা কেমন দেখাবে সেসব ঠিক করে দেয়াই হচ্ছে এই অংশের কাজ। যেমন আমাদের পাঠগৃহের পিসি এবং মোবাইল ভিউ এর সাথে সাথে লোগোও আলাদা।
  4. Programming Language: C, C++, C#, Python, Java, Node.js, PHP, Ruby ইত্যাদি প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করার প্রয়োজন হয় বিভিন্ন কাজে।
  5. এগুলোর পাশাপাশি দরকার Database এর অংশ হিসেবে SQL শেখা।

 

সবই বুঝলাম ব্রো কিন্তু

ওয়েব ডিজাইনিং কিভাবে শিখব? বা
ওয়েব ডেভেলপমেন্ট কিভাবে শুরু করব?

-বিসমিল্লাহ বলে শুরু করে দেবেন।

-আরে ব্রো কোত্থেকে শিখব?

-ওহ ওহ, ওয়েট

 

ওয়েব ডিজাইনিং শেখার মাধ্যম গুলো:

১. ইউটিউব

দুনিয়ার সবথেকে সহজ, পানির থেকে সহজ ভাবে শেখা যাবে ইউটিউব থেকে। ইউটিউবে এমন অনেক অনেক ভিডিও/প্লেলিস্ট আছে যেখান থেকে খুব সহজ ভাষায় শেখা যাবে পুরো ওয়েব ডিজাইনিং এর ব্যসিক। ব্যাসিক শিখে নিয়ে এরপর এদিক ওদিক দৌড়াদৌড়ি করে শিখতে পারবেন আরও অনেক কিছু।

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

 

২. উডেমি এবং কোর্সেরা:

এখানে টাকা পয়সার ব্যাপার আছে। আপনি চাইলেই উডেমি আর কোর্সেরা (Udemy and Coursera) থেকে দেশ বিদেশের বহু বড় বড় উঁচু উঁচু নাম শুনলেই গায়ে কাপন লেগে যায় এমন বিশ্ববিদ্যালয় থেকে কোর্স করে সার্টিফিকেট বগলে নিয়ে ঘুরতে পারেন সহজেই।

 

৩. W3School:

শুধু গুগলে সার্চ w3school লিখে সার্চ দিয়ে ওয়েবসাইট টা থেকে ঘুরে আসেন, দুনিয়া আন্ধার মনে হবে। প্রোগ্রামিং, মার্ক আপ সহ যেকোনো ল্যাঙ্গুয়েজের পাই বাই পাই সব কিছু উদাহারণ সহ পেয়ে যাবেন সেখানে। কাজ করতে করতে আটকে গেলেই চলে যান সেখানে। সবার উপরে w3school সত্য, তাহার উপরে আছে কি না জানা নাই।

 

৪. বই পুস্তক:

এমন অনেক ভালো ভালো বই আছে যেখান থেকে শিখে নিতে পারবেন ওয়েব ডিজাইনিং। দেশি লেখক, বিদেশী লেখক- সবার বই ই আছে নীলক্ষেত। একদাম ১২০ (কথার কথা)। গিয়ে খোঁজ নিয়ে পারেন যদি এভাবে শেখার ইচ্ছা থাকে।

 

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

ভালো থাকবেন, নিরাপদ থাকবেন, সৎ থাকবেন। আর শিখতে থাকেন নিত্য নতুন কিছু।

ধন্যবাদ।

Post a comment

0 Comments