Според TechRepublic , уеб разработката е едно от 10-те най-горещи технически умения през 2019 г.Заетостта на уеб разработчиците се очаква да нарасне с 15 процента от 2016 до 2026 г., много по-бързо от средната за всички професии. Това е подходящият момент да подобрите уменията си и да започнете кариерата си за уеб разработчици. В тази статия ще обсъдим някои от Проекти, които ще ви помогнат да изградите самостоятелно приложения в следната последователност:
Кариера в уеб разработката
Уеб разработчикът е програмист, който е специализиран в разработването на World Wide Web приложения, използвайки модел клиент-сървър. Те също така отговарят за проектирането, кодирането и модифицирането на уебсайтове, от оформление до функция и според спецификациите на клиента.
Можете да намерите професионалисти, обучени в уеб разработката, работещи като компютърни програмисти, софтуерни инженери и дори фокусирани в мрежата графични дизайнери. Някои от ключовите работни роли са:
- Уеб разработчик - Уеб разработчиците използват програмни и технологични умения за изграждане на външния вид и потребителския опит на даден сайт. Средната заплата е около Rs. 480 694.
- Компютърен програмист - Компютърните програмисти разработват и настройват правилната функция на софтуера чрез писане и тестване на код. Средният диапазон на заплатите е между 232 000 и 1 милион рупии.
- Уеб дизайнер - Уеб дизайнерите работят върху предния край на даден сайт и се занимават с външния вид и потребителския опит. Средната заплата за уеб дизайнер в Индия е 281 410 рупии.
- Графичен уеб дизайнер - Графичният дизайнер работи за подобряване на потребителското изживяване или приложение чрез създаване на графики и други визуални носители. Средната заплата варира от 118 000 до 619 000.
След като вече знаете за кариерното израстване, нека разгледаме някои от проектите за уеб разработка, които ще ви помогнат да разберете по-добре процеса на уеб проектиране и също така да изградите свои собствени проекти.
Проекти за уеб разработка
Проектите за уеб разработка са разделени на три нива - Основен, среден, и Предварително . Ще обсъдим различните нива на проекти и как работи кодът.Това ще ви помогне да разберете по-добре процеса на уеб разработка и ще ви даде идеята да изградите свои собствени уебсайтове, използвайки различни скриптови езици. И така, нека да започнем с проекта на основно ниво.
Отзивчиво оформление
Една от основните роли на предния разработчик е да разбере принципите на адаптивния дизайн и как да ги внедри от страна на кодирането.
В този проект ще създадем основно оформление на една отзивчива страница и как тя работи в уеб разработката за изграждане на многофункционални уеб сайтове. Първата стъпка е да създадете HTML оформление и да проектирате главната част на уеб страницата.
Java плитко копие срещу дълбоко копие
* {размер на кутия: граница-кутия} .меню {плувка: ширина вляво: 20% изравняване на текст: център} .меню {фон-цвят: # deeba6 подложка: 8px margin-top: 7px дисплей: ширина на блока: 100 % color: black} .main {float: лява ширина: 60% подложка: 0 20px} .надясно {background-color: # f0b569 float: лява ширина: 20% padding: 15px margin-top: 7px text-align: center} Екран само за @media и (max-width: 620px) {/ * За мобилни телефони: * / .menu, .main, .right {width: 100%}} Предишен въпрос Следващ въпрос Изпратете тестСлед това ще ни е необходим начин за изграждане на тест, показване на резултати и събиране на всичко. Можем да започнем, като изложим функциите си с помощта на JavaScript.
quiz.js
(функция () {const myQuestions = [{въпрос: „Кое морско същество има три сърца?“, отговори: {a: „Октопод“, b: „Син кит“, c: „Морска костенурка“}, коректноОтговор: „a '}, {въпрос:' Коя е италианската дума за пай? ', отговори: {a:' Поничка ', b:' Пай торта ', c:' Пица '}, correctAnswer:' c '}, {question: „Кой е единственият бозайник, който не може да скочи?“, Отговаря: {a: 'Snake', b: 'Elephant', c: 'Kengaroo',}, correctAnswer: 'b'}] функция buildQuiz () {// ще ни трябва място за съхраняване на изходния HTML const output = [] // за всеки въпрос ... myQuestions.forEach ((currentQuestion, questionNumber) => {// ще искаме да съхраним списъка с избори за избор const отговори = [] // и за всеки наличен отговор ... за (писмо в currentQuestion.answers) {// ... добавете HTML радио бутон odgovore.push (`$ {letter}: $ {currentQuestion.answers [писмо ]} `)} // добавяме този въпрос и отговорите му към изхода output.push (` $ {currentQuestion.question} $ {answer.join ('')} ')}) // накрая комбинираме нашия изход t списък в един низ от HTML и го поставете на страницата quizContainer.innerHTML = output.join ('')} функция showResults () {// събиране на контейнери за отговори от нашата викторина const answerContainers = quizContainer.querySelectorAll ('. отговори') // следим отговорите на потребителя let numCorrect = 0 // за всеки въпрос ... myQuestions.forEach ((currentQuestion, questionNumber) => {// намиране на избрания отговор const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: проверено` const userAnswer = (answerContainer.querySelector (selector) || {}). стойност const answerID = (answerContainer.querySelector (селектор) || {}). id const selector1 = `label [id = '$ {answerID}']` // Избор на отговор на потребителя var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // ако отговорът е верен, ако (userAnswer === currentQuestion.correctAnswer) { // добавяне към броя на верните отговори numCorrect ++ // оцветяване на отговорите в зелено //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer е грешно или празно // оцветете отговорите в червено answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // показване на броя на верните отговори от общия резултатContainer.innerHTML = `$ {numCorrect} от $ {myQuestions.length}`} функция showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') слайдове [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {previousButton.style.display =' none '} else {previousButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} else {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} функция showNextSlide () {showSlide (currentSlide + 1)} функция showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // показване на тест веднага buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // при подаване, показване на резултати submitButton.addEventListener (' щракване ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()И накрая, можем да използваме CSS, за да добавим различни стилове към тази игра.
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) цвят: #fff} .question {размер на шрифта: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } бутон {семейство шрифтове: 'Work Sans', sans-serif размер на шрифта: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px cursor: pointer margin-bottom: 20px} бутон: задръжте курсора {background-color: # 38a} .slide {позиция: абсолютно ляво: 0px отгоре: 0px ширина: 100% z-индекс: 1 непрозрачност: 0 преход: непрозрачност 0,5s} .active- слайд {непрозрачност: 1 z-индекс: 2} .quiz-контейнер {позиция: относителна височина: 200px margin-top: 40px}Изход:
Това бяха някои от проектите за уеб разработка. с това стигнахме до края на тази статия. Надявам се, че сте разбрали различните нива на проекти и сте получили идеята как да създадете своя собствена уеб страница и да ги проектирате според вашите нужди.
какво прави скенерът в java
След като вече знаете за цикли на JavaScript, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уебсайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го разположите в Amazon Simple Storage Service (S3).
Имате въпрос към нас? Моля, споменете го в раздела за коментари на „Проекти за уеб разработка“ и ние ще се свържем с вас.