Žiniatinklio kūrimo projektai: žinokite, kaip kurti ir kurti tinklalapius

Pagal „TechRepublic“ , interneto svetainių kūrimas yra vienas iš 10 karščiausių technologijų įgūdžių 2019 m.Prognozuojama, kad interneto kūrėjų užimtumas nuo 2016 m. Iki 2026 m. Išaugs 15 proc., Daug greičiau nei visų profesijų vidurkis. Tai tinkamas laikas patobulinti savo įgūdžius ir pradėti savo interneto kūrėjo karjerą. Šiame straipsnyje aptarsime kai kuriuos Projektai, kurie padės jums savarankiškai kurti programas tokia seka:

• Karjera kuriant internetą
• Žiniatinklio kūrimo projektai
  • Jautrus išdėstymas
  • Dinaminis tinklalapis
  • Viktorina žaidimas

Karjera kuriant internetą

Interneto kūrėjas yra programuotojas, kuris specializuojasi žiniatinklio programų kūrime, naudojant kliento-serverio modelį. Jie taip pat yra atsakingi už svetainių projektavimą, kodavimą ir modifikavimą, nuo išdėstymo iki funkcijos ir pagal kliento specifikacijas.

c ++ goto etiketė

Galite rasti žiniatinklio kūrimo srityje paruoštų specialistų, dirbančių kaip kompiuterių programuotojai, programinės įrangos inžinieriai ir net į internetą orientuoti grafikos dizaineriai. Kai kurie pagrindiniai darbo vaidmenys yra šie:

• Žiniatinklio kūrėjas - Žiniatinklio kūrėjai naudoja programavimo ir technologijų įgūdžius, kad sukurtų svetainės išvaizdą ir vartotojo patirtį. Vidutinis atlyginimas yra apie Rs. 480,694.
• Programuotojas - Kompiuterių programuotojai kuria ir koreguoja tinkamą programinės įrangos funkciją rašydami ir testuodami kodą. Vidutinis atlyginimų diapazonas yra nuo 232 tūkst. Iki 1 mln.
• Interneto dizaineris - Interneto dizaineriai dirba svetainės priekyje ir rūpinasi išvaizda bei vartotojo patirtimi. Vidutinis Indijos interneto dizainerio atlyginimas yra 281 410 Rs.
• Grafinis interneto dizaineris - Grafikos dizaineris siekia pagerinti vartotojo patirtį ar taikymą kurdamas grafiką ir kitas vaizdines laikmenas. Vidutinis atlyginimas svyruoja nuo 118 tūkst. Iki 619 tūkst.

Dabar, kai žinote apie karjeros augimą, pažvelkime į kai kuriuos interneto kūrimo projektus, kurie padės geriau suprasti interneto kūrimo procesą ir kurti savo projektus.

Žiniatinklio kūrimo projektai

Žiniatinklio kūrimo projektai yra suskirstyti į tris lygius: Pagrindinis, Tarpinis, ir Iš anksto . Aptarsime skirtingus projektų lygius ir kaip veikia kodas.Tai padės geriau suprasti žiniatinklio kūrimo procesą ir pasiūlys sukurti savo svetaines naudojant skirtingas scenarijų kalbas. Taigi, pradėkime nuo pagrindinio lygio projekto.

Jautrus išdėstymas

Vienas iš svarbiausių „front-end“ kūrėjų vaidmens yra suprasti suprantamus dizaino principus ir kaip juos įgyvendinti kodavimo pusėje.

Šiame projekte sukursime pagrindinį vieno jautraus puslapio maketą ir kaip jis veikia kuriant žiniatinklį kuriant daugiafunkcines svetaines. Pirmasis žingsnis yra sukurti HTML išdėstymą ir suprojektuoti pagrindinę tinklalapio dalį.

