Veebiarendusprojektid: teadke, kuidas veebilehti luua ja kujundada



Veebiarendusprojektide kolm taset, mis aitavad teil veebikujundusprotsessi paremini mõista ja ka oma projekte koostada.

Vastavalt TechRepublic , veebiarendus on üks kümnest kõige kuumemast tehnoloogiaoskusest 2019. aastal.Prognoositakse, et veebiarendajate tööhõive kasvab aastatel 2016–2026 15 protsenti, palju kiiremini kui kõigi ametite keskmine. See on õige aeg oma oskuste täiendamiseks ja veebiarendaja karjääri alustamiseks. Selles artiklis käsitleme mõnda järgmistest Projektid, mis aitavad teil iseseisvalt rakendusi luua, järgmises järjestuses:

Karjäär veebiarenduses

Veebiarendaja on programmeerija, kes on spetsialiseerunud ülemaailmsete veebirakenduste väljatöötamisele, kasutades kliendi-serveri mudelit. Nad vastutavad ka veebisaitide kujundamise, kodeerimise ja muutmise eest alates paigutusest kuni funktsioneerimiseni ja vastavalt kliendi spetsifikatsioonidele.





veebiarenduskarjäär - veebiarendusprojektid - edureka

Leiate veebiarenduse alal koolitatud spetsialiste, kes töötavad arvutiprogrammeerijate, tarkvarainseneride ja isegi veebile keskendunud graafiliste disaineritena. Mõned peamised töörollid on:



  • Veebiarendaja - Veebiarendajad kasutavad saidi välimuse ja kasutajakogemuse kujundamiseks programmeerimis- ja tehnoloogiaoskusi. Keskmine palk on umbes Rs. 480,694.
  • Arvuti programmeerija - Programmeerijad arendavad ja kohandavad tarkvara õiget funktsiooni koodi kirjutamise ja testimise abil. Keskmine palgavahemik jääb vahemikku 232–1 miljonit.
  • Veebi disainer - Veebidisainerid töötavad saidi esiosas ning tegelevad välimuse ja kasutajakogemusega. India veebidisaineri keskmine palk on 281 410 Rs.
  • Graafiline veebidisainer - Graafiline disainer töötab kasutajakogemuse või rakenduse täiustamiseks, luues graafikat ja muud visuaalset meediat. Keskmine palk jääb vahemikku 118–619 tuhat krooni.

Nüüd, kui olete teadnud karjääri kasvust, heitkem pilk mõnele veebiarendusprojektile, mis aitab teil veebikujundusprotsessi paremini mõista ja ka oma projekte koostada.

mudeli vaate kontrolleri java näide

Veebiarenduse projektid

Veebiarendusprojektid on jagatud kolmele tasandile - Põhi-, kesktase, ja Ettemaks . Arutame projektide eri tasemeid ja koodi toimimist.See aitab teil veebiarenduse protsessi paremini mõista ja pakub teile idee luua oma veebisaidid, kasutades erinevaid skriptikeeli. Alustame siis algtaseme projektist.

Tundlik paigutus

Esiosa arendaja üks oluline roll on mõista reageerimisvõimelisi kujunduspõhimõtteid ja nende rakendamist kodeerimise poolel.



Selles projektis loome ühe tundliku lehe põhipaigutuse ja selle toimimise veebiarenduses mitmeotstarbeliste veebisaitide loomiseks. Esimene samm on HTML-paigutuse loomine ja veebilehe peaosa kujundamine.

