Ayon kay TechRepublic , ang pagbuo ng web ay isa sa 10 pinakamainit na kasanayan sa tech sa 2019.Ang pagtatrabaho ng mga web developer ay inaasahang lalago ng 15 porsyento mula 2016 hanggang 2026, na mas mabilis kaysa sa average para sa lahat ng mga trabaho. Ito ang tamang oras upang mapagbuti ang iyong mga kasanayan at simulan ang iyong karera sa web developer. Sa artikulong ito, tatalakayin natin ang ilan sa Ang mga proyekto na makakatulong sa iyo na bumuo ng mga application sa iyong sarili sa sumusunod na pagkakasunud-sunod:
Karera sa Pag-unlad sa Web
Ang isang web developer ay isang programmer na dalubhasa sa pag-unlad ng mga application ng World Wide Web gamit ang isang modelo ng client-server. Responsable din sila para sa pagdidisenyo, pag-coding at pagbabago ng mga website, mula sa layout hanggang sa paggana at alinsunod sa mga pagtutukoy ng kliyente.
Maaari kang makahanap ng mga propesyonal na sinanay sa pag-unlad ng web na nagtatrabaho bilang mga programmer ng computer, mga inhinyero ng software, at kahit na mga graphic designer na nakatuon sa web. Ang ilan sa mga pangunahing tungkulin sa trabaho ay:
- Web Developer - Gumagamit ang mga tagabuo ng web ng mga kasanayan sa programa at teknolohiya upang mabuo ang hitsura at karanasan ng gumagamit ng isang site. Ang average na suweldo ay nasa paligid ng Rs. 480,694.
- Computer Programmer - Binubuo at inaayos ng mga programmer ng computer ang wastong pag-andar ng software sa pamamagitan ng pagsulat at pagsubok ng code. Ang average na saklaw ng suweldo ay nasa pagitan ng Rs 232k hanggang Rs 1m.
- Taga-disenyo ng web - Ang mga taga-disenyo ng web ay nagtatrabaho sa front-end ng isang site at nababahala sa panlabas na hitsura at karanasan ng gumagamit. Ang average na suweldo para sa isang Web Designer sa India ay Rs 281,410.
- Graphic Web Designer - Gumagawa ang isang graphic designer upang mapagbuti ang karanasan ng gumagamit o aplikasyon sa pamamagitan ng paglikha ng mga graphic at iba pang visual media. Ang average na suweldo ay mula sa Rs 118k hanggang Rs 619k.
Ngayong alam mo na ang tungkol sa paglaki ng karera, tingnan natin ang ilan sa mga Proyekto sa Pag-unlad ng Web na makakatulong sa iyo na maunawaan ang proseso ng pagdidisenyo ng web nang mas mahusay at bumuo rin ng iyong sariling mga proyekto.
Mga Proyekto sa Pag-unlad ng Web
Ang Mga Proyekto sa Pag-unlad ng Web ay nahahati sa tatlong mga antas- Pangunahin, Magitna, at Pagsulong . Tatalakayin namin ang iba't ibang mga antas ng mga proyekto at kung paano gumagana ang code.Matutulungan ka nitong maunawaan ang proseso ng pag-unlad ng web nang mas mahusay at bibigyan ka ng ideya na bumuo ng iyong sariling mga website gamit ang iba't ibang mga wika sa pag-script. Kaya, magsimula tayo sa pangunahing antas ng Project.
Tumutugon Layout
Ang isang pangunahing papel ng isang developer ng front end ay upang maunawaan ang tumutugon na mga prinsipyo ng disenyo at kung paano ipatupad ang mga ito sa panig ng pag-coding.
Sa proyektong ito, lilikha kami ng isang pangunahing layout ng isang solong tumutugon na pahina at kung paano ito gumagana sa pagbuo ng web para sa pagbuo ng mga multi-purpose website. Ang unang hakbang ay upang likhain ang HTML Layout at idisenyo ang bahagi ng ulo ng web page.
* {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} .kano {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} Ang screen lamang ng @media at (max-width: 620px) {/ * Para sa mga mobile phone: * / .menu, .main,. tama {lapad: 100%}} Naunang Katanungan Susunod na Katanungan Isumite ang PagsusulitSusunod, kakailanganin namin ng isang paraan upang bumuo ng isang pagsusulit, ipakita ang mga resulta, at pagsamahin ang lahat. Maaari kaming magsimula sa pamamagitan ng pagtula ng aming mga pag-andar sa tulong ng JavaScript.
pagsusulit.js
(function () {const myQuestions = [{tanong: 'Aling nilalang sa dagat ang mayroong tatlong puso?', mga sagot: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {tanong:' Ano ang salitang Italyano para sa pie? ', sagot: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {tanong: 'Alin ang nag-iisang mammal na hindi makakatalon?', Mga sagot: {a: 'Ahas', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// kakailanganin namin ng isang lugar upang maiimbak ang output ng output ng HTML = [] // para sa bawat tanong ... myQuestions.forEach ((currentQuestion, questionNumber) => {// nais naming iimbak ang listahan ng mga pagpipilian sa sagot na const mga sagot = [] // at para sa bawat magagamit na sagot ... para sa (liham sa kasalukuyangQuestion.answers) {// ... magdagdag ng isang HTML radio button Answ.push (`$ {sulat}: $ {currentQuestion.answers [sulat ]} `)} // idagdag ang katanungang ito at ang mga sagot nito sa output output.push (` $ {currentQuestion.question} $ {Answ.join (')}`)}) // sa wakas ay pagsamahin ang aming outpu t listahan sa isang string ng HTML at ilagay ito sa pahina ng quizContainer.innerHTML = output.join (')} function showResults () {// magtipon ng mga lalagyan ng sagot mula sa aming quiz const answerContainers = quizContainer.querySelectorAll ('. mga sagot') // subaybayan ang mga sagot ng gumagamit hayaan ang numCorrect = 0 // para sa bawat tanong ... myQuestions.forEach ((currentQuestion, questionNumber) => {// hanapin ang napiling sagot const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: naka-check` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Piliin ang sagot ng gumagamit var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // kung ang sagot ay tama kung (userAnswer === currentQuestion.correctAnswer) { // idagdag sa bilang ng mga tamang sagot numCorrect ++ // kulayan ang mga sagot berde //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} iba pa {// kung sagot ay mali o blangko // kulayan ang mga sagot ng pulang sagotElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style. fontWeight = '900' //console.log(answerContainers)}}) // ipakita ang bilang ng mga tamang sagot sa kabuuang mga resultaContainer.innerHTML = `$ {numCorrect} mula sa $ {myQuestions.length}`} function na showSlide (n) {slide [currentSlide] .classList.remove ('a ctive-slide ') slides [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {nakaraangButton.style.display =' none '} iba pa {nakaraangButton.style.display = 'inline-block'} kung (currentSlide === slides.length - 1) {next Button.style.display = 'none' submitButton.style.display = 'inline-block'} iba pa {nextButton.style.display = 'inline -block 'submitbutton.style.display =' none '}} function na showNextSlide () {showSlide (currentSlide + 1)} function showPreviousSlide () {showSlide (currentSlide - 1)} Const quizContainer = document.getElementById (' quiz ') const mga resultaContainer = document.getElementById ('mga resulta') ay isinumite Button = document.getElementById ('isumite') // ipakita ang pagsusulit kaagad buildQuiz () const nakaraang Button = document.getElementById ('nakaraang') const susunodMasunod = pindutan.getElementById ('susunod ') const slides = document.querySelectorAll ('. slide ') hayaan ang kasalukuyangSlide = 0 showSlide (0) // sa isumite, ipakita ang mga resulta na isumite Button.addEventListener (' click ', showResult s) nakaraangButton.addEventListener ('pag-click', showPreviousSlide) susunod Button.addEventListener ('pag-click', showNextSlide)}) ()Sa wakas, maaari naming gamitin ang CSS upang magdagdag ng iba't ibang mga estilo sa larong ito.
pagsusulit.css
@import url (https://fonts.googleapis.com/css?family=Work+Sanscore00,600) body {font-size: 30px font-family: 'Work Sans', kulay ng sans-serif: 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) kulay: #fff} .tanong {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block}. label ng mga tagatugon {display: block margin-bottom: 10px } pindutan {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-ilalim: 20px} pindutan: i-hover {background-color: # 38a}. Slide {posisyon: absolute left: 0px itaas: 0px lapad: 100% z-index: 1 opacity: 0 transisyon: opacity 0.5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {posisyon: kamag-anak taas: 200px margin-top: 40px}Output:
disenyo ng mga pattern sa php na may halimbawa
Ito ang ilan sa mga Proyekto sa Pag-unlad ng Web. kasama nito, nakarating kami sa katapusan ng artikulong ito. Inaasahan kong naunawaan mo ang iba't ibang mga antas ng mga proyekto at nakuha ang ideya kung paano bumuo ng iyong sariling web page at idisenyo ang mga ito ayon sa iyong mga pangangailangan.
Ngayong alam mo na ang tungkol sa mga JavaScript Loops, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay ng Pag-unlad sa Web na malaman kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'Mga Proyekto sa Pag-unlad ng Web' at babalikan ka namin.