Alapján TechRepublic , a webfejlesztés egyike a 10 legforróbb technológiai készségnek 2019-ben.Az előrejelzések szerint a webfejlesztők foglalkoztatottsága 2016-tól 2026-ig 15 százalékkal nő, ami sokkal gyorsabb, mint az összes foglalkozás átlagának átlaga. Ez a megfelelő alkalom a képességek fejlesztésére és a webfejlesztői karrier megkezdésére. Ebben a cikkben néhányat megvitatunk Olyan projektek, amelyek segítenek önállóan létrehozni alkalmazásokat a következő sorrendben:
Karrier a webfejlesztésben
A webfejlesztő egy olyan programozó, aki a webes alkalmazások fejlesztésére szakosodott, kliens-szerver modell segítségével. Felelősek a weboldalak tervezéséért, kódolásáért és módosításáért, az elrendezéstől a funkcióig és az ügyfél specifikációi szerint.
Megtalálhatja a webfejlesztésben képzett szakembereket, akik számítógépes programozóként, szoftvermérnökökként, sőt web-központú grafikusokként dolgoznak. Néhány kulcsfontosságú munkakör:
- Webfejlesztő - A webfejlesztők programozási és technológiai ismeretekkel építik a webhely megjelenését és felhasználói élményét. Az átlagos fizetés Rs körül van. 480,694.
- Szamítógép programozó - A számítógépes programozók a kód írásával és tesztelésével fejlesztik és igazítják a szoftver megfelelő működését. Az átlagos fizetési tartomány 232 ezer és 1 millió R között van.
- Web designer - A webtervezők a webhely kezelőfelületén dolgoznak, és a külső megjelenéssel és a felhasználói tapasztalatokkal foglalkoznak. Az indiai webdesigner átlagfizetése 281 410 Rs.
- Grafikus Web Designer - A grafikus a grafikus és egyéb vizuális média létrehozásával javítja a felhasználói élményt vagy az alkalmazást. Az átlagos fizetés 118 ezer és 619 ezer forint között mozog.
Most, hogy ismeri a karrier növekedését, vessünk egy pillantást néhány webfejlesztési projektre, amelyek segítenek jobban megérteni a webtervezési folyamatot, és saját projekteket is létrehozhatnak.
Webfejlesztési projektek
A webfejlesztési projekteket három szintre osztják: Alapfokú, Középszintű, és Előleg . Megbeszéljük a projektek különböző szintjeit és a kód működését.Ez segít jobban megérteni a webfejlesztés folyamatát, és ötletet ad arra, hogy saját webhelyeket készítsen különböző szkriptnyelvek segítségével. Kezdjük tehát az alapszintű projekttel.
Reszponszív Elhelyezés
A kezelőfelület fejlesztőinek egyik fő szerepe az adaptív tervezési elvek megértése és a kódolási oldalon történő megvalósításuk módja.
Ebben a projektben elkészítjük az egyetlen adaptív oldal alapvető elrendezését és annak működését a webfejlesztésben a többcélú webhelyek felépítéséhez. Az első lépés a HTML elrendezés létrehozása és a weboldal fejrészének megtervezése.
adatbázis-kapcsolat Java-ban a mysql-lel
* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .menü a {background-color: # deeba6 kitöltés: 8px margin-top: 7px display: blokk szélesség: 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} Csak a @media képernyő és (max. szélesség: 620px) {/ * Mobiltelefonok esetén: * / .menu, .main, .right {width: 100%}} Előző kérdés Következő kérdés Küldje be a kvíztEzután szükségünk lesz egy vetélkedő elkészítésére, az eredmények bemutatására és az összes összeállítására. Kezdhetjük azzal, hogy a JavaScript segítségével meghatározzuk funkcióinkat.
quiz.js
(function () {const myQuestions = [{kérdés: 'Melyik tengeri élőlénynek van három szíve?', válaszai: {a: 'Polip', b: 'Kék bálna', c: 'Tengeri teknős'}, helyesVálasz: 'a '}, {kérdés:' Mi az olasz szó a pite szóhoz? ', így válaszol: {a:' Fánk ', b:' Pite torta ', c:' Pizza '}, helyesVálasz:' c '}, {kérdés: 'Melyik az egyetlen emlős, aki nem tud ugrani?', Így válaszol: {a: 'Snake', b: 'Elephant', c: 'Kenguru',}, correctAnswer: 'b'}] function buildQuiz () {// szükségünk lesz egy helyre a HTML kimenet const output = [] // tárolásához minden kérdésnél ... myQuestions.forEach ((currentQuestion, questionNumber) => {// a válaszválasztási lehetőségek listáját akarjuk tárolni Answers = [] // és minden elérhető válasz esetén a következőre: ((letter in currentQuestion.answers) {// ... adjon hozzá egy HTML választógombot answer.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)}} // adja hozzá ezt a kérdést és válaszait a output.push kimenethez (` $ {currentQuestion.question} $ {Answers.join ('')} `)})} // végül egyesítse az outpu-t t tedd egy HTML-karaktersorozatba, és tedd a quizContainer.innerHTML = output.join ('')} function showResults () {// választárolókat gyűjtsd össze a kvízünkből const answerContainers = quizContainer.querySelectorAll ('.. válaszok') // a felhasználó válaszainak nyomon követése legyen numCorrect = 0 // minden kérdésnél ... myQuestions.forEach ((currentQuestion, questionNumber) => {// a kiválasztott válasz megkeresése const answerContainer = answerContainers [questionNumber] const selector = `címke bevitele [ név = kérdés $ {questionNumber}]: ellenőrzött `const userAnswer = (answerContainer.querySelector (választó) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}'] '// // Válassza ki a felhasználó válaszát var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // ha a válasz helyes, ha (userAnswer === currentQuestion.correctAnswer) { // adja hozzá a helyes válaszok számához numCorrect ++ // színezze a válaszokat zöldre //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// ha válasz helytelen vagy üres // színezze a válaszokat piros színnel answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // a helyes válaszok számának megjelenítése az összes eredménybőlContainer.innerHTML = '$ {numCorrect} a $ {myQuestions.length}'} funkcióból showSlide (n) {diák [currentSlide] .classList.remove ('a ctive-slide ') slide [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slide.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' kvíz ') const resultsContainer = document.getElementById ('results') const submButton = document.getElementById ('submit') // azonnal megjeleníti a kvízt buildQuiz () const previousButton = document.getElementById ('előző') const nextButton = document.getElementById ('következő ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // beküldéskor, az eredmények megjelenítése submButton.addEventListener (' kattintás ', showResult s) previousButton.addEventListener ('kattints', showPreviousSlide) nextButton.addEventListener ('kattints', showNextSlide)}) ()Végül a CSS segítségével különböző stílusokat adhatunk ehhez a játékhoz.
kvíz.css
@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', sans-serif szín: 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) szín: #fff} .question {font-size: 40px margin-bottom: 10px} .válaszol {margin-bottom: 20px text-align: bal kijelző: inline-block} .válasz címke {display: block margin-bottom: 10px } gomb {font-family: 'Work Sans', sans-serif betűméret: 22px háttérszín: rgb (218, 167, 57) szín: #fff szegély: 0px szegélysugár: 3px kitöltés: 20px kurzor: mutató margin-bottom: 20px} gomb: mutasson az egérrel {háttér-szín: # 38a} .slide {pozíció: abszolút bal: 0px felső: 0px szélesség: 100% z-index: 1 fedettség: 0 átmenet: átlátszatlanság 0,5s}. slide {átlátszatlanság: 1 z-index: 2} .quiz-container {pozíció: relatív magasság: 200px margin-top: 40px}Kimenet:
Ezek voltak a webfejlesztési projektek. ezzel a cikk végére értünk. Remélem, megértette a projektek különböző szintjeit, és megkapta az ötletet, hogyan lehet saját weboldalt felépíteni és az igényeinek megfelelően megtervezni.
pass by value vs pass by referencia java
Most, hogy tud a JavaScript hurokról, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat a HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k használatával, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Van egy kérdésünk? Kérjük, említse meg a „Webfejlesztési projektek” megjegyzés rovatban, és kapcsolatba lépünk Önnel.