Webontwikkelingsprojecten: weet hoe u webpagina's moet bouwen en ontwerpen

Volgens TechRepublic is webontwikkeling een van de 10 beste technische vaardigheden van 2019.De werkgelegenheid van webontwikkelaars zal naar verwachting tussen 2016 en 2026 met 15 procent groeien, veel sneller dan het gemiddelde voor alle beroepen. Dit is het juiste moment om uw vaardigheden te verbeteren en uw carrière als webontwikkelaar te beginnen. In dit artikel bespreken we enkele van de Projecten waarmee u zelf applicaties kunt bouwen in de volgende volgorde:

• Carrière in webontwikkeling
• Webontwikkelingsprojecten
  • Responsieve lay-out
  • Dynamische webpagina
  • Quiz spel

Carrière in webontwikkeling

Een webontwikkelaar is een programmeur die gespecialiseerd is in de ontwikkeling van World Wide Web-applicaties met behulp van een client-server-model. Ze zijn ook verantwoordelijk voor het ontwerpen, coderen en aanpassen van websites, van lay-out tot functie en volgens de specificaties van de klant.

U kunt professionals vinden die zijn opgeleid in webontwikkeling, die werken als computerprogrammeurs, software-ingenieurs en zelfs webgerichte grafische ontwerpers. Enkele van de belangrijkste functies zijn:

• Webontwikkelaar - Webontwikkelaars gebruiken programmeer- en technologische vaardigheden om het uiterlijk en de gebruikerservaring van een site op te bouwen. Het gemiddelde salaris is ongeveer Rs. 480.694.
• Computer programmeur - Computerprogrammeurs ontwikkelen en passen de juiste werking van software aan door code te schrijven en te testen. Het gemiddelde salarisbereik ligt tussen Rs 232k en Rs 1m.
• Webdesigner - Webontwerpers werken aan de voorkant van een site en houden zich bezig met uiterlijk en gebruikerservaring. Het gemiddelde salaris voor een Web Designer in India is Rs 281.410.
• Grafische webdesigner - Een grafisch ontwerper werkt aan het verbeteren van de gebruikerservaring of applicatie door afbeeldingen en andere visuele media te creëren. Het gemiddelde salaris varieert van Rs 118k tot Rs 619k.

Nu u meer weet over carrièregroei, gaan we eens kijken naar enkele van de webontwikkelingsprojecten die u zullen helpen het proces van webontwerp beter te begrijpen en ook uw eigen projecten kunnen bouwen.

Webontwikkelingsprojecten

De webontwikkelingsprojecten zijn onderverdeeld in drie niveaus: Basis, Gemiddeld, en Vooruitgaan . We bespreken de verschillende niveaus van projecten en hoe de code werkt.Dit zal u helpen het proces van webontwikkeling beter te begrijpen en u het idee geven om uw eigen websites te bouwen met verschillende scripttalen. Laten we dus beginnen met het project op basisniveau.

python-klasse __init__

Responsieve lay-out

Een belangrijke rol van een front-end-ontwikkelaar is het begrijpen van de responsieve ontwerpprincipes en hoe deze aan de codeerzijde kunnen worden geïmplementeerd.

In dit project zullen we een basislay-out maken van een enkele responsieve pagina en hoe deze werkt in webontwikkeling voor het bouwen van multifunctionele websites. De eerste stap is om de HTML-lay-out te maken en het hoofdgedeelte van de webpagina te ontwerpen.

* {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} Alleen @media-scherm en (max-width: 620px) {/ * Voor mobiele telefoons: * / .menu, .main, .right {width: 100%}} Vorige vraag Volgende vraag Quiz indienen

Vervolgens hebben we een manier nodig om een ​​quiz te maken, resultaten te laten zien en alles samen te voegen. We kunnen beginnen met het indelen van onze functies met behulp van JavaScript.

quiz.js

