Rir Rakib

ফ্রন্ট-এন্ড ডেভেলপারদের জন্য প্রয়োজনীয় লিঙ্ক। কাজ করার সময় সবসময় লাগবে। আশাকরি সবার উপকার হবে।
❗ সিএসএস ফ্রেমওয়ার্ক
Bootstrap 5 - https://getbootstrap.com/
Foundation - https://get.foundation/
Bulma - https://bulma.io/
Reflexgrid - https://reflexgrid.com/
❗ আইকন
ওয়েবসাইট ডিজাইন করার সময় আমাদের বিভিন্নরকম আইকন ব্যবহার করতে হয়। যেগুলা ওয়েবসাইট এর সৌন্দর্য আরও বৃদ্ধি করে। এখানে জনপ্রিয় কিছু আইকন ওয়েবসাইটের লিঙ্ক দেওয়া হল। আপনি আপনার ডিজাইনের চাহিদা মত আইকন ব্যবহার করতে পারেন।
Font Awesome - https://fontawesome.com/
Line Awesome - https://icons8.com/line-awesome
Icon Finder - https://www.iconfinder.com
Material Icon - https://fonts.google.com/icons?selected=Material+Icons
❗ ফন্টস
যেকোনো ওয়েবসাইট ডিজাইনের একটু গুরুত্বপূর্ণ বিষয় হলো ভালো একটি ফন্ট পছন্দ করা। আপনার ফন্ট যত সুন্দর হবে, সাইটের সৌন্দর্য আরও বৃদ্ধি পাবে। ফ্রী ফন্টের মধ্যে অন্যতম ফন্ট হচ্ছে গুগলের নিজস্ব ফন্ট। যদি এর মধ্যে আপনি আপনার পছন্দ মত ফন্ট খুঁজে না পান তাহলে কাস্টম ফন্টের জন্য অন্যান্য সাইট ব্যবহার করতে পারেন।
Google Fonts - https://fonts.google.com
Custom Fonts - https://www.dafont.com/
❗ ফ্রি ছবি
ডিজাইনের প্রয়োজনে প্রচুর ছবি ব্যবহার করতে হয়। আপনি যদি সরাসরি গুগল থেকে ডাউনলোড করেন তাহলে কপিরাইট এর সমস্যা হতে পারে। আবার মনমত ছবি নাও পেতে পারেন। আবার ছবি পছন্দ হলে দেখা গেল অনেক বড় সাইজ। এইরকম অনেক সমস্যা। এর জন্য ছবির বিভিন্ন ওয়েবসাইট আছে যেখান থেকে আপনি ফ্রী ছবি ডাউনলোড করতে পারবেন ইচ্ছা মত আর কোন কপিরাইট এর ঝামেলা নেই।
Unsplash - https://unsplash.com
Pexels - https://www.pexels.com
❗ কোড ভ্যালিদেশন
কোড শুধু লিখলেই হয় না। কোডটা প্রোপারলি ভ্যালিড হতে হয়। নাহলে সকল ব্রাউজারে সাপোর্ট করবে না। এছাড়া এর সমস্যা হয়। কোড অনেক বড় হয়ে গেলে ম্যানুয়ালি চেক করা অনেক ঝামেলার। এইজন্য বিভিন্ন ওয়েবসাইট আছে যেখানে আপনার কোড আপলোড করে দেখতে পারেন কোড ভ্যালিড কি না। কোডের কোন জায়গায় সমস্যা, কি কি ঠিক করতে হবে সব বলে দিবে।
HTML - https://validator.w3.org
CSS - https://jigsaw.w3.org/css-validator
❗ কোড ফরম্যাট
আমরা অনেক সময় কোড এলোমেলো ভাবে লিখি। যদিও কাজ ঠিকই করে। একজন ভালো কোডারের একটা অন্যতম গুণ হচ্ছে সুন্দর করে কোড লিখা। ইচ্ছা সত্ত্বেও অনেক সময় কোড এলোমেলো হয়ে যায়। কোড যদি খুব বেশি হয় তাহলে একটা একটা করে ঠিক করা অনেক ঝামেলার। এই কারনে বিভিন্ন ওয়েবসাইট আছে যেখানে আপনি কোড ফরম্যাট ঠিক করতে পারবেন।
HTML - https://www.freeformatter.com/html-formatter.html**
CSS - https://www.freeformatter.com/css-beautifier.html
JS - https://www.freeformatter.com/javascript-beautifier.html
❗ রেস্পন্সিভ / মোবাইল ফ্রেন্ডলি চেক
বর্তমানে ওয়েব সাইটের অন্যতম বৈশিষ্ট্য হল সকল প্রকার ডিভাইসে যাতে ভালোভাবে দেখা যায়। বিভিন্নরকম মোবাইল, ট্যাবলেট, ল্যাপটপ বা বিভিন্ন সাইজের মনিটর আছে। ডিজাইন এমনভাবে করতে হবে যাতে সব ডিভাইস থেকে ভালোকরে দেখা যায়। সমস্যা হল এতোগুলা ডিভাইস সবার কাছে থাকা সম্ভব না। এই জন্য বিভিন্ন ওয়েবসাইট আছে যেখানে আপনি আপনার ওয়েবসাইট বিভিন্ন ডিভাইস কিরকম দেখাবে, তা সহজেই দেখতে পারবেন।
Google - https://search.google.com/test/mobile-friendly
Responsive Checker - https://www.responsivedesignchecker.com
❗ ওয়েবসাইট স্পীড
ওয়েবসাইটের স্পীড খুবই গুরুত্বপূর্ণ বিষয়। যেহেতু ওয়েবসাইট ব্যবহারকারীদের একটা বড় অংশ মোবাইল ফোন ব্যবহার করেন। এই জন্য ওয়েবসাইটের স্পীড যত দ্রুত হয় , তাহলে মোবাইল ফোন থেকে ওয়েবসাইট লোড হতে কম সময় আর কম ডাটা প্রয়োজন হয়। ওয়েবসাইট স্পীড পরীক্ষা করার জন্য কিছু ওয়েবসাইট আছে
Google - https://developers.google.com/speed/pagespeed/insights
Tools Pingdom - https://tools.pingdom.com
Gtmetrix - https://gtmetrix.com/
❗ Favicon Generator
https://realfavicongenerator.net/
https://www.favicon-generator.org/
https://favicon.io/
❗ Deployment
GitHub Pages - https://pages.github.com
Netlify - https://www.netlify.com/
Vercel - https://vercel.com/
Surge - https://surge.sh/
❗ Others
Shape Divider - https://www.shapedivider.app/
Carbon - https://carbon.now.sh/
Wappalyzer https://www.wappalyzer.com/

