কম্পিউটার

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

আপনি যদি ক্লায়েন্টদের জন্য ফ্রিল্যান্স ওয়েবসাইট তৈরি করার চেষ্টা করছেন, বা এমনকি আপনার পোর্টফোলিও তৈরি করার চেষ্টা করছেন, তাহলে আপনি হয়তো এই সমস্যাটি অতিক্রম করতে পারেন:

আপনার যদি কোনো ওয়েব ডিজাইন দক্ষতা না থাকে তাহলে আপনি কিভাবে একটি ওয়েবসাইট তৈরি করবেন?

এখানে কিছু বিকল্প আছে:

  • আপনার জন্য ডিজাইন তৈরি করতে আপনি একজন ওয়েব ডিজাইনার নিয়োগ করতে পারেন- কিন্তু (ভাল) ডিজাইনার সস্তা নয়।
  • আপনি Fiverr বা Upwork-এ একটি সস্তা ডিজাইনার খুঁজে পেতে পারেন- কিন্তু আপনি জানেন এটি ঝুঁকিপূর্ণ হতে পারে।
  • অথবা আপনি একটি বিনামূল্যে বা প্রিমিয়াম থিম বা টেমপ্লেট ডাউনলোড করতে পারেন- কিন্তু কখনও কখনও তারা আপনি যা করতে চান তা করে না৷

আপনার জন্য আরেকটি বিকল্প হল ওয়েবসাইট লেআউট এবং ডিজাইন করার কিছু মৌলিক দক্ষতা শেখা এবং আপনার নিজের সামনের প্রান্ত তৈরি করা।

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

কিন্তু আমি বিশ্বাস করি যে আপনি কীভাবে সহজ ওয়েবসাইটগুলি পরিকল্পনা করতে এবং ডিজাইন করবেন তা শিখতে পারেন যা বেশিরভাগ ছোট ব্যবসার জন্য কাজ করবে৷

এই পদ্ধতির মধ্যে রয়েছে:

  • ওয়েবসাইটগুলিকে কিভাবে ভিজ্যুয়ালভাবে একত্রিত করা হয় তার মূল বিষয়গুলি শিখুন,
  • এবং নিজের জন্য অনুপ্রেরণা এবং ধারনা পেতে বিদ্যমান ওয়েব ডিজাইন নিয়ে গবেষণা করা।

এটা আসলে সেই কৌশল যা আমি কোডার কোডার ওয়েবসাইট তৈরি করতে ব্যবহার করেছি! ঠিক আছে, এটি একটি খুব সাধারণ নকশা, অত্যধিক অভিনব কিছু নয়। কিন্তু কখনও কখনও আপনার যা প্রয়োজন তা সহজ।

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

এবং, অবশ্যই, আপনার তৈরি প্রতিটি ওয়েবসাইট আপনাকে অভিজ্ঞতা দেবে। সময়ের সাথে সাথে, আপনি আপনার নৈপুণ্যের অনুশীলন চালিয়ে যাওয়ার সাথে সাথে আপনি আরও জটিল ডিজাইন তৈরি করতে সক্ষম হবেন৷

এখানে এই প্রক্রিয়ার প্রধান ধাপগুলি রয়েছে:

  • আপনার ওয়েবসাইটের মূল বিষয়গুলি নির্ধারণ করুন
  • আপনার ওয়েবসাইটের লেআউটের পরিকল্পনা করুন
  • নকশা একসাথে রাখুন
  • চূড়ান্ত পণ্য তৈরি করুন

প্রতিটি পদক্ষেপ গবেষণার দ্বারা উজ্জীবিত হবে- অন্য ওয়েবসাইটগুলি দেখে তারা কী করে তা দেখতে এবং যে অংশগুলিকে আপনি আপনার ওয়েবসাইটের জন্য পুনঃব্যবহার করতে চান তা বের করে আনা।

