ওয়েব বিকাশ প্রকল্প: ওয়েব পৃষ্ঠাগুলি কীভাবে তৈরি এবং ডিজাইন করতে হয় তা জানুন

অনুসারে টেকরেপাবলিক , ওয়েব ডেভলপমেন্ট 2019 এর 10 হটেস্ট টেক দক্ষতার একটি।ওয়েব বিকাশকারীদের কর্মসংস্থান ২০১ 2016 থেকে ২০২26 সাল পর্যন্ত ১৫ শতাংশ বৃদ্ধি পাবে বলে ধারণা করা হচ্ছে, যা সমস্ত পেশার গড়ের চেয়ে অনেক দ্রুত। আপনার দক্ষতা বাড়াতে এবং আপনার ওয়েব বিকাশকারী কেরিয়ার শুরু করার জন্য এটি সঠিক সময়। এই নিবন্ধে, আমরা কয়েকটি সম্পর্কে আলোচনা করব প্রকল্পগুলি যা আপনাকে নিম্নলিখিত ক্রমে আপনার নিজের উপর অ্যাপ্লিকেশনগুলি তৈরি করতে সহায়তা করবে:

• ওয়েব বিকাশে ক্যারিয়ার
• ওয়েব বিকাশ প্রকল্প
  • প্রতিক্রিয়াশীল বিন্যাস
  • ডায়নামিক ওয়েবপৃষ্ঠা
  • কুইজ গেম

ওয়েব বিকাশে ক্যারিয়ার

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

লিঙ্কিত তালিকা প্রোগ্রাম সি

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

• ওয়েব ডেভেলপার - ওয়েব বিকাশকারীরা কোনও সাইটের উপস্থিতি এবং ব্যবহারকারীর অভিজ্ঞতা তৈরিতে প্রোগ্রামিং এবং প্রযুক্তি দক্ষতা ব্যবহার করে। গড় বেতন প্রায় ৪০০০ রুপি। 480,694।
• কম্পিউটার প্রোগ্রামার - কম্পিউটার প্রোগ্রামার কোড লেখার এবং পরীক্ষার মাধ্যমে সফ্টওয়্যারটির যথাযথ ক্রিয়াকে বিকাশ ও সমন্বয় করে। গড় বেতনের পরিসর 232k থেকে 1m টাকার মধ্যে।
• ওয়েব ডিজাইনার - ওয়েব ডিজাইনাররা কোনও সাইটের সম্মুখ প্রান্তে কাজ করে এবং বাহ্যিক উপস্থিতি এবং ব্যবহারকারীর অভিজ্ঞতার সাথে উদ্বিগ্ন। ভারতে ওয়েব ডিজাইনারের গড় বেতন 281,410 টাকা।
• গ্রাফিক ওয়েব ডিজাইনার - একটি গ্রাফিক ডিজাইনার গ্রাফিক্স এবং অন্যান্য ভিজ্যুয়াল মিডিয়া তৈরি করে ব্যবহারকারীর অভিজ্ঞতা বা অ্যাপ্লিকেশনটিকে উন্নত করতে কাজ করে। গড় বেতন 118k থেকে 619k অবধি।

ক্যারিয়ারের বৃদ্ধির বিষয়ে আপনি এখন জানেন, ওয়েব ডেভলপমেন্ট প্রকল্পগুলির কয়েকটি দেখে নেওয়া যাক যা আপনাকে ওয়েব ডিজাইনের প্রক্রিয়া আরও ভালভাবে বুঝতে এবং আপনার নিজস্ব প্রকল্পগুলি তৈরি করতে সহায়তা করবে।

ওয়েব বিকাশ প্রকল্প

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

প্রতিক্রিয়াশীল বিন্যাস

ফ্রন্ট এন্ড বিকাশকারীদের একটি প্রধান ভূমিকা প্রতিক্রিয়াশীল নকশা নীতিগুলি এবং কোডিং সাইডে সেগুলি কীভাবে বাস্তবায়ন করা যায় তা বোঝা।

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

