Mukaan TechRepublic , verkkokehitys on yksi vuoden 10 kuumimmista teknologiataidoista.Verkkokehittäjien työllisyyden ennustetaan kasvavan 15 prosenttia vuodesta 2016 vuoteen 2026, paljon nopeammin kuin kaikkien ammattien keskiarvo. Tämä on oikea aika parantaa taitojasi ja aloittaa web-kehittäjän ura. Tässä artikkelissa käsitellään joitain Projektit, jotka auttavat sinua rakentamaan sovelluksia itse seuraavassa järjestyksessä:
Ura verkkokehityksessä
Verkkokehittäjä on ohjelmoija, joka on erikoistunut World Wide Web -sovellusten kehittämiseen asiakas-palvelin-mallin avulla. He vastaavat myös verkkosivustojen suunnittelusta, koodaamisesta ja muokkaamisesta ulkoasusta toimintaan ja asiakkaan toiveiden mukaisesti.
Löydät web-kehitykseen koulutettuja ammattilaisia, jotka työskentelevät tietokoneohjelmoijina, ohjelmistoinsinööreinä ja jopa verkkokeskeisinä graafisina suunnittelijoina. Jotkut keskeisistä työrooleista ovat:
- Web-kehittäjä - Verkkokehittäjät käyttävät ohjelmointi- ja teknologiataitoja rakentamaan sivuston ulkonäön ja käyttökokemuksen. Keskimääräinen palkka on noin Rs. 480,694.
- Tietokoneohjelmoija - Tietokoneohjelmoijat kehittävät ja säätävät ohjelmiston oikean toiminnan kirjoittamalla ja testaamalla koodia. Keskimääräinen palkkaväli on välillä 232k - 1m.
- Nettisivujen suunnittelija - Verkkosuunnittelijat työskentelevät sivuston etupäässä ja ovat kiinnostuneita ulkonäöstä ja käyttökokemuksesta. Intian web-suunnittelijan keskipalkka on 281 410 rs.
- Graafinen verkkosuunnittelija - Graafinen suunnittelija pyrkii parantamaan käyttökokemusta tai sovellusta luomalla grafiikkaa ja muuta visuaalista mediaa. Keskimääräinen palkka vaihtelee 118k: sta 619k: iin.
Nyt kun tiedät urakehityksestä, katsotaanpa joitain verkkokehitysprojekteja, jotka auttavat sinua ymmärtämään paremmin verkkosuunnitteluprosessia ja rakentamaan myös omia projektejasi.
java luo joukko esineitä
Verkkokehitysprojektit
Web-kehityshankkeet on jaettu kolmeen tasoon - Perustaso, keskitaso, ja Ennakko . Keskustelemme projektien eri tasoista ja kuinka koodi toimii.Tämä auttaa sinua ymmärtämään paremmin verkkokehityksen prosessia ja tarjoamaan sinulle ajatuksen rakentaa omia verkkosivustojasi eri komentosarjakielillä. Aloitetaan siis perustason projektista.
Reagoiva asettelu
Yksi käyttöliittymäkehittäjän merkittävä rooli on ymmärtää reagoivat suunnitteluperiaatteet ja miten ne toteutetaan koodauspuolella.
Tässä projektissa luomme yhden reagoivan sivun perusasettelun ja miten se toimii web-kehityksessä monikäyttöisten verkkosivustojen rakentamiseen. Ensimmäinen vaihe on luoda HTML-asettelu ja suunnitella verkkosivun pääosa.
* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .valikko a {background-color: # deeba6-täyte: 8px margin-top: 7px display: lohkon leveys: 100 % color: black} .main {float: left width: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} Vain @media-näyttö ja (enimmäisleveys: 620px) {/ * matkapuhelimille: * / .menu, .main, .right {width: 100%}} Edellinen kysymys Seuraava kysymys Lähetä kyselySeuraavaksi tarvitsemme tapaa rakentaa tietokilpailu, näyttää tuloksia ja koota kaikki yhteen. Aloitamme asettamalla toiminnot JavaScriptin avulla.
quiz.js
(function () {const myQuestions = [{kysymys: 'Millä merieläimellä on kolme sydäntä?', Vastaa: {a: 'Mustekala', b: 'Sinivalas', c: 'Kilpikonna'}, correctVastaa: 'a '}, {kysymys:' Mikä on italiankielinen sana piirakka? ', vastaa: {a:' Donitsi ', b:' Piirakakku ', c:' Pizza '}, correctAtswer:' c '}, {kysymys: 'Mikä on ainoa nisäkäs, joka ei osaa hypätä?', Vastaa: {a: 'Snake', b: 'Elephant', c: 'Kenguru',}, correctAnswer: 'b'}] function buildQuiz () {// tarvitsemme paikan HTML-lähdön const output = [] // tallentamiseksi jokaiselle kysymykselle ... myQuestions.forEach ((currentQuestion, questionNumber) => {// haluamme tallentaa luettelon vastausvaihtoehdoista const Answers = [] // ja jokaiselle käytettävissä olevalle vastaukselle ... varten (kirjain currentQuestion.answers) {// ... lisää HTML-valintanappi Answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // lisää tämä kysymys ja sen vastaukset ulostuloon output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)})} // yhdistää lopuksi outpu t-luettelo yhdeksi HTML-merkkijonoksi ja laita se sivulle quizContainer.innerHTML = output.join ('')} function showResults () {// kerää vastaussäilöt tietokilpailustamme const answerContainers = quizContainer.querySelectorAll ('. vastaukset') // seuraa käyttäjän vastauksia anna numCorrect = 0 // jokaiselle kysymykselle ... myQuestions.forEach ((currentQuestion, questionNumber) => {// etsi valittu vastaus const answerContainer = answerContainers [kysymysnumero] const selector = `tunniste input [ nimi = kysymys $ {questionNumber}]: tarkistettu `const userAnswer = (answerContainer.querySelector (valitsin) || {}). arvo const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Valitse käyttäjän vastaus var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // jos vastaus on oikea, jos (userAnswer === currentQuestion.correctAnswer) { // lisää oikeiden vastausten määrään numCorrect ++ // väritä vastaukset vihreiksi //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// jos vastaus on väärä tai tyhjä // väritä vastaukset punaiseksi answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // näytä oikeiden vastausten määrä kaikista tuloksistaContainer.innerHTML = `$ $ numCorrect} funktiosta $ {myQuestions.length}`} showSlide (n) {diat [currentSlide] .classList.remove ('a ctive-slide ') diat [n] .classList.add (' aktiivinen dia ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === diat.length - 1) {nextButton.style.display = 'none' submButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} funktio showNextSlide () {showSlide (currentSlide + 1)} funktio showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' tietokilpailu ') const resultsContainer = document.getElementById ('tulokset') const submButton = document.getElementById ('lähetä') // näytä tietokilpailu heti buildQuiz () const previousButton = document.getElementById ('edellinen') const nextButton = document.getElementById ('seuraava ') const diat = document.querySelectorAll ('. slide ') anna currentSlide = 0 showSlide (0) // lähettäessä, näytä tulokset submButton.addEventListener (' napsauta ', showResult s) previousButton.addEventListener (napsauta, showPreviousSlide) nextButton.addEventListener (napsauta, showNextSlide)}) ()Lopuksi voimme CSS: n avulla lisätä erilaisia tyylejä tähän peliin.
quiz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif väri: rgb (24, 23 , 23) font-weight: 300 text-align: center background-color: # f8e8f2} h1 {font-weight: 300 margin: 0px padding: 10px font-size: 40px background-color: rgb (9, 107, 102) väri: #fff} .question {font-size: 40px margin-bottom: 10px} .vastaa {margin-bottom: 20px text-align: vasen näyttö: inline-block} .vastaustunniste {display: block margin-bottom: 10px } painike {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-säde: 3px täyte: 20px kohdistin: osoitin marginaali-ala: 20px} -painike: vie hiiri {background-color: # 38a} .slide {position: absoluuttinen vasen: 0px top: 0px width: 100% z-index: 1 opasiteetti: 0 transfer: opasiteetti 0.5s} .active- dia {peittävyys: 1 z-indeksi: 2} .quiz-container {sijainti: suhteellinen korkeus: 200 kuvapistettä marginaali: 40 kuvapistettä}Tuotos:
Nämä olivat joitain verkkokehitysprojekteista. tämän kanssa olemme päässeet tämän artikkelin loppuun. Toivon, että ymmärsit hankkeiden eri tasot ja sait idean kuinka rakentaa oma verkkosivusi ja suunnitella ne tarpeidesi mukaan.
dataohjattu kehys seleenissä
Nyt kun tiedät JavaScript-silmukoista, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Onko sinulla kysymys meille? Mainitse se 'Web-kehitysprojektien' kommenttiosassa, niin palaamme sinuun.