একটি গুরুত্বপূর্ণ নোট:আমি মোটেও সমর্থন করছি না যে আপনি CSS বা আপনার নয় এমন ছবিগুলি চুরি করেন। (একটি জিনিসের জন্য, আপনি একটি অনুলিপি এবং পেস্টের কাজ দিয়ে কিছুই শিখবেন না।) এখানে ধারণাটি সৃজনশীল ধারণা এবং ধারণাগুলি অর্জন করা এবং অনুরূপ কিছু তৈরি করতে তাদের ব্যবহার করা।

1. আপনার ওয়েবসাইটের মূল বিষয়গুলি নির্ধারণ করুন

আপনি রং বা ফন্ট বাছাই শুরু করার আগে, এই ওয়েবসাইট সম্পর্কে কিছু সাধারণ প্রশ্নের উত্তর দেওয়া যাক:

1. ওয়েবসাইটটি কোন ধরনের ব্যবসার প্রচার করবে?

একটি পিজা জায়গা, ফটোগ্রাফারের স্টুডিও, বা বইয়ের দোকান? যে কোনো ধরনের ব্যবসা একটি ওয়েবসাইট থেকে উপকৃত হতে পারে, তাই আপনি যেকোনো কিছু বেছে নিতে পারেন।

এখানে আমাদের উদ্দেশ্যে, আমরা সেন্ট্রাল কফি নামে একটি কাল্পনিক কফি শপ বেছে নেব। কারণ সবাই কফি পছন্দ করে, তাই না?

২. ওয়েবসাইটটিতে কোন পৃষ্ঠা থাকবে?

কিছু সাধারণ পৃষ্ঠা হবে হোমপেজ, সম্বন্ধে পৃষ্ঠা, যোগাযোগ পৃষ্ঠা এবং ব্যবসাটি যে শিল্পে রয়েছে তার জন্য নির্দিষ্ট পৃষ্ঠা৷

ওয়েবসাইটের পৃষ্ঠাগুলি এবং অন্যান্য সাধারণ কাঠামোগত দিকগুলি বের করার সর্বোত্তম উপায় হল কিছু দ্রুত অনলাইন গবেষণা করা৷

2. বিদ্যমান ওয়েবসাইটগুলি গবেষণা করুন

একই ধরনের ব্যবসার জন্য অন্যান্য বিদ্যমান ওয়েবসাইট দেখুন। এই ওয়েবসাইটগুলির মধ্যে 3-4টি দেখুন এবং দেখুন তাদের কী পৃষ্ঠা রয়েছে৷

ওয়েবসাইটটি কীভাবে ডিজাইন করা হয়েছে তা লক্ষ্য করার চেষ্টা করুন এবং এতে নোট নিন:

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

উদাহরণ ওয়েবসাইটগুলি খুঁজে পাওয়ার জন্য একটি ভাল জায়গা হল থিম ফরেস্ট। এটিতে এক টন ফ্রি এবং প্রিমিয়াম ওয়েবসাইট টেমপ্লেট এবং ওয়ার্ডপ্রেস থিম রয়েছে। এবং আপনি যদি সর্বাধিক জনপ্রিয় থিমগুলির সাথে লেগে থাকেন তবে আপনি জানেন যে সাধারণত তারা ভাল ডিজাইনের উদাহরণ হবে৷

আমি খুঁজে পেয়েছি একটি থিম থেকে এখানে একটি কফি শপ উদাহরণ।

The7

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

পৃষ্ঠা:
বিভাগ সহ এক পৃষ্ঠার ওয়েবসাইট:হোম, সম্পর্কে, অবস্থান, অফার, মেনু, সংবাদ, প্রেস, ব্লগ পোস্ট

শৈলী:
আধুনিক এবং পরিষ্কার, ভাল ফটো সহ

নেভিগেশন:
নেভিগেট করা সহজ

এবং এখানে কিছু ওয়েবসাইট আছে যা আমি "শিকাগোতে কফি শপ" অনুসন্ধান থেকে পেয়েছি:

