Frontend Development – ফ্রন্ডইন্ড ডেভেলপমেন্ট শিখার রোডম্যাপ (সময়, টিউটোরিয়াল, লাইভ প্রজেক্ট সহ)

Frontend Development

আপনি যদি ওয়েব ডেভেলপার হতে চান, তাহলে আমি আপনাকে প্রথমত প্রশ্ন করবো আপনি ফ্রন্ট ইন্ড/Frontend Development শিখতে চাচ্ছেন নাকি ব্যাকইন্ড/Backend Development শিখতে চাচ্ছেন?

ফ্রন্ট ইন্ডঃ ইন্টারনেট ব্যবহার করার সময় আমরা যেগুলো দেখি সেগুলো হল ফ্রন্ট ইন্ড ডেভেলপমেন্ট।

ব্যাক ইন্ডঃ ওয়েব সাইটে বিভিন্ন কাজ একা একাই হয়ে থাকে, আমরা একটা ক্লিক করলে ভিতরে অনেক পরিবর্তন হয়ে ফলাফল প্রদর্শিত হয় । এই রেজাল্ট প্রদর্শিত হবার পিছনে যে সিস্টেমটা ডেভেলপ করা হয়েছে সেটাই ব্যাক ইন্ড ডেভেলপমেন্ট।

ফ্রন্ট ইন্ড ডেভেলপার হতে চাইলে আপনাকে যে সকল বিষয় ভালো ভাবে জানতে হবে,
১। এইচটিএমএল, 
২। সিএসএস৩, 
৩। বুটস্ট্র্যাপ-৪/৫, 
৪। জাভাস্ক্রিপ্ট, 
৫। জেকুয়েরি।

আপনি এই সব গুলো এক সাথে শিখতে পারবেন না, তাই আমি কিছু স্টেপ বলছি,

➡➡ প্রথম স্টেপ ➡➡

🔶 কি শিখবো?
প্রথমে এইচটিএমএল ও সিএসএস শিখুন,
HTML হল একটি মার্কআপ ল্যাংগুয়েজ; যা দ্বারা ডিজাইনের স্ট্রাকচার করা হয়।
আর Css টা html এ স্টাইল ইউজ করতে ব্যবহৃত হয়। বিষয়গুলো ক্লিয়ার করতে একটু ঘাটাঘাটি করুন গুগল ও ইউটিউবে।
⏰ সময়ঃ ২০০ ঘন্টা, দৈনিক ১০ ঘন্টা করে সময় দিলে ২০ দিন দিন লাগবে, সময়ের কম-বেশি অনুপাতে বিলম্ব বা দ্রুত হবে।