(function () {const myQuestions = [{vraag: 'Welk zeedier heeft drie harten?', antwoordt: {a: 'Octopus', b: 'Blauwe vinvis', c: 'Zeeschildpad'}, correctAnswer: 'a '}, {vraag:' Wat is het Italiaanse woord voor taart? ', antwoordt: {a:' Donut ', b:' Taartcake ', c:' Pizza '}, correctAnswer:' c '}, {vraag: 'Wat is het enige zoogdier dat niet kan springen?', Antwoordt: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// we hebben een plaats nodig om de HTML-uitvoer op te slaan const output = [] // voor elke vraag ... myQuestions.forEach ((currentQuestion, questionNumber) => {// we willen de lijst met antwoordkeuzen opslaan const antwoorden = [] // en voor elk beschikbaar antwoord ... for (letter in currentQuestion.answers) {// ... voeg een HTML-keuzerondje antwoorden.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // voeg deze vraag en zijn antwoorden toe aan de output output.push (` $ {currentQuestion.question} $ {answer.join ('')} `)}) // combineer eindelijk onze outpu t lijst in een string van HTML en plaats het op de pagina quizContainer.innerHTML = output.join ('')} functie showResults () {// verzamel antwoordcontainers van onze quiz const answerContainers = quizContainer.querySelectorAll ('.antwoorden') // houd de antwoorden van de gebruiker bij let numCorrect = 0 // voor elke vraag ... myQuestions.forEach ((currentQuestion, questionNumber) => {// vind het geselecteerde antwoord const answerContainer = answerContainers [questionNumber] const selector = `label input [ naam = vraag $ {questionNumber}]: gecontroleerd` const userAnswer = (answerContainer.querySelector (selector) || {}). waarde const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Selecteer het antwoord van de gebruiker var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // als het antwoord juist is if (userAnswer === currentQuestion.correctAnswer) { // voeg numCorrect ++ toe aan het aantal juiste antwoorden // kleur de antwoorden groen //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer is fout of blanco // kleur de antwoorden rood answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // toon aantal juiste antwoorden van de totale resultaten Container.innerHTML = `$ {numCorrect} van $ {myQuestions.length}`} functie showSlide (n) {dia's [currentSlide] .classList.remove ('a ctive-slide ') slides [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} anders {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} anders {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} functie showNextSlide () {showSlide (currentSlide + 1)} functie showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // quiz meteen weergeven buildQuiz () const previousButton = document.getElementById ('vorige') const nextButton = document.getElementById ('volgende ') const slides = document.querySelectorAll ('. slide ') laat currentSlide = 0 showSlide (0) // bij indienen, laat resultaten zien submitButton.addEventListener (' klik ', showResult s) previousButton.addEventListener ('klik', showPreviousSlide) nextButton.addEventListener ('klik', showNextSlide)}) ()

Ten slotte kunnen we CSS gebruiken om verschillende stijlen aan dit spel toe te voegen.

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 marge: 0px opvulling: 10px font-size: 40px achtergrondkleur: rgb (9, 107, 102) kleur: #fff} .question {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block}. antwoorden label {display: block margin-bottom: 10px } knop {font-family: 'Work Sans', sans-serif font-size: 22px achtergrondkleur: rgb (218, 167, 57) kleur: #fff border: 0px border-radius: 3px opvulling: 20px cursor: pointer margin-bottom: 20px} button: hover {background-color: # 38a} .slide {position: absoluut links: 0px boven: 0px breedte: 100% z-index: 1 dekking: 0 overgang: dekking 0.5s} .actief- dia {dekking: 1 z-index: 2} .quiz-container {positie: relatieve hoogte: 200px margin-top: 40px}

Uitgang:

Dit waren enkele van de webontwikkelingsprojecten. hiermee zijn we aan het einde van dit artikel gekomen. Ik hoop dat je de verschillende niveaus van projecten hebt begrepen en het idee hebt gekregen hoe je je eigen webpagina kunt bouwen en deze kunt ontwerpen op basis van je behoeften.

Nu je meer over JavaScript Loops weet, kun je het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).

Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van 'Webontwikkelingsprojecten' en we nemen zo snel mogelijk contact met u op.