সর্বশেষ সম্পাদনা করেছেন সীমান্ত ঈগল (মেহেদী) (০৪-০১-২০১৫ ১৯:৫৫)

টপিকঃ জেকুয়েরী সম্পর্কে জানতে চাই।

অল্প কয়েকদিন হলো (more than 14 days) এইচটিএমএল, সি এস এস, জেকুয়েরী নিয়ে ডব্লিও থ্রি স্কুল থেকে গুতোগুতি করছি ।  মোটামুটি এইচটিএমএল ও সিএসএস সম্পর্কে ধারণা পেতে শুরু করেছি। কিন্তু জেকুয়েরীতে এসে প্রাথমিক বিষয়টাই বুঝতেছিনা। brokenheart brokenheart একটু হেল্পান-

1.  কোডটার ব্যাখ্যা- ?

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

2. আমি জানি জেকুয়েরী লেখার সিস্টেম এভাবে। কিন্তু কোন সাইনের ভিতর কি বসবে সেটাই বুঝতেছি না  (বোল্ড অংশ)-                   

<script> $( ).( );  </script>

সর্বশেষ সম্পাদনা করেছেন কাজী আলী নূর (০৪-০১-২০১৫ ২৩:৪৭)

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

jQuery তে যে কাজটি করা হয় তা মেথড আকারে সিলেক্টরের উপরে এপ্লাই করা হয়। আর এখন বলছি সিলেক্টর কি জিনিস, আপনি যেহেতু CSS দেখেছেন সেই CSS সিলেক্টরগুলোকেই jQuery -তে  jQuery এর স্টাইলে লিখা হয়

$('সিলেক্টর')

ঠিক এভাবে।

আর এতে মেথড এপ্লাই করা হয়

$('সিলেক্টর').methodName(আর্গুমেন্ট-১, আর্গুমেন্ট-২....)
                          .anotherMedhod(এক বা একাধিক প্রয়োজনীয় আর্গুমেন্ট বা প্যারামিটার)
                          .end()
                          .evenAnotherMethod(আর্গুমেন্ট-১, আর্গুমেন্ট-২....);

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

সীমান্ত ঈগল (মেহেদী) লিখেছেন:

1.  কোডটার ব্যাখ্যা- ?

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

আপনি $(document) দিয়ে আপনার কাংখিত ওয়েবপেজটিকে jQuery এর আদলে সিলেক্ট করেছেন
তারপরে আপনি সেই সিলেক্টরের উপরে .ready() মেথডটি এপ্লাই করেছেন যাতে আপনি আর্গুমেন্ট হিসেবে একটি Self-invoking anonymous ফাংশন বা স্বনিয়ন্ত্রিত এবং নামবিহীন একটি অ্যানোনিমাস ফাংশনকে ব্যবহার করেছেন।

আর ডকুমেন্ট রেডি মেথড প্রয়োগের ফলে আপনার এই মেথডটি তখনই কাজ করবে যখন পুরো ডকুমেন্টটি ব্রাউজারে সম্পূর্ণ লোড হবে। মানে $(document).ready() এই জন্যই দিয়েছেন যেন আপনার jQuery (জাভাস্ক্রিপ্ট) রান করার পূর্বে ব্রাউজারে ওয়েব পেজটি লোড হওয়া পর্যন্ত অপেক্ষা করে। তাই যখনই পেজের কন্টেন্টগুলো পুরোপুরি লোড হয়ে যাবে তখনই jQuery এক্সিকিউট করবে এবং তখন নিচের কোডটি রান করবে যেটি আপনি ready() মেথডের অভ্যন্তরে একটি অ্যানোনিমাস ফাংশন আকারে লিখেছেন

$("p").click(function(){
    $(this).hide();
  });

এখানে $("p") মানে আপনি আপনার স্ক্রিপ্টে কাংখিত ওয়েবপেজের  সকল p element তথা প্যারাগ্রাফ এলিমেন্টকে সিলেক্ট করলেন যেটিতে আপনি click() মেথডটি প্রয়োগ করলেন। আবারও পূর্বের ন্যায় click() মেথডটির ভিতর একটি অ্যানোনিমাস ফাংশন লিখেছেন যেটির কোন নাম নেই। একারণেই তাকে বলা হচ্ছে অ্যানোনিমাস ফাংশন।