ওয়ার্মহোল কফি

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

পৃষ্ঠা:
হোমপেজ, ব্লগ, অবস্থান/যোগাযোগ, চাকরির সুযোগ

শৈলী:
আধুনিক সাজানো; দোকানের ছবিগুলো আরো নস্টালজিক

নেভিগেশন: অবিলম্বে স্পষ্ট নয় যে এটি একটি কফি শপ৷ সাইটটি নেভিগেট করা একটু কঠিন।

ক্যাফে স্ট্রিট

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

পৃষ্ঠা:
এক পৃষ্ঠার ওয়েবসাইট, বিভাগগুলি হল:হোম, ক্যাফে (সম্পর্কে), মেনু, রোস্টিং, টাইম মেশিন (রস), যোগাযোগের ফর্ম

শৈলী:
সরল এবং আধুনিক (স্কোয়ারস্পেস)

নেভিগেশন:
নেভিগেট করা বেশ সহজ; আমি উপরে স্টিকি মেনু বার পছন্দ করি যা আপনাকে প্রতিটি বিভাগে নিচে স্ক্রোল করে।

কফি তৈরি করুন

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

পৃষ্ঠা:
এক পৃষ্ঠার ওয়েবসাইট, বিভাগগুলি হল:হোমপেজ, সম্পর্কে, ঘন্টা, অবস্থান, দোকান, ক্যাটারিং, ইভেন্টস, যোগাযোগ

শৈলী:
সাধারণ, ডিজাইন হল টেক্সট সহ সাদা ব্যাকগ্রাউন্ডের অংশগুলির মধ্যে পূর্ণ-প্রস্থ ফটোগুলির সংমিশ্রণ।

নেভিগেশন:
নেভিগেট করা বেশ সহজ

সাওয়াদা কফি

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

পৃষ্ঠা:
হোমপেজ, সম্বন্ধে, খাদ্য ও পানীয়, প্রেস, যোগাযোগ এবং ঘন্টা, আমাদের রেস্তোরাঁ, চাকরি

শৈলী:
ডিজাইন বেশিরভাগই ফটোগ্রাফি সম্পর্কে, এবং পাঠ্যটি প্রায় একটি চিন্তাভাবনা বলে মনে হয়

নেভিগেশন:
এটি নেভিগেট করা একটু কঠিন– ডান কোণায় হ্যামবার্গার মেনু প্রায় দেখতে পাইনি।

3. আপনার নিজের ওয়েবসাইটের জন্য নোট লিখুন

এখন, একাধিক কফি শপের ওয়েবসাইট দেখার পরে, আমাদের কাছে কী কী বৈশিষ্ট্য সাধারণ তা সম্পর্কে আরও ভাল ধারণা রয়েছে। এবং আমাদের কাছে কিছু ধারণা আছে যা আমরা মনে করি কি কাজ করে এবং কাজ করে না৷

আপনার গবেষণার উপর ভিত্তি করে, আপনি এখন আপনার নিজের সাইটের জন্য নোট লেখা শুরু করতে পারেন।

সেন্ট্রাল কফির জন্য, আমি মনে করি আমরা নিম্নলিখিত বিভাগগুলি সহ একটি সাধারণ এক পৃষ্ঠার ওয়েবসাইটের সাথে লেগে থাকব:

  • হেডার
  • বাড়ি
  • সম্পর্কে
  • মেনু
  • অবস্থান/যোগাযোগ
  • ফুটার

4. আপনার ওয়েবসাইটের লেআউট পরিকল্পনা করুন

এখন যেহেতু আমরা সাইটের কঙ্কাল বের করেছি, আমরা প্রতিটি পৃষ্ঠা বা বিভাগকে এমন উপাদান দিয়ে বের করব যা আমরা প্রতিটিতে রাখতে চাই। আমরা যে লেআউটটি তৈরি করব সেটিকে ওয়্যারফ্রেমও বলা হয় .

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

