I følge TechRepublic , webutvikling er en av de 10 hotteste teknologiske ferdighetene i 2019.Anslag for webutviklere forventes å vokse med 15 prosent fra 2016 til 2026, mye raskere enn gjennomsnittet for alle yrker. Dette er det rette tidspunktet for å forbedre dine ferdigheter og starte din webutviklerkarriere. I denne artikkelen vil vi diskutere noen av Prosjekter som vil hjelpe deg med å lage applikasjoner på egen hånd i følgende rekkefølge:
Karriere innen nettutvikling
En webutvikler er en programmerer som spesialiserer seg i utvikling av World Wide Web-applikasjoner ved bruk av en klientservermodell. De er også ansvarlige for å designe, kode og modifisere nettsteder, fra layout til funksjon og i henhold til kundens spesifikasjoner.
Du kan finne fagfolk som er opplært i nettutvikling som jobber som dataprogrammerere, programvareingeniører og til og med nettfokuserte grafiske designere. Noen av de viktigste jobbrollene er:
- Webutvikler - Webutviklere bruker programmerings- og teknologiferdigheter for å konstruere utseendet og brukeropplevelsen til et nettsted. Gjennomsnittlig lønn er rundt Rs. 480,694.
- Dataprogrammerer - Dataprogrammerere utvikler og justerer riktig funksjon av programvare ved å skrive og teste kode. Det gjennomsnittlige lønnsområdet er mellom Rs 232k og Rs 1m.
- Webdesigner - Webdesignere jobber på forsiden av et nettsted og er opptatt av ytre utseende og brukeropplevelse. Gjennomsnittlig lønn for en webdesigner i India er Rs 281 410.
- Grafisk webdesigner - En grafisk designer jobber for å forbedre brukeropplevelsen eller applikasjonen ved å lage grafikk og andre visuelle medier. Gjennomsnittlig lønn varierer fra Rs 118k til Rs 619k.
Nå som du vet om karrierevekst, la oss ta en titt på noen av webutviklingsprosjektene som vil hjelpe deg å forstå prosessen med webdesign bedre og også bygge dine egne prosjekter.
Webutviklingsprosjekter
Webutviklingsprosjektene er delt inn i tre nivåer- Grunnleggende, mellomliggende, og Avansere . Vi vil diskutere de forskjellige nivåene av prosjekter og hvordan koden fungerer.Dette vil hjelpe deg å forstå prosessen med nettutvikling bedre og gi deg ideen om å bygge dine egne nettsteder ved hjelp av forskjellige skriptspråk. Så, la oss begynne med det grunnleggende prosjektet.
Responsiv layout
En hovedrolle for en frontend-utvikler er å forstå de responsive designprinsippene og hvordan de implementeres på kodingsiden.
I dette prosjektet vil vi lage en grunnleggende layout for en enkelt responsiv side og hvordan den fungerer i nettutvikling for å bygge flerbruksnettsteder. Det første trinnet er å lage HTML-oppsettet og designe hoveddelen av websiden.
hvordan sette klassesti i java
* {boksstørrelse: border-box} .meny {float: venstre bredde: 20% tekstjustering: midt}. meny a {bakgrunnsfarge: # deeba6 polstring: 8px margin-top: 7px display: blokkbredde: 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} @media only screen and (max-width: 620px) {/ * For mobiltelefoner: * / .meny, .main, .right {width: 100%}} Forrige spørsmål Neste spørsmål Send quizDeretter trenger vi en måte å bygge en quiz på, vise resultater og sette alt sammen. Vi kan begynne med å legge ut funksjonene våre ved hjelp av JavaScript.
quiz.js
(funksjon () {const myQuestions = [{spørsmål: 'Hvilken sjødyr har tre hjerter?', svarer: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {spørsmål:' Hva er det italienske ordet for kake? ', svarer: {a:' Smultring ', b:' Kakekake ', c:' Pizza '}, riktig Svar:' c '}, {spørsmål: 'Hvilket er det eneste pattedyret som ikke kan hoppe?', Svarer: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// vi trenger et sted å lagre HTML-utgang const output = [] // for hvert spørsmål ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vi vil lagre listen over svarvalg const svar = [] // og for hvert tilgjengelige svar ... for (bokstav i currentQuestion.answers) {// ... legg til en HTML-alternativknapp answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // legg til dette spørsmålet og dets svar på output output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // kombiner til slutt vår outpu t liste opp i en streng HTML og legg den på siden quizContainer.innerHTML = output.join ('')} funksjon showResults () {// samle svarbeholdere fra vår quiz const answerContainers = quizContainer.querySelectorAll ('. svar') // holde oversikt over brukerens svar la numCorrect = 0 // for hvert spørsmål ... myQuestions.forEach ((currentQuestion, questionNumber) => {// finn valgt svar const answerContainer = answerContainers [questionNumber] const selector = `label input [ navn = spørsmål $ {questionNumber}]: sjekket `const userAnswer = (answerContainer.querySelector (selector) || {}). verdi const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Velg brukerens svar var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // hvis svaret er riktig hvis (userAnswer === currentQuestion.correctAnswer) { // legg til antall riktige svar numCorrect ++ // farg svarene grønt //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} annet {// hvis svar er feil eller tomt // farg svarene rødt answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // vis antall riktige svar av totalt resultatContainer.innerHTML = `$ {numCorrect} av $ {myQuestions.length}`} - funksjonen showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') lysbilder [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} hvis (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} annet {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} funksjon showNextSlide () {showSlide (currentSlide + 1)} funksjon showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // vis quiz med en gang buildQuiz () const previousButton = document.getElementById ('forrige') const nextButton = document.getElementById ('neste ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // på send, vis resultater submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)} ()Til slutt kan vi bruke CSS til å legge til forskjellige stiler i dette spillet.
quiz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif color: 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) color: #fff} .question {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } -knapp {font-family: 'Work Sans', sans-serif skriftstørrelse: 22px bakgrunnsfarge: rgb (218, 167, 57) farge: #fff border: 0px border-radius: 3px polstring: 20px markør: peker margin-bottom: 20px} -knapp: svever {bakgrunnsfarge: # 38a} .glide {posisjon: absolutt til venstre: 0px topp: 0px bredde: 100% z-indeks: 1 opacity: 0 overgang: opacity 0,5s} .active- lysbilde {opacity: 1 z-index: 2}. quiz-container {position: relative height: 200px margin-top: 40px}Produksjon:
Dette var noen av webutviklingsprosjektene. med dette har vi kommet til slutten av denne artikkelen. Jeg håper du forsto de forskjellige nivåene av prosjekter og fikk ideen om hvordan du bygger din egen webside og utformer dem etter dine behov.
forskjell mellom kast og kast
Nå som du vet om JavaScript-sløyfer, sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet i “Webutviklingsprosjekter”, så kommer vi tilbake til deg.