✅ শিখে কি করব?
এবার অন্তত দুটি ল্যান্ডিং পেইজ প্রজেক্ট কমপ্লিট করুন করুন, শুধু এইচটিএমএল সিএসএস ব্যবহার করে। এখানে এসে আপনি কোন কমপ্লিট প্রজেক্টের টিউটোরিয়াল দেখে নিতে পারেন(https://youtu.be/7ylX8R0RENo)! এর দ্বারা কমপ্লিট প্রজেক্টের বাস্তব ধারণা হবে।
⏰ সময়ঃ দুটি প্রজেক্ট করতে ২০ – ৪০ ঘন্টার বেশি লাগবে না আশা করি, দৈনিক ১০ ঘন্টা করে সময় দিলে ২-৪ দিন লাগবে।

➡➡ দ্বিতীয় স্টেপ ➡➡

🔶কি শিখব?
-এবার আপনি বুটস্ট্রাপ শিখে ফেলুন,
বুটস্ট্রাপ মূলত ফ্রন্ট ইন্ড ডেভেলপমেন্ট এর একটি জনপ্রিয় ফ্রেমওয়ার্ক। অর্থাৎ এর দ্বারা আপনি অতি অল্প কিছু কোড দ্বারা সহজেই ডিভাইস ফ্রেন্ডলি ডিজাইন করতে পারবেন; যা সিএসএস দিয়ে করতে অনেক বেশি সময় লাগবে।
-বুটস্ট্রাপ শিখতে গেলে দেখবেন ভার্শন 4 টা পাবেন যদিও নিউ ভার্শন 5 যা সবে মাত্র রিলিজ হয়েছে। খুব বেশি পরিবর্তন নেই তাই 4 এর টিউটোরিয়াল ফলো করলেই হবে।
(বুটস্ট্রাপ নিয়ে কিছু কথাঃ https://www.sattacademy.com/bootstrap/index.php)

⏰ সময়ঃ ৮০ ঘন্টা, দৈনিক ১০ ঘন্টা করে সময় দিলে ৮ দিন লাগবে।

✅ শিখে কি করব?
এবার আপনি অন্তত দুটি প্রজেক্ট কমপ্লিট করুন বুটস্ট্রাপ ব্যবহার করে! এই ক্ষেত্রে আপনি একটা কমপ্লিট প্রজেক্ট টিউটোরিয়াল দেখে নিতে পারেন।
এটা দেখতে পারেন।

বুটস্ট্রাপ দিয়ে লাইভ প্রজেক্ট সমূহ

⏰ সময়ঃ ২০-৩০ ঘন্টা করে লাগতে পারে প্রথম দিকে এক একটা প্রজেক্ট করতে। দৈনিক ১০ ঘন্টা করে সময় দিলে ৬০ ঘন্টা তে ৬ দিন লাগবে।

➡➡ তৃতীয় স্টেপ ➡➡

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

⏰ সময়ঃ ২৫০ ঘন্টা, দৈনিক ১০ ঘন্টা করে সময় দিলে ২৫ দিন লাগবে।

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

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

⏰ সময়ঃ দুটি প্রজেক্ট কমপ্লিট করতে ৩০ ঘন্টা করে ৬০-৮০ ঘন্টা সময় লাগতে পারে, দৈনিক ১০ ঘন্টা করে সময় দিলে ৮ দিন লাগবে।

👉👉👉 এগুলো কোথা থেকে শিখব?
-গুগলে একবার খুজে দেখুন “Html Css Tutorial বা Bootstrap Tutorial বা JavaScript and JQuery Tutorial” এভাবে খুজলে হিউজ রিসোর্স পাবেন, যদি বাংলা তে দেখতে চান তাহলে শেষ in Bangla লিখে খুজতে পারেন।
xeq,
-বাংলায় পেইড নিতে চাইলে আপনি “আইটি বাড়ি (আইটি বাড়ির ভিডিও লিংক)” দেখতে পারেন, তাদের সুডেন্ট ফিডব্যাক বেশ ভালোই।

-বাংলায় ফ্রী শিখতে চাইলে আপনি “Coders Foundation (https://www.codersfoundation.com/free-course/)” ফলো করতে পারেন। অথবা শিখুন-ডটকমেও (https://shikhun.net/courses) দেখতে পারেন।

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

-কোডিং শিখার জন্য সবচেয়ে জনপ্রিয় আর্টিকেল প্লাটফর্ম এর নাম হল W3 School (w3school এর ওয়েব সাইট লিংক) এখানে আপনি সিরিয়াল মত সব কিছু পাবেন, সাথে প্র‍্যাক্টিস করার সুবিধা।

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

💎💎💎এই পর্যন্ত ৭৩ দিন বা ২.৫ (আড়াই) মাসের রুটিন ছিল। এটা একান্তই আমার নিজস্ব মতামত, যে কারো বেলায় এর ব্যতিক্রম হতে পারে।
আপনি যদি দিনে ৫ ঘন্টা করে সময় দিন তাহলে আমার হিসাব অনুযায়ী এগুলো শিখতে ৫ মাস সময় লাগতে পারে।

এই তিনটি স্টেপ ঠিক ভাবে ফলো করতে পারলে আপনি এখন মিডিয়ায় লেভেলের ওয়েব ডিজাইনার বা ফ্রন্ট ইন্ড ডেভেলপার। 😎

✳✳২০২০ সালে মিডিয়াম লেভেল নিয়ে বসে থাকলে কি আর চলে! চলুন এবার এডভান্স হতে শুরু করি।

১। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক (রিয়্যাক্ট , ভিউ জেএস, এংগুলার),
২। গিট – ভার্শন কন্ট্রোলের জন্য,
৩। সিএসএস প্রি-প্রসেসর স্যাস বা লেস।

▶ কি শিখব?
প্রথমেই একটা ফেইমওয়ার্ক নিয়ে কাজ শিখে ফেলুন, সেটা হতে পারে React, Viue Js, Angular. এখান থেকে আপনি যে কোন একটি শিখতে পারেন। রিয়েক্টটা বেশি রেকোমেন্ডেড।

⏰ সময়ঃ এটা শিখতে ১৮০ ঘন্টার বেশি লাগবে না আশা করি, ১৮ দিন লাগবে ১০ ঘন্টা করে সময় দিলে।

✅ শিখে কি করব?
শিখার পর সেটা দিয়ে একাধিক প্রজেক্ট করুন।

⏰ সময়ঃ প্রতিটি প্রজেক্টে ৭ দিন করে সময় দিন দৈনিক ১০ ঘন্টা করে।

▶ কি শিখব?
এরপরে ভার্সন কন্ট্রোল এর জন্য আপনাকে গিট শিখতে হবে। আর কাজের মধ্যে স্প্রিড নিয়ে আসার জন্য আপনাকে সিএসএস এর প্রি-প্রসেসর স্যাস বা লেস শিখতে হবে ।

⏰ এগুলোর জন্য ৫ দিনই যতেষ্ট দশ ঘন্টা করে, তারপর কাজ করতে করতে অভিজ্ঞতা হতে থাকবে।

👉👉👉 কোথায় পাবো?
রিয়াক্ট রিসোর্সঃ রিয়েক্টের ভিডিও এর জন্য রাব্বিল হাসান ভাইয়ের কোন তূলনা নেই, উনার ৪০ থেকে ৫০% ভিডিও ফ্রিতে দেয়া থাকে আর বাকি ভিডিও গুলো কিনতে নাম মাত্র টাকা নেন। ফলে উনার টিউটোরিয়াল নিয়ে কোন প্রশ্নের প্রয়োজন নেই এক কথায় সুপার্ব।
(https://www.youtube.com/playlist?list=PLkyGuIcLcmx2abvUMewDtJf_jHjrX__0C)

ভিউ জেএস রিসোর্সঃ
(https://www.youtube.com/playlist?list=PLZ8kLhUbDAhDM7SALr1BWJf9zSdrYL1f5)

গিট রিসোর্সঃ (https://www.youtube.com/playlist?list=PL_XxuZqN0xVDDw5eyzuRDXBzgdnW7UpDF)

সিএসএস প্রিপ্রোসেসর লেসঃ
( পরিচিতি ও ব্যবহার: https://youtu.be/5mpDv1NgZ8c)
(https://youtu.be/YD91G8DdUsw)
(Playlist: https://www.youtube.com/playlist?list=PLfWvlHR69Rlb9Llt7l-ZYzVcrKFFiKnnG)

সেস নিয়েঃ
(https://youtu.be/C-CBDh7TY_4)

ব্যাকইন্ড নিয়ে অন্য কোন দিন কথা হবে। 😊

আর ব্যাকইন্ড ডেভেলপার হতে চাইলে আপনাকে 
১। পিএইচপি,
২। মাইএসকিউএল, 
৩। এজাক্স, 
৪। ওওপি 
৫। লারাভেল

উপরের ল্যাংগুয়েজগুলো ব্যবহার করে নিচের দুটো বিষয় শিখবে ও সাথে সাথে প্র‍্যাক্টিসও হয়ে যাবে।

৬। সিএমএস টেমপ্লেট বিল্ডিং (ওয়ার্ডপ্রেস, দ্রুপাল, জুমলা এগুলোর যে কোন একটি)
৭। প্লাগইন বা এডন ডেভেলপমেন্ট।

▶ কি শিখব?
–পিএইচপি হল ডেভেলপমেন্ট এর প্রথম স্টেপ, পিএইচপি কি? এটার জবাবে উইকিপিডিয়া বলছে, “পিএইচপি একটি প্রোগ্রামিং ভাষা। এটি মূলত সার্ভার-সাইড স্ক্রিপ্টিং-এর জন্য ব্যবহৃত হয়। পিএইচপি হচ্ছে একটি স্ক্রিপ্টিং ভাষা যা মূলতঃ চলমান ওয়েব পাতা তৈরির জন্য ডিজাইন করা হয়েছে। ইহা কমান্ড লাইন ইন্টারফেস ক্ষমতাকে অন্তর্ভুক্ত করেছে এবং স্ট্যান্ডআলোন গ্রাফিক্যাল আপ্লিকেশনকে ব্যবহার করতে পারে।” অন্যান্য আরও প্রোগ্রামিং ল্যাংগুয়েজ থাকলেও পিএইচপি অনেক বেশি জনপ্রিয়; ফেইসবুকের মত ওয়েবসাইটও পিএইচপি তে ডেভেলপ করা। আরও জানতে ইউটিউবে খুজে দেখুন “What is php”, এটাও দেখতে পারেন (টিউটোরিয়াল)।

PHP এর উপর আমার দেখা সেরা টিউটোরিয়াল

✅ শিখে কি করব?

▶ কি শিখব?
তারপরে পিএইচপি এর যেকোনো একটা ফ্রেমওয়ার্ক শিখতে হবে । বর্তমানে লারাভেল ফ্রেমওয়ার্ক ভালো চলতেছে । চাইলে এটা শিখতে পারেন । ‍বা অন্য কোনো ফ্রেমওয়ার্ক ।

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

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

2 thoughts on “Frontend Development – ফ্রন্ডইন্ড ডেভেলপমেন্ট শিখার রোডম্যাপ (সময়, টিউটোরিয়াল, লাইভ প্রজেক্ট সহ)”

  1. ভাইরে ভাই, কই ছিলেন আপনি এতো দিন?
    কিসের পর কি করতে হবে একদম ক্লিয়ার হয়ে গেছে। ধন্যবাদ।।

Leave a Reply

Your email address will not be published. Required fields are marked *