వెబ్ అభివృద్ధి ప్రాజెక్టులు: వెబ్ పేజీలను ఎలా నిర్మించాలో తెలుసుకోండి

ప్రకారం టెక్ రిపబ్లిక్ , వెబ్ అభివృద్ధి 2019 లో 10 హాటెస్ట్ టెక్ నైపుణ్యాలలో ఒకటి.వెబ్ డెవలపర్‌ల ఉపాధి 2016 నుండి 2026 వరకు 15 శాతం పెరుగుతుందని అంచనా, ఇది అన్ని వృత్తుల సగటు కంటే చాలా వేగంగా ఉంటుంది. మీ నైపుణ్యాలను మెరుగుపరచడానికి మరియు మీ వెబ్ డెవలపర్ వృత్తిని ప్రారంభించడానికి ఇది సరైన సమయం. ఈ వ్యాసంలో, మేము కొన్నింటిని చర్చిస్తాము కింది క్రమంలో మీ స్వంతంగా అనువర్తనాలను రూపొందించడంలో మీకు సహాయపడే ప్రాజెక్టులు:

• వెబ్ అభివృద్ధిలో వృత్తి
• వెబ్ అభివృద్ధి ప్రాజెక్టులు
  • ప్రతిస్పందించే లేఅవుట్
  • డైనమిక్ వెబ్‌పేజీ
  • క్విజ్ గేమ్

వెబ్ అభివృద్ధిలో వృత్తి

వెబ్ డెవలపర్ అనేది క్లయింట్-సర్వర్ మోడల్‌ను ఉపయోగించి వరల్డ్ వైడ్ వెబ్ అనువర్తనాల అభివృద్ధిలో ప్రత్యేకత కలిగిన ప్రోగ్రామర్. వెబ్‌సైట్ రూపకల్పన, కోడింగ్ మరియు సవరించడం, లేఅవుట్ నుండి ఫంక్షన్ వరకు మరియు క్లయింట్ యొక్క స్పెసిఫికేషన్ల ప్రకారం కూడా వారు బాధ్యత వహిస్తారు.

కంప్యూటర్ ప్రోగ్రామర్లు, సాఫ్ట్‌వేర్ ఇంజనీర్లు మరియు వెబ్-ఫోకస్డ్ గ్రాఫిక్ డిజైనర్లుగా పనిచేసే వెబ్ అభివృద్ధిలో శిక్షణ పొందిన నిపుణులను మీరు కనుగొనవచ్చు. కొన్ని ముఖ్యమైన ఉద్యోగ పాత్రలు:

• అంతర్జాల వృద్ధికారుడు - వెబ్ డెవలపర్లు సైట్ యొక్క రూపాన్ని మరియు వినియోగదారు అనుభవాన్ని నిర్మించడానికి ప్రోగ్రామింగ్ మరియు టెక్నాలజీ నైపుణ్యాలను ఉపయోగిస్తారు. సగటు జీతం సుమారు రూ. 480,694.
• కంప్యూటర్ ప్రోగ్రామర్ - కంప్యూటర్ ప్రోగ్రామర్లు కోడ్ రాయడం మరియు పరీక్షించడం ద్వారా సాఫ్ట్‌వేర్ యొక్క సరైన పనితీరును అభివృద్ధి చేస్తారు మరియు సర్దుబాటు చేస్తారు. సగటు జీతం పరిధి 232 కే నుండి రూ .1 మి మధ్య ఉంటుంది.
• వెబ్ డిజైనర్ - వెబ్ డిజైనర్లు సైట్ యొక్క ఫ్రంట్ ఎండ్‌లో పనిచేస్తారు మరియు బాహ్య రూపాన్ని మరియు వినియోగదారు అనుభవంతో సంబంధం కలిగి ఉంటారు. భారతదేశంలో వెబ్ డిజైనర్‌కు సగటు జీతం 281,410 రూపాయలు.
• గ్రాఫిక్ వెబ్ డిజైనర్ - గ్రాఫిక్స్ మరియు ఇతర దృశ్య మాధ్యమాలను సృష్టించడం ద్వారా వినియోగదారు అనుభవాన్ని లేదా అనువర్తనాన్ని మెరుగుపరచడానికి గ్రాఫిక్ డిజైనర్ పనిచేస్తుంది. సగటు జీతం రూ .118 కే నుంచి రూ .619 కే.

