কিভাবে বুটস্ট্র্যাপ 4: 7 ধাপের সাথে একটি মসৃণ এবং সহজ ওয়েবসাইট তৈরি করবেন

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

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

পোর্টফোলিওটি আরও ছোট ছোট ধাপে বিভক্ত করা হয়েছে যাতে এটি চেষ্টা করা যায় এবং এটিকে আরও পরিচালনাযোগ্য করা যায়: এইচটিএমএল ফ্রেম, সিএসএস ফ্রেম, জাভাস্ক্রিপ্ট ফ্রেম, নেভিগেশন বার এবং হোমপেজ (কন্টেন্ট ব্লক সহ)।

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

দ্রষ্টব্য: এই নির্দেশিকাটি সর্বত্র অন্তর্ভুক্ত নয় এবং এইচটিএমএল, সিএসএস বা জাভাস্ক্রিপ্টে কীভাবে প্রোগ্রাম করতে হয় তা শিখতে বিকল্প হিসাবে ব্যবহার করা উচিত নয়।

প্রয়োজনীয় সম্পদ

• বুটস্ট্র্যাপ 4
• jQuery 3.3.1

চ্ছিক সম্পদ

• ফন্ট অসাধারণ
• গুগল ফন্ট
• highlight.js

আপনি যদি সম্পূর্ণ উদাহরণ এড়িয়ে যেতে চান বা সংগ্রহস্থলটি দেখুন:

• সম্পূর্ণ উদাহরণ
• ভাণ্ডার

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

ধাপ 1: সেট আপ

ফোল্ডার সেটআপ

1. কোথাও একটি ফোল্ডার তৈরি করুন যেখানে আপনি যা ডাউনলোড করতে যাচ্ছেন তা সংরক্ষণ করতে পারেন। এটি পোর্টফোলিওর জন্য আপনার মূল ডিরেক্টরি হবে।
2. "বুটস্ট্র্যাপ" নামে একটি ফোল্ডার তৈরি করুন
3. আপনার রুট পোর্টফোলিও ফোল্ডারের ভিতরে আরেকটি ফোল্ডার তৈরি করুন যার নাম "jquery"

পোর্টফোলিও ফোল্ডার

| ----- বুটস্ট্র্যাপ | ----- jquery

বুটস্ট্র্যাপ 4

1. তাদের ওয়েবসাইটে যান এবং "সংকলিত CSS এবং JS" বিভাগের নীচে "ডাউনলোড" বোতামে ক্লিক করুন।
2. . Zip ফাইলটি আপনার "ডাউনলোড" ফোল্ডারে বা অন্য কোন সুবিধাজনক স্থানে সংরক্ষণ করুন।
3. . Zip ফাইলটি খুলুন এবং "css" এবং "js" ফোল্ডারগুলি "বুটস্ট্র্যাপ" ফোল্ডারে বের করুন যা আপনি আগে তৈরি করেছিলেন।

jQuery

1. তাদের ওয়েবসাইটে যান এবং "অসম্পূর্ণ, উন্নয়ন jQuery 3.3.1" ডাউনলোড করুন
2. আপনার আগে তৈরি করা "jquery" ফোল্ডারের ভিতরে সেই ফাইলটি সংরক্ষণ করুন।

যখন আমরা প্রকৃত পোর্টফোলিওতে কাজ শুরু করি তখন সমস্ত কাঠামো প্রস্তুত।

ধাপ 2: HTML ফ্রেম (index.html)

তোমার নাম

এই ফ্রেমটি অতিরিক্ত জটিল কিছু নয়, তবে আমি সেটআপের সাধারণ উদ্দেশ্য ব্যাখ্যা করতে চাই।

JQuery এর পরে JS বুটস্ট্র্যাপ

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

ফন্ট অসাধারণ

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

hightlight.js

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

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

ধাপ 3: CSS ফ্রেম (style.css)

/ * * আশা করি বিজি রঙকে ধূসর করতে হবে এবং ফন্টের স্টাইল পরিবর্তন করলে ওয়েবসাইট সহজেই */ বডি {ব্যাকগ্রাউন্ড: গ্রে; font-family: 'Open Sans', sans-serif; }

/*

* এটি নিশ্চিত করে যে এনএভি বার সবকিছুর উপরে রয়েছে */ এনএভি {z-index: 9999; }