* {langelio dydis: rėmelio dėžutė} .meniu {plūdė: kairysis plotis: 20% teksto lygiavimas: centras}. meniu {fono spalva: # deeba6 užpildas: 8 taškų paraštė: 7 taškų ekranas: blokų plotis: 100 % color: black} .main {float: left left: 60% padding: 0 20px} .right {background-color: # f0b569 float: left left: 20% padding: 15px margin-top: 7px text-align: center} Tik @media ekranas ir (maks. plotis: 620px) {/ * Mobiliesiems telefonams: * / .menu, .main, .right {width: 100%}} Ankstesnis klausimas Kitas klausimas Pateikti viktoriną

Tada mums reikės būdo, kaip sukurti viktoriną, parodyti rezultatus ir viską sujungti. Pirmiausia galime išdėstyti savo funkcijas „JavaScript“ pagalba.

quiz.js

(funkcija () {const myQuestions = [{klausimas: 'Kuris jūros padaras turi tris širdis?', atsakymai: {a: 'Aštuonkojis', b: 'Mėlynasis banginis', c: 'Vėžlys'}, teisingasAtsakymas: 'a '}, {klausimas:' Koks italų kalbos žodis yra pyragas? ', atsakymai: {a:' Spurga ', b:' Pyrago pyragas ', c:' Pica '}, teisingaAtsakymas:' c '}, {klausimas: „Kuris yra vienintelis žinduolis, kuris negali šokinėti?“, Atsako: {a: „Gyvatė“, b: „Dramblys“, c: „Kengūra“,}, correctAnswer: 'b'}] funkcija buildQuiz () {// mums reikės vietos, kur saugoti HTML išvestį const output = [] // kiekvienam klausimui ... myQuestions.forEach ((currentQuestion, questionNumber) => {// norėsime išsaugoti atsakymų pasirinkimų sąrašą const atsakymai = [] // ir už kiekvieną galimą atsakymą ... už (raidė in currentQuestion.answers) {// ... pridėkite HTML radijo mygtuką atsakymai.push (`$ {letter}: $ {currentQuestion.answers [laiškas ]} `)} // pridėkite šį klausimą ir jo atsakymus prie išvesties output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)})} // pagaliau sujunkite mūsų outpu t sąrašas į vieną HTML eilutę ir įdėkite jį į puslapį quizContainer.innerHTML = output.join ('')} funkcija showResults () {// surinkite atsakymų konteinerius iš mūsų viktorinos const answerContainers = quizContainer.querySelectorAll ('. atsakymai') // sekti vartotojo atsakymus tegul numCorrect = 0 // kiekvienam klausimui ... myQuestions.forEach ((currentQuestion, questionNumber) => {// rasti pasirinktą atsakymą const answerContainer = answerContainers [questionNumber] const selector = `etiketės įvestis [ vardas = klausimas $ {questionNumber}]: patikrintas `const userAnswer = (answerContainer.querySelector (selektorius) || {}). reikšmė const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}'] '// // Pasirinkite vartotojo atsakymą var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // jei atsakymas teisingas, jei (userAnswer === currentQuestion.correctAnswer) { // pridėti prie teisingų atsakymų skaičiaus numCorrect ++ // nuspalvinti atsakymus žalia spalva //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// jei atsakymas neteisinga arba tuščia // spalvinkite atsakymus raudonai answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // rodyti teisingų atsakymų skaičių iš visų rezultatųContainer.innerHTML = '$ {numCorrect} iš $ {myQuestions.length}'} funkcijos showSlide (n) {skaidrės [currentSlide] .classList.remove ('a ctive-slide ') skaidrės [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === skaidrės.length - 1) {nextButton.style.display = 'none' pateiktiButton.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 (' quiz ') const resultsContainer = document.getElementById ('results') const pateiktiButton = document.getElementById ('pateikti') // iškart parodyti viktoriną buildQuiz () const previousButton = document.getElementById ('ankstesnis') const nextButton = document.getElementById ('kitas ') const skaidrės = document.querySelectorAll ('. slide ') tegul currentSlide = 0 showSlide (0) // pateikiant, rodomi rezultatai pateikiamiButton.addEventListener (' spustelėkite ', showResult s) previousButton.addEventListener („spustelėkite“, showPreviousSlide) nextButton.addEventListener („spustelėkite“, showNextSlide)}) ()

Galiausiai, naudodami CSS, galime pridėti skirtingų stilių prie šio žaidimo.

viktorina.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif spalva: 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) spalva: #fff} .question {font-size: 40px margin-bottom: 10px}. atsakymai {margin-bottom: 20px text-align: kairysis ekranas: inline-block}. atsakymai etiketė {display: block margin-bottom: 10px } mygtukas {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-spindulys: 3px padding: 20px kursorius: pointer paraštė-apačia: 20 taškų} mygtukas: užveskite pelės žymeklį {background-color: # 38a} .slide {position: absoliučiai kairė: 0px top: 0px plotis: 100% z-index: 1 neskaidrumas: 0 perėjimas: opacity 0.5s} .active- skaidrė {neskaidrumas: 1 z indeksas: 2} .quiz-container {padėtis: santykinis aukštis: 200 taškų paraštė-viršus: 40 taškų}

Išvestis:

Tai buvo keletas interneto plėtros projektų. su tuo mes priėjome šio straipsnio pabaigą. Tikiuosi, kad supratote skirtingus projektų lygius ir sugalvojote, kaip susikurti savo internetinį puslapį ir juos suprojektuoti pagal savo poreikius.

rūšiavimo masyvai c ++

Dabar, kai žinote apie „JavaScript Loops“, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).

Turite mums klausimą? Prašau tai paminėti komentarų skiltyje „Žiniatinklio plėtros projektai“ ir mes su jumis susisieksime.