* {বক্স-সাইজিং: বর্ডার-বক্স}। মেনু {ভাসা: বাম প্রস্থ: 20% পাঠ্য-প্রান্তিককরণ: কেন্দ্র}। মেনু একটি {ব্যাকগ্রাউন্ড-রঙ: # ডিবা 6 প্যাডিং: 8 পিক্স মার্জিন-শীর্ষ: 7 পিক্স প্রদর্শন: ব্লক প্রস্থ: 100 % রঙ: কালো}। মেইন {ভাসা: বাম প্রস্থ: 60% প্যাডিং: 0 20px}। ডান {পটভূমি-রঙ: # f0b569 ভাসা: বাম প্রস্থ: 20% প্যাডিং: 15px মার্জিন-শীর্ষ: 7px পাঠ্য-সারিবদ্ধ: কেন্দ্র} @ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 620px) {/ * মোবাইল ফোনের জন্য: * / .মেনু, .মেন,। ডান {প্রস্থ: 100%} পূর্ববর্তী প্রশ্ন পরবর্তী প্রশ্ন ক্যুইজ জমা দিন

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

quiz.js

(ফাংশন () {কনট মাইকিউশনস = [{প্রশ্ন: 'কোন সমুদ্রের প্রাণীর তিনটি হৃদয় রয়েছে?', উত্তর: Oct ক: 'অক্টোপাস', বি: 'ব্লু হোয়েল', সি: 'সি টার্টল'}, সঠিকআনসওয়ার: 'a '}, {প্রশ্ন:' পাই এর জন্য ইতালিয়ান শব্দটি কী? ', উত্তর: {a:' ডোনট ', বি:' পাই কেক ', সি:' পিজ্জা '}, সঠিকআনসওয়ার:' সি '}, {প্রশ্ন: 'কোন একমাত্র স্তন্যপায়ী প্রাণী যা লাফিয়ে উঠতে পারে না?', উত্তর: {a: 'সাপ', বি: 'হাতি', সি: 'ক্যাঙ্গারু', correct, সংশোধন উত্তর: 'বি'}] ফাংশন বিল্ডকুইজ () {// আমাদের প্রতিটি প্রশ্নের জন্য এইচটিএমএল আউটপুট কনস্ট আউটপুট = [] // সঞ্চয় করার জন্য একটি স্থান প্রয়োজন ... myQuestions.forEach ((বর্তমান প্রশ্ন, প্রশ্ন নম্বর) => {// আমরা উত্তর পছন্দগুলি কনস্টের তালিকা সংরক্ষণ করতে চাই উত্তর = [] // এবং প্রতিটি উপলভ্য উত্তরের জন্য ... (কারেন্টকিউশন.এনসওয়ার্সে চিঠি) {// ... একটি এইচটিএমএল রেডিও বোতাম উত্তরগুলি যোগ করুন ush ]} `)} // এই প্রশ্নটি এবং আউটপুট আউটপুটটিতে এর উত্তর যুক্ত করুন p পুশ (` $ {কারেন্টকুইশন.কিউশনেশন। $ {উত্তর.জইন ('')} `)}) // অবশেষে আমাদের আউটপু একত্রিত করুন টিএমএল-এর একটি স্ট্রিংয়ের তালিকা তৈরি করুন এবং এটিকে পৃষ্ঠায় রেখে দিন কুইজ কনটেনারইন.এইচটিএমএল = আউটপুট.জইন ('')} ফাংশন শো-রেজাল্টস () qu // আমাদের কুইজ কনস্টেনারগুলি থেকে উত্তর পাত্রে সংগ্রহ করুন কন্টেন্টারস = কুইজকন্টেনার.কোয়ারিসিলিটরআল ('। উত্তর') // ব্যবহারকারীর উত্তরগুলি ট্র্যাক রাখুন প্রতিটি প্রশ্নের জন্য numCor درست = 0 // আসুন ... myQuestions.forEach ((বর্তমান প্রশ্ন, প্রশ্ন নম্বর) => {// নির্বাচিত উত্তর কনস্ট্যান্টের উত্তর সন্ধান করুন কনটেন্টার = উত্তরকন্টেনারস [প্রশ্ন নম্বর] কনস্ট সিলেক্টর = `লেবেল ইনপুট [ নাম = প্রশ্ন $ {প্রশ্ন নাম্বার}]: চেকড` কনস্ট ইউজারঅ্যাসওয়ার = (উত্তরকন্টেইনার.কোয়ারী নির্বাচনকারী (নির্বাচক) || const})। মান নির্ধারণ উত্তরআইডিআইডি = (উত্তরসূত্র.কুইয়ারসিলিটার (নির্বাচক) || {})। আইডি কনট সিলেক্টর ১ = `লেবেল [আইডি = '$ {উত্তরআইডি}']` // ব্যবহারকারীর উত্তর নির্বাচন করুন উত্তর উত্তরএলেম = উত্তরকন্টেইনার.কোয়ারী নির্বাচনকারী ( সিলেক্টর 1) কনস্ট সিলেক্টর 2 = `লেবেল [আইডি = '$ {প্রশ্ন নাম্বার} $ {কারেন্টকিউশন.কোয়ার্টঅ্যানসওয়্যার}']` ভের উত্তরএলেম 1 = উত্তরকন্টেইনার.কোয়ারী নির্বাচনকারী (নির্বাচক 2) // উত্তর সঠিক হলে (ইউজারআজার === কারেন্ট কিউশন.সিআরএন্টার) { // সঠিক উত্তর সংখ্যায় যোগ করুন নম্বর ++ সঠিক করুন উত্তরগুলি সবুজ //console.log(answerElem) উত্তরElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} অন্যথায় {// উত্তর ভুল বা ফাঁকা // উত্তরগুলি উত্তর উত্তর রঙ করুন Elem1.style.color = '# 70F85A' উত্তরএলেম.স্টাইল.ব্যাকগ্রাউন্ড = '# এফডি 2929' উত্তরএলেম 1.style.fontWeight = '900' //console.log(answerContainers)}}) // মোট ফলাফলের বাইরে সঠিক উত্তরগুলির নম্বর দেখানকন্টেইনার.ইনার এইচটিএমএল = Q Q Q Q Q Q Q Q Q Q Q Q Q Q Q Q}}}}}}}}}}}}}} [ কটি-স্লাইড ') স্লাইডগুলি [n] .classList.add (' সক্রিয়-স্লাইড ') কারেন্টস্লাইড = এন যদি (কারেন্টস্লাইড === 0) {পূর্ববর্তী বাটন.স্টাইল.ডিসপ্লে =' কিছুই নয় '- অন্য {পূর্ববর্তী বাটন.স্টাইল.ডিসপ্লে = 'ইনলাইন-ব্লক'} যদি (কারেন্টস্লাইড === স্লাইডস.লেন্থ - ১) {NextButton.style.display = 'কিছুই নয়' সাবটমিটনেস্টাইল.ডিসপ্লে = 'ইনলাইন-ব্লক'} অন্য {পরের বাটন.স্টাইল.ডিসপ্লে = 'ইনলাইন -block 'submitButton.style.display =' কিছুই নয় '}} ফাংশন শোNextSlide () {showSlide (কারেন্টস্লাইড + 1)} ফাংশন showPreLiveSlide () S showSlide (1) current কন্সট quizContainer = document.getElementById (' ক্যুইজ ') ফলাফলের কনটেইনার = ডকুমেন্ট.জেটলেটমেন্টবাইআইডি ('ফলাফল') কনস্ট সাবটব্যাটন = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ('সাবমিট') // ডিসপ্লে কুইজ অবিলম্বে বিল্ডকুইজ () কনস্ট পূর্ববর্তী বাটন = ডকুমেন্ট.সেটমেন্টবাইআইডি ('পূর্ববর্তী') কনস্ট নেক্সট বাটন = ডকুমেন্ট.সেটমেন্ট বিইআইডি ('পরবর্তী) ') কনস্ট্যান্ড স্লাইডস = ডকুমেন্ট.কিউরিলেক্টর সমস্ত ('। স্লাইড ') চলতি স্লাইড = 0 শো স্লাইড (0) // জমা দেওয়ার সময়, ফলাফল দেখান সাবটমিট বাটনে.এডএভেন্টলিস্টনার (' ক্লিক করুন ', শোআরসাল্ট) গুলি) পূর্ববর্তী বাটন.এডএভেন্টলিস্টনার ('ক্লিক করুন', শোপ্রিরিউসস্লাইড) পরবর্তীবাটন.এডএডইভেন্টলিস্টনার ('ক্লিক করুন', শো নেক্সটস্লাইড)}) ()

অবশেষে, আমরা এই গেমটিতে বিভিন্ন স্টাইল যুক্ত করতে সিএসএস ব্যবহার করতে পারি।

উদাহরণস্বরূপ জাভাতে এমভিসি আর্কিটেকচার

quiz.css

@ আইম্পোর্ট ইউআরএল (https://fouts.googleapis.com/css?family=Work+Sans:300,600) বডি {ফন্ট-আকার: 30px ফন্ট-পরিবার: 'ওয়ার্ক সানস', সানস-সিরিফ রঙ: rgb (24, 23 , 23) ফন্ট-ওজন: 300 পাঠ্য-প্রান্তিককরণ: কেন্দ্রের পটভূমি-রঙ: # f8e8f2} h1 {ফন্ট-ওজন: 300 মার্জিন: 0 পিক্স প্যাডিং: 10 পিক্স ফন্ট-আকার: 40 পিক্স ব্যাকগ্রাউন্ড-রঙ: আরজিবি (9, 107, 102) রঙ: # ff}। প্রশ্ন} ফন্ট-আকার: 40px মার্জিন-নীচে: 10px ans। উত্তরগুলি {মার্জিন-নীচে: 20px পাঠ্য-সারিবদ্ধ: বাম প্রদর্শন: ইনলাইন-ব্লক}। উত্তর লেবেল {প্রদর্শন: ব্লক মার্জিন-নীচে: 10px } বোতাম {ফন্ট-পরিবার: 'ওয়ার্ক সানস', সানস-সেরিফ ফন্ট-আকার: 22 পিক্স ব্যাকগ্রাউন্ড-রঙ: আরজিবি (218, 167, 57) রঙ: # এফএফ সীমানা: 0 পিক্সার সীমানা ব্যাসার্ধ: 3 পিক্স প্যাডিং: 20 পিক্স কার্সার: পয়েন্টার মার্জিন-নীচে: 20px} বোতাম: হোভার {পটভূমি-রঙ: # 38a s। স্লাইড {অবস্থান: পরম বাম: 0 পিক্স শীর্ষ: 0 পিক্স প্রস্থ: 100% জে-সূচক: 1 অস্বচ্ছতা: 0 রূপান্তর: অস্বচ্ছতা 0.5} .অ্যাকটিভ- স্লাইড: অস্বচ্ছতা: 1 জেড-সূচক: 2} .কুইজ-ধারক {অবস্থান: আপেক্ষিক উচ্চতা: 200px মার্জিন-শীর্ষ: 40px}

আউটপুট:

পিডিএফ ফ্রি ডাউনলোডের জন্য ইনফরম্যাটিকা টিউটোরিয়াল

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

এখন আপনি জাভাস্ক্রিপ্ট লুপ সম্পর্কে জানুন, এটি দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে help

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'ওয়েব ডেভলপমেন্ট প্রজেক্টস' এর মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।