Projekti spletnega razvoja: vedeti, kako graditi in oblikovati spletne strani

Po navedbah TechRepublic , spletni razvoj je eno izmed 10 najbolj vročih tehnoloških veščin v letu 2019.Zaposlovanje spletnih razvijalcev naj bi se od leta 2016 do leta 2026 povečalo za 15 odstotkov, kar je veliko hitreje od povprečja za vse poklice. To je pravi čas, da izboljšate svoje sposobnosti in začnete kariero spletnega razvijalca. V tem članku bomo razpravljali o nekaterih Projekti, ki vam bodo v pomoč pri samostojni izdelavi aplikacij v naslednjem zaporedju:

• Kariera pri spletnem razvoju
• Projekti spletnega razvoja
  • Odzivna postavitev
  • Dinamična spletna stran
  • Kviz igra

Kariera pri spletnem razvoju

Spletni razvijalec je programer, ki je specializiran za razvoj aplikacij za svetovni splet z uporabo modela odjemalec-strežnik. Odgovorni so tudi za oblikovanje, kodiranje in spreminjanje spletnih strani, od postavitve do funkcije in v skladu s specifikacijami stranke.

Najdete strokovnjake, usposobljene za spletni razvoj, ki delajo kot računalniški programerji, inženirji programske opreme in celo spletni grafični oblikovalci. Nekatere ključne delovne vloge so:

• Spletni razvijalec - Spletni razvijalci uporabljajo programske in tehnološke spretnosti za oblikovanje videza in uporabniške izkušnje spletnega mesta. Povprečna plača je okoli Rs. 480.694.
• Računalniški programer - Računalniški programerji razvijajo in prilagajajo pravilno delovanje programske opreme s pisanjem in testiranjem kode. Povprečna plača se giblje med 232 tisoč in 1 milijonom.
• Oblikovalec spletnih strani - Spletni oblikovalci delajo na sprednjem delu spletnega mesta in se ukvarjajo z zunanjim videzom in uporabniško izkušnjo. Povprečna plača spletnega oblikovalca v Indiji znaša 281.410 Rs.
• Grafični spletni oblikovalec - Grafični oblikovalec si prizadeva izboljšati uporabniško izkušnjo ali aplikacijo z ustvarjanjem grafike in drugih vizualnih medijev. Povprečna plača se giblje od 118.000 do 619.000.

Zdaj, ko veste o karierni rasti, si oglejmo nekaj projektov spletnega razvoja, ki vam bodo pomagali bolje razumeti postopek spletnega oblikovanja in si tudi sami izdelati projekte.

Projekti spletnega razvoja

Projekti spletnega razvoja so razdeljeni na tri ravni - Osnovno, srednje, in Vnaprej . Razpravljali bomo o različnih ravneh projektov in o tem, kako koda deluje.To vam bo pomagalo bolje razumeti postopek spletnega razvoja in vam bo dalo idejo za izdelavo lastnih spletnih mest z uporabo različnih skriptnih jezikov. Začnimo torej s projektom na osnovni ravni.

Odzivna postavitev

Ena od glavnih vlog razvijalca je razumevanje načel odzivnega oblikovanja in način njihove uporabe na strani kodiranja.

V tem projektu bomo ustvarili osnovno postavitev ene odzivne strani in kako deluje pri spletnem razvoju za izdelavo večnamenskih spletnih mest. Prvi korak je ustvariti postavitev HTML in oblikovati glavni del spletne strani.

* {size-size: border-box} .menu {float: left width: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: block width: 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} Zaslon samo za @media in (max-width: 620px) {/ * Za mobilne telefone: * / .menu, .main, .right {width: 100%}} Prejšnje vprašanje Naslednje vprašanje Pošlji kviz

Nato bomo potrebovali način za kviz, prikaz rezultatov in vse skupaj. Začnemo lahko s postavitvijo svojih funkcij s pomočjo JavaScript-a.

quiz.js

