WEB Genesis

WEB Genesis If you want to get my Services you can find me on Fiverr Marketplace. My Fiverr Account Link: fiverr.com/users/junaedislam158

🚀 Free Resources that you must know as a Front-End Developerএক জায়গায় সব দরকারি ফ্রি রিসোর্স — যেন তোমার Frontend হয় আরও...
03/07/2025

🚀 Free Resources that you must know as a Front-End Developer
এক জায়গায় সব দরকারি ফ্রি রিসোর্স — যেন তোমার Frontend হয় আরও প্রফেশনাল লেভেলের!
🔹 Core Frontend Skills (HTML, CSS, JS)
👉 https://www.freecodecamp.org — Full beginner থেকে advanced পর্যন্ত।
👉 https://developer.mozilla.org — Official docs, must for mastering fundamentals।
👉 https://javascript.info — JS concepts clear করার জন্য সেরা গাইড।
👉 https://web.dev/learn/css — Google এর CSS deep dive।
🔹 Responsive Design & CSS Frameworks
👉 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Flexbox একদম সহজ করে বোঝা।
👉 https://cssgrid.io — CSS Grid শেখার ফ্রি ভিডিও কোর্স।
👉 https://tailwindcss.com/docs — Utility-first CSS framework ফ্রি ডকুমেন্টেশন।
👉 https://getbootstrap.com/.../getting-started/introduction/ — Bootstrap official docs।
🔹 Frontend Project Practice
👉 https://www.frontendmentor.io — Real UI challenge।
👉 https://codewell.cc — Designs দিয়ে প্র্যাকটিস করো।
👉 https://codier.io — Challenge solve করে শিখো।
👉 https://codepen.io — ছোট ছোট project করে live preview দেখো।
🔹 Design Systems, UI Kits & Components
👉 https://tailwindui.com/components — সুন্দর, প্রোফেশনাল কম্পোনেন্ট (ফ্রি সেকশন)।
👉 https://www.figma.com/community — ফ্রি UI kit, icon pack, template।
👉 https://refactoringui.com/book/ — ডেভেলপারের জন্য ডিজাইন টিপস (ফ্রি চ্যাপ্টার)।
👉 https://shadcn-ui.dev — ফ্রি, modern React UI components (Tailwind ready)।
🔹 Icons, Illustrations & Design Inspiration
👉 https://heroicons.com — ফ্রি, clean icon set।
👉 https://lucide.dev — Modern, customizable icons (SVG/React ready)।
👉 https://undraw.co/illustrations — ফ্রি, কাস্টমাইজেবল illustration pack।
👉 https://icons8.com/icons — ফ্রি icon library (SVG/PNG)।
👉 https://dribbble.com — UI inspiration।
🔹 Fonts & Typography
👉 https://fonts.google.com — ফ্রি, অসংখ্য beautiful font।
👉 https://fontpair.co — Google Fonts এর সুন্দর pairing ideas।
👉 https://typescale.com — Typography scale generator।
🔹 Color Palettes & Gradients
👉 https://coolors.co — ফ্রি color palette generator।
👉 https://mycolor.space — Gradient, palette, shades তৈরি করো।
👉 https://uigradients.com — ফ্রি beautiful gradients inspiration।
🔹 Animation & UI Polish
👉 https://animate.style — Ready-made CSS animation।
👉 https://greensock.com/gsap/ — Advanced JS animation tool, free core।
👉 https://motion.dev — Framer Motion দিয়ে React animation।
👉 https://lottiefiles.com — ফ্রি Lottie animations (JSON, lightweight)।
🔹 Accessibility, Performance & Best Practices
👉 https://web.dev/measure — Site performance ও accessibility checker।
👉 https://a11yproject.com — Accessibility শেখার ফ্রি গাইড।
👉 https://axe-core.org — Accessibility testing tool।
👉 https://frontendchecklist.io — Production-ready frontend checklist।
👉 https://roadmap.sh/frontend — Frontend শেখার পুরো রোডম্যাপ।
👉 https://12factor.net — App architecture standard।

Collected.