/*

* এটি অনুচ্ছেদ পাঠ্যকে আরও পাঠযোগ্য করে তুলতে হবে */ p {font-size: 18px; মার্জিন-শীর্ষ: 5px; মার্জিন-বটম: 5px; }

/*

* এটি নিশ্চিত করে যে আমার সমস্ত কোড ব্লক সঠিকভাবে ফরম্যাট করা হয়েছে */ কোড {text-align: left; }

/*

* আমি তালিকা গুলি থাকতে চাই না */ li {list-style-type: none; }

/*

* লিঙ্কগুলি ডিফল্টভাবে নীল, এবং আমি তাদের বুটস্ট্র্যাপের স্টাইল */ li a, a {color: white; }

/*

* আমি একটি ডিভিতে একটি ক্লাস ট্যাগ বেঁধেছি যাতে নাভারবার রয়েছে তা নিশ্চিত করার জন্য */.navFix {padding-bottom: 70px; }

/*

* বর্ধিত আকার প্রসারিত navbar */.social-media {font-size: 1.3em; }

/*

* ড্রপডাউন লিঙ্কগুলির জন্য ডিফল্ট হাইলাইট রঙ সাদা */.dropdown-menu a: hover {background-color: #212529; }

/*

* একটি নির্দিষ্ট উচ্চতায় পিডিএফ দেখানো ফোর্স ডিভস */.pdfFill {height: 45rem; }

/*

* বোতাম এবং কোড ব্লকের মধ্যে কিছু ব্যবধান যোগ করুন */.codStyle {padding-top: 30px; }

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

nav z-index

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

কোড সারিবদ্ধকরণ

যেহেতু আমি সাধারণত বুটস্ট্র্যাপের "জাস্টিফাই-কন্টেন্ট-সেন্টার" এবং "টেক্সট-সেন্টার" ক্লাস ব্যবহার করি উপাদানগুলিকে সারিবদ্ধ করার জন্য, আমি চাই না আমার কোড সেই কেন্দ্র-সারিবদ্ধ প্রকৃতির উত্তরাধিকারী হোক। যেকোন প্রান্তিককরণ পরিবর্তনকে ওভাররাইট করে এবং কোড ট্যাগগুলি বাম-প্রান্তিককৃত করে এটি সহজেই সংশোধন করা হয়: এটি কোডে ট্যাব-স্পেসিং সংরক্ষণ করে।

navFix প্যাডিং

যখন বুটস্ট্র্যাপের নেভিগেশন বারটি পৃষ্ঠার শীর্ষে আটকে থাকে তখন এর নীচে কন্টেন্ট লোড হবে। আমি বিশ্বাস করি এটি ঘটে কারণ নাভবারটি আসলে পৃষ্ঠার পরিবর্তে ভিউপোর্টের শীর্ষে আটকে আছে। যাই হোক না কেন এটি Navbar এবং বাকি বিষয়বস্তুর মধ্যে স্থান বাড়িয়ে ঠিক করা হয়েছে।

পিডিএফ উচ্চতা

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

ধাপ 4: জাভাস্ক্রিপ্ট ফ্রেম (javascript.js)

/ * * এটি 'টগল' ক্লাসের সাথে যেকোনো উপাদান অনুসন্ধান করে এবং এটি লুকিয়ে রাখে বা লুকিয়ে রাখে */ ফাংশন টগলসেকশন (আইডি, টগলআইডি) {যদি (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

জন্য (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "ব্লক";

}

মিথ্যা প্রত্যাবর্তন;

}

/*

* কোড যা একটি নির্দিষ্ট ক্রমে চালানো প্রয়োজন */ $ (ডকুমেন্ট)।

/*

* */ SetTimeout (ফাংশন () {/ * * লোড করা সমস্ত কোড হাইলাইট করুন */ $ ('প্রি কোড')। প্রতিটি (ফাংশন (i, ব্লক) { hljs.highlightBlock (ব্লক);});}, 1000); });

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

টগল সেকশন

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

ডকুমেন্ট লোড হচ্ছে

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

$ ('#mq2-intro')। লোড ("ফাইল/টিউটোরিয়াল/mq2/mq2-intro/content.html");

এটি কিভাবে আমরা কন্টেন্ট লোড করব তার একটি উদাহরণ।

ধাপ 5: নেভিগেশন বার

আদ্যক্ষর