আর আপনি সেই ফাংশনে $(this).hide(); অংশটি দিয়েছেন যেন ওয়েবপেজের যেকোন প্যারাগ্রাফের ওপরে ক্লিক করলে পরে ফাংশনটি রান করে এবং তখন এই অংশটি এক্সিকিউট করবে।

$(this).hide();

এই অংশের ব্যাখ্যা:

$(this) মানে আপনি ইতিমধ্যে যেটিকে সিলেক্ট করে রেখেছেন সেটিকেই বুঝাচ্ছে। আর এক্ষেত্রে সেটি হবে প্যারাগ্রাফ এলিমেন্ট । তার পরের অংশ অর্থাৎ আপনার বর্তমান jQuery সিলেক্টরের উপর hide() মেথড প্রয়োগ করেছেন। এর কাজটি নিশ্চয়ই অনুমেয় কেননা আপনি যেই click() মেথডটি ব্যবহার করেছিলেন সেটির দ্বারা এই hide() মেথডটি পরিচালিত হবে। তার মানে হলো যখন কোন প্যারাগ্রাফের উপর ক্লিক করা হবে তখন সেই প্যারাগ্রাফটি হাইড হয়ে যাবে বা লুকিয়ে যাবে।

আর click() এখানে jQuery মেথড হলেও এটি মূলত একটি জাভাস্ক্রিপ্ট ইভেন্ট। jQuery এর পূর্ববর্তী ভার্সনে এটিকে সেভাবেই ডিক্লেয়ার করা হয় বিধায় সেটির প্রয়োগ w3schools সাইটের এক্সামপল কোড-এ click কে jQuery মেথড আকারে লিখেছে। এটিকে jQuery এর নতুনতম ভার্সনগুলোতে on() মেথড এর ভেতর আর্গুমেন্ট আকারে লিখা হয়। যেমন

$('p').on( "click", function() {
   $( this ).hide(3000) );

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

.hide() মেথডে 3000 দিয়েছি যাতে আপনার উপরে বর্ণিত সিলেক্টরের উপর যে হাইড ইফেক্টটি প্রয়োগ হবে সেটি অপেক্ষাকৃত স্বাভাবিক গতির চেয়ে ধীরগতির হয় আর প্যারাগ্রাফটিতে ক্লিক করলে নির্দিষ্টভাবে 3 সেকেন্ড সময়ে প্যারাগ্রাফটি হাইড হয়।

আর

$(document).ready(function(){blah blah blah});)

এর ইকোভ্যালেন্ট নতুন স্টাইল হচ্ছে

$(function(){
function(){blah blah blah});
})

এভাবে আপনার শেয়ার করা কোডটিকে পরিবর্তন করে লিখলে সেটি হয় নিচের মতন