(funkcija () {const myQuestions = [{vprašanje: 'Katero morsko bitje ima tri srca?', odgovori: {a: 'Hobotnica', b: 'Modri ​​kit', c: 'Morska želva'}, trueAnswer: 'a '}, {vprašanje:' Kaj je italijanska beseda za pito? ', odgovori: {a:' Krof ', b:' Torta s tortom ', c:' Pica '}, correctAnswer:' c '}, {vprašanje: 'Kateri edini sesalec ne more skakati?', Odgovarja: {a: 'Kača', b: 'Slon', c: 'Kenguru',}, correctAnswer: 'b'}] funkcija buildQuiz () {// potrebovali bomo prostor za shranjevanje izhoda HTML const output = [] // za vsako vprašanje ... myQuestions.forEach ((currentQuestion, questionNumber) => {// želeli bomo shraniti seznam izbir odgovorov const odgovori = [] // in za vsak razpoložljiv odgovor ... za (črko v currentQuestion.answers) {// ... dodajte izbirni gumb HTML answer.push (`$ {letter}: $ {currentQuestion.answers [pismo ]} `)} // dodamo to vprašanje in njegove odgovore v izhod output.push (` $ {currentQuestion.question} $ {answer.join ('')} `)}) // končno združimo naš izhod t seznam v en niz HTML-ja in ga postavi na stran quizContainer.innerHTML = output.join ('')} funkcija showResults () {// zbiranje vsebnikov za odgovore iz našega kviza const answerContainers = quizContainer.querySelectorAll ('. odgovori') // sledimo uporabnikovim odgovorom let numCorrect = 0 // za vsako vprašanje ... myQuestions.forEach ((currentQuestion, questionNumber) => {// poiščemo izbrani odgovor const answerContainer = answerContainers [questionNumber] const selector = `label input [ ime = vprašanje $ {številka vprašanja}]: preverjeno `const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Izberite odgovor uporabnika var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // če je odgovor pravilen, če (userAnswer === currentQuestion.correctAnswer) { // številu pravilnih odgovorov dodamo numCorrect ++ // odgovore obarvamo v zeleno //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer je napačen ali prazen // odgovore pobarvaj rdeče answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // prikaže število pravilnih odgovorov od skupnih rezultatovContainer.innerHTML = `$ {numCorrect} od $ {myQuestions.length}`} funkcija showSlide (n) {diapozitivi [currentSlide] .classList.remove ('a ctive-slide ') diapozitivi [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} funkcija showNextSlide () {showSlide (currentSlide + 1)} funkcija showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' kviz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // takoj prikaži kviz buildQuiz () const previousButton = document.getElementById ('prejšnji') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // ob oddaji, prikaži rezultate submitButton.addEventListener (' klik ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

Končno lahko s pomočjo CSS tej igri dodamo različne sloge.

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) teža pisave: 300 poravnava besedila: barva ozadja v sredini: # f8e8f2} h1 {teža-pisava: 300 rob: 0px oblazinjenje: 10px velikost pisave: 40px barva ozadja: rgb (9, 107, 102) color: #fff} .question {velikost pisave: 40px margin-bottom: 10px} .odgovori {margin-bottom: 20px text-align: left display: inline-block} .nalepka odgovorov {display: block margin-bottom: 10px } gumb {font-family: 'Work Sans', sans-serif velikost pisave: 22px-background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: pointer margin-bottom: 20px} gumb: miškin kazalec {background-color: # 38a} .slide {položaj: absolutno levo: 0px zgoraj: 0px širina: 100% z-indeks: 1 motnost: 0 prehod: motnost 0,5s} .aktiven- diapozitiv {motnost: 1 z-indeks: 2} .quiz-vsebnik {položaj: relativna višina: 200px margin-top: 40px}

Izhod:

kako pretvoriti dvojnico v int v javi

To je bilo nekaj projektov spletnega razvoja. s tem smo prišli do konca tega članka. Upam, da ste razumeli različne ravni projektov in dobili idejo, kako zgraditi svojo spletno stran in jih oblikovati glede na svoje potrebe.

Zdaj, ko poznate zanke JavaScript, si oglejte avtor Edureka. Usposabljanje za certificiranje spletnega razvoja vam bo pomagalo, da se naučite ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih namestite v Amazon Simple Storage Service (S3).

Imate vprašanje za nas? Prosimo, navedite to v oddelku za komentarje v 'Projekti za spletni razvoj', mi pa se vam bomo oglasili.