• বাড়ি
• আমার সম্পর্কে
• প্রকল্প টিউটোরিয়াল
• আমার সাথে যোগাযোগ কর

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

  বুটস্ট্র্যাপ কার্যকারিতা

  বুটস্ট্র্যাপ মূলত বিভিন্ন শ্রেণীর মানগুলির মাধ্যমে কাজ করে। "এনএভি" উপাদানটির দিকে তাকিয়ে, প্রতিটি শ্রেণীর উদ্দেশ্য নির্ধারণ করা খুব কঠিন নয়:

  আমাদের "navbar" হল "md" (মাধ্যম), "সম্প্রসারিত" সক্ষম, "অন্ধকার" বিকল্প। এবং আমরা এটিকে "শীর্ষে" স্থির করেছি। এটি বিভ্রান্তিকর দেখায় কারণ এটি শনাক্তকারীদের একটি গোলমাল, কিন্তু যদি আপনি তাদের উপাদানটির বিশেষণ হিসাবে দেখেন, তাহলে কী ঘটছে তা বোঝা অনেক সহজ হয়ে যায়।

  ব্র্যান্ড

  ব্র্যান্ড হল সাধারণ লোগো এবং নাম যা আপনি উপরের বাম দিকে প্রতিটি ওয়েবসাইটে দেখতে পান। এটি একটি চেষ্টা এবং সত্য নকশা উপাদান যা প্রতিটি ব্যবহারকারী এই সময়ে আশা করে।

  দ্রষ্টব্য: "i" ট্যাগগুলি আসলে FontAwesome আইকন, এবং আপনি যেকোনো আইকনের পৃষ্ঠা থেকে এই ট্যাগগুলি পান।

  টগলার/সংকোচনযোগ্য বোতাম (মোবাইল)

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

  নববার লিংক (বাম পাশ)

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

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

  নববার লিংক (ডান পাশ)

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

  দ্রষ্টব্য: যদি আপনি ইতিমধ্যে সেটআপ করা লিঙ্কগুলি ব্যবহার করার পরিকল্পনা করেন, তাহলে প্রকৃত "href" লিঙ্কগুলিতে "ব্যবহারকারীর নাম" পরিবর্তন করুন।

  ধাপ 6: হোমপেজ

  

  

  

  তোমার নাম

  প্রোগ্রামার রাইটার গেমার

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

  টেবিল ফরম্যাট

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

  বোতাম

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

  প্রোগ্রামিং কোড কন্টেন্ট

  "কোড" ট্যাগ হল ডিফল্ট ট্যাগ যা highlight.js হাইলাইট করার সব ব্যবস্থাপনা ব্যবহার করে। যদি আপনি javascript.js ফাইল থেকে মনে রাখেন, অন্য ফাইল থেকে বিষয়বস্তু লোড করার জন্য একটি বিভাগ আছে।

  $ ('#home-programmer-macro')। load ("files/home/watchLoot.mac");

  • এর প্রথম অংশটি উপাদানটির "আইডি" সন্ধান করে যার মধ্যে আপনি বিষয়বস্তু সন্নিবেশ করতে চান।
  • দ্বিতীয় অংশ হল আপনি যে ফাইলটি লোড করতে চান তার অবস্থান।

  দ্রষ্টব্য: বিষয়বস্তু আসলে সম্পূর্ণরূপে লোড হবে না কারণ একটি ভাল সুযোগ আছে যে আপনি একটি সার্ভারের পরিবর্তে স্থানীয়ভাবে এই ওয়েব পৃষ্ঠাটি সম্পাদনা করছেন। এটি বিভিন্ন উপায়ে সমাধান করা যেতে পারে যা আমি নির্দেশের শেষে সম্বোধন করব।

  ইউটিউব ভিডিও

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

  ধাপ 7: সামনের দিকে তাকান

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

  বুটস্ট্র্যাপের ডকুমেন্টেশন

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

  W3 স্কুল

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

  আপনার পোর্টফোলিও হোস্টিং

  এই নির্দেশযোগ্য আপনাকে শেখায় কিভাবে আপনার ওয়েবসাইটকে কয়েকটি ভিন্ন প্ল্যাটফর্মে হোস্ট করতে হয়। আপনি যদি আপনার পোর্টফোলিও লোক, নিয়োগকারী ইত্যাদি দেখাতে সক্ষম হতে চান তাহলে এই পদক্ষেপগুলি আপনাকে নিতে হবে।

  পরীক্ষা করুন এবং মজা করুন

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