একজন ফ্রন্ট-এন্ড ডেভেলপার বা ডিজাইনার হতে চাইলে যা যা করণীয়!

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

ফ্রিল্যান্সিং সেক্টর দিনে দিনে যেমন প্রসারিত হচ্ছে, ঠিক তেমনি প্রতিনিয়তই বিভিন্ন কাজের ক্ষেত্রে তৈরী করা হচ্ছে আলাদা আলাদা ক্যাটেগরির ওয়েবসাইট। আর এই সমস্ত ওয়েবসাইট মুলূত তৈরী করছেন ওয়েব ডেভেলপার এবং ওয়েব ডিজাইনাররাই মিলে।

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

সিএসএস ফ্রেমওয়ার্ক (CSS Framework)

1. Bootstrap 5 - https://getbootstrap.com/
2. Foundation - https://get.foundation/
3. Bulma - https://bulma.io/
4. Reflexgrid - https://reflexgrid.com/

আইকন (Icons) সমূহের লিংকঃ

ওয়েবসাইট ডিজাইন করার সময় আমাদের বিভিন্নরকম আইকন ব্যবহার করতে হয়। যেগুলা ওয়েবসাইট এর সৌন্দর্য আরও বৃদ্ধি করে। এখানে জনপ্রিয় কিছু আইকন ওয়েবসাইটের লিঙ্ক দেওয়া হল। আপনি আপনার ডিজাইনের চাহিদা মত আইকন ব্যবহার করতে পারেন।

1. Font Awesome - https://fontawesome.com/
2. Line Awesome - https://icons8.com/line-awesome
3. Icon Finder - https://www.iconfinder.com
4. Material Icon - https://fonts.google.com/icons?selected=Material+Icons

ফন্টস (Fonts)ঃ

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

1. Google Fonts - https://fonts.google.com
2. Custom Fonts - https://www.dafont.com/

ফ্রি ছবি (Free Images)ঃ

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

1. Unsplash - https://unsplash.com
2. Pexels - https://www.pexels.com

কোড ভ্যালিডেশন (Code Validation)ঃ

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

1. Html - https://validator.w3.org
2. Css - https://jigsaw.w3.org/css-validator

কোড ফরম্যাট (Code Format)ঃ

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

1. Html - https://www.freeformatter.com/html-formatter.html**
2. Css - https://www.freeformatter.com/css-beautifier.html
3. JS - https://www.freeformatter.com/javascript-beautifier.html

রেস্পন্সিভ / মোবাইল ফ্রেন্ডলি চেক (Responsiveness)ঃ

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

1. Google - https://search.google.com/test/mobile-friendly
2. Responsive Checker - https://www.responsivedesignchecker.com

ওয়েবসাইট স্পীড (Website Speed)ঃ

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

1. Google - https://developers.google.com/speed/pagespeed/insights
2. Tools Pingdom - https://tools.pingdom.com
3. Gtmetrix - https://gtmetrix.com/

ফেব-আইকন (Favicon Generator):

1. https://realfavicongenerator.net/
2. https://www.favicon-generator.org/
3. https://favicon.io/

ডিপ্লয়মেন্ট (Deployment)ঃ

1. GitHub Pages - https://pages.github.com
2. Netlify - https://www.netlify.com/
3. Vercel - https://vercel.com/
4. Surge - https://surge.sh/

অন্যান্য (Others)ঃ

1. Shape Divider - https://www.shapedivider.app/
2. Carbon - https://carbon.now.sh/
3. Wappalyzer https://www.wappalyzer.com/

এই ধরনের তথ্যবহুল পোস্ট গুলো পেতে আমাদের পেজে লাইক দিয়ে আমাদের সাথেই থাকুন। আমাদের অফিশিয়াল পেজ গুলো ফলো করলে নতুন কোন পোস্ট করার সাথে সাথে আপনার কাছে নোটিফিকেশন চলে যাবে এছাড়াও আপনার যদি ব্যক্তিগত কোনো মতামত থাকে তাহলে আমাদেরকে অবশ্যই আপনি জানাতে পারবেন মেসেঞ্জারে টেক্সট করে অথবা কন্টাক্ট ফর্ম পূরণের মাধ্যমে।

আপনি যদি পুরাতন ল্যাপটপ কিনতে চান তাহলে আপনাকে যেসমস্ত বিষয়ে লক্ষ্য রেখে কিনতে হবে সেকেন্ড হ্যান্ড ল্যাপটপ জানতে এখানে ক্লিক করুন, আরও পড়ুন ।