Webudviklingsprojekter: Vide, hvordan man bygger og designer websider

Ifølge TechRepublic , webudvikling er en af ​​de 10 hotteste teknologiske færdigheder i 2019.Ansættelse af webudviklere forventes at vokse med 15 procent fra 2016 til 2026, meget hurtigere end gennemsnittet for alle erhverv. Dette er det rigtige tidspunkt til at forbedre dine færdigheder og starte din karriere hos webudviklere. I denne artikel vil vi diskutere nogle af de Projekter, der hjælper dig med at oprette applikationer alene i følgende rækkefølge:

• Karriere inden for webudvikling
• Webudviklingsprojekter
  • Responsivt layout
  • Dynamisk webside
  • Quiz-spil

Karriere inden for webudvikling

En webudvikler er en programmør, der har specialiseret sig i udvikling af World Wide Web-applikationer ved hjælp af en klientservermodel. De er også ansvarlige for at designe, kode og ændre websteder, fra layout til funktion og i henhold til en klients specifikationer.

Du kan finde fagfolk uddannet i webudvikling, der arbejder som computerprogrammerere, softwareingeniører og endda webfokuserede grafiske designere. Nogle af de vigtigste jobroller er:

• Web-udvikler - Webudviklere bruger programmerings- og teknologikompetencer til at konstruere et websteds udseende og brugeroplevelse. Den gennemsnitlige løn er omkring Rs. 480,694.
• Computer Programmer - Computerprogrammerere udvikler og justerer den korrekte funktion af software ved at skrive og teste kode. Det gennemsnitlige løninterval er mellem Rs 232k og Rs 1m.
• Webdesigner - Webdesignere arbejder på fronten af ​​et websted og er bekymrede over ydre udseende og brugeroplevelse. Den gennemsnitlige løn for en webdesigner i Indien er Rs 281.410.
• Grafisk webdesigner - En grafisk designer arbejder på at forbedre brugeroplevelsen eller applikationen ved at oprette grafik og andre visuelle medier. Den gennemsnitlige løn spænder fra Rs 118k til Rs 619k.

Nu hvor du kender karrierevækst, skal vi se på nogle af webudviklingsprojekterne, der hjælper dig med at forstå processen med webdesign bedre og også opbygge dine egne projekter.

Webudviklingsprojekter

Webudviklingsprojekterne er opdelt i tre niveauer - Grundlæggende, mellemliggende, og Rykke . Vi vil diskutere de forskellige niveauer af projekter, og hvordan koden fungerer.Dette hjælper dig med at forstå processen med webudvikling bedre og give dig ideen om at opbygge dine egne hjemmesider ved hjælp af forskellige script-sprog. Så lad os begynde med det grundlæggende niveau Projekt.

Responsivt layout

En hovedrolle for en frontend-udvikler er at forstå de responsive designprincipper og hvordan de implementeres på kodningssiden.

I dette projekt opretter vi et grundlæggende layout på en enkelt responsiv side, og hvordan det fungerer i webudvikling til opbygning af multifunktionelle websteder. Det første trin er at oprette HTML-layoutet og designe hoveddelen af ​​websiden.