ফ্রন্ট-এন্ড ডেভেলপারদের জন্য প্রয়োজনীয় লিঙ্ক
যারা ফ্রন্ট-এন্ড ডেভেলপমেন্ট নিয়ে কাজ করেন, তাদের জন্য কিছু প্রয়োজনীয় ওয়েবসাইট লিঙ্ক। যেগুলো কাজ করার সময় সবসময় লাগে। আশাকরি সবার উপকার হবে। এই পোস্ট নিয়মিত আপডেট করা হবে। আপনার প্রয়োজনে বুকমার্ক করে রাখতে পারেন।
❗ সিএসএস ফ্রেমওয়ার্ক
Bootstrap 5 - https://getbootstrap.com/
Foundation - https://get.foundation/
Bulma - https://bulma.io/
Reflexgrid - https://reflexgrid.com/
❗ আইকন
ওয়েবসাইট ডিজাইন করার সময় আমাদের বিভিন্নরকম আইকন ব্যবহার করতে হয়। যেগুলা ওয়েবসাইট এর সৌন্দর্য আরও বৃদ্ধি করে। এখানে জনপ্রিয় কিছু আইকন ওয়েবসাইটের লিঙ্ক দেওয়া হল। আপনি আপনার ডিজাইনের চাহিদা মত আইকন ব্যবহার করতে পারেন।
Font Awesome - https://fontawesome.com/
Line Awesome - https://icons8.com/line-awesome
Icon Finder - https://www.iconfinder.com
Material Icon - https://fonts.google.com/icons?selected=Material+Icons
❗ ফন্টস
যেকোনো ওয়েবসাইট ডিজাইনের একটু গুরুত্বপূর্ণ বিষয় হলো ভালো একটি ফন্ট পছন্দ করা। আপনার ফন্ট যত সুন্দর হবে, সাইটের সৌন্দর্য আরও বৃদ্ধি পাবে। ফ্রী ফন্টের মধ্যে অন্যতম ফন্ট হচ্ছে গুগলের নিজস্ব ফন্ট। যদি এর মধ্যে আপনি আপনার পছন্দ মত ফন্ট খুঁজে না পান তাহলে কাস্টম ফন্টের জন্য অন্যান্য সাইট ব্যবহার করতে পারেন।
Google Fonts - https://fonts.google.com
Custom Fonts - https://www.dafont.com/
❗ ফ্রি ছবি
ডিজাইনের প্রয়োজনে প্রচুর ছবি ব্যবহার করতে হয়। আপনি যদি সরাসরি গুগল থেকে ডাউনলোড করেন তাহলে কপিরাইট এর সমস্যা হতে পারে। আবার মনমত ছবি নাও পেতে পারেন। আবার ছবি পছন্দ হলে দেখা গেল অনেক বড় সাইজ। এইরকম অনেক সমস্যা। এর জন্য ছবির বিভিন্ন ওয়েবসাইট আছে যেখান থেকে আপনি ফ্রী ছবি ডাউনলোড করতে পারবেন ইচ্ছা মত আর কোন কপিরাইট এর ঝামেলা নেই।
Unsplash - https://unsplash.com
Pexels - https://www.pexels.com
❗ কোড ভ্যালিদেশন
কোড শুধু লিখলেই হয় না। কোডটা প্রোপারলি ভ্যালিড হতে হয়। নাহলে সকল ব্রাউজারে সাপোর্ট করবে না। এছাড়া এর সমস্যা হয়। কোড অনেক বড় হয়ে গেলে ম্যানুয়ালি চেক করা অনেক ঝামেলার। এইজন্য বিভিন্ন ওয়েবসাইট আছে যেখানে আপনার কোড আপলোড করে দেখতে পারেন কোড ভ্যালিড কি না। কোডের কোন জায়গায় সমস্যা, কি কি ঠিক করতে হবে সব বলে দিবে।
HTML - https://validator.w3.org
CSS - https://jigsaw.w3.org/css-validator
❗ কোড ফরম্যাট
আমরা অনেক সময় কোড এলোমেলো ভাবে লিখি। যদিও কাজ ঠিকই করে। একজন ভালো কোডারের একটা অন্যতম গুণ হচ্ছে সুন্দর করে কোড লিখা। ইচ্ছা সত্ত্বেও অনেক সময় কোড এলোমেলো হয়ে যায়। কোড যদি খুব বেশি হয় তাহলে একটা একটা করে ঠিক করা অনেক ঝামেলার। এই কারনে বিভিন্ন ওয়েবসাইট আছে যেখানে আপনি কোড ফরম্যাট ঠিক করতে পারবেন।
HTML - https://www.freeformatter.com/html-formatter.html**
CSS - https://www.freeformatter.com/css-beautifier.html
JS - https://www.freeformatter.com/javascript-beautifier.html
❗ রেস্পন্সিভ / মোবাইল ফ্রেন্ডলি চেক
বর্তমানে ওয়েব সাইটের অন্যতম বৈশিষ্ট্য হল সকল প্রকার ডিভাইসে যাতে ভালোভাবে দেখা যায়। বিভিন্নরকম মোবাইল, ট্যাবলেট, ল্যাপটপ বা বিভিন্ন সাইজের মনিটর আছে। ডিজাইন এমনভাবে করতে হবে যাতে সব ডিভাইস থেকে ভালোকরে দেখা যায়। সমস্যা হল এতোগুলা ডিভাইস সবার কাছে থাকা সম্ভব না। এই জন্য বিভিন্ন ওয়েবসাইট আছে যেখানে আপনি আপনার ওয়েবসাইট বিভিন্ন ডিভাইস কিরকম দেখাবে, তা সহজেই দেখতে পারবেন।
Google - https://search.google.com/test/mobile-friendly
Responsive Checker - https://www.responsivedesignchecker.com
❗ ওয়েবসাইট স্পীড
ওয়েবসাইটের স্পীড খুবই গুরুত্বপূর্ণ বিষয়। যেহেতু ওয়েবসাইট ব্যবহারকারীদের একটা বড় অংশ মোবাইল ফোন ব্যবহার করেন। এই জন্য ওয়েবসাইটের স্পীড যত দ্রুত হয় , তাহলে মোবাইল ফোন থেকে ওয়েবসাইট লোড হতে কম সময় আর কম ডাটা প্রয়োজন হয়। ওয়েবসাইট স্পীড পরীক্ষা করার জন্য কিছু ওয়েবসাইট আছে
Google - https://developers.google.com/speed/pagespeed/insights
Tools Pingdom - https://tools.pingdom.com
Gtmetrix - https://gtmetrix.com/
❗ Favicon Generator
https://realfavicongenerator.net/
https://www.favicon-generator.org/
https://favicon.io/
❗ Deployment
GitHub Pages - https://pages.github.com
Netlify - https://www.netlify.com/
Vercel - https://vercel.com/
Surge - https://surge.sh/
❗ Others
Shape Divider - https://www.shapedivider.app/
Carbon - https://carbon.now.sh/
Wappalyzer https://www.wappalyzer.com/

2022 start with new ambition ✌️✌️✌️