కెరీర్ వృద్ధి గురించి ఇప్పుడు మీకు తెలుసు, వెబ్ డిజైనింగ్ విధానాన్ని బాగా అర్థం చేసుకోవడానికి మరియు మీ స్వంత ప్రాజెక్టులను నిర్మించడంలో మీకు సహాయపడే కొన్ని వెబ్ డెవలప్‌మెంట్ ప్రాజెక్ట్‌లను చూద్దాం.

వెబ్ అభివృద్ధి ప్రాజెక్టులు

వెబ్ అభివృద్ధి ప్రాజెక్టులు మూడు స్థాయిలుగా విభజించబడ్డాయి- బేసిక్, ఇంటర్మీడియట్, మరియు అడ్వాన్స్ . మేము వివిధ స్థాయిల ప్రాజెక్టులను మరియు కోడ్ ఎలా పనిచేస్తుందో చర్చిస్తాము.ఇది వెబ్ అభివృద్ధి ప్రక్రియను బాగా అర్థం చేసుకోవడంలో మీకు సహాయపడుతుంది మరియు విభిన్న స్క్రిప్టింగ్ భాషలను ఉపయోగించి మీ స్వంత వెబ్‌సైట్‌లను నిర్మించాలనే ఆలోచనను మీకు అందిస్తుంది. కాబట్టి, ప్రాథమిక స్థాయి ప్రాజెక్ట్‌తో ప్రారంభిద్దాం.

ప్రతిస్పందించే లేఅవుట్

ఫ్రంట్ ఎండ్ డెవలపర్ యొక్క ఒక ప్రధాన పాత్ర ప్రతిస్పందించే డిజైన్ సూత్రాలను అర్థం చేసుకోవడం మరియు వాటిని కోడింగ్ వైపు ఎలా అమలు చేయాలి.

ఈ ప్రాజెక్ట్‌లో, మేము ఒకే ప్రతిస్పందించే పేజీ యొక్క ప్రాథమిక లేఅవుట్ను సృష్టిస్తాము మరియు బహుళ ప్రయోజన వెబ్‌సైట్‌లను రూపొందించడానికి వెబ్ అభివృద్ధిలో ఇది ఎలా పనిచేస్తుంది. మొదటి దశ HTML లేఅవుట్ను సృష్టించడం మరియు వెబ్ పేజీ యొక్క ముఖ్య భాగాన్ని రూపొందించడం.

