Projectes de desenvolupament web: saber construir i dissenyar pàgines web

Tres nivells de projectes de desenvolupament web que us ajudaran a entendre millor el procés de disseny web i a construir els vostres propis projectes.

D'acord amb TechRepublic , el desenvolupament web és una de les 10 habilitats tecnològiques més populars del 2019.Es preveu que l’ocupació de desenvolupadors web creixi un 15% del 2016 al 2026, molt més ràpid que la mitjana de totes les ocupacions. Aquest és el moment adequat per millorar les teves habilitats i començar la teva carrera de desenvolupador web. En aquest article, parlarem d'alguns dels fitxers Projectes que us ajudaran a crear aplicacions pel vostre compte en la següent seqüència:



Carrera en desenvolupament web

Un desenvolupador web és un programador especialitzat en el desenvolupament d'aplicacions de la xarxa mundial mitjançant un model client-servidor. També s’encarreguen de dissenyar, codificar i modificar llocs web, des del disseny fins a la funció i d’acord amb les especificacions del client.



carrera de desenvolupament web - projectes de desenvolupament web - edureka

c ++ ordenar una matriu

Podeu trobar professionals formats en desenvolupament web que treballin com a programadors d’ordinadors, enginyers de programari i fins i tot dissenyadors gràfics centrats en la web. Alguns dels rols clau de la feina són:



  • Desenvolupador web - Els desenvolupadors web utilitzen habilitats de programació i tecnologia per construir l'aparença i l'experiència d'usuari d'un lloc. El salari mitjà ronda els Rs. 480.694.
  • Programador - Els programadors informàtics desenvolupen i ajusten la funció adequada del programari escrivint i provant codi. El rang mitjà de salaris oscil·la entre els 232k i els 1m.
  • Dissenyador web - Els dissenyadors web treballen a la part frontal d’un lloc i es preocupen per l’aspecte exterior i l’experiència de l’usuari. El salari mitjà d’un dissenyador web a l’Índia és de 281.410 rupies.
  • Dissenyador web gràfic - Un dissenyador gràfic treballa per millorar l'experiència o l'aplicació de l'usuari creant gràfics i altres suports visuals. El salari mitjà oscil·la entre 118k i 619k.

Ara que ja coneixeu el creixement professional, anem a fer una ullada a alguns dels projectes de desenvolupament web que us ajudaran a entendre millor el procés de disseny web i també a construir els vostres propis projectes.

Projectes de desenvolupament web

Els projectes de desenvolupament web es divideixen en tres nivells: Bàsica, Intermèdia, i Avanç . Analitzarem els diferents nivells dels projectes i el funcionament del codi.Això us ajudarà a entendre millor el procés de desenvolupament web i us donarà la idea de crear els vostres propis llocs web utilitzant diferents llenguatges de seqüència. Comencem, doncs, amb el Projecte de nivell bàsic.

Disseny responsiu

Una de les funcions principals d’un desenvolupador frontal és entendre els principis de disseny sensibles i com implementar-los en el costat de la codificació.



En aquest projecte, crearem un disseny bàsic d’una sola pàgina responsive i com funciona en el desenvolupament web per a la creació de llocs web polivalents. El primer pas és crear el disseny HTML i dissenyar la part principal de la pàgina 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: negre} .main {float: left left: 60% farciment: 0 20px}. right {background-color: # f0b569 float: left left: 20% padding: 15px margin-top: 7px text-align: center} Pantalla només @media i (amplada màxima: 620px) {/ * Per a telèfons mòbils: * / .menu, .main, .right {width: 100%}} Pregunta anterior Pregunta següent Enviar concurs

A continuació, necessitarem una manera de crear un qüestionari, mostrar resultats i reunir-ho tot. Podem començar dissenyant les nostres funcions amb l'ajut de JavaScript.

quiz.js

(function () {const myQuestions = [{pregunta: 'Quina criatura marina té tres cors?', respostes: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'), correctAnswer: 'a '}, {pregunta: 'Quina és la paraula italiana per a pastís?', respon: {a: 'Donut', b: 'Pastís de pastís', c: 'Pizza'}, correcta Resposta: 'c'}, {pregunta: 'Quin és l'únic mamífer que no pot saltar?', Respon: {a: 'Serp', b: 'Elefant', c: 'Cangur',}, correcta Resposta: 'b'}] funció buildQuiz () {// necessitarem un lloc per emmagatzemar la sortida HTML de const output = [] // per a cada pregunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// voldrem emmagatzemar la llista d'opcions de resposta const respostes = [] // i per a cada resposta disponible ... per (lletra a currentQuestion.answers) {// ... afegiu un botó d'opció HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // afegiu aquesta pregunta i les seves respostes a la sortida output.push (` $ {currentQuestion.question} $ {answers.join ('')} ')}) // finalment combineu la nostra outpu Enumereu una cadena d'HTML i poseu-la a la pàgina quizContainer.innerHTML = output.join ('')} funció showResults () {// reuniu els contenidors de respostes del nostre qüestionari const answerContainers = quizContainer.querySelectorAll ('. answers') // fer un seguiment de les respostes de l'usuari deixeu que numCorrect = 0 // per a cada pregunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// trobeu la resposta seleccionada const answerContainer = answerContainers [questionNumber] const selector = `entrada d'etiquetes [ name = pregunta $ {questionNumber}]: marcat` const userAnswer = (answerContainer.querySelector (selector) || {}). valor const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Selecciona la resposta de l'usuari var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // si la resposta és correcta si (userAnswer === currentQuestion.correctAnswer) { // afegiu al nombre de respostes correctes numCorrect ++ // acoloreu les respostes de color verd //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} més {// if answer està malament o en blanc // acoloreix les respostes de color vermell answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // mostra el nombre de respostes correctes del total de resultatsContainer.innerHTML = `$ {numCorrect} de la funció $ {myQuestions.length}`} showSlide (n) {diapositives [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 '}} funció showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('resultats') const submitButton = document.getElementById ('enviar') // mostrar el qüestionari immediatament buildQuiz () const previousButton = document.getElementById ('anterior') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') deixa currentSlide = 0 showSlide (0) // en enviar, mostra els resultats submitButton.addEventListener (' clic ', showResult s) previousButton.addEventListener ('clic', showPreviousSlide) nextButton.addEventListener ('clic', showNextSlide)}) ()

Finalment, podem utilitzar CSS per afegir diferents estils a aquest joc.

com fer servir iterador 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 } botó {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radi: 3px padding: 20px cursor: punter margin-bottom: 20px} botó: passeu el cursor {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 {position: height relative: 200px margin-top: 40px}

Sortida:

Aquests van ser alguns dels projectes de desenvolupament web. amb això, hem arribat al final d’aquest article. Espero que hagueu entès els diferents nivells de projectes i tingueu la idea de com crear la vostra pròpia pàgina web i dissenyar-les segons les vostres necessitats.

tipus de dades a mysql amb exemples

Ara que ja coneixeu els bucles de JavaScript, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'Projectes de desenvolupament web' i us respondrem.