$(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

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

আর পুরনো কোড এক্সাম্পল হিসেবে ব্যবহার করে এবং সেগুলোকে নিয়মিত আপডেট করে না বলেই w3schools নট রিকোমেন্ডেড। আপনি কম সময়ে jQuery তে দক্ষ হতে চাইলে আমি যেটি রিকোমেন্ড করবো সেটি হলো TutsPlus এর Jeffrey Way'র 30 Days to Learn jQyery। ইউটিউভে এর সম্পূর্ণ লেকচারগুলোর প্লে-লিস্ট রয়েছে এখানে। সেখানে কোর্সটি ধারাবাহিক আকারে সাজানো আছে যাতে আপনার শিখতে সুবিধা হবে। শুভ কামনা রইলো।

হে আল্লাহ, তুমি সকলের মঙ্গল কর; তোমার রহমতের আশ্রয়ে আশ্রিত কর..... আমীন
সঠিক পদ্ধতিতে ওয়ার্ডপ্রেস ইন্সটল করুন এবং আপনার ওয়ার্ডপ্রেস সাইটটিকে সুরক্ষিত রাখুন

কাজী আলী নূর'এর ওয়েবসাইট

লেখাটি GPL v3 এর অধীনে প্রকাশিত

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

খুব সহজ করে বলতে গেলে এভাবে বলতে পারি...


$(document).ready(function(){


});

ডকুমেন্ট লোড হবার পর এর ভেতরের অংশের কাজ হবে। এখানে কোন কিছুর পরিবর্তন করা চলবে না।

  $("p").click(function(){

  });

p ট্যাগে ক্লিক করলে এর ভেতরের কাজ হবে। এখানে p ট্যাগের যায়গায় অন্য কোন ট্যাগ বা আইডি দিতে পারেন।



    $(this).hide();

যে ট্যাগে ক্লিক করেছি ঐ ট্যাগ গুলো লুকিয়ে ফেল।  এখানে this এর যায়গায় যে আইডি বা ট্যাগ লুকাতে চান ঐটা দিতে হবে।

Sohel Rana
Web Designer & Developer

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

অনকে ধন্যবাদ আপনাদের।

সিলেক্টর নিয়ে একটা কোশ্চেন-
- সিএসএস  এ যখন কোন এলিমেন্ট কে সিলেক্ট করি, তখন কয়েক ভাবে লেখা হয়- কখনো শুরু হয় ”ডট” দিয়ে, আরেকটা ”হ্যাশ ট্যাগ” দিয়ে। এদের ডিফারেন্স বুঝতে পারিনি। আসলে আপনাদের কাছে মনে হতে পারে, এত ইজি জিনিস কেউ জিগায় নাকি! কিন্তু আমি একেবারে নিজ প্রচেষ্টায় প্রাথমিক লেভেলে শিখতেছি।  smile

main
.header
#sidebar

ইয়ে সকাল হয়ে গেছে, ফজরের আজান দিচ্ছে মাত্র। শুভ সকাল।
http://cache.desktopnexus.com/thumbnails/1266791-bigthumbnail.jpg

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

# দিয়ে আইডি এবং ডট দিয়ে ক্লাস সিলেক্ট করা হয়।

সর্বশেষ সম্পাদনা করেছেন কাজী আলী নূর (০৫-০১-২০১৫ ১৭:১২)

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

সীমান্ত ঈগল (মেহেদী) লিখেছেন:

অনকে ধন্যবাদ আপনাদের।

সিলেক্টর নিয়ে একটা কোশ্চেন-
- সিএসএস  এ যখন কোন এলিমেন্ট কে সিলেক্ট করি, তখন কয়েক ভাবে লেখা হয়- কখনো শুরু হয় ”ডট” দিয়ে, আরেকটা ”হ্যাশ ট্যাগ” দিয়ে। এদের ডিফারেন্স বুঝতে পারিনি। আসলে আপনাদের কাছে মনে হতে পারে, এত ইজি জিনিস কেউ জিগায় নাকি! কিন্তু আমি একেবারে নিজ প্রচেষ্টায় প্রাথমিক লেভেলে শিখতেছি।  smile

main
.header
#sidebar

সকল এইচটিএমএল ট্যাগের ট্যাগ নেমকে সিএসএস এ সররসরি নিচের মত করে লেখা হয়।

body {
    // এখানে সব স্টাইল এপ্লাই করা হয়;
}

এভাবে যে কোন ট্যাগকে সিএসএসে সিলেক্ট করলে সেগুলো হয় টাইপ সিলেক্টর।

কমা দিয়ে নিচে একটি গ্রুপ সিলেক্টর টার্গেট করা হয়েছে

html, body, #main {
    // এখানে এদের জন্য সেইম স্টাইল রুল;
}

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

নেস্টেড প্যারেন্ট-চাইল্ড সিলেক্টর

<ul>
<li><span><a href="#" id="post-comment">Comment</a></span></li>
</ul>

উপরের এইচটিএমএল এর জন্য নিচের সিএসএস স্টইলগুলো খেয়াল করেন।

ul li span #post-comment {
    // স্পেসিফিক নেস্টেড সিলেক্টরের উপরে স্টাইল রুলস;
}

গ্রুপ সিলেক্টরের ক্ষেত্রে কমা দ্বারা পৃথক সিলেক্টরের লিস্ট লেখা হয় আর নেস্টেড (স্পেসিফিক এলিমেন্ট) সিলেক্টরের ক্ষেত্রে স্পেস দ্বারা পৃথক সিলেক্টরের লিস্ট লেখা হয়।

এখানে আপনি ঐ সকল এংকর ট্যাগ কে সিলেক্ট করেছেন যারা ul এলিমেন্ট এর Direct Descendant, li এলিমেন্ট এর চাইল্ড span এলিমেন্ট এর Direct Descendant এবং যাদের নির্দিষ্ট আইডি হচ্ছে #post-comment

