वेब डेवलपमेंट प्रोजेक्ट्स: वेब पेजों का निर्माण और डिजाइन करना जानते हैं

के अनुसार TechRepublic , वेब विकास 2019 में 10 सबसे गर्म तकनीकी कौशल में से एक है।वेब डेवलपर्स का रोजगार 2016 से 2026 तक 15 प्रतिशत बढ़ने का अनुमान है, सभी व्यवसायों के लिए औसत से बहुत तेज है। अपने कौशल को बढ़ाने और अपने वेब डेवलपर कैरियर को शुरू करने का यह सही समय है। इस लेख में, हम कुछ के बारे में चर्चा करेंगे निम्नलिखित अनुक्रम में अपने दम पर एप्लिकेशन बनाने में मदद करने वाली परियोजनाएँ:

• वेब डेवलपमेंट में करियर
• वेब डेवलपमेंट प्रोजेक्ट्स
  • अनुकूल लेआऊट
  • गतिशील वेबपेज
  • प्रश्नोत्तरी खेल

वेब डेवलपमेंट में करियर

एक वेब डेवलपर एक प्रोग्रामर है जो क्लाइंट-सर्वर मॉडल का उपयोग करके वर्ल्ड वाइड वेब एप्लिकेशन के विकास में माहिर है। वे वेबसाइटों को डिजाइन करने, कोडिंग और संशोधित करने के लिए, लेआउट से फ़ंक्शन के लिए और क्लाइंट के विनिर्देशों के अनुसार भी जिम्मेदार हैं।

आप कंप्यूटर प्रोग्रामर, सॉफ्टवेयर इंजीनियर और यहां तक ​​कि वेब-केंद्रित ग्राफिक डिजाइनरों के रूप में काम कर रहे वेब विकास में प्रशिक्षित पेशेवरों को पा सकते हैं। मुख्य कार्य भूमिकाओं में से कुछ हैं:

• वेब डेवलपर - वेब डेवलपर्स किसी साइट की उपस्थिति और उपयोगकर्ता अनुभव के निर्माण के लिए प्रोग्रामिंग और प्रौद्योगिकी कौशल का उपयोग करते हैं। औसत वेतन लगभग रु। 480,694 है।
• कंप्यूटर प्रोग्रामर - कंप्यूटर प्रोग्रामर सॉफ्टवेयर के उचित कार्य को विकसित और समायोजित करते हैं, जो कोड और लेखन का परीक्षण करते हैं। औसत वेतन सीमा 232k से 1m के बीच है।
• वेब डिजाइनर - वेब डिज़ाइनर किसी साइट के फ्रंट-एंड पर काम करते हैं और आउटवर्ड उपस्थिति और उपयोगकर्ता अनुभव से संबंधित हैं। भारत में एक वेब डिजाइनर के लिए औसत वेतन 281,410 रुपये है।
• ग्राफिक वेब डिजाइनर - एक ग्राफिक डिजाइनर ग्राफिक्स और अन्य दृश्य मीडिया बनाकर उपयोगकर्ता के अनुभव या आवेदन को बढ़ाने के लिए काम करता है। औसत वेतन 118k से 619k रुपये तक है।

अब जब आप करियर ग्रोथ के बारे में जानते हैं, तो आइए कुछ ऐसे वेब डेवलपमेंट प्रोजेक्ट्स पर नज़र डालते हैं जो आपको वेब डिज़ाइनिंग की प्रक्रिया को बेहतर ढंग से समझने में मदद करेंगे और अपनी खुद की परियोजनाओं का निर्माण भी करेंगे।

वेब डेवलपमेंट प्रोजेक्ट्स

वेब डेवलपमेंट प्रोजेक्ट्स को तीन स्तरों में विभाजित किया गया है- बेसिक, इंटरमीडिएट, तथा उन्नति । हम परियोजनाओं के विभिन्न स्तरों और कोड कैसे काम करते हैं, इस पर चर्चा करेंगे।यह आपको वेब विकास की प्रक्रिया को बेहतर ढंग से समझने में मदद करेगा और आपको विभिन्न स्क्रिप्टिंग भाषाओं का उपयोग करके अपनी वेबसाइट बनाने का विचार प्रदान करेगा। तो, आइए बुनियादी स्तर के प्रोजेक्ट के साथ शुरुआत करें।

अनुकूल लेआऊट

फ्रंट एंड डेवलपर की एक प्रमुख भूमिका उत्तरदायी डिजाइन सिद्धांतों को समझना और उन्हें कोडिंग पक्ष पर कैसे लागू करना है।