𝗜 𝗮𝗺 𝘁𝗵𝗿𝗶𝗹𝗹𝗲𝗱 𝘁𝗼 𝗮𝗻𝗻𝗼𝘂𝗻𝗰𝗲 𝘁𝗵𝗮𝘁 𝗜 𝗵𝗮𝘃𝗲 𝘀𝘂𝗰𝗰𝗲𝘀𝘀𝗳𝘂𝗹𝗹𝘆 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗲𝗱 𝘁𝗵𝗲 𝗳𝗿𝗼𝗻𝘁-𝗲𝗻𝗱 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗼𝗳 𝘁𝗵𝗲 𝗕𝗮𝗻𝗴𝗹𝗮𝗱𝗲𝘀𝗵 𝗨𝗻𝗶𝘃𝗲𝗿𝘀𝗶𝘁𝘆 𝗼𝗳𝗳𝗶...
19/03/2025

𝗜 𝗮𝗺 𝘁𝗵𝗿𝗶𝗹𝗹𝗲𝗱 𝘁𝗼 𝗮𝗻𝗻𝗼𝘂𝗻𝗰𝗲 𝘁𝗵𝗮𝘁 𝗜 𝗵𝗮𝘃𝗲 𝘀𝘂𝗰𝗰𝗲𝘀𝘀𝗳𝘂𝗹𝗹𝘆 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗲𝗱 𝘁𝗵𝗲 𝗳𝗿𝗼𝗻𝘁-𝗲𝗻𝗱 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗼𝗳 𝘁𝗵𝗲 𝗕𝗮𝗻𝗴𝗹𝗮𝗱𝗲𝘀𝗵 𝗨𝗻𝗶𝘃𝗲𝗿𝘀𝗶𝘁𝘆 𝗼𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 𝘂𝘀𝗶𝗻𝗴 𝗡𝗲𝘅𝘁.𝗷𝘀. 𝗧𝗵𝗶𝘀 𝗺𝗮𝗿𝗸𝘀 𝗺𝘆 𝗳𝗶𝗿𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝘄𝗶𝘁𝗵 𝘁𝗵𝗶𝘀 𝘁𝗲𝗰𝗵𝗻𝗼𝗹𝗼𝗴𝘆, 𝗺𝗮𝗸𝗶𝗻𝗴 𝗶𝘁 𝗮𝗻 𝗲𝘅𝗰𝗶𝘁𝗶𝗻𝗴 𝗺𝗶𝗹𝗲𝘀𝘁𝗼𝗻𝗲 𝗳𝗼𝗿 𝗺𝗲.

𝗧𝗵𝗿𝗼𝘂𝗴𝗵𝗼𝘂𝘁 𝘁𝗵𝗶𝘀 𝗷𝗼𝘂𝗿𝗻𝗲𝘆, 𝗜 𝗿𝗲𝗰𝗲𝗶𝘃𝗲𝗱 𝗶𝗻𝘃𝗮𝗹𝘂𝗮𝗯𝗹𝗲 𝘀𝘂𝗽𝗽𝗼𝗿𝘁 𝗳𝗿𝗼𝗺 Muhammad Ashikuzzaman 𝗕𝗵𝗮𝗶, 𝘄𝗵𝗼 𝗴𝘂𝗶𝗱𝗲𝗱 𝗺𝗲 𝗮𝗻𝗱 𝘄𝗼𝗿𝗸𝗲𝗱 𝗮𝗹𝗼𝗻𝗴𝘀𝗶𝗱𝗲 𝗺𝗲. 𝗧𝗵𝗲 𝗨𝗜/𝗨𝗫 𝗱𝗲𝘀𝗶𝗴𝗻 𝘄𝗮𝘀 𝗵𝗮𝗻𝗱𝗹𝗲𝗱 𝗯𝘆 Jiaur Rahman 𝗕𝗵𝗮𝗶, 𝘄𝗵𝗶𝗹𝗲 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸-𝗲𝗻𝗱 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝘄𝗮𝘀 𝗺𝗮𝗻𝗮𝗴𝗲𝗱 𝗯𝘆 Mahabubul Alam 𝗕𝗵𝗮𝗶 𝗮𝗻𝗱 Abid Hasan Nayem 𝗕𝗵𝗮𝗶.

