Pēc TechRepublic , tīmekļa izstrāde ir viena no 10 karstākajām tehnoloģiju prasmēm 2019. gadā.Tiek prognozēts, ka tīmekļa izstrādātāju nodarbinātība no 2016. līdz 2026. gadam pieaugs par 15 procentiem, daudz ātrāk nekā vidēji visās profesijās. Šis ir īstais laiks, lai uzlabotu savas prasmes un sāktu savu tīmekļa izstrādātāja karjeru. Šajā rakstā mēs apspriedīsim dažus no Projekti, kas palīdzēs jums patstāvīgi veidot lietojumprogrammas šādā secībā:
Karjera tīmekļa izstrādē
Tīmekļa izstrādātājs ir programmētājs, kas specializējas pasaules tīmekļa lietojumprogrammu izstrādē, izmantojot klienta-servera modeli. Viņi ir atbildīgi arī par vietņu projektēšanu, kodēšanu un pārveidošanu, sākot no izkārtojuma līdz funkcijai un atbilstoši klienta specifikācijām.
Jūs varat atrast profesionāļus, kas apmācīti tīmekļa izstrādē, kuri strādā kā datorprogrammētāji, programmatūras inženieri un pat uz tīmekli orientēti grafiskie dizaineri. Dažas no galvenajām darba lomām ir:
- Web izstrādātājs - Tīmekļa izstrādātāji izmanto programmēšanas un tehnoloģiju prasmes, lai izveidotu vietnes izskatu un lietotāja pieredzi. Vidējā alga ir aptuveni Rs. 480,694.
- Datorprogrammētājs - Datorprogrammētāji izstrādā un pielāgo programmatūras pareizu darbību, rakstot un pārbaudot kodu. Vidējais algu diapazons ir no 232k līdz 1m.
- Mājas lapu dizaineris - Tīmekļa dizaineri strādā vietnes priekšpusē un rūpējas par ārējo izskatu un lietotāja pieredzi. Vidējā Web dizainera alga Indijā ir 281 410 Rs.
- Grafiskais tīmekļa dizainers - Grafiskais dizainers strādā, lai uzlabotu lietotāja pieredzi vai lietojumprogrammu, izveidojot grafiku un citus vizuālos nesējus. Vidējā alga svārstās no 118k līdz 619k.
Tagad, kad jūs zināt par karjeras izaugsmi, apskatīsim dažus tīmekļa izstrādes projektus, kas palīdzēs labāk izprast tīmekļa izstrādes procesu un arī veidot savus projektus.
Tīmekļa attīstības projekti
Tīmekļa attīstības projekti ir sadalīti trīs līmeņos - Pamata, vidēja, un Iepriekš . Mēs apspriedīsim dažādos projektu līmeņus un to, kā kods darbojas.Tas palīdzēs labāk izprast tīmekļa izstrādes procesu un radīs ideju izveidot savas vietnes, izmantojot dažādas skriptu valodas. Tātad, sāksim ar pamata līmeņa projektu.
Java programmas struktūra
Atsaucīgs izkārtojums
Viena no galvenajām izstrādātāja funkcijām ir izprast atsaucīgus dizaina principus un to, kā tos ieviest kodēšanas pusē.
Šajā projektā mēs izveidosim vienas atsaucīgas lapas pamata izkārtojumu un to, kā tas darbojas tīmekļa izstrādē, lai izveidotu daudzfunkcionālas vietnes. Pirmais solis ir izveidot HTML izkārtojumu un noformēt tīmekļa lapas galveno daļu.
* {box-sizing: border-box} .menu {pludiņš: kreisais platums: 20% text-align: center}. izvēlne {background-color: # deeba6 polsterējums: 8px margin-top: 7px display: bloka platums: 100 % color: black} .main {float: left width: 60% polsterējums: 0 20px} .right {background-color: # f0b569 float: left left: 20% polsterējums: 15px margin-top: 7px text-align: center} Tikai @media ekrāns un (maks. platums: 620 pikseļi) {/ * Mobilajiem tālruņiem: * / .menu, .main, .right {width: 100%}} Iepriekšējais jautājums Nākamais jautājums Iesniegt viktorīnuTālāk mums būs nepieciešams veids, kā izveidot viktorīnu, parādīt rezultātus un salikt to visu kopā. Mēs varam sākt ar savu funkciju izklāstu ar JavaScript palīdzību.
quiz.js
(function () {const myQuestions = [{jautājums: 'Kurai jūras radībai ir trīs sirdis?', atbildes: {a: 'Astoņkājis', b: 'Zilais valis', c: 'Jūras bruņurupucis'}, pareizsAtbilde: 'a '}, {jautājums:' Kas itāļu valodā apzīmē pīrāgu? ', atbild: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, helyesAtbilde:' c '}, {jautājums: 'Kurš ir vienīgais zīdītājs, kurš nevar lēkt?', Atbild: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// mums būs nepieciešama vieta, kur glabāt HTML izvadi const output = [] // katram jautājumam ... myQuestions.forEach ((currentQuestion, questionNumber) => {// mēs vēlamies saglabāt atbilžu izvēles sarakstu const atbildes = [] // un par katru pieejamo atbildi ... par (burts pašreizējāQuestion.answers) {// ... pievienojiet HTML radio pogu atbildes.push (`$ {letter}: $ {currentQuestion.answers [vēstule ]} `)} // pievienojiet šo jautājumu un tā atbildes izejai output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)})} // beidzot apvienojiet mūsu outpu t saraksts vienā HTML virknē un ievietojiet to lapā quizContainer.innerHTML = output.join ('')} funkcija showResults () {// apkopojiet atbilžu konteinerus no mūsu viktorīnas const answerContainers = quizContainer.querySelectorAll ('. atbildes') // sekojiet lietotāja atbildēm, ļaujiet katram jautājumam numCorrect = 0 // ... myQuestions.forEach ((currentQuestion, questionNumber) => {// atrodiet atlasīto atbildi const answerContainer = answerContainers [questionNumber] const selector = `etiķetes ievade [ nosaukums = jautājums $ {questionNumber}]: pārbaudīts `const userAnswer = (answerContainer.querySelector (selektors) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}'] '// // Atlasiet lietotāja atbildi var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // ja atbilde ir pareiza, ja (userAnswer === currentQuestion.correctAnswer) { // pievienot pareizo atbilžu skaitam numCorrect ++ // iekrāsot atbildes zaļā krāsā //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// ja atbilde ir nepareizs vai tukšs // iekrāsojiet atbildes sarkanā krāsā answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // rādīt pareizo atbilžu skaitu no kopējiem rezultātiemContainer.innerHTML = '$ {numCorrect} no funkcijas $ {myQuestions.length}'} showSlide (n) {slaidi [currentSlide] .classList.remove ('a ctive-slide ') slaidi [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slaidi.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'iekļauts -block 'submitButton.style.display =' none '}} funkcija showNextSlide () {showSlide (currentSlide + 1)} funkcija showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // uzreiz parādiet viktorīnu buildQuiz () const previousButton = document.getElementById ('iepriekšējā') const nextButton = document.getElementById ('next ') const slaidi = document.querySelectorAll ('. slide ') ļaujiet currentSlide = 0 showSlide (0) // iesniedzot, parādot rezultātus s) previousButton.addEventListener (klikšķis, showPreviousSlide) nextButton.addEventListener (klikšķis, showNextSlide)}) ()Visbeidzot, mēs varam izmantot CSS, lai šai spēlei pievienotu dažādus stilus.
viktorīna.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif krāsa: rgb (24, 23 , 23) font-weight: 300 text-align: center background-color: # f8e8f2} h1 {font-weight: 300 margin: 0px polsterējums: 10px font-size: 40px background-color: rgb (9, 107, 102) krāsa: #fff} .question {font-size: 40px margin-bottom: 10px} .atbildes {margin-bottom: 20px text-align: left display: inline-block} .atbildes etiķete {display: block margin-bottom: 10px } poga {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-rādiuss: 3px polsterējums: 20px kursors: pointer margin-bottom: 20px} poga: virziet kursoru {background-color: # 38a} .slide {position: absolūti pa kreisi: 0px top: 0px width: 100% z-index: 1 necaurredzamība: 0 pāreja: necaurredzamība 0.5s} .active- slide {necaurredzamība: 1 z-indekss: 2} .quiz-container {pozīcija: relatīvais augstums: 200px margin-top: 40px}Izeja:
Šie bija daži no tīmekļa izstrādes projektiem. ar to mēs esam nonākuši šī raksta beigās. Es ceru, ka jūs sapratāt dažādos projektu līmeņus un radāt ideju par to, kā izveidot savu tīmekļa lapu un noformēt tās atbilstoši savām vajadzībām.
Tagad, kad jūs zināt par JavaScript cilpām, pārbaudiet autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).
Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā “Web izstrādes projekti”, un mēs ar jums sazināsimies.