इस परियोजना में, हम एक एकल उत्तरदायी पृष्ठ का मूल लेआउट बनाएंगे और यह बहुउद्देश्यीय वेबसाइटों के निर्माण के लिए वेब विकास में कैसे काम करता है। पहला कदम HTML लेआउट बनाना और वेब पेज के प्रमुख भाग को डिजाइन करना है।

{{बॉक्स-आकार: बॉर्डर-बॉक्स} .मेनू {फ्लोट: बाएं चौड़ाई: 20% पाठ-संरेखण: केंद्र} .मेनू ए {पृष्ठभूमि-रंग: # deeba6 पैडिंग: 8 पीएक्स मार्जिन-टॉप: 7 पीएक्स डिस्प्ले: ब्लॉक चौड़ाई: 100 % रंग: काला}। मेन {फ्लोट: बाईं चौड़ाई: 60% पैडिंग: 0 20px}। ठीक {बैकग्राउंड-कलर: # f0b569 फ्लोट: लेफ्ट चौड़ाई: 20% पेडिंग: 15 पीएक्स मार्जिन-टॉप: 7 पीएक्स टेक्स्ट-अलाइन: सेंटर}। @media केवल स्क्रीन और (अधिकतम-चौड़ाई: 620px) {/ * मोबाइल फोन के लिए: * / .menu, .main, .right {चौड़ाई: 100%}} पिछला प्रश्न अगला प्रश्न क्विज सबमिट करें

इसके बाद, हमें एक प्रश्नोत्तरी बनाने, परिणाम दिखाने और इसे एक साथ रखने के लिए एक तरीका चाहिए होगा। हम जावास्क्रिप्ट की मदद से अपने कार्यों को शुरू करके शुरू कर सकते हैं।

प्रश्नोत्तरी .js

(function () {const myQuestions = [{question: 'किस समुद्री जीव के तीन दिल होते हैं?', जवाब: {a: 'ऑक्टोपस', b: 'Blue Whale', c: 'Sea Turtle'}, correctnnswer: 'a '}, {प्रश्न:' पाई के लिए इतालवी शब्द क्या है? ', उत्तर: {a:' डोनट ', b:' पाई केक ', c:' पिज़्ज़ा '}, correctAnswer:' c '}, {question: 'कौन सा एकमात्र स्तनपायी है जो कूद नहीं सकता है?', उत्तर: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () (//) हमें प्रत्येक प्रश्न के लिए HTML आउटपुट कॉन्स्टेबल आउटपुट = [] // स्टोर करने के लिए एक जगह की आवश्यकता होगी ... myQuestions.forEach ((currentQuestion, questionNumber) => {// हम उत्तर विकल्पों की सूची को स्टोर करना चाहते हैं उत्तर = [] // और प्रत्येक उपलब्ध उत्तर के लिए ... (currentQuestion.answers में पत्र) {// ... एक HTML रेडियो बटन उत्तर जोड़ें। push (`$ {पत्र}: $ {currentQuestion.answers] पत्र ]} `)} // इस प्रश्न और इसके उत्तरों को आउटपुट आउटपुट में जोड़ें। पप (` $ {currentQuestion.question} $ {answer.join ('')} '))) // अंततः हमारे आउटपु को संयोजित करें HTML की एक स्ट्रिंग में टी सूची और इसे QuizContainer.innerHTML = output.join ('')} फ़ंक्शन showResults () {// हमारे क्विज कॉन्स्ट उत्तर उत्तरदाताओं से एकत्रित करें कंटेनरों = QuizContainer.querySelectorAll (')' 'उत्तर पर डालें। // उपयोगकर्ता के उत्तरों पर नज़र रखें। प्रत्येक प्रश्न के लिए numCorrect = 0 // दें ... myQuestions.forEach ((currentQuestion, questionNumber) => {// चयनित उत्तर कांस्टेबल उत्तर खोजें उत्तरदाता = उत्तरकंपनकर्ता / प्रश्नावली] कांस्टेबल चयनकर्ता = `लेबल इनपुट [ name = question $ {questionNumber}]: check` const userAnswer = (answerContainer.querySelector (चयनकर्ता) || {})। value const answerID = (answerContainer.querySelector (चयनकर्ता) || {})। id const selector1 = `लेबल [id = '$ {answerID}']` // उपयोगकर्ता के उत्तर का चयन करें varElem = answerContainer.querySelector ( selector1) const selector2 = `लेबल [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (चयनकर्ता 2) // यदि उत्तर सही है तो (userAnswer === currentQuestion.correcter)। // सही उत्तरों की संख्या को जोड़कर सुधारा गया // // हरे रंग का उत्तर दें //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900 '} बाकी {// यदि उत्तर हो तो गलत है या रिक्त है / रंग उत्तर लाल है। EEl1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900 '//console.log(answercontainers)}})}) // कुल परिणामों में से सही उत्तरों की संख्या दिखाएँ ।Container.innerHTML = `$ {numCorrect} को $ {myQuestions.length}`} फ़ंक्शन showSlide (n) {स्लाइड [currentSlide] .classList.remove (') ctive-slide ') स्लाइड्स [n] .classList.add (' सक्रिय-स्लाइड ') currentSlide = n if (currentSlide === 0) {पिछलेButton.style.display =' कोई नहीं '} अन्य {पिछलाButton.style.display = 'इनलाइन-ब्लॉक'} यदि (currentSlide === स्लाइड्स .length - 1) {nextButton.style.display = 'कोई नहीं' सबमिट करेंButton.style.display = 'इनलाइन-ब्लॉक'} बाकी 'nextButton.style.display = 'इनलाइन -ब्लॉक 'submitButton.style.display =' none '}} फ़ंक्शन showNextSlide () {showSlide (currentSlide + 1)} फ़ंक्शन showPrepretSlide () {showSlide (currentSlide - 1)} const QuizContainer = document.getElementById (क्विज़) resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // डिस्प्ले क्विज़ राइट बिल्ड बिल्डक्विज़ () const पिछलाबटन / दस्तावेज़ .getElementById ('पिछला') const nextButton = document.getElementByIdd ') const स्लाइड = document.querySelectorAll ('। स्लाइड ') currentSlide = 0 showSlide (0) // सबमिट करने दें, परिणाम सबमिट करें सबमिट करें। Button.addEventListener (' क्लिक करें ', showResult s) पिछलाButton.addEventListener ('क्लिक करें', showPrepretSlide) nextButton.addEventListener ('क्लिक करें, showNextSlide)}) ()

अंत में, हम इस गेम में विभिन्न शैलियों को जोड़ने के लिए CSS का उपयोग कर सकते हैं।

प्रश्नोत्तरी

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) बॉडी {फ़ॉन्ट-आकार: 30px फ़ॉन्ट-परिवार: 'वर्क सैंस', sans-serif color: rgb (24, 23) , 23) फ़ॉन्ट-वजन: 300 पाठ-संरेखण: केंद्र पृष्ठभूमि-रंग: # f8e8f2} h1 {फ़ॉन्ट-वजन: 300 मार्जिन: 0px गद्दी: 10px फ़ॉन्ट-आकार: 40px पृष्ठभूमि-रंग: आरजीबी (9, 107, 102) color: #fff} .question {Font-size: 40px मार्जिन-बॉटम: 10px} .answers {मार्जिन-बॉटम: 20px टेक्स्ट-अलाइन: लेफ्ट डिस्प्ले: इनलाइन-ब्लॉक} .answers लेबल {डिस्प्ले: ब्लॉक मार्जिन-बॉटम: 10px। } बटन {फ़ॉन्ट-परिवार: 'वर्क सैंस', sans-serif फॉन्ट-साइज़: 22px बैकग्राउंड-कलर: rgb (218, 167, 57) कलर: #fff बॉर्डर: 0px बॉर्डर-रेडियस: 3px पैडिंग: 20px कर्सर: पॉइंटर मार्जिन-बॉटम: 20px} बटन: होवर {बैकग्राउंड-कलर: # 38a}। स्लाइड {पोजीशन: एब्सोल्यूट लेफ्ट: 0px टॉप: 0px चौड़ाई: 100% z- इंडेक्स: 1 अपारदर्शिता: 0 संक्रमण: ओपेसिटी 0.5s}। एक्टिव- स्लाइड {अपारदर्शिता: 1 z- इंडेक्स: 2} .quiz- कंटेनर {स्थिति: सापेक्ष ऊंचाई: 200px मार्जिन-टॉप: 40}}

आउटपुट:

क्या रिश्ता है जावा में

ये कुछ वेब डेवलपमेंट प्रोजेक्ट्स थे। इसके साथ, हम इस लेख के अंत में आ गए हैं। मुझे उम्मीद है कि आपने परियोजनाओं के विभिन्न स्तरों को समझा और अपने स्वयं के वेब पेज का निर्माण करने और उन्हें अपनी आवश्यकताओं के अनुसार डिजाइन करने का विचार प्राप्त किया।

अब जब आप जावास्क्रिप्ट लूप के बारे में जानते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में सीखने में मदद करेगी।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'वेब डेवलपमेंट प्रोजेक्ट्स' की टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।