𝗖𝘂𝗿𝗿𝗲𝗻𝘁𝗹𝘆, 𝘁𝗵𝗲 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 𝗶𝘀 𝘀𝘁𝗮𝘁𝗶𝗰, 𝗯𝘂𝘁 𝗶𝘁 𝘄𝗶𝗹𝗹 𝘀𝗼𝗼𝗻 𝗯𝗲 𝘁𝗿𝗮𝗻𝘀𝗳𝗼𝗿𝗺𝗲𝗱 𝗶𝗻𝘁𝗼 𝗮 𝗱𝘆𝗻𝗮𝗺𝗶𝗰 𝗽𝗹𝗮𝘁𝗳𝗼𝗿𝗺.

𝗧𝗲𝗰𝗵 𝗨𝘀𝗲𝗱: 𝗡𝗲𝘅𝘁 𝗝𝘀, 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁, 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦, 𝗡𝗼𝗱𝗲 𝗝𝘀, 𝗠𝗼𝗻𝗴𝗼𝗗𝗕, 𝗘𝘅𝗽𝗿𝗲𝘀𝘀 𝗝𝘀, 𝗮𝗻𝗱 𝗝𝗪𝗧.

𝗟𝗶𝘃𝗲 𝗟𝗶𝗻𝗸: https://bangladesh-university-official-website.vercel.app/

-
| | | | | |

21/09/2023

Big changes come after big disasters.

11/01/2023



NestJS: কি, সুবিধা, অসুবিধা
-------------------------------------------

এই পোস্টটি লিখার একমাত্র উদ্দেশ্য হলো আমার NestJS শেখার journey টা সবার সাথে share করা ও এই যাত্রায় যতজনকে পারি নিজের সাথে নেওয়ার প্রচেষ্টা করা। ভুলত্রুটি ক্ষমাসুন্দর দৃষ্টিতে দেখবেন ও গঠনমূলক সমালোচনা করে পাশে থাকবেন, উপদেশ দিবেন। শুরু করি!

___________ NestJS কি ___________

NestJS হলো javascript (আসলে typescript) দিয়ে backend তৈরি করার একটি framework. এটি একটি opinionated, typesafe ও batteries-included একটি framework.
NestJS under the hood express ব্যবহার করে। তবে তার সাথে আরো অনেক functionaliy আমাদেরকে দেয়।

• Opinionated কেনো:- NestJS আপনাকে বাধ্য করবে industry standard ও scalable পদ্ধতিতে নিজের backend তৈরি করতে।

• Typesafe কেনো:- NestJS মূলত typescript এর সাথে ব্যবহৃত হলেও আপনি vanilla javascript ও ব্যবহার করতে পারবেন। আর typescript ব্যবহার করা হলে typesafety তার সঙ্গী।

• Batteries-included কেনো:- NestJS তার সাথে আরো কিছু helpful জিনিস নিয়ে আসে। যেমন:- Exception Handler, Validation Pipe, Guard ইত্যাদি।

___________ NestJS সুবিধা ___________

টুকটাক web development যারা করেছেন, তারা কখনো না কখনো backend নিয়ে কাজ করেছেন হয়ত। আর javascript দিয়ে backend তৈরি করতে গেলে সর্বপ্রথম মাথায় আসে express. এর চেয়ে সহজ backend তৈরির framework javascript জগতে সম্ভবত আর দ্বিতীয়টি নেই। তাহলে আপনি কেনো express এর মত ঝামেলামুক্ত, সহজ ও শক্তিশালী framework রেখে NestJS শিখতে যাবেন?

Why use Express?
Express আপনাকে অবাধ সাধীনতা দেয়, কোনো design pattern মানা না মানা আপনার ব্যাক্তিগত ইচ্ছা। Industry standard মেনে কোড লিখলে লিখবেন, না লিখলে না লিখলেন, সম্পূর্ণ আপনার personal preference এর উপর নির্ভর করছে। আপনার backend এর খুঁটিনাটি সবকিছু আপনার মন মত handle হবে। ক্ষুদ্র থেকে ক্ষুদ্রতর বিষয়গুলো ও আপনি নিজের মতো configure করতে পারবেন।

জিনিসটা এমন, "Express gives us great power and with great power comes great responsibility" 🙂

