Webbutvecklingsprojekt: Kunna bygga och designa webbsidor

Enligt TechRepublic , webbutveckling är en av de 10 hetaste tekniska färdigheterna under 2019.Sysselsättningen för webbutvecklare beräknas växa med 15 procent från 2016 till 2026, mycket snabbare än genomsnittet för alla yrken. Det här är rätt tidpunkt för att förbättra dina färdigheter och börja din webbutvecklare karriär. I den här artikeln kommer vi att diskutera några av de Projekt som hjälper dig att bygga applikationer på egen hand i följande ordning:

• Karriär inom webbutveckling
• Webbutvecklingsprojekt
  • responsiv layout
  • Dynamisk webbsida
  • Quiz-spel

Karriär inom webbutveckling

En webbutvecklare är en programmerare som specialiserat sig på utveckling av World Wide Web-applikationer med hjälp av en klientservermodell. De ansvarar också för att designa, koda och modifiera webbplatser, från layout till funktion och enligt kundens specifikationer.

hur man blir en tablåutvecklare

Du kan hitta yrkesverksamma som är utbildade inom webbutveckling som arbetar som dataprogrammerare, mjukvaruutvecklare och till och med webbfokuserade grafiska formgivare. Några av de viktigaste jobbrollerna är:

• Webbutvecklare - Webbutvecklare använder programmerings- och teknologifärdigheter för att konstruera en webbplats utseende och användarupplevelse. Den genomsnittliga lönen är runt Rs. 480,694.
• Datorprogrammerare - Datorprogrammerare utvecklar och justerar programvarans funktion genom att skriva och testa kod. Det genomsnittliga löneintervallet är mellan 232 000 Rs och 1 miljon rs.
• Webbdesigner - Webbdesigners arbetar på framsidan av en webbplats och handlar om yttre utseende och användarupplevelse. Den genomsnittliga lönen för en webbdesigner i Indien är 281 410 Rs.
• Grafisk webbdesigner - En grafisk designer arbetar för att förbättra användarupplevelsen eller applikationen genom att skapa grafik och andra visuella medier. Den genomsnittliga lönen varierar från Rs 118k till Rs 619k.

Nu när du känner till karriärtillväxt, låt oss ta en titt på några av webbutvecklingsprojekten som hjälper dig att förstå processen för webbdesign bättre och också bygga dina egna projekt.

Webbutvecklingsprojekt

Webbutvecklingsprojekten är indelade i tre nivåer- Grundläggande, mellanliggande, och Förskott . Vi kommer att diskutera olika nivåer av projekt och hur koden fungerar.Detta hjälper dig att bättre förstå processen för webbutveckling och ge dig idén att bygga dina egna webbplatser med olika skriptspråk. Så, låt oss börja med projektets grundnivå.

responsiv layout

En viktig roll för en frontend-utvecklare är att förstå de responsiva designprinciperna och hur man implementerar dem på kodningssidan.

I det här projektet kommer vi att skapa en grundläggande layout för en responsiv sida och hur den fungerar i webbutveckling för att bygga multifunktionella webbplatser. Det första steget är att skapa HTML-layouten och utforma webbsidans huvuddel.

* {box-dimensionering: border-box} .meny {float: vänster bredd: 20% textjustering: center}. meny a {background-color: # deeba6 padding: 8px marginal-top: 7px display: block width: 100 % färg: svart} .main {float: vänster bredd: 60% padding: 0 20px} .höger {bakgrundsfärg: # f0b569 float: vänster bredd: 20% padding: 15px margin-top: 7px text-align: center} @media endast skärm och (max-bredd: 620px) {/ * För mobiltelefoner: * / .meny, .main, .right {width: 100%}} Föregående fråga Nästa fråga Skicka frågesport

Därefter behöver vi ett sätt att bygga en frågesport, visa resultat och sätta ihop allt. Vi kan börja med att lägga upp våra funktioner med hjälp av JavaScript.

quiz.js

(funktion () {const myQuestions = [{fråga: 'Vilken havsdjur har tre hjärtan?', svar: {a: 'Bläckfisk', b: 'Blåval', c: 'Havssköldpadda'}, korrektAnsvar: 'a '}, {fråga:' Vad är det italienska ordet för paj? ', svarar: {a:' Donut ', b:' Pajkaka ', c:' Pizza '}, korrekt Svar:' c '}, {fråga: 'Vilket är det enda däggdjuret som inte kan hoppa?', Svarar: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// vi behöver en plats för att lagra HTML-utgång const output = [] // för varje fråga ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vi vill lagra listan över svarsalternativ const svar = [] // och för varje tillgängligt svar ... för (bokstav i aktuell fråga.answers) {// ... lägg till en HTML-alternativknapp Answer.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // lägg till denna fråga och dess svar på output output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // slutligen kombinera vår outpu t lista in i en HTML-sträng och lägg den på sidan quizContainer.innerHTML = output.join ('')} funktion showResults () {// samla svarbehållare från vår frågesport const answerContainers = quizContainer.querySelectorAll ('. svar') // hålla koll på användarens svar låt numCorrect = 0 // för varje fråga ... myQuestions.forEach ((currentQuestion, questionNumber) => {// hitta valt svar const answerContainer = answerContainers [questionNumber] const selector = `label input [ namn = fråga $ {questionNumber}]: markerat` const userAnswer = (answerContainer.querySelector (väljare) || {}). värde const answerID = (answerContainer.querySelector (väljare | | {}). id const selector1 = `label [id = '$ {answerID}']` // Välj användarens svar var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // om svaret är korrekt om (userAnswer === currentQuestion.correctAnswer) { // lägg till antalet korrekta svar numCorrect ++ // färg svaren gröna //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} annat {// om svar är fel eller tomt // färga svaren rött answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // visa antalet korrekta svar av totalt resultatContainer.innerHTML = `$ {numCorrect} av $ {myQuestions.length}`} - funktionen showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slides [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} annat {tidigareButton.style.display = 'inline-block'} om (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} annat {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 ('submit') // visa frågesport genast buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('nästa ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // vid skicka, visa resultat submitButton.addEventListener (' klicka ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

Slutligen kan vi använda CSS för att lägga till olika stilar i detta spel.

suddig logik i artificiell intelligens

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 marginal-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block marginal-bottom: 10px } -knapp {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: pekare marginal-botten: 20px} -knapp: sväva {bakgrundsfärg: # 38a} .glid {position: absolut vänster: 0px topp: 0px bredd: 100% z-index: 1 opacitet: 0 övergång: opacitet 0,5s} .aktiv- bild {opacitet: 1 z-index: 2}. quiz-container {position: relativ höjd: 200 pixlar marginal-topp: 40 pixlar}

Produktion:

Detta var några av webbutvecklingsprojekten. med detta har vi kommit till slutet av den här artikeln. Jag hoppas att du förstod de olika nivåerna av projekt och fick idén om hur du bygger din egen webbsida och utformar dem efter dina behov.

sockelprogrammering i java-exempel

Nu när du känner till JavaScript-loopar, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i ”Webbutvecklingsprojekt” så återkommer vi till dig.