Podľa TechRepublic , vývoj webových aplikácií je jednou z 10 najhorúcejších technických zručností v roku 2019.Predpokladá sa, že zamestnanosť webových vývojárov vzrastie od roku 2016 do roku 2026 o 15 percent, čo je oveľa rýchlejšie ako priemer všetkých povolaní. Toto je ten pravý čas na zdokonalenie vašich schopností a naštartovanie kariéry vývojárov webu. V tomto článku si rozoberieme niektoré z nich Projekty, ktoré vám pomôžu pri samostatnom zostavovaní aplikácií v nasledujúcom poradí:
Kariéra vo vývoji webových aplikácií
Webový vývojár je programátor, ktorý sa špecializuje na vývoj aplikácií na celom svete pomocou modelu klient-server. Zodpovedajú tiež za navrhovanie, kódovanie a úpravy webových stránok, od ich usporiadania až po fungovanie a podľa špecifikácií klienta.
Nájdete profesionálov vyškolených v oblasti vývoja webových aplikácií, ktorí pracujú ako počítačoví programátori, softvéroví inžinieri alebo dokonca grafici zameraní na web. Niektoré z kľúčových pracovných rolí sú:
- Web Developer - Weboví vývojári používajú programovacie a technologické zručnosti na vytvorenie vzhľadu a používateľskej skúsenosti s webom. Priemerný plat je okolo Rs. 480 694.
- Počítačový programátor - Počítačoví programátori vyvíjajú a upravujú správnu funkciu softvéru písaním a testovaním kódu. Priemerný rozsah platov sa pohybuje medzi 232 000 Rs a 1 000 Rs.
- Webový dizajnér - Weboví dizajnéri pracujú na popredných webových stránkach a zaoberajú sa vonkajším vzhľadom a používateľskými skúsenosťami. Priemerná mzda webového dizajnéra v Indii je 281 410 Rs.
- Grafický webový dizajnér - Grafický dizajnér pracuje na vylepšovaní používateľského zážitku alebo aplikácie vytváraním grafiky a iných vizuálnych médií. Priemerný plat sa pohybuje od 118 000 Rs do 619 000 Rs.
Teraz, keď viete o kariérnom raste, sa pozrime na niektoré z projektov rozvoja webu, ktoré vám pomôžu lepšie pochopiť proces tvorby webových stránok a tiež si vytvoriť vlastné projekty.
Projekty rozvoja webu
Projekty rozvoja webu sú rozdelené do troch úrovní - Základné, mierne pokročilé, a Vopred . Budeme diskutovať o rôznych úrovniach projektov a o tom, ako funguje kód.To vám pomôže lepšie pochopiť proces vývoja webu a poskytne vám predstavu o vytváraní vlastných webových stránok pomocou rôznych skriptovacích jazykov. Začnime teda projektom na základnej úrovni.
Responzívne rozloženie
Jednou z hlavných úloh frontendového vývojára je porozumieť princípom responzívneho návrhu a ich implementácii na strane kódovania.
V tomto projekte vytvoríme základné rozloženie jednej responzívnej stránky a jej fungovanie pri vývoji webu pri vytváraní viacúčelových webových stránok. Prvým krokom je vytvorenie rozloženia HTML a návrh hlavovej časti webovej stránky.
čo je uviaznutie v Jave
* {box-sizing: 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} Obrazovka @media only and (max-width: 620px) {/ * Pre mobilné telefóny: * / .menu, .main, .right {width: 100%}} Predchádzajúca otázka Ďalšia otázka Predložiť kvízĎalej budeme potrebovať spôsob, ako zostaviť kvíz, ukázať výsledky a dať všetko dohromady. Môžeme začať rozložením našich funkcií pomocou JavaScriptu.
quiz.js
(function () {const myQuestions = [{otázka: „Ktoré morské stvorenie má tri srdcia?“, odpovede: {a: „Chobotnica“, b: „Modrá veľryba“, c: „Morská korytnačka“}, správna odpoveď: „a '}, {otázka:' Čo je talianske slovo pre koláč? ', odpovede: {a:' Šiška ', b:' Koláčový koláč ', c:' Pizza '}, correctAnswer:' c '}, {otázka: „Ktorý jediný cicavec nemôže skákať?“, Odpovede: {a: „Had“, b: „Slon“, c: „Klokan“,}, correctAnswer: „b“}] funkcia buildQuiz () {// budeme potrebovať miesto na uloženie výstupu HTML const output = [] // pre každú otázku ... myQuestions.forEach ((currentQuestion, questionNumber) => {// budeme chcieť uložiť zoznam možností odpovedí const answer = [] // a za každú dostupnú odpoveď ... pre (písmeno v currentQuestion.answers) {// ... pridať prepínač HTML Answer.push (`$ {letter}: $ {currentQuestion.answers [písmeno ]} `)} // pridaj túto otázku a jej odpovede na výstup output.push (` $ $ currentQuestion.question} $ {answer.join ('')} `)}) // nakoniec skombinuj náš outpu t zoznam do jedného reťazca HTML a vložiť ho na stránku quizContainer.innerHTML = output.join ('')} funkcia showResults () {// zhromaždiť kontajnery odpovedí z nášho kvízu konšt answerContainers = quizContainer.querySelectorAll ('. answer') // sledujte odpovede používateľov, nechajte numCorrect = 0 // pre každú otázku ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vyhľadať vybratú odpoveď const answerContainer = answerContainers [questionNumber] const selector = `vstup štítku [ name = otázka $ {questionNumber}]: checked` const userAnswer = (answerContainer.querySelector (selektor) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // // Vyberte odpoveď používateľa var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // ak je odpoveď správna if (userAnswer === currentQuestion.correctAnswer) { // pridať k počtu správnych odpovedí numCorrect ++ // vyfarbiť odpovede zelene //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// ak odpoveď je nesprávne alebo prázdne // zafarbenie odpovedí červenou answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // zobraziť počet správnych odpovedí z celkového počtu výsledkovContainer.innerHTML = `$ {numCorrect} z $ {myQuestions.length}`} funkcia showSlide (n) {snímky [currentSlide] .classList.remove ('a ctive-slide ') slides [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 '}} funkcia showNextSlide () {showSlide (currentSlide + 1)} funkcia showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // ihneď zobraziť kvíz buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') nechať currentSlide = 0 showSlide (0) // pri odoslaní, zobraziť výsledky odovzdaťButton.addEventListener (' kliknúť ', showResult s) previousButton.addEventListener ('kliknutie', showPreviousSlide) nextButton.addEventListener ('kliknutie', showNextSlide)}) ()Na záver môžeme pomocou CSS pridať do tejto hry rôzne štýly.
kvíz.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) váha písma: 300 zarovnanie textu: stredná farba pozadia: # f8e8f2} h1 {váha písma: 300 okraj: 0px výplň: 10px veľkosť písma: 40px farba pozadia: 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 } tlačidlo {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: pointer margin-bottom: 20px} button: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transition: opacity 0.5s} .active- snímka {nepriehľadnosť: 1 z-index: 2}. kvíz-kontajner {pozícia: relatívna výška: 200 pixelov okraj hore: 40 pixelov}Výkon:
Boli to niektoré z projektov vývoja webu. s týmto sme sa dostali na koniec tohto článku. Dúfam, že ste pochopili rôzne úrovne projektov a dostali ste nápad, ako si vytvoriť vlastnú webovú stránku a navrhnúť ju podľa svojich potrieb.
triediace polia c ++
Teraz, keď viete o cykloch JavaScriptu, sa pozrite na od Edureka. Osvedčenie o školení v oblasti vývoja webu vám pomôže naučiť sa, ako vytvárať pôsobivé webové stránky pomocou rozhraní HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Máte na nás otázku? Uveďte to prosím v sekcii komentárov v časti „Projekty rozvoja webu“ a my sa vám ozveme.