ویب ڈویلپمنٹ پروجیکٹس: ویب صفحات کی تشکیل اور ڈیزائن کا طریقہ جانیں

کے مطابق ٹیک ریپبلک ، ویب ڈویلپمنٹ 2019 کی 10 جدید ترین صلاحیتوں میں سے ایک ہے۔2016 سے 2026 تک ویب ڈویلپرز کی ملازمت میں 15 فیصد اضافے کا امکان ہے ، جو تمام پیشوں کے اوسط سے کہیں زیادہ تیز ہے۔ یہ آپ کی مہارت کو بڑھانے اور اپنے ویب ڈویلپر کیریئر کو شروع کرنے کا صحیح وقت ہے۔ اس مضمون میں ، ہم ان میں سے کچھ پر تبادلہ خیال کریں گے ایسے پروجیکٹس جو آپ کو مندرجہ ذیل تسلسل میں اپنے طور پر ایپلی کیشنز بنانے میں مدد کریں گے۔

• ویب ڈویلپمنٹ میں کیریئر
• ویب ڈویلپمنٹ پروجیکٹس
  • قبول لے آؤٹ
  • متحرک ویب صفحہ
  • کوئز گیم

ویب ڈویلپمنٹ میں کیریئر

ویب ڈویلپر ایک پروگرامر ہوتا ہے جو کلائنٹ سرور ماڈل کا استعمال کرتے ہوئے ورلڈ وائڈ ویب ایپلی کیشنز کی ترقی میں مہارت رکھتا ہے۔ وہ لے آؤٹ سے لے کر کام کرنے اور کسی مؤکل کی خصوصیات کے مطابق ویب سائٹس کو ڈیزائننگ ، کوڈنگ اور اس میں ترمیم کرنے کے بھی ذمہ دار ہیں۔

آپ کو ویب ڈویلپمنٹ میں تربیت یافتہ پیشہ ور افراد مل سکتے ہیں جو کمپیوٹر پروگرامرز ، سوفٹ ویئر انجینئر ، اور یہاں تک کہ ویب پر مرکوز گرافک ڈیزائنرز کی حیثیت سے کام کرتے ہیں۔ کچھ اہم کام کے کردار یہ ہیں:

• ویب ڈویلپر - ویب ڈویلپر کسی سائٹ کی ظاہری شکل اور صارف کے تجربے کی تشکیل کے لئے پروگرامنگ اور ٹکنالوجی کی مہارت کا استعمال کرتے ہیں۔ اوسط تنخواہ تقریبا Rs Rs. Rs روپے ہے 480،694۔
• کمپیوٹر پروگرامر - کمپیوٹر پروگرامرز کوڈ کو تحریری شکل اور جانچ کے ذریعہ سافٹ ویر کے مناسب فنکشن کو تیار اور ایڈجسٹ کرتے ہیں۔ اوسط تنخواہ کی حد 232k سے 1m روپے کے درمیان ہے۔
• ویب ڈیزائنر - ویب ڈیزائنرز کسی سائٹ کے فرنٹ اینڈ پر کام کرتے ہیں اور اس کا تعلق ظاہری شکل اور صارف کے تجربے سے ہے۔ ہندوستان میں ویب ڈیزائنر کی اوسط تنخواہ 281،410 روپے ہے۔
• گرافک ویب ڈیزائنر - ایک گرافک ڈیزائنر صارف کے تجربے یا اطلاق کو گرافکس اور دیگر بصری میڈیا تشکیل دے کر بہتر بنانے کے لئے کام کرتا ہے۔ اوسط تنخواہ 118k سے 619k تک ہے۔

اب جب آپ کیریئر میں اضافے کے بارے میں جانتے ہیں تو آئیے ، کچھ ویب ڈویلپمنٹ پروجیکٹس پر ایک نظر ڈالیں جو آپ کو ویب ڈیزائننگ کے عمل کو بہتر طریقے سے سمجھنے اور اپنے اپنے پروجیکٹس کی تشکیل میں بھی مددگار ثابت ہوں گے۔

جاوا میں تعطل سے کیسے بچایا جائے

ویب ڈویلپمنٹ پروجیکٹس

