Conform TechRepublic , dezvoltarea web este una dintre cele mai tari abilități tehnologice în 2019.Se preconizează că angajarea dezvoltatorilor web va crește cu 15% din 2016 până în 2026, mult mai rapid decât media pentru toate ocupațiile. Acesta este momentul potrivit pentru a vă îmbunătăți abilitățile și a vă începe cariera de dezvoltator web. În acest articol, vom discuta despre unele dintre Proiecte care vă vor ajuta să creați aplicații pe cont propriu în următoarea succesiune:
Carieră în dezvoltare web
Un dezvoltator web este un programator specializat în dezvoltarea de aplicații World Wide Web utilizând un model client-server. Aceștia sunt, de asemenea, responsabili pentru proiectarea, codificarea și modificarea site-urilor web, de la aspect până la funcție și conform specificațiilor clientului.
c ++ sortează o matrice
Puteți găsi profesioniști instruiți în dezvoltarea web care lucrează ca programatori de computer, ingineri de software și chiar designeri grafici axați pe web. Unele dintre rolurile cheie ale postului sunt:
- Dezvoltator web - Dezvoltatorii web utilizează abilități de programare și tehnologie pentru a construi aspectul și experiența utilizatorului unui site. Salariul mediu este de aproximativ Rs. 480.694.
- Programator - Programatorii de calculatoare dezvoltă și ajustează funcția corectă a software-ului prin scrierea și testarea codului. Salariul mediu este cuprins între 232k și 1m.
- Web designer - Designerii de web lucrează la front-end-ul unui site și sunt preocupați de aspectul exterior și de experiența utilizatorului. Salariul mediu pentru un web designer în India este de 281.410 Rs.
- Designer grafic web - Un designer grafic lucrează pentru a îmbunătăți experiența utilizatorului sau aplicația prin crearea de grafică și alte suporturi vizuale. Salariul mediu variază de la 118k la 619k.
Acum, că știți despre creșterea carierei, să aruncăm o privire la unele dintre proiectele de dezvoltare web care vă vor ajuta să înțelegeți mai bine procesul de proiectare web și, de asemenea, să vă construiți propriile proiecte.
Proiecte de dezvoltare web
Proiectele de dezvoltare web sunt împărțite în trei niveluri- De bază, intermediar, și Avans . Vom discuta diferitele niveluri ale proiectelor și modul în care funcționează codul.Acest lucru vă va ajuta să înțelegeți mai bine procesul de dezvoltare web și vă va oferi ideea de a vă construi propriile site-uri web folosind diferite limbaje de scriptare. Deci, să începem cu proiectul de bază.
Aspect receptiv
Un rol major al unui dezvoltator frontal este să înțeleagă principiile de proiectare receptive și cum să le implementeze pe partea de codificare.
În acest proiect, vom crea un aspect de bază al unei singure pagini receptive și modul în care funcționează în dezvoltarea web pentru crearea de site-uri web multifuncționale. Primul pas este să creați aspectul HTML și să proiectați partea principală a paginii web.
* {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} Ecran numai @media și (lățime maximă: 620px) {/ * Pentru telefoane mobile: * / .menu, .main, .right {width: 100%}} Întrebare anterioară Întrebare următoare Trimiteți testÎn continuare, vom avea nevoie de o modalitate de a construi un test, de a afișa rezultatele și de a pune totul împreună. Putem începe prin stabilirea funcțiilor noastre cu ajutorul JavaScript.
quiz.js
(function () {const myQuestions = [{întrebare: 'Care creatură marină are trei inimi?', răspunsuri: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {întrebare:' Care este cuvântul italian pentru plăcintă? ', răspunsuri: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {întrebare: „Care este singurul mamifer care nu poate sări?”, Răspunde: {a: „Șarpe”, b: „Elefant”, c: „Cangur”,}, correctAnswer: „b”}] funcție buildQuiz () {// vom avea nevoie de un loc pentru a stoca ieșirea HTML const output = [] // pentru fiecare întrebare ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vom dori să stocăm lista de opțiuni de răspuns const răspunsuri = [] // și pentru fiecare răspuns disponibil ... pentru (scrisoare în currentQuestion.answers) {// ... adăugați un buton radio HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // adăugați această întrebare și răspunsurile sale la ieșirea output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // în cele din urmă combinați outpu-ul nostru listați într-un șir de HTML și puneți-l în pagina quizContainer.innerHTML = output.join ('')} funcția showResults () {// adunați containerele de răspuns din testul nostru const answerContainers = quizContainer.querySelectorAll ('. // urmăriți răspunsurile utilizatorului să numCorrect = 0 // pentru fiecare întrebare ... întrebările mele.pentru fiecare ((currentQuestion, numberNumber) => {// găsiți răspunsul selectat const answerContainer = answerContainers [questionNumber] const selector = `input input [ nume = întrebare $ {questionNumber}]: bifat` const userAnswer = (answerContainer.querySelector (selector) || {}). valoare const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Selectați răspunsul utilizatorului var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // if answer is correct if (userAnswer === currentQuestion.correctAnswer) { // adaugă la numărul de răspunsuri corecte numCorrect ++ // colorează răspunsurile în verde //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} altceva {// if answer este greșit sau gol // colorează răspunsurile roșu answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // afișează numărul de răspunsuri corecte din rezultatele totaleContainer.innerHTML = `$ {numCorrect} din funcția $ {myQuestions.length}`} showSlide (n) {diapozitive [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 '}} funcție showNextSlide () {showSlide (currentSlide + 1)} funcție showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // afișează imediat testul buildQuiz () const previousButton = document.getElementById ('precedent') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') lasă currentSlide = 0 showSlide (0) // la trimitere, arată rezultatele submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()În cele din urmă, putem folosi CSS pentru a adăuga diferite stiluri acestui joc.
ce face un scaner în java
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 } buton {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} buton: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transition: opacity 0.5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {poziție: înălțime relativă: 200px margin-top: 40px}Ieșire:
Acestea au fost câteva dintre proiectele de dezvoltare web. cu aceasta, am ajuns la sfârșitul acestui articol. Sper că ați înțeles diferitele niveluri ale proiectelor și ați avut ideea cum să vă construiți propria pagină web și să le proiectați în funcție de nevoile dvs.
trecerea argumentelor liniei de comandă în java
Acum, că știți despre buclele JavaScript, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să învățați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii din „Proiecte de dezvoltare web” și vă vom răspunde.