ফ্রন্ট-এন্ড ডেভেলপারদের জন্য প্রয়োজনীয় লিঙ্ক

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

 সিএসএস ফ্রেমওয়ার্ক

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/

1414

1 Comment

Like

Comment