হেডার

আমি সেভেন কফি ডেমো পৃষ্ঠায় থাকা শীর্ষ নেভিগেশন বার এবং ক্যাফে স্ট্রিট ওয়েবসাইট পছন্দ করি।

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

তবে উভয় পৃষ্ঠায় এটি কেন্দ্রীভূত, এবং আমি বরং প্রথমে লোগো এবং পরে বিভাগগুলির সাথে এটিকে বাম দিকে সারিবদ্ধ রাখতে চাই৷

এটি ডেস্কটপ সংস্করণের জন্য। ট্যাবলেট এবং মোবাইলের জন্য, ডিফল্টরূপে হেডারে আমাদের শুধু লোগো এবং হ্যামবার্গার মেনু থাকবে৷

হ্যামবার্গারে ক্লিক করা একটি অফ ক্যানভাস মেনু খুলবে যা বিভাগ নেভিগেশন প্রদর্শন করতে ডান দিক থেকে স্লাইড করবে৷

বাড়ি

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

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

আমি মনে করি এখানে আমার পটভূমিতে একটি চিত্র থাকবে (যেমন বিল্ড কফি) এর উপরে পাঠ্য থাকবে। এটি ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই একই রকম হবে৷

সম্পর্কে

সমস্ত ওয়েবসাইটে একটি ছোট সম্পর্কে বিভাগ আছে, কিছু ফটো সহ। আমি ক্যাফে সম্পর্কে একটি অনুচ্ছেদ রাখব এবং দোকানের অভ্যন্তরের কিছু ফটোও অন্তর্ভুক্ত করব যাতে ব্যবহারকারীরা ঘুরে আসতে চান৷

মেনু

প্রতিটি ওয়েবসাইট আলাদাভাবে মেনু পরিচালনা করে:

  • সেভেন কফিতে দাম সহ মেনু আইটেমগুলির একটি গ্রিড রয়েছে,
  • ক্যাফে স্ট্রিটে আইটেমগুলির একটি তালিকা রয়েছে,
  • এবং বিল্ড এবং সাওয়াদা মেনুর পিডিএফের সাথে লিঙ্ক করুন।

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

অবস্থান/যোগাযোগ

আমি ওয়েবসাইটের নীচে অবস্থান, ঘন্টা এবং যোগাযোগের তথ্য রাখতে চাই। আমার অনুমান হল যে ব্যবহারকারীরা সাইটের শীর্ষে শুরু করবে এবং নীচের দিকে স্ক্রোল করবে৷

নীচের অংশে কল টু অ্যাকশন করা প্রশ্নের উত্তর দেবে, "এখন কী?" এটি দর্শকদের পদক্ষেপ নিতে সাহায্য করবে, বিশেষ করে ক্যাফেতে যাওয়ার দিকনির্দেশ পেয়ে এবং আশা করি পরিদর্শন করে!

ফুটার

পাদচরণটি বেশ ন্যূনতম হবে। এটি কপিরাইট তথ্য সহ একটি ছোট বার হবে৷

5. আপনার সম্পূর্ণ ওয়্যারফ্রেম তৈরি করুন

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

এটি ব্যবহার করা বেশ সহজ, এবং আমি স্কেচি স্টাইল বিকল্পটি পছন্দ করি কারণ এটি মজাদার 🙂

(একটি নতুন ট্যাবে সম্পূর্ণ ছবি দেখতে থাম্বনেলগুলিতে ক্লিক করুন)

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

6. বেসিক ডিজাইন স্পেসিফিকেশন নির্ধারণ করুন

আবার, আমরা অতি বিস্তারিত এবং অভিনব শৈলী তৈরি করতে যাচ্ছি না। যদিও আমাদের কিছু মৌলিক বিষয় বের করতে হবে... জিনিস যেমন:

রঙের স্কিম

