Azizul hakim

26/07/2025

Partial হলো TypeScript-এর একটি utility type, যা একটি টাইপের সব প্রপার্টিকে optional করে ফেলে। 💯💯⁉

20/07/2025

HTML tags

20/07/2025

Input types in HTML 🚀🚀🚀

20/07/2025

Javascript oop 🚀🚀👍

17/07/2025

17/07/2025

রাসেল আহমেদ ভাই, আমাদের একজন হিরো!

প্রোগ্রামিং হিরো'র সাথে উনার জার্নি শুরু হয়েছিলো ব্যাচ থ্রি'তে। শেখা শেষে ইন্ডিয়ান কোম্পানি FynTune Solution Private Limited এ কাজ করেছেন ডেভেলপার হিসেবে। এরপর, ২০২৩ সালে ধরা পরে মরণব্যাধী ক্যান্সার। প্রথম ধাপে ট্রিটমেন্ট নিয়ে জয়েন করে চট্টগ্রামের XPONENT InfoSystem (PVT) Limited-এ।

রাসেল শুধু নিজেই হিরো ছিলো না। আরো অনেক হিরো তৈরি করতে তার কন্ট্রিবিউশান ছিলো বেশ। তার অনেক বন্ধু-বান্ধব, জুনিয়রদের গাইডলাইন দিয়ে, সাজেশন দিয়ে শিখতে, ক্যারিয়ার গড়তে হেল্প করেছেন তিনি।

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

প্রোগ্রামিং হিরো পরিবার উনার বিয়োগে মর্মাহত।
উনার শোকাহত পরিবারের প্রতি সমবেদনা জানাই আমরা।

17/07/2025

All Device Responsive Design 🚀🚀🚀

15/07/2025

✅ CSS Units: কী এবং কেন?
CSS Units হচ্ছে সেই এককগুলি যা তোমার HTML elements এর size, spacing, positioning, font size ইত্যাদি নির্ধারণ করতে সাহায্য করে।

CSS-এ দুটি প্রধান ধরনের একক থাকে:

1. Absolute Units (স্থির একক)
এই এককগুলি নির্দিষ্ট মানে কাজ করে এবং screen size বা container size এর উপর নির্ভর করে না। এগুলি fixed থাকে।

কিছু উদাহরণ:
Unit Description Example
px Pixels width: 100px;
cm Centimeters height: 5cm;
mm Millimeters border-width: 2mm;
in Inches font-size: 2in;
pt Points (1pt = 1/72 inch) font-size: 12pt;
pc Picas (1pc = 12pt) line-height: 2pc;

2. Relative Units (আপেক্ষিক একক)
এই এককগুলি parent element বা viewport এর উপর ভিত্তি করে কাজ করে, সুতরাং এগুলির মান responsive বা dynamic।

কিছু উদাহরণ:
Unit Description Example
em প্রাথমিক font size অনুযায়ী font-size: 2em; (এটি parent element এর font-size এর দ্বিগুণ হবে)
rem Root element (html) এর font size অনুযায়ী font-size: 2rem; (এটি root element এর font-size এর দ্বিগুণ হবে)
% Parent element এর পরিমাণের শতাংশ width: 50%; (এটি parent element এর 50% হবে)
vw Viewport width এর ভিত্তিতে width: 50vw; (এটি viewport এর 50% হবে)
vh Viewport height এর ভিত্তিতে height: 100vh; (এটি পুরো viewport height হবে)
vmin Viewport এর smaller dimension এর ভিত্তিতে width: 10vmin; (viewport এর smaller dimension এর 10%)
vmax Viewport এর larger dimension এর ভিত্তিতে height: 20vmax; (viewport এর larger dimension এর 20%)

✅ Relative vs Absolute: পার্থক্য
Absolute units (যেমন px, in, cm) প্রিন্ট বা fixed layout গুলোর জন্য ভাল। এগুলি responsive নয়।

Relative units (যেমন em, rem, %) responsive design তৈরিতে ভাল, কারণ এগুলি পেজ বা viewport এর সাইজের ওপর নির্ভর করে।

✅ কখন কোন unit ব্যবহার করব?
Fixed Layouts – যদি তুমি চাও যে element এর সাইজ fixed থাকুক, যেমন প্রিন্ট আউট বা ডেস্কটপ ভিউ, তখন absolute units যেমন px বা in ব্যবহার করো।

উদাহরণ:

css
Copy
Editbox {
width: 200px;
height: 100px;
}
Responsive Layouts – যদি তোমার ডিজাইন responsive বা স্ক্রীনের আকারের সাথে মিলিয়ে চলতে হয়, তবে relative units যেমন em, rem, %, vh, vw ব্যবহার করো।

উদাহরণ:

css
Copy
Editcontainer {
width: 80%;
height: 100vh;
}
Font Sizing – যখন তুমি font size ব্যবহার করবে, তখন em বা rem ব্যবহার করা উচিত, কারণ এটি accessibility এবং responsive design এর জন্য ভাল।

উদাহরণ:

css
Copy
Edit
body {
font-size: 16px;
}

h1 {
font-size: 2rem; /* root font-size এর 2 গুণ হবে */
}
✅ Bonus: 1em vs 1rem
em: বর্তমান element বা parent element এর font size অনুসারে।

rem: Root element (html) এর font size অনুসারে।

যেমন:

css
Copy
Edit
html {
font-size: 16px;
}

h1 {
font-size: 2em; /* Parent element (body) এর font-size এর দ্বিগুণ হবে */
}

h2 {
font-size: 2rem; /* Root (html) element এর 2 গুণ হবে */
}
✅ Example – responsive font size
css
Copy
Edit
body {
font-size: 16px;
}

h1 {
font-size: 2rem; /* Root element এর 2 গুণ */
}

p {
font-size: 1.5em; /* Parent element (body) এর 1.5 গুণ */

Send a message to learn more

14/07/2025

Protfolio Website Live link : https://azizulhakim6817.github.io/mary-hardy-module-5/

14/07/2025

how tf did zuck create Facebook without Next.js and Typescript? 🐘