Podle TechRepublic , vývoj webových aplikací je jednou z 10 nejžhavějších technických dovedností v roce 2019.Předpokládá se, že zaměstnanost webových vývojářů vzroste od roku 2016 do roku 2026 o 15 procent, což je mnohem rychleji, než je průměr všech povolání. To je ten pravý čas, abyste si vylepšili své dovednosti a zahájili kariéru webového vývojáře. V tomto článku se budeme zabývat některými z Projekty, které vám pomohou vytvářet aplikace samostatně, v následujícím pořadí:
Kariéra ve vývoji webových aplikací
Webový vývojář je programátor, který se specializuje na vývoj aplikací na webu pomocí modelu klient-server. Jsou také zodpovědní za navrhování, kódování a úpravy webových stránek, od rozvržení až po fungování a podle specifikací klienta.
Najdete profesionály vyškolené ve vývoji webových aplikací, kteří pracují jako počítačoví programátoři, softwaroví inženýři a dokonce i grafičtí designéři zaměření na web. Některé z klíčových pracovních rolí jsou:
- Web Developer - Weboví vývojáři používají programovací a technologické dovednosti k tomu, aby vytvořili vzhled a uživatelské prostředí webu. Průměrný plat je kolem Rs. 480 694.
- Počítačový programátor - Počítačoví programátoři vyvíjejí a upravují správnou funkci softwaru psaním a testováním kódu. Rozsah průměrných platů se pohybuje mezi 232 000 až 1 m Rs.
- Webový designér - Weboví designéři pracují na front-endu webu a zajímají se o vnější vzhled a uživatelskou zkušenost. Průměrná mzda webového designéra v Indii je 281 410 Rs.
- Grafický webový designér - Grafik pracuje na vylepšování uživatelského zážitku nebo aplikace vytvářením grafiky a dalších vizuálních médií. Průměrný plat se pohybuje v rozmezí od 118 tis. Rs do 619 tis. Rs.
Nyní, když víte o kariérním růstu, pojďme se podívat na některé z Web Development Projects, které vám pomohou lépe porozumět procesu webového navrhování a také budovat své vlastní projekty.
Projekty rozvoje webu
Projekty rozvoje webu jsou rozděleny do tří úrovní - Základní, Střední, a Záloha . Budeme diskutovat o různých úrovních projektů a o tom, jak kód funguje.To vám pomůže lépe porozumět procesu vývoje webu a poskytne vám nápad vytvořit si vlastní webové stránky pomocí různých skriptovacích jazyků. Začněme tedy projektem na základní úrovni.
Reagovat na rozložení
Jednou z hlavních rolí frontendového vývojáře je porozumět principům responzivního designu a způsobu jejich implementace na straně kódování.
V tomto projektu vytvoříme základní rozložení jedné responzivní stránky a to, jak to funguje při vývoji webu pro vytváření víceúčelových webů. Prvním krokem je vytvoření rozložení HTML a návrh hlavní části webové stránky.
c ++ stl řazení
* {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) {/ * Pro mobilní telefony: * / .menu, .main, .right {width: 100%}} Předchozí otázka Další otázka Odeslat kvízDále budeme potřebovat způsob, jak sestavit kvíz, ukázat výsledky a dát vše dohromady. Můžeme začít rozložením našich funkcí pomocí JavaScriptu.
quiz.js
(function () {const myQuestions = [{otázka: 'Které mořské stvoření má tři srdce?', odpovědi: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' What is the Italian word for pie? ', Answerions: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: „Což je jediný savec, který neumí skákat?“, Odpovědi: {a: „Snake“, b: „Slon“, c: „Klokan“,}, correctAnswer: 'b'}] funkce buildQuiz () {// budeme potřebovat místo pro uložení výstupu HTML const output = [] // pro každou otázku ... myQuestions.forEach ((currentQuestion, questionNumber) => {// budeme chtít uložit seznam možností odpovědí const answer = [] // a za každou dostupnou odpověď ... pro (písmeno v currentQuestion.answers) {// ... přidat přepínač HTML odpovědi.push (`$ $ {letter}: $ {currentQuestion.answers [písmeno ]} `)} // přidejte tuto otázku a její odpovědi do výstupního výstupu. push (` $ $ currentQuestion.question} $ {answer.join ('')} `)}) // konečně zkombinujte náš outpu seznam do jednoho řetězce HTML a umístit jej na stránku quizContainer.innerHTML = output.join ('')} funkce showResults () {// shromáždit kontejnery odpovědí z našeho kvízu const answerContainers = quizContainer.querySelectorAll ('. answer') // sledovat odpovědi uživatelů nechat numCorrect = 0 // pro každou otázku ... myQuestions.forEach ((currentQuestion, questionNumber) => {// najít vybranou odpověď const answerContainer = answerContainers [questionNumber] const selector = `vstup štítku [ name = question $ {questionNumber}]: checked` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // // Vyberte odpověď uživatele var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // pokud je odpověď správná if (userAnswer === currentQuestion.correctAnswer) { // přidat k počtu správných odpovědí numCorrect ++ // vybarvit odpovědi zeleně //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// pokud odpověď je špatné nebo prázdné // barevné odpovědi červené answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // zobrazit počet správných odpovědí z celkového počtu výsledkůContainer.innerHTML = `$ $ numCorrect} z $ {myQuestions.length}`} funkce showSlide (n) {slides [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 '}} funkce showNextSlide () {showSlide (currentSlide + 1)} funkce showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // zobrazit kvíz hned buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // on submit, show results submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()Nakonec můžeme pomocí CSS přidat do této hry různé styly.
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) 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 } tlačítko {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ímek {opacity: 1 z-index: 2} .quiz-container {pozice: relativní výška: 200px okraj nahoře: 40px}Výstup:
Byly to některé z projektů rozvoje webu. s tím jsme se dostali na konec tohoto článku. Doufám, že jste porozuměli různým úrovním projektů a dostali jste nápad, jak vytvořit vlastní webovou stránku a navrhnout ji podle svých potřeb.
algoritmy a datové struktury v Javě
Nyní, když víte o smyčkách JavaScriptu, podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže naučit se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v části „Projekty rozvoje webu“ a my se vám ozveme.