Projetos de desenvolvimento da Web: saiba como criar e projetar páginas da Web

De acordo com TechRepublic , o desenvolvimento da web é uma das dez habilidades de tecnologia mais importantes em 2019.O emprego de desenvolvedores da web deve crescer 15% de 2016 a 2026, muito mais rápido do que a média para todas as ocupações. Este é o momento certo para aprimorar suas habilidades e iniciar sua carreira de desenvolvedor web. Neste artigo, discutiremos alguns dos Projetos que o ajudarão a criar aplicativos por conta própria na seguinte sequência:

• Carreira em Desenvolvimento Web
• Projetos de Desenvolvimento Web
  • Layout responsivo
  • Página da web dinâmica
  • Quiz Game

Carreira em Desenvolvimento Web

Um desenvolvedor da web é um programador especializado no desenvolvimento de aplicativos da World Wide Web usando um modelo cliente-servidor. Eles também são responsáveis ​​por projetar, codificar e modificar sites, do layout à função e de acordo com as especificações do cliente.

print_r em php

Você pode encontrar profissionais treinados em desenvolvimento web trabalhando como programadores de computador, engenheiros de software e até mesmo designers gráficos com foco na web. Algumas das principais funções de trabalho são:

• Web Developer - Os desenvolvedores da Web usam habilidades de programação e tecnologia para construir a aparência e a experiência do usuário de um site. O salário médio é de cerca de Rs. 480.694.
• Programador de computador - Os programadores de computador desenvolvem e ajustam a função adequada do software escrevendo e testando o código. A faixa salarial média está entre Rs 232k a Rs 1 milhão.
• Web designer - Web designers trabalham no front-end de um site e se preocupam com a aparência externa e a experiência do usuário. O salário médio de um Web Designer na Índia é Rs 281.410.
• Designer gráfico da web - Um designer gráfico trabalha para aprimorar a experiência do usuário ou aplicativo criando gráficos e outras mídias visuais. O salário médio varia de Rs 118k a Rs 619k.

Agora que você sabe sobre o crescimento da carreira, vamos dar uma olhada em alguns dos Projetos de Desenvolvimento da Web que o ajudarão a entender melhor o processo de design da Web e também a construir seus próprios projetos.

Projetos de Desenvolvimento Web

Os Projetos de Desenvolvimento da Web são divididos em três níveis- Básico, Intermediário, e Avançar . Discutiremos os diferentes níveis de projetos e como o código funciona.Isso ajudará você a entender melhor o processo de desenvolvimento web e fornecerá a ideia de construir seus próprios sites usando diferentes linguagens de script. Então, vamos começar com o projeto de nível básico.

Layout responsivo

Uma das principais funções de um desenvolvedor de front-end é entender os princípios de design responsivo e como implementá-los no lado da codificação.

Neste projeto, vamos criar um layout básico de uma página responsiva única e como ela funciona no desenvolvimento web para construção de sites multiuso. A primeira etapa é criar o Layout HTML e projetar a parte principal da página da web.

* {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} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} @media only screen and (max-width: 620px) {/ * Para telefones celulares: * / .menu, .main, .right {width: 100%}} Pergunta anterior Próxima pergunta Enviar questionário

Em seguida, precisaremos criar um questionário, mostrar os resultados e colocar tudo junto. Podemos começar definindo nossas funções com a ajuda de JavaScript.

quiz.js

(function () {const myQuestions = [{question: 'Qual criatura marinha tem três corações?', responde: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' Qual é a palavra italiana para torta? ', responde: {a:' Donut ', b:' Bolo de torta ', c:' Pizza '}, correctAnswer:' c '}, {question: 'Qual é o único mamífero que não consegue pular?', Responde: {a: 'Cobra', b: 'Elefante', c: 'Canguru',}, correctAnswer: 'b'}] function buildQuiz () {// precisaremos de um local para armazenar a saída HTML const output = [] // para cada pergunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// queremos armazenar a lista de opções de resposta const answers = [] // e para cada resposta disponível ... for (letra em currentQuestion.answers) {// ... adicionar um botão de opção HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // adicione esta pergunta e suas respostas ao output output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // finalmente combine nosso outpu t listar em uma string de HTML e colocá-la na página quizContainer.innerHTML = output.join ('')} function showResults () {// reunir contêineres de resposta de nosso questionário const answerContainers = quizContainer.querySelectorAll ('. answers') // acompanhar as respostas do usuário let numCorrect = 0 // para cada pergunta ... myQuestions.forEach ((currentQuestion, questionNumber) => {// localizar a resposta selecionada const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = question $ {questionNumber}]: check` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Selecione a resposta do usuário var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // se a resposta estiver correta if (userAnswer === currentQuestion.correctAnswer) { // adicione ao número de respostas corretas numCorrect ++ // pinte as respostas de verde //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// se a resposta está errado ou em branco // pinte as respostas de vermelho answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // mostra o número de respostas corretas do total de resultsContainer.innerHTML = `$ {numCorrect} de $ {myQuestions.length}`} function showSlide (n) {slides [currentSlide] .classList.remove ('a slide ativo ') slides [n] .classList.add (' slide ativo ') 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 '}} função showNextSlide () {showSlide (currentSlide + 1)} função showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // exibir o questionário imediatamente buildQuiz () const previousButton = document.getElementById ('previous') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // ao enviar, mostrar resultados submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

Finalmente, podemos usar CSS para adicionar estilos diferentes a este jogo.

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) color: #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 } botão {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-bottom: 20px} botão: hover {background-color: # 38a} .slide {position: absoluto left: 0px top: 0px width: 100% Z-index: 1 opacity: 0 transição: opacity 0.5s} .active- slide {opacity: 1 z-index: 2} .quiz-container {position: relative height: 200px margin-top: 40px}

Resultado:

Estes foram alguns dos Projetos de Desenvolvimento Web. com isso, chegamos ao final deste artigo. Espero que você tenha entendido os diferentes níveis de projetos e tenha a ideia de como construir sua própria página web e desenhá-la de acordo com suas necessidades.

passagem por valor vs passagem por referência java

Agora que você sabe sobre os loops de JavaScript, verifique o por Edureka. O Treinamento de Certificação de Desenvolvimento da Web o ajudará a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).

Tem alguma questão para nós? Mencione isso na seção de comentários de “Projetos de desenvolvimento da Web” e entraremos em contato com você.