Према ТецхРепублиц , веб развој је једна од 10 најврућих технолошких вештина у 2019.Предвиђа се да ће запосленост веб програмера порасти за 15 процената од 2016. до 2026. године, много брже од просека за сва занимања. Ово је право време да побољшате своје вештине и започнете каријеру веб програмера. У овом чланку ћемо размотрити неке од Пројекти који ће вам помоћи да самостално направите апликације у следећем низу:
Каријера у веб развоју
Програмер за веб је програмер који се специјализовао за развој апликација широм света користећи модел клијент-сервер. Они су такође одговорни за дизајнирање, кодирање и модификовање веб локација, од изгледа до функције и према спецификацијама клијента.
Можете пронаћи стручњаке обучене за веб развој који раде као рачунарски програмери, софтверски инжењери, па чак и графички дизајнери фокусирани на мрежу. Неке од кључних улога посла су:
- Веб Девелопер - Веб програмери користе вештине програмирања и технологије да би конструисали изглед и корисничко искуство веб локације. Просечна плата је око Рс. 480,694.
- Компјутерски програмер - Рачунарски програмери развијају и прилагођавају исправну функцију софтвера писањем и тестирањем кода. Просечан распон плата је између 232 хиљаде и 1 милион.
- Веб дизајнер - Веб дизајнери раде на предњем делу странице и брину се о спољном изгледу и корисничком искуству. Просечна плата веб дизајнера у Индији је 281.410 рус.
- Графички веб дизајнер - Графички дизајнер ради на побољшању корисничког искуства или апликације стварањем графике и других визуелних медија. Просечна плата креће се од 118 хиљада до 619 хиљада.
Сада када знате за раст у каријери, погледајмо неке од пројеката за веб развој који ће вам помоћи да боље разумете процес веб дизајнирања и да направите сопствене пројекте.
Пројекти за веб развој
Пројекти за веб развој су подељени у три нивоа - Басиц, Интермедиате, и Напред . Разговараћемо о различитим нивоима пројеката и начину рада кода.Ово ће вам помоћи да боље разумете процес израде веб страница и пружиће вам идеју да направите сопствене веб локације користећи различите скриптне језике. Дакле, почнимо са пројектом основног нивоа.
Одговарајући Распоред
Једна од главних улога фронт енд програмера је да разуме принципе прилагодљивог дизајна и како их применити на страни кодирања.
У овом пројекту ћемо створити основни изглед једне одговарајуће странице и како то функционише у веб развоју за изградњу вишенаменских веб локација. Први корак је стварање ХТМЛ изгледа и дизајн главног дела веб странице.
апстракција у ц ++
* {сизе-сизе: бордер-бок} .мену {флоат: лефт видтх: 20% тект-алигн: центер} .мену а {бацкгроунд-цолор: # дееба6 паддинг: 8пк маргин-топ: 7пк дисплаи: блоцк видтх: 100 % цолор: блацк} .маин {флоат: лефт видтх: 60% паддинг: 0 20пк} .ригхт {бацкгроунд-цолор: # ф0б569 флоат: лефт видтх: 20% паддинг: 15пк маргин-топ: 7пк тект-алигн: центер} Екран само за @медиа и (мак-видтх: 620пк) {/ * За мобилне телефоне: * / .мену, .маин, .ригхт {видтх: 100%}} Претходно питање Следеће питање Пошаљите квизЗатим ће нам требати начин да направимо квиз, прикажемо резултате и све то спојимо. Можемо започети постављањем својих функција уз помоћ ЈаваСцрипт-а.
куиз.јс
(функција () {цонст миКуестионс = [{питање: 'Које морско створење има три срца?', одговори: {а: 'Хоботница', б: 'Плави кит', ц: 'Морска корњача'}, тачан одговор: 'а '}, {питање:' Која је италијанска реч за питу? ', одговара: {а:' Крофна ', б:' Торта од пите ', ц:' Пица '}, тачан одговор:' ц '}, {питање: 'Који је једини сисар који не може да скочи?', Одговара: {а: 'Змија', б: 'Слон', ц: 'Клокан',}, цоррецтАнсвер: 'б'}] функција буилдКуиз () {// требат ће нам мјесто за похрањивање ХТМЛ излаза цонст оутпут = [] // за свако питање ... миКуестионс.форЕацх ((цуррентКуестион, куестионНумбер) => {// пожелићемо да похранимо листу избора одговора цонст одговори = [] // и за сваки доступни одговор ... за (писмо у цуррентКуестион.ансверс) {// ... додајте ХТМЛ радио дугме ансвер.пусх (`$ {леттер}: $ {цуррентКуестион.ансверс [писмо ]} `)} // додајте ово питање и његове одговоре у излаз оутпут.пусх (` $ {цуррентКуестион.куестион} $ {ансвер.јоин ('')} `)}) // напокон комбинујемо наш оутпу т списак у један низ ХТМЛ-а и ставите га на страницу куизЦонтаинер.иннерХТМЛ = оутпут.јоин ('')} функција сховРесултс () {// сакупите контејнере за одговоре из нашег квиза цонст ансверЦонтаинерс = куизЦонтаинер.куериСелецторАлл ('. одговори') // пратимо корисникове одговоре лет нумЦоррецт = 0 // за свако питање ... миКуестионс.форЕацх ((цуррентКуестион, куестионНумбер) => {// пронађи изабрани одговор цонст ансверЦонтаинер = ансверЦонтаинерс [куестионНумбер] цонст селецтор = `лабел инпут [ име = питање $ {број питања}]: проверено `цонст усерАнсвер = (ансверЦонтаинер.куериСелецтор (селецтор) || {}). валуе цонст ансверИД = (ансверЦонтаинер.куериСелецтор (селецтор) || {}). ид цонст селецтор1 = `лабел [ид = '$ {ансверИД}']` // Изабери одговор корисника вар ансверЕлем = ансверЦонтаинер.куериСелецтор ( селецтор1) цонст селецтор2 = `лабел [ид = '$ {куестионНумбер} $ {цуррентКуестион.цоррецтАнсвер}']` вар ансверЕлем1 = ансверЦонтаинер.куериСелецтор (селецтор2) // ако је одговор тачан ако (усерАнсвер === цуррентКуестион.цоррецтАнсвер) { // додајте броју тачних одговора нумЦоррецт ++ // одговоре обојите у зелено //цонсоле.лог(ансверЕлем) ансверЕлем.стиле.бацкгроунд = '# 70Ф85А' ансверЕлем.стиле.фонтВеигхт = '900'} елсе {// иф ансвер је погрешно или празно // боје одговоре црвено ансверЕлем1.стиле.цолор = '# 70Ф85А' ансверЕлем.стиле.бацкгроунд = '# ФД2929' ансверЕлем1.стиле.фонтВеигхт = '900' //цонсоле.лог(ансверЦонтаинерс)}}) // прикаже број тачних одговора од укупних резултатаЦонтаинер.иннерХТМЛ = `$ {нумЦоррецт} од $ {миКуестионс.ленгтх}`} функција сховСлиде (н) {слидес [цуррентСлиде] .цлассЛист.ремове ('а цтиве-слиде ') слидес [н] .цлассЛист.адд (' ацтиве-слиде ') цуррентСлиде = н иф (цуррентСлиде === 0) {превиоусБуттон.стиле.дисплаи =' ноне '} елсе {превиоусБуттон.стиле.дисплаи = 'инлине-блоцк'} ако (цуррентСлиде === слидес.ленгтх - 1) {нектБуттон.стиле.дисплаи = 'ноне' субмитБуттон.стиле.дисплаи = 'инлине-блоцк'} елсе {нектБуттон.стиле.дисплаи = 'инлине -блоцк 'субмитБуттон.стиле.дисплаи =' ноне '}} функција сховНектСлиде () {сховСлиде (цуррентСлиде + 1)} функција сховПревиоусСлиде () {сховСлиде (цуррентСлиде - 1)} цонст куизЦонтаинер = доцумент.гетЕлементБиИд (' квиз ') цонст ресултсЦонтаинер = доцумент.гетЕлементБиИд ('ресултс') цонст субмитБуттон = доцумент.гетЕлементБиИд ('субмит') // одмах прикажи квиз буилдКуиз () цонст превиоусБуттон = доцумент.гетЕлементБиИд ('превиоус') цонст нектБуттон = доцумент.гетЕлементБиИд ('нект ') цонст слидес = доцумент.куериСелецторАлл ('. слиде ') лет цуррентСлиде = 0 сховСлиде (0) // он субмит, схов ресултс субмитБуттон.аддЕвентЛистенер (' цлицк ', сховРесулт с) превиоусБуттон.аддЕвентЛистенер ('цлицк', сховПревиоусСлиде) нектБуттон.аддЕвентЛистенер ('цлицк', сховНектСлиде)}) ()Коначно, можемо користити ЦСС за додавање различитих стилова у ову игру.
квиз.цсс
@импорт урл (хттпс://фонтс.гооглеапис.цом/цсс?фамили=Ворк+Санс:300,600) боди {фонт-сизе: 30пк фонт-фамили: 'Ворк Санс', санс-сериф цолор: ргб (24, 23 , 23) фонт-веигхт: 300 тект-алигн: центер бацкгроунд-цолор: # ф8е8ф2} х1 {фонт-веигхт: 300 маргин: 0пк паддинг: 10пк сизе фонт: 40пк бацкгроунд-цолор: ргб (9, 107, 102) боја: #ффф} .питање {величина фонта: 40пк маргин-боттом: 10пк} .одговори {маргин-боттом: 20пк тект-алигн: лефт дисплаи: инлине-блоцк} .назнака одговора {дисплаи: блоцк маргин-боттом: 10пк } дугме {породица фонтова: 'Ворк Санс', санс-сериф величина фонта: 22пк боја позадине: ргб (218, 167, 57) боја: #ффф ивица: 0пк ивица-радијус: 3пк подлога: 20пк курзор: показивач маргин-боттом: 20пк} дугме: ховер {бацкгроунд-цолор: # 38а} .слиде {положај: апсолутно лево: 0пк горе: 0пк ширина: 100% з-индекс: 1 непрозирност: 0 прелаз: непрозирност 0,5 с}. слајд {непрозирност: 1 з-индекс: 2} .куиз-цонтаинер {позиција: релативна висина: 200пк маргин-топ: 40пк}Излаз:
Ово су били неки од пројеката веб развоја. овим смо дошли до краја овог чланка. Надам се да сте разумели различите нивое пројеката и добили идеју како да направите сопствену веб страницу и дизајнирате их према својим потребама.
структуре података и алгоритми у Јава туториалу
Сада када знате за ЈаваСцрипт петље, погледајте Едурека. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).
Имате питање за нас? Молимо вас да то спомињете у одељку за коментаре „Пројекти за веб развој“ и јавићемо вам се.