রঙের স্কিমটি হল বিভিন্ন রং যা আপনি ওয়েবসাইটে ব্যবহার করছেন। আপনার ঘর পেইন্টিং এবং সাজাইয়া মত এটা চিন্তা করুন. সাধারণত আপনি বেশিরভাগ স্থানের জন্য ধূসর এবং সাদা মত নিরপেক্ষ টোনগুলির সাথে লেগে থাকতে চান। এবং আপনি যে গুরুত্বপূর্ণ উপাদানগুলিকে পপ আউট করতে চান, যেমন লিঙ্ক এবং বোতামগুলির জন্য এক বা দুটি উজ্জ্বল উচ্চারণ রং৷

আপনার যদি কিছু রঙের অনুপ্রেরণার প্রয়োজন হয়, ক্যানভাতে কিছু নমুনা রঙের প্যালেট রয়েছে যা আপনি চেষ্টা করে দেখতে পারেন।

সেন্ট্রাল কফি ওয়েবসাইটের জন্য, আমি সেই ক্যানভা লিঙ্ক থেকে ফল কালেকশন ব্যবহার করতে যাচ্ছি- এটি ব্রাউনের চারপাশে উষ্ণ রঙের প্যালেট।

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

আমি কফি শপের সাথে যুক্ত সেই নস্টালজিক, আরামদায়ক অনুভূতি জাগানোর চেষ্টা করছি।

ফন্ট

ওয়েবসাইটগুলির মাধ্যমে ফিরে গেলে, তাদের প্রায় সকলেই একটি সান-সেরিফ ফন্ট ব্যবহার করে (যেমন অক্ষরগুলিতে "সেরিফ" নেই বা টাইপরাইটার পাঠ্যের মতো শেষ বার)। আমি আপনার বেশিরভাগ পাঠ্যের জন্য একটি সাধারণ ফন্ট বেছে নেব, এবং তারপরে আপনি শিরোনাম এবং শিরোনামগুলির জন্য একটি ভারী ওজনের ফন্টের সাথে কিছুটা অভিনব হতে পারেন৷

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

ছবি/ফটোগ্রাফি

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

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

  • ক্যানভা
  • ভেক্টর
  • স্নাপা

7. ওয়েবসাইট তৈরি করুন!

এখন আমাদের কাছে ওয়্যারফ্রেম রয়েছে যা আমাদের সাধারণত বলতে পারে যে কীভাবে সবকিছু সাজানো হয়। এবং সামনের দিকের শৈলীগুলিকে গাইড করতে সাহায্য করার জন্য আমাদের ডিজাইনের রেফারেন্স রয়েছে৷

যেহেতু আমাদের কাছে বিশদ PSD তৈরি করার জন্য কোনও ডিজাইনার নেই, তাই আমরা শুধু এগিয়ে যাব এবং এইমাত্র যে ওয়্যারফ্রেমগুলি তৈরি করেছি তা থেকে ওয়েবসাইট তৈরি করা শুরু করব৷

এখানে আমি সাধারণত কিভাবে একটি ওয়েবসাইটের সামনের প্রান্ত নির্মাণের সাথে যোগাযোগ করি:

  1. ওয়েবসাইট ফাইল সেট আপ করুন
  2. ফোল্ডার এবং ফাইল তৈরি এবং গঠন করুন।
  3. টাস্ক রানার আপ এবং রানিং করুন। (আমি এই প্রকল্পের জন্য Gulp ব্যবহার করছি।)
  4. প্রতিটি টেমপ্লেটের জন্য একটি পৃথক HTML ফাইল তৈরি করুন৷

