Secondo TechRepublic , lo sviluppo web è una delle 10 competenze tecnologiche più importanti nel 2019.Si prevede che l'occupazione degli sviluppatori web crescerà del 15% dal 2016 al 2026, molto più velocemente della media per tutte le professioni. Questo è il momento giusto per migliorare le tue capacità e iniziare la tua carriera di sviluppatore web. In questo articolo, discuteremo alcuni dei Progetti che ti aiuteranno a creare applicazioni da solo nella seguente sequenza:
Carriera nello sviluppo web
Uno sviluppatore web è un programmatore specializzato nello sviluppo di applicazioni World Wide Web utilizzando un modello client-server. Sono anche responsabili della progettazione, codifica e modifica dei siti web, dal layout alla funzione e secondo le specifiche del cliente.
Puoi trovare professionisti formati nello sviluppo web che lavorano come programmatori di computer, ingegneri del software e persino grafici focalizzati sul web. Alcuni dei ruoli professionali chiave sono:
- Sviluppatore web - Gli sviluppatori Web utilizzano competenze di programmazione e tecnologia per costruire l'aspetto e l'esperienza utente di un sito. Lo stipendio medio è di circa Rs. 480.694.
- Programmatore di computer - I programmatori di computer sviluppano e regolano il corretto funzionamento del software scrivendo e testando il codice. L'intervallo di stipendio medio è compreso tra Rs 232k e Rs 1m.
- Web designer - I web designer lavorano sul front-end di un sito e si preoccupano dell'aspetto esteriore e dell'esperienza dell'utente. Lo stipendio medio per un web designer in India è di 281.410 Rs.
- Grafico Web Designer - Un designer grafico lavora per migliorare l'esperienza dell'utente o l'applicazione creando grafica e altri media visivi. Lo stipendio medio varia da Rs 118k a Rs 619k.
Ora che conosci la crescita della carriera, diamo uno sguardo ad alcuni dei progetti di sviluppo web che ti aiuteranno a comprendere meglio il processo di progettazione web e anche a costruire i tuoi progetti.
Progetti di sviluppo web
I progetti di sviluppo web sono suddivisi in tre livelli: Base, intermedio, e Progredire . Discuteremo i diversi livelli dei progetti e come funziona il codice.Questo ti aiuterà a capire meglio il processo di sviluppo web e ti fornirà l'idea di creare i tuoi siti web utilizzando diversi linguaggi di scripting. Quindi, iniziamo con il progetto di livello base.
Layout reattivo
Uno dei ruoli principali di uno sviluppatore front-end è comprendere i principi del responsive design e come implementarli dal lato della codifica.
In questo progetto, creeremo un layout di base di una singola pagina reattiva e come funziona nello sviluppo web per la costruzione di siti web multiuso. Il primo passo è creare il layout HTML e progettare la parte principale della pagina web.
cos'è uno sviluppatore blockchain
* {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: nero} .main {float: left width: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} @media only screen and (max-width: 620px) {/ * For mobile phones: * / .menu, .main, .right {width: 100%}} Domanda precedente Domanda successiva Invia quizSuccessivamente, avremo bisogno di un modo per creare un quiz, mostrare i risultati e mettere tutto insieme. Possiamo iniziare disponendo le nostre funzioni con l'aiuto di JavaScript.
quiz.js
(function () {const myQuestions = [{question: 'Quale creatura marina ha tre cuori?', risponde: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' Qual è la parola italiana per torta? ', risponde: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: 'Qual è l'unico mammifero che non può saltare?', Risponde: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// avremo bisogno di un posto per memorizzare l'output HTML const output = [] // per ogni domanda ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vorremo memorizzare l'elenco delle scelte di risposta const risposte = [] // e per ogni risposta disponibile ... per (lettera in currentQuestion.answers) {// ... aggiungi un pulsante di opzione HTML answer.push (`$ {lettera}: $ {currentQuestion.answers [lettera ]} `)} // aggiungi questa domanda e le sue risposte all'output output.push (` $ {currentQuestion.question} $ {respons.join ('')} `)}) // finalmente combina il nostro output t elencare in una stringa di HTML e inserirla nella pagina quizContainer.innerHTML = output.join ('')} funzione showResults () {// raccogliere contenitori di risposte dal nostro quiz const answerContainers = quizContainer.querySelectorAll ('. risposte') // tieni traccia delle risposte dell'utente let numCorrect = 0 // per ogni domanda ... myQuestions.forEach ((currentQuestion, questionNumber) => {// trova la risposta selezionata const answerContainer = answerContainers [questionNumber] const selector = `label input [ nome = domanda $ {questionNumber}]: verificato` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Seleziona la risposta dell'utente var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // se la risposta è corretta if (userAnswer === currentQuestion.correctAnswer) { // aggiungi al numero di risposte corrette numCorrect ++ // colora le risposte in verde //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer è sbagliato o vuoto // colora le risposte in rosso answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // mostra il numero di risposte corrette sul totale dei risultatiContainer.innerHTML = `$ {numCorrect} su $ {myQuestions.length}`} funzione 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 '}} funzione showNextSlide () {showSlide (currentSlide + 1)} funzione showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('risultati') const submitButton = document.getElementById ('submit') // visualizza subito il quiz buildQuiz () const previousButton = document.getElementById ('precedente') const nextButton = document.getElementById ('successivo ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // su invio, mostra risultati submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()Infine, possiamo usare i CSS per aggiungere diversi stili a questo gioco.
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 } pulsante {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} pulsante: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transit: opacity 0.5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {position: relative height: 200px margin-top: 40px}Produzione:
Questi erano alcuni dei progetti di sviluppo web. con questo siamo giunti alla fine di questo articolo. Spero che abbiate capito i diversi livelli dei progetti e che abbiate avuto l'idea di come costruire la vostra pagina web e progettarla secondo le vostre esigenze.
imposta il percorso java in Windows
Ora che conosci i loop JavaScript, controlla il file di Edureka. Il corso di formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Per favore, menzionalo nella sezione commenti di 'Progetti di sviluppo web' e ti risponderemo.