* {బాక్స్-సైజింగ్: బోర్డర్-బాక్స్} .మెను {ఫ్లోట్: ఎడమ వెడల్పు: 20% టెక్స్ట్-అలైన్: సెంటర్} .మెను ఎ {బ్యాక్ గ్రౌండ్-కలర్: # డీబా 6 పాడింగ్: 8 పిక్స్ మార్జిన్-టాప్: 7 పిక్స్ డిస్ప్లే: బ్లాక్ వెడల్పు: 100 % రంగు: నలుపు} .మెయిన్ {ఫ్లోట్: ఎడమ వెడల్పు: 60% పాడింగ్: 0 20 పిక్స్} .రైట్ {నేపథ్య-రంగు: # f0b569 ఫ్లోట్: ఎడమ వెడల్పు: 20% పాడింగ్: 15 పిక్స్ మార్జిన్-టాప్: 7 పిక్స్ టెక్స్ట్-అలైన్: సెంటర్} @ మీడియా మాత్రమే స్క్రీన్ మరియు (గరిష్ట-వెడల్పు: 620px) {/ * మొబైల్ ఫోన్‌ల కోసం: * / .మెను, .మెయిన్, .రైట్ {వెడల్పు: 100%}} మునుపటి ప్రశ్న తదుపరి ప్రశ్న క్విజ్ సమర్పించండి

తరువాత, క్విజ్ నిర్మించడానికి, ఫలితాలను చూపించడానికి మరియు అన్నింటినీ కలిపి ఉంచడానికి మాకు ఒక మార్గం అవసరం. జావాస్క్రిప్ట్ సహాయంతో మన ఫంక్షన్లను వేయడం ద్వారా ప్రారంభించవచ్చు.

quiz.js

జావాలో తేదీ వరకు స్ట్రింగ్

(ఫంక్షన్ () {const myQuestions = [{ప్రశ్న: 'ఏ సముద్ర జీవికి మూడు హృదయాలు ఉన్నాయి?', సమాధానాలు: {a: 'ఆక్టోపస్', బి: 'బ్లూ వేల్', సి: 'సీ తాబేలు' correct, సరియైన జవాబు: 'a '}, {ప్రశ్న:' పై అనే ఇటాలియన్ పదం ఏమిటి? ', సమాధానాలు: {a:' డోనట్ ', బి:' పై కేక్ ', సి:' పిజ్జా 'correct, సరియైన జవాబు:' సి '}, {ప్రశ్న: 'దూకలేని ఏకైక క్షీరదం ఏది?', సమాధానాలు: {a: 'స్నేక్', బి: 'ఏనుగు', సి: 'కంగారూ',}, సరియైన జవాబు: 'బి' function] ఫంక్షన్ బిల్డ్ క్విజ్ () {// ప్రతి ప్రశ్నకు HTML అవుట్పుట్ const output = [] // ని నిల్వ చేయడానికి మాకు ఒక స్థలం అవసరం ... myQuestions.forEach ((currentQuestion, questionNumber) => {// మేము జవాబు ఎంపికల జాబితాను నిల్వ చేయాలనుకుంటున్నాము సమాధానాలు = [] // మరియు అందుబాటులో ఉన్న ప్రతి జవాబు కోసం ... కోసం (ప్రస్తుత ప్రశ్న.వాన్స్‌లో అక్షరం) {// ... ఒక HTML రేడియో బటన్ జవాబులను జోడించండి. పుష్ (`$ {అక్షరం}: {{currentQuestion.answers [లేఖ ]} `)} // ఈ ప్రశ్నను మరియు దాని సమాధానాలను అవుట్‌పుట్ అవుట్‌పుట్‌కు జోడించండి. పుష్ (` $ {currentQuestion.question} $ {answer.join ('')} `) //) // చివరకు మా అవుట్‌పును కలపండి HTML యొక్క ఒక స్ట్రింగ్‌లోకి జాబితా చేసి, క్విజ్కాంటైనర్.ఇన్నర్ HTML = output ట్‌పుట్.జాయిన్ ('')} ఫంక్షన్ షో రిసల్ట్స్ () {// మా క్విజ్ నుండి జవాబు కంటైనర్‌లను సేకరించండి. // యూజర్ యొక్క సమాధానాలను ట్రాక్ చేయండి ప్రతి ప్రశ్నకు numCorrect = 0 // ... myQuestions.forEach ((currentQuestion, questionNumber) => {// ఎంచుకున్న జవాబును కనుగొనండి const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: తనిఖీ చేసిన` const userAnswer = (answerContainer.querySelector (సెలెక్టర్) || {}). విలువ const answerID = (answerContainer.querySelector (సెలెక్టర్) || {}). id const selector1 = `లేబుల్ [id = '$ {answerID}']` // యూజర్ యొక్క జవాబును ఎంచుకోండి var answerElem = answerContainer.querySelector ( selector1) const selector2 = `లేబుల్ [id = '{{questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (సెలెక్టర్ 2) // సమాధానం సరైనది అయితే (userAnswer === currentQuestion.correctAnswer) { // సరైన సమాధానాల సంఖ్యకు జోడించండి numCorrect ++ // సమాధానాలను ఆకుపచ్చగా మార్చండి //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// సమాధానం ఉంటే తప్పు లేదా ఖాళీ // రంగులకు సమాధానాలు ఎరుపు సమాధానం ఎలిమ్ 1.స్టైల్.కలర్ = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // మొత్తం ఫలితాల నుండి సరైన సమాధానాల సంఖ్యను చూపించుContainer.innerHTML = `Q {myQuestions.length}`} ఫంక్షన్ షోస్లైడ్ (n) {స్లైడ్‌లు [currentSlide] .classList.remove ('a ctive-slide ') స్లైడ్‌లు [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'ఇన్లైన్-బ్లాక్'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'ఇన్లైన్-బ్లాక్'} else {nextButton.style.display = 'ఇన్లైన్ -block 'submitButton.style.display =' none '}} ఫంక్షన్ showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // డిస్ప్లే క్విజ్ వెంటనే బిల్డ్ క్విజ్ () const previousButton = document.getElementById ('మునుపటి') const nextButton = document.getElementById ('తదుపరి ') const slides = document.querySelectorAll ('. slide ') ప్రస్తుత స్లైడ్ = 0 షోస్లైడ్ (0) // ను సమర్పించటానికి అనుమతించండి, ఫలితాలను చూపించు submitButton.addEventListener (' క్లిక్ ', showResult s) previousButton.addEventListener ('క్లిక్', showPreviousSlide) nextButton.addEventListener ('క్లిక్', showNextSlide)}) ()

చివరగా, ఈ ఆటకు విభిన్న శైలులను జోడించడానికి మేము CSS ను ఉపయోగించవచ్చు.

quiz.css

@ దిగుమతి url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) శరీరం {font-size: 30px font-family: 'Work Sans', sans-serif color: rgb (24, 23 , 23) ఫాంట్-బరువు: 300 టెక్స్ట్-అలైన్: సెంటర్ బ్యాక్ గ్రౌండ్-కలర్: # f8e8f2} h1 {font-weight: 300 margin: 0px padding: 10px font-size: 40px background-color: rgb (9, 107, 102) color: #fff}. ప్రశ్న {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } button {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: పాయింటర్ మార్జిన్-బాటమ్: 20 పిక్స్} బటన్: హోవర్ {బ్యాక్ గ్రౌండ్-కలర్: # 38 ఎ} .స్లైడ్ {స్థానం: సంపూర్ణ ఎడమ: 0 పిక్స్ టాప్: 0 పిక్స్ వెడల్పు: 100% z- ఇండెక్స్: 1 అస్పష్టత: 0 పరివర్తన: అస్పష్టత 0.5 సె} .ఆక్టివ్- స్లైడ్ {అస్పష్టత: 1 z- సూచిక: 2} .క్విజ్-కంటైనర్ {స్థానం: సాపేక్ష ఎత్తు: 200px మార్జిన్-టాప్: 40px}

అవుట్పుట్:

ఇవి కొన్ని వెబ్ అభివృద్ధి ప్రాజెక్టులు. దీనితో, మేము ఈ వ్యాసం చివరికి వచ్చాము. మీరు వివిధ స్థాయిల ప్రాజెక్టులను అర్థం చేసుకున్నారని మరియు మీ స్వంత వెబ్ పేజీని ఎలా నిర్మించాలో మరియు మీ అవసరాలకు అనుగుణంగా వాటిని ఎలా రూపొందించాలో ఆలోచన వచ్చిందని నేను ఆశిస్తున్నాను.

జావాస్క్రిప్ట్ లూప్‌ల గురించి ఇప్పుడు మీకు తెలుసు, చూడండి ఎడురేకా చేత. HTML5, CSS3, Twitter బూట్స్ట్రాప్ 3, j క్వెరీ మరియు గూగుల్ API లను ఉపయోగించి ఆకట్టుకునే వెబ్‌సైట్‌లను ఎలా సృష్టించాలో తెలుసుకోవడానికి మరియు దానిని అమెజాన్ సింపుల్ స్టోరేజ్ సర్వీస్ (S3) కు అమర్చడానికి వెబ్ డెవలప్‌మెంట్ సర్టిఫికేషన్ శిక్షణ మీకు సహాయం చేస్తుంది.

మాకు ప్రశ్న ఉందా? దయచేసి దీనిని “వెబ్ డెవలప్‌మెంట్ ప్రాజెక్ట్స్” యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.