এর মধ্যে ul, li, span ইত্যাদি হচ্ছে টাইপ সিলেক্টর এবং আইডি অ্যাট্রিবিউটের ভ্যালুটি হচ্ছে আইডি সিলেক্টর। সিএসএসে আইডি সিলেক্টর লেখার নিয়মানুযায়ী আইডি অ্যাট্রিবিউটের ভ্যালুর আগে একটি # (হ্যাশ / পাউন্ড সাইন) জুড়ে দেয়া হয় ঠিক উপরের সিএসএস কোডটিতে যেরকমটি দেখালাম। আর ক্লাস সিলেক্টরের ক্ষেত্রে class অ্যাট্রিবিউট এর ভ্যালু সিএসএসে লেখার সময় তার পূর্বে . (dot) জুড়ে দেয়া হয়।

<a href="#" class="secondary-link">blah blah blah</a>

// এই এইচটিএমএল এর জন্য সিএসএস ক্লাস সিলেক্টর হবে নিম্মরূপ

.secondary-link {
    // স্টাইল রুলস;
}

DOM (Document Object Model) বুঝলে সিএসএস এবং জাভাস্ক্রিপ্ট/জেকোয়ারী কোড বুঝতে সুবিধা হয়। তাই এখানে DOM নিয়ে একটু আলোচনা করার চেষ্টা করছি। DOM এ আপনার এইচটিএমএল ডকুমেন্টের প্রত্যেক্টি এলিমেন্টকে এক একটি অবজেক্ট হিসেবে বর্ণনা করা হয়। যাদের অন্য ভাষায় Node ও বলা হয়ে থাকে। সবার উপরের html নোড থেকে শুরু করে তার অভ্যন্তরে DOM হায়ারার্কিতে যেভাবে নেস্টেড এলিমেন্টগুলো থাকে সেগুলোর মধ্যে সর্ব নিম্ম স্তরে অবস্থিত নোড পর্যন্ত পুরো স্ট্রাকচারটিকে বলা হচ্ছে DOM Tree

এখানে একটি নোড এর সাথে অপর নোড এর সম্পর্ক অনেকটা ফ্যামিলি ট্রির মতন। যেমন html নোড এর চাইল্ড হচ্ছে head
ও body এলিমেন্ট। আর এখানে head ও body আবার পরস্পরের সিবলিং (sibling)। body'র চাইল্ড এলিমেন্ট যদি হয় #main তাহলে সেটি আবার html এর নোড এর সাথে দাদা-নাতির সম্পর্কে আবদ্ধ। অর্থাৎ #main হলো html এর Grandchild। বিপরীত ভাবেও body হলো #main এর parent এলিমেন্ট এবং html আবার body এর জন্য parent। DOM এর মধ্যে বুঝার সুবিধার্থে এলিমেন্ট থেকে এলিমেন্টের মাঝে parent-child, grandparent-grandchild, great grandparent- great grandchild ইত্যাদি রিলেশন বর্ণনা করা হয়ে থাকে।

উপরের কোড এর ক্ষেত্রে ul এলিমেন্ট এবং a এলিমেন্ট এর মাঝের সম্পর্ক great grandparent এবং great grandchild হলেও সেক্ষেত্রে সরলতা অবলম্বনপূর্বক ul কে a এর অ্যানসেস্টর (ancestor) এবং a কে ul এর ডিসেনডেন্ট (Descendant) বলা হয়।

সিবলিং সিলেক্টর

h1 + p {
    // সিবলিং সিলেক্টরের জন্য স্টাইল রুলস;
}
সকল p এলিমেন্টকে সিলেক্ট করলাম যারা h1 এলিমেন্ট এর সিবলিং।

ডিরেক্ট ডিসেনডেন্ট সিলেক্টর

p > span {
    // স্টাইল রুলস;
}

ডিরেক্ট ডিসেনডেন্টে বাপাশের এলিমেন্টের সাথে ডানের এলিমেন্টের সরাসরি parent-child সম্পর্ক আছে এমন এলিমন্টকে সিলেক্ট করা হয়। সেক্ষেত্রে ডানের এলিমেন্টের উপর স্টাইল রুলগুলো এপ্লাই করা হচ্ছে।

ডিরেক্ট ডিসেনডেন্ট ও সিবলিং সিলেক্টরগুলো কে আবার অ্যাডজেসেন্ট সিলেক্টর বলা হয় কেননা এগুলো কেবল নিকটবর্তী ডিসেনডেন্ট ও নিকটবর্তী সিবলিং এর ক্ষেত্রে কাজ করে অন্য কোন ডিসেনডেন্ট কিংবা সিবলিং এর ক্ষেত্রে ঐ স্টাইল রুল কাজ করবে না।

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