Why not use Express?
Developer হিসেবে আমি চাই যত সম্ভবত কম responsibility আমার কাঁধে আসুক 🙂
কারণ backend এর logic ও functionality তৈরি করাই যথেষ্ট জটিল ও সময় সাপেক্ষ কাজ। এরপর আরো আছে error handling ও security.
একটা মাঝারি সাইজ এর প্রজেক্ট এর জন্য backend তৈরি করতে গেলেও দেখবেন চোখের পলকে তা মোটামুটি জটিল হয়ে দাঁড়ায়। যা পরবর্তীতে debug, maintain ও extend করতে গেলে বহুত কাঠখড় পোড়াতে হয়।

Why use NestJS?

১. "NestJS নিজেই express ব্যবহার করে" কিন্তু আমাদেরকে একটা বাঁধাধরা instructions দিয়ে দেয় কিভাবে আমাদের backend তৈরি করতে হবে যার ফলে পরবর্তীতে আপনি সহজেই scale, maintain, debug, extend করতে পারবেন। আপনাকে সবকিছু একটা বাঁধাধরা নিয়মে করতে হবে, যার ফলে ভুল হওয়ার সম্ভাবনা কম কারণ ইনস্ট্রাকশন ফলো করে চললে আপনি জানবেন কি করা হয়েছে এবং পরবর্তী ধাপে কি করতে হবে। ফলে আপনাকে শুধু functionality এর দিকে ফোকাস করতে হবে। অহেতুক application এর structure plan করতে বা তৈরিতে সময় অপচয় করা লাগবে না।

২. NestJS by default express ব্যবহার করলেও, আপনি সহজেই Fastify ব্যবহার করতে পারবেন। যারা আগে Fastify এর নাম শুনেন নি তাদের জন্য বলছি: Fastify হলো express এর alternative যা express এর চেয়ে প্রায় দ্বিগুণ fast.
Express ও Fastify দিয়ে backend তৈরি করার পদ্ধতি অনেকটাই আলাদা, কিন্তু NestJS ব্যবহার করে আমরা শুধুমাত্র ২ লাইন কোড change করেই express এর বদলে Fastify ব্যবহার করতে পারবো। পুরো backend তৈরির পর আপনার মনে হলো Fastify ব্যবহার করবেন। ২লাইন কোড change করুন। ব্যাস! আর সবকিছু আগের মতই কাজ করবে। শুধু তাই না, টুকটাক configuration করে অন্য যেকোনো HTTP frameworkও NestJS এর সাথে ব্যবহার করা যাবে।
[ NOTE: express এর বেশিরভাগ plugin Fastify এর সাথে ব্যবহার করলে কাজ করবে না এবং vice versa। তবে আপনার নিজের লিখা ৯৯% logic কাজ করবে express ও Fastify উভয়ের সাথেই ]

৩. NestJS আমাদেরকে pre-built অনেক functionaliy, API ও library দিবে যার ফলে আপনার কাজ অনেকাংশে সহজ হয়ে যাবে ও তুলনামূকভাবে কম কোড করা লাগবে।

৪. NestJS typescript ব্যবহার করে, তাই code run করার পূর্বেই আপনি আংশিক কিছু error দেখতে পারবেন।

৫. NestJS এর সবচেয়ে আকর্ষণীয় দিকটি হচ্ছে এর Dependency Injection principle টা। এটি একটি প্রোগ্রামিং কনসেপ্ট যা ব্যবহার করে কোড লিখলে আপনার কোড করতে ও অপরজনের পড়তে সুবিধা হয়।

৬. NestJS এ খুব সহজেই আপনি backend জগতের জটিল ও গুরুত্বপূর্ণ টেকনোলজিগুলো integrate করতে পারবেন। যেমন:- logging, validation, caching, web socket ইত্যাদি সহজেই NestJS এর সাথে integrate করা যায়।

___________ NestJS অসুবিধা ___________

১. NestJS under the hood express/fastify ব্যবহার করলেও express/Fastify এর API এর সাথে almost কোনো মিল পাওয়া যায় না। আপনি আগে থেকে express/Fastify জেনে থাকলেও আপনাকে NestJS শুরু থেকে শিখতে হবে।

