DEV Community: Md Mahtab Uddin

CSS-GRID বাংলায়

Md Mahtab Uddin — Tue, 08 Nov 2022 11:07:04 +0000

Modern Web Design Layout তৈরী করার জন্য খুব ই কার্যকরী একটি layout system হলো “CSS Grid”. এই জিনিসটা ভালভাবে জানলে এবং practice করলে, শুধুমাত্র Layout বানানোর জন্য আর কোন CSS Framework ব্যবহার করার প্রয়োজন পড়বেনা! এটা আরেকটি জনপ্রিয় Layout System - “CSS Flexbox” এর থেকে powerful কারণ এটার মাধ্যমে two-dimensional layout তৈরী করা সম্ভব মাত্র ২-১ লাইন CSS লিখে। এটার browser support ও যথেষ্ট ভাল। আমি মনে করি, একজন Front End Developer এবং Full Stack Web Developer এরও এটা ভাল করে জানা উচিৎ। তাহলে যেমন খুশি তেমন complex layout বানানো একেবারেই সহজ হয়ে যাবে।

Grid সিস্টেমে অবশ্যই একটা কন্টেইনার লাগবে প্যারেন্ট DIV হিসাবে । তার ভিতর কিছু এলিমেন্ট DIV থাকবে । আমাদেরকে প্রথমেই কন্টেইনার DIV কে স্টাইল করতে হবে ।

কয়টা Column বানাতে হবে সেটা উল্লেখ করে দিতে হবে grid-template-columns: 200px 200px 100px;
এখানে তিনটি মান দেয়া হয়েছে তাই তিনটি Column হবে ।
আমরা ROW বানাতে চাইলে grid-template-rows: 100px 100px ; এখানে দুটি মান দেয়া হয়েছে তাই দুটি ROW হবে ।

Grid এ ROW বা Column মাঝে গ্যাপ দিতে চাইলে grid-row-gap: 5px ; grid-column-gap: 3px ; এভাবে উল্লেখ করে দিতে হবে । কিন্তু প্রত্যেকের মাঝে যদি সমান গ্যাপ দিতে হয় ,তাহলে grid -gap: 3px উল্লেখ করতে হবে ।

আমরা যদি এখন Grid এ ROW বা Column কে রেস্পন্সিভ করতে চাই । তাহলে আমাদের কে আনুপাতিক হারে বলে দিতে হবে । এখন এখানে যদি বলা হয় প্রথম Column 1fr নিবে দ্বিতীয় Column 2fr নিবে । এখানে পুরো জায়গা কে ৩ ভাগ করে প্রথম Column কে ১ ভাগ এবং দ্বিতীয় Column কে ২ ভাগ দিবে ।

আমরা চাইলে এক লাইনে ROW এবং Column লিখতে পারি grid-template : 1fr 2fr / 1fr 2fr আগে ROW এর মান লিখতে হবে , পরে Column এর মান লিখতে হবে ।

একই জিনিস বার বার ব্যবহার করতে হলে repeat() দিয়ে করা যায় । grid-template-columns: repeat(3,1fr); এখানে ৩ টি কলাম 1fr করে রিপিট করতে বলা হয়েছে ।

USeful Chrome Extensions

Md Mahtab Uddin — Tue, 12 Oct 2021 17:11:24 +0000

Fake Filler

Fake Filler is a forms to fill input fields on a page with randomly generated fake data.

Window Re-sizer

This extension re-size the browser's window in the to emulated various resolutions and devices.

Notion Clipper

Notion web clipper -you can save any page of website into your notion workspace.

Daily Dev

Daily.dev - news for Busy Developers. the extension keeps you up to date on the latest programming news.

What Font

What Font indentifies fonts on web pages.you can know the web fonts by just hovering on them.

React dev tools

The extension adds React debugging tool to the chrome Developer Tools. It adds Components & Profiler tabs.

Wappalyzer

Wappalyzer is a technology porfiler that shows you what websites are built with.

Web Developer

The Web Developer extension adds a toolbar button to the browser with varrious web developer tools.

Sync and Async Made Simple!

Md Mahtab Uddin — Mon, 11 Oct 2021 23:01:43 +0000

Let's say you go to a restaurant. Waiter comes in and takes your order. As he goes to the kitchen, he waits till your order is ready. Then he brings your food & goes to another table ( meanwhile other tables are waiting to the order). That's call #synchronous.

Waiter takes your order to tje kitchen but doesn’t wait till It's ready. He come back to take other customers order. And Once your food is complete. He goes back & brings you the food. That's call #Asynchronous.

How does it works in programing?

Simply put, If a task is fast like loading a UI. It will be execute #synchronously.

And if it takes time, like downloading an image. It will be execute #asynchronously.

A better way to website design

Md Mahtab Uddin — Mon, 11 Oct 2021 21:27:26 +0000

Design

Use a design toool like Figma to actually know what the website will look like. Just by doing this , you'll know what to do even before creating the website.

Homepage

The thing on which you should spend the most time is the honepage. It's the core of your website and it's what makes clients stay on your webiste.

Keep it simple

Be straightforward , Especially when it comes to a service, always try to be straightforward and tell what you do in the most concise way.

Forms

If we can buy stuff on your website, please don't make it complicated. Don't ask for useless questions if you do not need it. No one wants to buy something with complicatd forms.

Picture

Picture really ca be an excellent way to show your service and add some visual elements to your website to make your website look
"alive"