* {box-sizing: border-box} .menüü {float: left width: 20% text-align: center} .menüü a {background-color: # deeba6 polster: 8px margin-top: 7px display: ploki laius: 100 % color: black} .main {float: left width: 60% polster: 0 20px} .right {background-color: # f0b569 float: left width: 20% polster: 15px margin-top: 7px text-align: center} Ainult @media ekraan ja (maksimaalne laius: 620 pikslit) {/ * Mobiiltelefonide puhul: * / .menüü, .main, .right {width: 100%}} Eelmine küsimus Järgmine küsimus Esita viktoriin

Järgmisena vajame viisi, kuidas viktoriini koostada, tulemusi näidata ja kõik kokku panna. Alustuseks võime oma funktsioonid JavaScripti abil paika panna.

quiz.js

(function () {const myQuestions = [{küsimus: 'Millisel mereelukal on kolm südant?', vastab: {a: 'Kaheksajalg', b: 'Sinivaal', c: 'Kilpkonn'}, õigeVastus: 'a '}, {küsimus: 'Mis on itaaliakeelne sõna pirukas?', vastab: {a: 'Donut', b: 'Pie cake', c: 'Pizza'}, correctAnswer:' c '}, {question: 'Mis on ainus imetaja, kes ei saa hüpata?', Vastab: {a: 'Madu', b: 'Elevant', c: 'Känguru',}, correctAnswer: 'b'}] funktsioon buildQuiz () {// meil on vaja kohta, kuhu salvestada iga küsimuse HTML-väljundi const väljund = [] // ... myQuestions.forEach ((currentQuestion, questionNumber) => {// tahame salvestada vastusevalikute loendi const vastused = [] // ja iga saadaoleva vastuse jaoks ... for (täht in currentQuestion.answers) {// ... lisage HTML-i raadionupp vastused.push (`$ {letter}: $ {currentQuestion.answers [kiri ]} `)} // lisage see küsimus ja selle vastused väljundile output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)})} // lõpuks ühendage meie outpu t loend ühte HTML-i stringi ja pange see lehele quizContainer.innerHTML = output.join ('')} function showResults () {// koguge vastuste konteinerid meie viktoriinist const answerContainers = quizContainer.querySelectorAll ('. vastused') // jälgige kasutaja vastuseid, las iga küsimuse korral on numCorrect = 0 // ... myQuestions.forEach ((currentQuestion, questionNumber) => {// otsib valitud vastuse const answerContainer = answerContainers [questionNumber] const selector = `sildi sisestus [ nimi = küsimus $ {questionNumber}]: kontrollitud `const userAnswer = (answerContainer.querySelector (valija) || {}). väärtus const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `silt [id = '$ {answerID}'] '// Valige kasutaja vastus var answerElem = answerContainer.querySelector ( selector1) const selector2 = `silt [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // kui vastus on õige, kui (userAnswer === currentQuestion.correctAnswer) { // lisage õigete vastuste arvule numCorrect ++ // värvige vastused roheliseks //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// kui vastus on vale või tühi // värvige vastused punasega answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // näita õigete vastuste arvu tulemuste koguarvustContainer.innerHTML = '$ {numCorrect} funktsioonist $ {myQuestions.length}'} showSlide (n) {slaidid [currentSlide] .classList.remove ('a ctive-slide ') slaidid [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slaidid. pikkus - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} funktsioon showNextSlide () {showSlide (currentSlide + 1)} funktsioon showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' viktoriin ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('esita') // kuvage viktoriin kohe buildQuiz () const previousButton = document.getElementById ('eelmine') const nextButton = document.getElementById (järgmine ') const slaidid = document.querySelectorAll ('. slide ') lasime currentSlide = 0 showSlide (0) // esitamisel esitage tulemused saatkeButton.addEventListener (' klõpsake ', showResult s) previousButton.addEventListener ('klõps', showPreviousSlide) nextButton.addEventListener ('klõps', showNextSlide)}) ()

Lõpuks saame CSS-i abil sellele mängule erinevaid stiile lisada.

viktoriin.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif värv: rgb (24, 23 , 23) font-weight: 300 text-align: center background-color: # f8e8f2} h1 {font-weight: 300 margin: 0px polster: 10px font-size: 40px background-color: rgb (9, 107, 102) värv: #fff} .question {font-size: 40px margin-bottom: 10px}. vastused {margin-bottom: 20px text-align: left display: inline-block} .vastusesilt {display: block margin-bottom: 10px } nupp {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px polsterdus: 20px kursor: osuti nupp veerist alla: 20px}: hõljutage kursorit {background-color: # 38a} .slide {position: absoluutne vasak: 0px top: 0px width: 100% z-index: 1 läbipaistmatus: 0 transfer: läbipaistmatus 0.5s} .aktiivne slide {läbipaistmatus: 1 z-indeks: 2} .quiz-container {asend: suhteline kõrgus: 200 pikslit-ülaosa: 40 pikslit}

Väljund:

Need olid mõned veebiarenduse projektid. sellega oleme jõudnud selle artikli lõppu. Loodan, et saite aru projektide erinevatest tasemetest ja said idee, kuidas oma veebileht üles ehitada ja need vastavalt oma vajadustele kujundada.

Nüüd, kui olete teadnud JavaScripti aasadest, vaadake autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida muljetavaldavate veebisaitide loomist HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutama selle Amazon Simple Storage Service'i (S3).

Kas teil on meile küsimus? Palun mainige seda jaotise „Veebiarendusprojektid” kommentaaride osas ja me võtame teiega ühendust.