হে আল্লাহ, তুমি সকলের মঙ্গল কর; তোমার রহমতের আশ্রয়ে আশ্রিত কর..... আমীন
সঠিক পদ্ধতিতে ওয়ার্ডপ্রেস ইন্সটল করুন এবং আপনার ওয়ার্ডপ্রেস সাইটটিকে সুরক্ষিত রাখুন

কাজী আলী নূর'এর ওয়েবসাইট

লেখাটি GPL v3 এর অধীনে প্রকাশিত

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

নুর ভাই যে টিউটোরিয়াল দিয়েছেন, আমি জেকুয়েরী সম্পর্কে এটুকুই জানি। এরপর যেটা জানি সেটা হল :

"What I want to do" JQuery (মানে : আমি জেকুয়েরী দিয়ে যে কাজটা করতে চাই) দিয়ে গুগলে সার্চ
যেমন : Image Zoom Plugin Jquery

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

সর্বশেষ সম্পাদনা করেছেন সীমান্ত ঈগল (মেহেদী) (০৫-০১-২০১৫ ১৭:৫৭)

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

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

আর ডব্লিউ থ্রি স্কুলের কোন বিকল্প আছে কি?  confused

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

সীমান্ত ঈগল (মেহেদী) লিখেছেন:

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

আর ডব্লিউ থ্রি স্কুলের কোন বিকল্প আছে কি?  confused

এইচটিএমএল মূলত ট্যাগ আর অ্যাট্রিবিউট ছাড়া আর কিছুই না।

আর সিএসএস হলো সিলেক্টর, প্রপার্টি-ভেলু পেয়ার।

HTML ও CSS শিখতে বড়জোড় এক সপ্তাহ সময় লাগতে পারে যত ভালো করেই আপনি শিখেন না কেন সময় খুব বেশি যাবে না তাতে।

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

জাভাস্ক্রিপ্ট এর জন্য আলাদা কোন কম্পাইলার কিংবা ইন্টারপ্রেটর ইন্সটল করতে হয় না। আপনার কেবল টেক্সট এডিটর এবং ব্রাউজার হলেই আপনি জাভাস্ক্রিপ্ট ডিবাগ করতে পারছেন। তাই এটি শিখতে গেলে গ্রোগ্রামিং এর ধারণা খুব সহযেই হয়ে যায় যদিও জাভাস্ক্রিপ্টকে প্রোগ্রামিং ল্যাংগুয়েজ না ধরে স্ক্রিপ্টিং ল্যাংগুয়েজই ধরা হয় তার পরেও এটি শিখলে অন্য যে কোন প্রোগ্রামিং ল্যাংগুয়েজ শিখার কাজটা অনেকাংশে সহজ হয়ে যায়। কেননা প্রোগ্রামিং কনসেপ্টগুলো সব ল্যাংগুয়েজের ক্ষেত্রে ফান্ডামেন্টালি একই রকমের হয়ে থাকে। শুধুমাত্র সিন্ট্যাক্সগুলো ল্যাংগুয়েজ ভেদে হয় ভিন্ন ভিন্ন।
 