২. আপনার প্রজেক্ট যদি আগে থেকেই express/Fastify use করে থাকে, তাহলে আমি বলবো সেই প্রজেক্ট কে NestJS এ কনভার্ট করতে না। কারণ সেই ক্ষেত্রে আপনাকে পুরো প্রজেক্টটি শুরু থেকে শেষ পর্যন্ত NestJS ও NestJS এর provide করা লিমিটেড কিছু library দিয়েই করতে হবে। Convert করার মাঝ পথে গিয়ে দেখলেন আপনি এমন একটা plugin use করছেন যেটা NestJS এ কিভাবে use করতে হয় তা আপনি figure out করতে পারছেন না। তাই NestJS মোটামুটি না শিখা পর্যন্ত production এ use করা একটু ঝামেলার হতে পারে।

--*--

আবারও বলছি আমি কোনো দিক থেকেই javascript, typescript বা NestJS expert না। আমি যা শিখেছি ও জেনেছি তাই share করছি যাতে beginner রা একটু হলেও কোনো না কোনোভাবে উপকৃত হয়। ভালো response পেলে, NestJS এর কনসেপ্ট গুলো নিয়ে পরবর্তী পোস্ট করবো।

- Shahriar

https://www.fiverr.com/share/lAg7w7React Admin Dashboard:It is a fully Responsive React Js and SyncFusion Admin Dashboar...
05/01/2023

https://www.fiverr.com/share/lAg7w7

React Admin Dashboard:
It is a fully Responsive React Js and SyncFusion Admin Dashboard, which supports all kinds of devices.
There are so many features in this admin Dashboard.
Examples:
E-Commerce,
Orders,
Employees,
Customers,
Calendar,
Kanban,
Editor,
Color-Picker,
Line,
Area,
Bar,
Pie-Chart,
Financial Info,
Color Mapping,
Pyramid,
Stacked,
Navbar (Cart, Notification, Chat, User-Profile).

Dashboard Live Link: https://web-genesis-react-dashboard-1.netlify.app/

If You want this kind of Dashboard, you can find me on fiverr:
https://www.fiverr.com/share/lAg7w7

| | | |
| | |
| | |
|

https://www.fiverr.com/share/lAg7w7React Admin Dashboard:It is a fully Responsive React Js and SyncFusion Admin Dashboar...
05/01/2023

https://www.fiverr.com/share/lAg7w7

React Admin Dashboard:
It is a fully Responsive React Js and SyncFusion Admin Dashboard, which supports all kinds of devices.
There are so many features in this admin Dashboard.
Examples:
E-Commerce,
Orders,
Employees,
Customers,
Calendar,
Kanban,
Editor,
Color-Picker,
Line,
Area,
Bar,
Pie-Chart,
Financial Info,
Color Mapping,
Pyramid,
Stacked,
Navbar (Cart, Notification, Chat, User-Profile).

Dashboard Live Link: https://web-genesis-react-dashboard-1.netlify.app/

If You want this kind of Dashboard, you can find me on fiverr:
https://www.fiverr.com/share/lAg7w7

| | | |
| | |
| | |
|

Website Live Link: https://web-genesis-delivery-website-with-sass.netlify.app/You can buy this kind of service from :htt...
09/11/2022

Website Live Link: https://web-genesis-delivery-website-with-sass.netlify.app/

You can buy this kind of service from :
https://www.fiverr.com/share/oza86A

Technology Used: Html, SASS, JavaScript

Hi There,
Are you looking for an Experienced Landing Page Designer for your business growth or You have a PSD file about your website and you want to convert PSD to HTML? If your answer is Yes then you are at the right place.
Because I am a Highly Expert Landing Page Designer. I Have Very Strong Skills in HTML5, CSS3, JavaScript, jQuery, Bootstrap and React JS. I've done a lot of landing page projects.
Effective and clean cross-browser support has been a priority in many of the projects I've worked on.

I'll provide:
Responsive design for all devices (Mobile, Tablet, Laptop, Desktop).
Cross-browser compatible.
W3C validation codes.
HTML semantic codes.
Fast Delivery.
Clean & well-commented codes.
100% hand-coded.
Highly quality landing page.
Pixel perfect design.
Bugs free code.
SEO-friendly website.
All images are optimized for faster loading.

You can buy this kind of service from :
https://www.fiverr.com/share/oza86A

Address

Habiganj Sadar
3301

Website

Alerts

Be the first to know and let us send you an email when WEB Genesis posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

Share

Category