তারপর প্রতিটি HTML টেমপ্লেটের জন্য এই ধাপগুলি অনুসরণ করুন:

  1. বেসিক HTML উপাদান দিয়ে কঙ্কাল গঠন তৈরি করুন।
  2. পেজের উপাদানগুলো একে একে তৈরি করুন।
  3. প্রতিটি উপাদানের জন্য, CSS শৈলীতে যোগ করুন, প্রথমে নিশ্চিত করুন যে প্রতিটি বিভাগ সঠিকভাবে সাজানো হয়েছে।
  4. আপনি কাজ করার সময় ব্রাউজারে পৃষ্ঠাটি কেমন দেখাচ্ছে তা পরীক্ষা করে দেখুন, ক্রমাগত সংশোধন করা।

আপনার ওয়েবসাইট প্রতিক্রিয়াশীল তা নিশ্চিত করুন

আপনি যখন একটি সাইট তৈরি করছেন, তখন সাধারণত ডেস্কটপ, ট্যাবলেট এবং মোবাইলে আপনার স্টাইলগুলি নির্বিঘ্ন দেখাচ্ছে কিনা তা পরীক্ষা করা একটি ভাল ধারণা৷

আপনি সহজেই আপনার নিজের কম্পিউটারে বিভিন্ন ব্রাউজার দিয়ে ডেস্কটপ শৈলী পরীক্ষা করতে পারেন। মোবাইলের জন্য, আপনি Chrome এর বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে পারেন, যা বিভিন্ন মোবাইল ডিভাইসে ওয়েবসাইটগুলিকে অনুকরণ করে৷

মনে রাখবেন যে কোনো ইমুলেশন টুল প্রকৃত ফোন বা ট্যাবলেটের মতো 100% হবে না। তাই আপনার শৈলী পরীক্ষা করার সময়, ওয়েবসাইটটি ইন্টারনেটে থাকাকালীন আপনি একটি আসল ফোনে এটি পরীক্ষা করতে চাইবেন৷

এখানে কিছু ডিভাইস এমুলেটর রয়েছে যা আপনি ওয়েবসাইট প্রদর্শন পরীক্ষা করতে ব্যবহার করতে পারেন:

  • Responsinator.com (ফ্রি)
  • Quirktools দ্বারা স্ক্রিনফ্লাই (বিনামূল্যে)
  • ব্রাউজারস্ট্যাক (প্রদেয়) — ব্রাউজারস্ট্যাক আপনাকে প্রকৃত ডিভাইসে ভার্চুয়াল মেশিন পরীক্ষা করতে দেয়।

সমাপ্ত পণ্য!

এখানে সমাপ্ত কেন্দ্রীয় কফি ওয়েবসাইটের একটি স্ক্রিনশট রয়েছে:

কিভাবে একটি ওয়েবসাইট লেআউট এবং ডিজাইন করবেন (কোন ডিজাইনের দক্ষতা ছাড়াই!)

আপনি আমার Github.io পৃষ্ঠায় নিজের জন্য আসল সাইটটি দেখতে পারেন।

এবং এভাবেই আমি ডিজাইনার নিয়োগ না করেই একটি ওয়েবসাইট ডিজাইন ও তৈরি করেছি।

আমি আশা করি আপনি এই পোস্টটি সহায়ক খুঁজে পেয়েছেন! নিচের মন্তব্যে আপনার কোন মতামত আমাকে জানান।

একটি পোস্ট মিস করতে চান না? আপনি যদি এখনও সদস্যতা না করে থাকেন, এখানে ক্লিক করুন৷ এবং ব্লগে একটি নতুন পোস্ট এলে আপনি বিজ্ঞপ্তি পাবেন৷


  1. কিভাবে Google Chrome-এ একটি ওয়েবসাইট ব্লক এবং আনব্লক করবেন

  2. উইন্ডোজ 10 এ কীভাবে একটি ওয়েবসাইট আনব্লক করবেন

  3. ওয়েবসাইট ব্যাকডোর হ্যাক কিভাবে খুঁজে বের করবেন এবং অপসারণ করবেন

  4. প্রতারকদের থেকে সাবধান! কিভাবে ক্লোন করা ওয়েবসাইট এড়ানো যায়?