ویب ڈویلپمنٹ پروجیکٹس کو تین سطحوں میں تقسیم کیا گیا ہے۔ بنیادی ، انٹرمیڈیٹ ، اور ایڈوانس . ہم منصوبوں کی مختلف سطحوں اور اس کوڈ کے کام کرنے کے طریقوں پر تبادلہ خیال کریں گے۔اس سے ویب ڈویلپمنٹ کے عمل کو بہتر طور پر سمجھنے میں مدد ملے گی اور اسکرپٹنگ کی مختلف زبانوں کا استعمال کرکے اپنی ویب سائٹ بنانے کا خیال فراہم ہوگا۔ تو ، آئیے بنیادی سطح کے پروجیکٹ کے ساتھ آغاز کریں۔

قبول لے آؤٹ

فرنٹ اینڈ ڈویلپر کا ایک اہم کردار ذمہ دار ڈیزائن اصولوں اور ان کو کوڈنگ سائیڈ پر لاگو کرنے کے طریقوں کو سمجھنا ہے۔

اس پروجیکٹ میں ، ہم ایک واحد ذمہ دار صفحے کا بنیادی ترتیب تیار کریں گے اور یہ کہ کثیر مقصدی ویب سائٹ بنانے کے لئے ویب ڈویلپمنٹ میں کیسے کام ہوتا ہے۔ پہلا قدم HTML لے آؤٹ بنانا اور ویب صفحے کے سر حصے کو ڈیزائن کرنا ہے۔

