Проекты веб-разработки: умение создавать и проектировать веб-страницы

Согласно с TechRepublic , веб-разработка - один из 10 самых популярных технических навыков в 2019 году.По прогнозам, с 2016 по 2026 год занятость веб-разработчиков вырастет на 15 процентов, что намного быстрее, чем в среднем по всем профессиям. Это подходящее время, чтобы улучшить свои навыки и начать карьеру веб-разработчика. В этой статье мы обсудим некоторые из Проекты, которые помогут вам самостоятельно создавать приложения в следующей последовательности:

• Карьера в веб-разработке
• Проекты веб-разработки
  • Адаптивный макет
  • Динамическая веб-страница
  • Викторина

Карьера в веб-разработке

Веб-разработчик - это программист, который специализируется на разработке приложений World Wide Web с использованием модели клиент-сервер. Они также несут ответственность за проектирование, кодирование и изменение веб-сайтов, от макета до функций и в соответствии со спецификациями клиента.

Вы можете найти профессионалов, обученных веб-разработке, работающих программистами, разработчиками программного обеспечения и даже графическими дизайнерами, ориентированными на веб. Некоторые из ключевых рабочих ролей:

• Веб-разработчик - Веб-разработчики используют навыки программирования и технологий для создания внешнего вида и удобства работы пользователей с сайтом. Средняя зарплата составляет около рупий. 480 694.
• Компьютерный программист - Компьютерные программисты разрабатывают и настраивают правильное функционирование программного обеспечения путем написания и тестирования кода. Средняя заработная плата составляет от 232 000 до 1 миллиона рупий.
• Веб-дизайнер - Веб-дизайнеры работают над интерфейсом сайта и заботятся о внешнем виде и опыте пользователя. Средняя зарплата веб-дизайнера в Индии составляет 281 410 рупий.
• Графический веб-дизайнер - Графический дизайнер работает над улучшением взаимодействия с пользователем или приложением, создавая графику и другие визуальные материалы. Средняя зарплата колеблется от 118 000 до 619 000 рупий.

Теперь, когда вы знаете о карьерном росте, давайте взглянем на некоторые проекты веб-разработки, которые помогут вам лучше понять процесс веб-дизайна, а также создать свои собственные проекты.

Проекты веб-разработки

Проекты веб-разработки делятся на три уровня: Базовый, Средний, и Заранее . Мы обсудим разные уровни проектов и то, как работает код.Это поможет вам лучше понять процесс веб-разработки и подскажет, как создавать собственные веб-сайты с использованием разных языков сценариев. Итак, начнем с базового уровня Project.

Адаптивный макет

Одна из основных ролей фронтенд-разработчика - понять принципы адаптивного дизайна и способы их реализации на стороне кодирования.

В этом проекте мы создадим базовый макет одной адаптивной страницы и то, как он работает в веб-разработке для создания многоцелевых веб-сайтов. Первый шаг - создать HTML-макет и спроектировать головную часть веб-страницы.

* {box-sizing: border-box} .menu {float: left width: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: ширина блока: 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} @media only screen и (max-width: 620px) {/ * Для мобильных телефонов: * / .menu, .main, .right {width: 100%}} Предыдущий вопрос Следующий вопрос Отправить тест

Затем нам понадобится способ составить тест, показать результаты и собрать все вместе. Мы можем начать с компоновки наших функций с помощью JavaScript.

quiz.js

(function () {const myQuestions = [{вопрос: 'У какого морского существа три сердца?', ответы: {a: 'Осьминог', b: 'Синий кит', c: 'Морская черепаха »}, правильный ответ:' a '}, {вопрос:' Как по-итальянски пирог? ', ответы: {a:' Пончик ', b:' Пирог ', c:' Пицца '}, правильный ответ:' c '}, {вопрос: «Какое единственное млекопитающее не умеет прыгать?», Отвечает: {a: 'Змея', b: 'Слон', c: 'Кенгуру',}, правильный ответ: 'b'}] function buildQuiz () {// нам понадобится место для хранения вывода HTML const output = [] // для каждого вопроса ... myQuestions.forEach ((currentQuestion, questionNumber) => {// мы хотим сохранить список вариантов ответов const answer = [] // и для каждого доступного ответа ... for (буква в currentQuestion.answers) {// ... добавьте переключатель HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // добавляем этот вопрос и ответы на него в вывод output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)} // наконец объединяем наш outpu t список в одну строку HTML и поместите его на страницу quizContainer.innerHTML = output.join ('')} function showResults () {// собираем контейнеры ответов из нашей викторины const answerContainers = quizContainer.querySelectorAll ('. answers') // отслеживать ответы пользователя let numCorrect = 0 // для каждого вопроса ... myQuestions.forEach ((currentQuestion, questionNumber) => {// найти выбранный ответ const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: checked` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Выберите ответ пользователя var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // если ответ правильный if (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} out of $ {myQuestions.length}`} function showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slides [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 '}} function showNextSlide () {showSlide (currentSlide + 1)} function 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 (' click ', showResult s) previousButton.addEventListener ('щелчок', showPreviousSlide) nextButton.addEventListener ('щелчок', showNextSlide)}) ()

Наконец, мы можем использовать CSS для добавления различных стилей в эту игру.

как использовать мощность в Java

quiz.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', цвет без засечек: 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 {font-size: 40px margin-bottom: 10px} .answers {margin-bottom: 20px text-align: left display: inline-block} .answers label {display: block margin-bottom: 10px } button {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px курсор: указатель margin-bottom: 20px} button: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transition: opacity 0.5s} .active- слайд {opacity: 1 z-index: 2} .quiz-container {position: relative height: 200px margin-top: 40px}

Вывод:

Это были некоторые из проектов веб-разработки. На этом мы подошли к концу статьи. Я надеюсь, что вы поняли разные уровни проектов и получили представление о том, как создать свою собственную веб-страницу и спроектировать ее в соответствии с вашими потребностями.

Теперь, когда вы знаете о циклах JavaScript, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам научиться создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).

Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев «Проекты веб-разработки», и мы свяжемся с вами.