HTML, CSS ও Javascript/jQuery ইত্যাদির জন্য আমার ব্যক্তিগত পছন্দের তালিকা:
১) HTML Dog (http://www.htmldog.com/) - টিউটোরিয়াল এবং রেফারেন্স
২) MDN - Mozilla Developer Network (https://developer.mozilla.org/) or Web Platform (http://www.webplatform.org/) - ঐ
৩) SitePoint (http://www.sitepoint.com/) - ঐ
৪) CSS-Tricks (http://css-tricks.com/) টিউটোরিয়াল এবং ট্রিকস
৫) Codecademy (http://www.codecademy.com/) ইন্টারেক্টিভ ট্রেনিং প্রোগ্রাম (এতে PHP, Ruby ইত্যাদির ট্রেনিং ও আছ)

আর আপনি ওয়েব টেকনোলজির যে কোন বিষয়ের ওপর যদি শর্ট কিন্তু পুর্ণাঙ্গ কোর্স চান তাহলে Tizag (http://www.tizag.com/)

আর ভালো মানের ভিডিও এবং লিখত আকারে টিউটোরিয়াল পেতে চাইলে tutsplus (http://tutsplus.com/)  এবং teamtreehouse (http://teamtreehouse.com/)। এদের ব্লগগুলোর উপর চোখ রাখলে আপনি ওয়েব টেকনোলজি এবং ডিজাইন ট্রেন্ড সম্পর্কে আপটুডেট তথ্য পাবেন। সেখানে অনেক কিছুই ফ্রীতে পাবেন।

stackexchange (http://stackexchange.com/) নেটওয়ার্কে আপনি আপনার যে কোন বিষয়ের কোন সমস্যার সমাধান পেয়ে যেতে পারেন যদি সেটি ইতিমধ্যে কেউ প্রশ্ন করে থাকে। তাহলে আপনি ঐ প্রশ্নের উত্তরগুলো থেকে আপনার সমস্যার সমাধানটি পেয়ে যাবেন। গুগলে সার্চ দিলে অনেক সময়েই stackoverflow, serverfault, superuser এর সার্চ রেজাল্ট দেখা যায় এগুলোর সবগুলোই মূলত stackexchange নেটওয়ার্কের বিভিন্ন সাইট।

freenode আইআরসি নেটওয়ার্কে আপনি যে কোন টেকনোলজির উপর পৃথক পৃথক আইআরসি চ্যাট চ্যানেল পাবেন যেমন, #css, #javascript, #jquery, #php, #ruby, #wordpress, #joomla etc. আরও শত শত টেকনোলজির নির্দিষ্ট চ্যাট চ্যানেল রয়েছে সেখানে। আপনি আপনার কাংখিত চ্যানেলে নিয়মিত হতে পারেন। আপনার রোল হবে হয় নির্দিষ্ট ও গঠনমূলক প্রশ্ন করে সমস্যার সমাধান নেয়া, অন্যদের সহায়তা লাভ কিংবা অন্যের প্রশ্নের উত্তর আপনার জানা থাকলে সেটির মাধ্যমে তাকে সহায়তা করা। এভাবেও পারস্পরিক শেয়ারিং থেকে অনেক কিছু শিখতে পারা যায়।

গুগল এবং ইউটিউব থেকে আমি প্রায়শই দারুণ দারুণ জিনিস আবিষ্কার করি যেগুলো আমি আর অন্য কোথাও সেভাবে পাইনা।

হে আল্লাহ, তুমি সকলের মঙ্গল কর; তোমার রহমতের আশ্রয়ে আশ্রিত কর..... আমীন
সঠিক পদ্ধতিতে ওয়ার্ডপ্রেস ইন্সটল করুন এবং আপনার ওয়ার্ডপ্রেস সাইটটিকে সুরক্ষিত রাখুন

কাজী আলী নূর'এর ওয়েবসাইট

লেখাটি GPL v3 এর অধীনে প্রকাশিত

১০

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

কাজী আলী নূর লিখেছেন:

HTML ও CSS শিখতে বড়জোড় এক সপ্তাহ সময় লাগতে পারে

আমারো তাই মনে হয়। কারণ আমি সপ্তাহে মাত্র ২/ত ঘন্টা বসেছি।

১১

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

সীমান্ত ঈগল (মেহেদী) লিখেছেন:
কাজী আলী নূর লিখেছেন:

HTML ও CSS শিখতে বড়জোড় এক সপ্তাহ সময় লাগতে পারে

আমারো তাই মনে হয়। কারণ আমি সপ্তাহে মাত্র ২/ত ঘন্টা বসেছি।

ওই শেখা প্রডাকশনে কোন কাজে আসবে না যদিও  tongue

জেকুয়েরীর আগে JS এর বেসিক কোর্স করেন

১২ সর্বশেষ সম্পাদনা করেছেন সীমান্ত ঈগল (মেহেদী) (০৫-০১-২০১৫ ২০:৪৯)

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

আশিফ শাহো লিখেছেন:

ওই শেখা প্রডাকশনে কোন কাজে আসবে না যদিও  tongue

জেকুয়েরীর আগে JS এর বেসিক কোর্স করেন

Thanks আশিফ vai smile

১৩ সর্বশেষ সম্পাদনা করেছেন কাজী আলী নূর (০৬-০১-২০১৫ ১৭:২৮)

Re: জেকুয়েরী সম্পর্কে জানতে চাই।

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

হে আল্লাহ, তুমি সকলের মঙ্গল কর; তোমার রহমতের আশ্রয়ে আশ্রিত কর..... আমীন
সঠিক পদ্ধতিতে ওয়ার্ডপ্রেস ইন্সটল করুন এবং আপনার ওয়ার্ডপ্রেস সাইটটিকে সুরক্ষিত রাখুন