* {باکس سیزنگ: بارڈر باکس men. مینیو {فلوٹ: بائیں چوڑائی: 20٪ ٹیکسٹ - سیدھ کریں: سینٹر u. مینیو اے {بیک گراؤنڈ رنگ: # ڈیبہ 6 پیڈنگ: 8 پی ایکس مارجن ٹاپ: 7 پی ایکس ڈسپلے: بلاک چوڑائی: 100 ٪ رنگین: سیاہ main. مین {فلوٹ: بائیں چوڑائی: 60٪ بھرتی: 0 20px right. سیدھا {پس منظر کا رنگ: # f0b569 فلوٹ: بائیں چوڑائی: 20٪ بھرتی: 15px مارجن ٹاپ: 7px ٹیکسٹ سیدھ کریں: مرکز} @ میڈیا صرف اسکرین اور (زیادہ سے زیادہ چوڑائی: 620px) {/ * موبائل فونز کے لئے: * /. مینیو ،. مین ،. رائٹ {چوڑائی: 100٪} Question پچھلا سوال اگلا سوال کوئز جمع کریں

اگلا ، ہمیں کوئز بنانے ، نتائج دکھانے اور اسے ایک ساتھ رکھنے کے لئے ایک راستہ کی ضرورت ہوگی۔ ہم جاوا اسکرپٹ کی مدد سے اپنے کام انجام دینے سے شروع کر سکتے ہیں۔

quiz.js

(فنکشن () {const myQuestions = [{سوال: 'کس سمندری مخلوق کے تین دل ہیں؟' ، جواب: {a: 'آکٹپس' ، بی: 'بلیو وہیل' ، c: 'سی کچھی'} ، صحیح جوابدار: 'a '}، {سوال:' پائی کے لئے اطالوی لفظ کیا ہے؟ '، جوابات: {a:' ڈونٹ '، بی:' پائی کیک '، c:' پیزا '} ، صحیح جواب:' c '}، {سوال: 'وہ کون سا واحد ستنداری جانور ہے جو چھلانگ نہیں لگا سکتا؟' ، جوابات: {a: 'سانپ' ، بی: 'ہاتھی' ، c: 'کنگارو' ،} ، صحیح جوابدار: 'b'}] فنکشن buildQuiz () {// ہمیں ہر سوال کے ل HTML HTML آؤٹ پٹ کانسٹ آؤٹ پٹ = [] // کو ذخیرہ کرنے کے لئے ایک جگہ کی ضرورت ہوگی ... myQuestions.forEach ((موجودہ سوال ، سوال نمبر) => {// ہم جوابی انتخاب کی فہرست کی فہرست کو اسٹور کرنا چاہیں گے) جوابات = [] // اور ہر دستیاب جواب کے ل for ... کے لئے (موجودہ کیوئشن.اینسز میں خط) {// ... ایک ایچ ٹی ایم ایل ریڈیو بٹن جوابات شامل کریں۔ پش (`$ {خط}: $ {کرنٹ کیوئشن ڈاٹ کام ]} `)} // اس سوال اور اس کے جوابات کو آؤٹ پٹ آؤٹ پٹ میں شامل کریں۔ (` {{موجودہ سوالات.قصاب {{{उत्तर.جوائن ('')} `)}) // آخر میں ہمارے آؤٹ پٹ کو جوڑیں ٹی ٹی ایم ایل کی ایک سٹرنگ میں فہرست بنائیں اور اس کو کوئزکونٹینر انر ایچ ٹی ایم ایل = آؤٹ پٹ پر شامل کریں۔ '('))} فنکشن شو ریسلٹس () {// ہمارے کوئز انسٹیٹیوٹ سے جوابی کنٹینرز اکٹھا کریں۔ جواب: کنٹینرز = کوئزکونٹینر.کویری سلیکٹرعال ('. جوابات') // صارف کے جوابات کو ٹریک رکھیں ہر سوال کے لئے numCor सही = 0 // دیں… myQuestions.forEach ((موجودہ سوال ، سوال نمبر) => {// منتخب کردہ جواب کا پتہ لگائیں۔ جواب تلاش کریں۔ جواب سازی = جواب کنٹینرز [سوال نمبر] کانسٹ سلیکٹر = `لیبل ان پٹ [ نام = سوال $ {سوال نمبر}]: چیک` کونٹ یوزرآانسور = (جواب کنٹینر.کویری سلیکٹر (سلیکٹر) || {}). value const answerID = (answerContainer.querySelector (سلیکٹر) || {}). id constor سلیکٹر 1 = `لیبل [id = '$ {answerID}']` // صارف کے جواب کو منتخب کریں var answerElem = answerContainer.querySelector ( سلیکٹر 1) کونسٹ سلیکٹر 2 = `لیبل [id = '$ {سوال نمبر'} $ {موجودہ سوالات.کورٹ آئنسر} ']` var answerElem1 = answerContainer.querySelector (سلیکٹر 2) // اگر جواب درست ہے تو (userAnswer === موجودہ سوالات_ورکیٹ جواب) { // درست جوابوں کی تعداد میں اضافہ کریں << درست کریں ++ // جوابات کو سبز بنائیں //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} ورنہ {// اگر جواب ہے تو غلط ہے یا خالی // جوابات کو سرخ رنگ جواب دیں Elem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // کل جوابات سے باہر درست جوابات کی تعداد دکھائیںContainer.innerHtml = `$ {numCor درست} میں سے $ {myQuestions.length}}} فنکشن شو سلائیڈ (n) ides سلائیڈز [کرنٹ سلائیڈ] .classList.remove ('a ctive-slide ') سلائیڈز [n] .classList.add (' ایکٹو-سلائیڈ ') کرنٹ سلائیڈ = n اگر (کرنٹ سلائیڈ === 0) {پچھلے بٹن.سٹائل.ڈیسکلے =' ​​کوئی نہیں '} دوسری {پچھلے بٹن.سٹائل.ڈیزپلے = 'ان لائن-بلاک'} اگر (موجودہ سلائڈ === سلائڈز۔ لمبائی - 1) {NextButton.style.display = 'کوئی نہیں' submitButton.style.display = 'ان لائن-بلاک'} دوسری {NextButton.style.display = 'ان لائن -block 'submitButton.style.display =' کوئی نہیں '}} فنکشن شو نیکسٹ سلائڈ () {شو سلائیڈ (کرنٹ سلائیڈ +1)} فنکشن شوپریلیئز سلائیڈ () سلائڈ سلائیڈ (1)} const quizContainer = document.getElementById (' کوئز ') نتائجکونٹینر = دستاویز.getElementById ('نتائج') const સબٹ بٹن = دستاویز.getElementById ('پیش') // ڈسپلے کوئز فورا build buildQuiz () const گزشتہ بٹن = دستاویز.getElementById ('پچھلا') بننا اگلا بٹن = دستاویز.getElementById ('اگلا ') کونسٹ سلائیڈز = دستاویز.کوئری سلیکٹر سب ('. سلائڈ ') کرنٹ سلائیڈ = 0 شو سلائیڈ (0) // جمع کرانے دیں ، نتائج دکھائیں सबٹ بٹن ڈاٹ ایڈینٹ لسٹنر (' کلک کریں '، شو ریسلٹ s) پچھلے بٹن ڈاٹ ایڈینٹ لسٹنر ('پر کلک کریں' ، شو پراپرائز سلائیڈ) اگلا بٹن ڈاٹ ایڈینٹ لسٹنر ('کلک' ، شو نیکسٹ سلائڈ)}) ()

آخر میں ، ہم اس کھیل میں مختلف طرزیں شامل کرنے کیلئے سی ایس ایس کا استعمال کرسکتے ہیں۔

کوئز سی ایس ایس

import url (https://fouts.googleapis.com/css؟family=Work+Sans:300،600) باڈی {فونٹ سائز: 30px فونٹ-فیملی: 'ورک سنز' ، سانس سیریف رنگ: rgb (24 ، 23 ، 23) فونٹ وزن: 300 ٹیکسٹ - سیدھا کریں: سینٹر پس منظر کا رنگ: # f8e8f2} h1 {فونٹ وزن: 300 مارجن: 0 px بھرتی: 10px فونٹ سائز: 40px پس منظر کا رنگ: آرجیبی (9 ، 107 ، 102) رنگین: # ایف ایف ایف ques .قصاب {فونٹ سائز: 40px مارجن-نیچے: 10px ans. جوابات {مارجن-نیچے: 20px ٹیکسٹ سیدھ: بائیں ڈسپلے: ان لائن-بلاک w .نوازوں کا لیبل {ڈسپلے: بلاک مارجن-نیچے: 10px } بٹن {فونٹ-کنبہ: 'ورک سینز' ، سانس سیریف فونٹ سائز: 22px پس منظر کا رنگ: آرجیبی (218 ، 167 ، 57) رنگ: # ایف ایف ایف بارڈر: 0 پکسڈ بارڈر رداس: 3px بھرتی: 20px کرسر: پوائنٹر مارجن-نیچے: 20px} بٹن: ہوور {پس منظر کا رنگ: # 38a}. سلائڈ {پوزیشن: مطلق بائیں: 0 px ٹاپ: 0 px چوڑائی: 100٪ z-انڈیکس: 1 دھندلاپن: 0 منتقلی: دھندلاپن 0.5s ac. سلائیڈ {دھندلاپن: 1 زیڈ انڈیکس: 2}. کوئز کنٹینر {پوزیشن: نسبتا اونچائی: 200px مارجن ٹاپ: 40px}

آؤٹ پٹ:

یہ ویب ڈویلپمنٹ پروجیکٹس میں سے کچھ تھے۔ اس کے ساتھ ، ہم اس مضمون کے آخر میں آئے ہیں۔ مجھے امید ہے کہ آپ منصوبوں کی مختلف سطحوں کو سمجھ گئے ہوں گے اور آپ کو اپنا ویب پیج بنانے اور اپنی ضروریات کے مطابق ان کا ڈیزائن بنانے کا اندازہ ہوگا۔

اب جب آپ جاوا اسکرپٹ لوپس کے بارے میں جانتے ہیں تو ، چیک کریں بذریعہ ایڈوریکا۔ ویب ڈویلپمنٹ سرٹیفیکیشن ٹریننگ آپ کو HTML5 ، CSS3 ، ٹویٹر بوٹسٹریپ 3 ، jQuery اور گوگل API کا استعمال کرتے ہوئے متاثر کن ویب سائٹ بنانے کا طریقہ سیکھنے میں مدد دے گی اور اسے ایمیزون سادہ اسٹوریج سروس (S3) میں تعینات کرے گی۔

ہمارے لئے ایک سوال ہے؟ برائے کرم اس کا ذکر 'ویب ڈویلپمنٹ پروجیکٹس' کے تبصرے سیکشن میں کریں اور ہم آپ کو واپس ملیں گے۔