* {box-dimensionering: border-box} .menu {float: venstre bredde: 20% tekstjustering: center} .menu a {baggrundsfarve: # deeba6 polstring: 8px margin-top: 7px display: blokbredde: 100 % farve: sort} .hoved {float: venstre bredde: 60% polstring: 0 20px} .højre {baggrundsfarve: # f0b569 float: venstre bredde: 20% polstring: 15px margin-top: 7px tekstjustering: center} @media only screen and (max-width: 620px) {/ * For mobiltelefoner: * / .menu, .main, .right {width: 100%}} Forrige spørgsmål Næste spørgsmål Send quiz

Derefter har vi brug for en måde at oprette en quiz på, vise resultater og sætte det hele sammen. Vi kan starte med at lægge vores funktioner ud ved hjælp af JavaScript.

quiz.js

(funktion () {const myQuestions = [{spørgsmål: 'Hvilken havdyr har tre hjerter?', svarer: {a: 'Blæksprutte', b: 'Blåhval', c: 'Havskildpadde'}, korrektAnsvar: 'a '}, {spørgsmål:' Hvad er det italienske ord for tærte? ', svarer: {a:' Donut ', b:' Tærtekage ', c:' Pizza '}, korrekt Svar:' c '}, {spørgsmål: 'Hvilket er det eneste pattedyr, der ikke kan hoppe?', Svarer: {a: 'Slange', b: 'Elefant', c: 'Kænguru',}, correctAnswer: 'b'}] funktion buildQuiz () {// vi har brug for et sted at gemme HTML output const output = [] // for hvert spørgsmål ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vi vil gemme listen over svar valg const svar = [] // og for hvert tilgængeligt svar ... for (bogstav i currentQuestion.answers) {// ... tilføj en HTML-radioknap answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // tilføj dette spørgsmål og dets svar til output output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // kombiner endelig vores outpu t liste i en HTML-streng og læg den på siden quizContainer.innerHTML = output.join ('')} funktion showResults () {// saml svarbeholdere fra vores quiz const answerContainers = quizContainer.querySelectorAll ('. svar') // hold styr på brugerens svar lad numCorrect = 0 // for hvert spørgsmål ... myQuestions.forEach ((currentQuestion, questionNumber) => {// find valgt svar const answerContainer = answerContainers [questionNumber] const selector = `label input [ navn = spørgsmål $ {questionNumber}]: afkrydset `const userAnswer = (answerContainer.querySelector (vælger) || {}). værdi const answerID = (answerContainer.querySelector (vælger) || {}). id const selector1 = `label [id = '$ {answerID}']` // Vælg brugerens svar var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // hvis svaret er korrekt, hvis (userAnswer === currentQuestion.correctAnswer) { // tilføj til antallet af korrekte svar numCorrect ++ // farve svarene grønne //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} andet {// hvis svar er forkert eller tomt // farve svarene rødt answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // viser antallet af korrekte svar ud af de samlede resultater Container.innerHTML = `$ {numCorrect} ud af $ {myQuestions.length}`} - funktionen showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') dias [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} ellers {previousButton.style.display = 'inline-block'} hvis (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} ellers {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} funktion showNextSlide () {showSlide (currentSlide + 1)} funktion showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('send') // vis quiz med det samme buildQuiz () const previousButton = document.getElementById ('forrige') const nextButton = document.getElementById ('næste ') const slides = document.querySelectorAll ('. slide ') lad currentSlide = 0 showSlide (0) // ved send, vis resultater submitButton.addEventListener (' klik ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)} ()

Endelig kan vi bruge CSS til at tilføje forskellige stilarter til dette spil.

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) fontvægt: 300 tekstjustering: center baggrundsfarve: # f8e8f2} h1 {font-weight: 300 margin: 0px polstring: 10px fontstørrelse: 40px baggrundsfarve: 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 } knap {font-family: 'Work Sans', sans-serif font-size: 22px baggrundsfarve: rgb (218, 167, 57) farve: #fff border: 0px border-radius: 3px polstring: 20px markør: pointer margin-bottom: 20px} knap: svæver {baggrundsfarve: # 38a} .glide {position: absolut venstre: 0px top: 0px bredde: 100% z-indeks: 1 opacitet: 0 overgang: opacitet 0,5s} .aktiv- slide {opacitet: 1 z-indeks: 2}. quiz-container {position: relativ højde: 200 pixel margen-top: 40 pixel}

Produktion:

Dette var nogle af webudviklingsprojekterne. med dette er vi kommet til slutningen af ​​denne artikel. Jeg håber, du forstod de forskellige niveauer af projekter og fik ideen om, hvordan du bygger din egen webside og designer dem efter dine behov.

Nu hvor du kender JavaScript-sløjfer, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

ansible vs marionet vs kok

Har du et spørgsmål til os? Nævn det i kommentarfeltet i “Webudviklingsprojekter”, så vender vi tilbage til dig.