에 따르면 TechRepublic , 웹 개발은 2019 년에 가장 인기있는 10 가지 기술 중 하나입니다.웹 개발자 고용은 2016 년부터 2026 년까지 15 % 증가 할 것으로 예상되며 이는 모든 직종의 평균보다 훨씬 빠른 속도입니다. 기술을 향상시키고 웹 개발자 경력을 시작하기에 적합한시기입니다. 이 기사에서는 다음 순서로 직접 애플리케이션을 빌드하는 데 도움이되는 프로젝트 :
웹 개발 경력
웹 개발자는 클라이언트-서버 모델을 사용하는 World Wide Web 애플리케이션 개발을 전문으로하는 프로그래머입니다. 또한 레이아웃에서 기능에 이르기까지 클라이언트의 사양에 따라 웹 사이트를 설계, 코딩 및 수정하는 일도 담당합니다.
컴퓨터 프로그래머, 소프트웨어 엔지니어 및 웹 중심 그래픽 디자이너로 일하는 웹 개발 교육을받은 전문가를 찾을 수 있습니다. 주요 업무 역할 중 일부는 다음과 같습니다.
- 웹 개발자 – 웹 개발자는 프로그래밍 및 기술 기술을 사용하여 사이트의 모양과 사용자 경험을 구성합니다. 평균 급여는 약 Rs입니다. 480,694.
- 컴퓨터 프로그래머 – 컴퓨터 프로그래머는 코드를 작성하고 테스트하여 소프트웨어의 적절한 기능을 개발하고 조정합니다. 평균 급여 범위는 Rs 232k에서 Rs 1m 사이입니다.
- 웹 디자이너 – 웹 디자이너는 사이트의 프런트 엔드에서 작업하며 외관과 사용자 경험에 관심이 있습니다. 인도에서 웹 디자이너의 평균 급여는 Rs 281,410입니다.
- 그래픽 웹 디자이너 – 그래픽 디자이너는 그래픽 및 기타 시각적 미디어를 만들어 사용자 경험 또는 응용 프로그램을 향상시키기 위해 노력합니다. 평균 급여 범위는 Rs 118k에서 Rs 619k입니다.
이제 경력 성장에 대해 알게되었으므로 웹 디자인 프로세스를 더 잘 이해하고 자신의 프로젝트를 구축하는 데 도움이되는 웹 개발 프로젝트를 살펴 보겠습니다.
웹 개발 프로젝트
웹 개발 프로젝트는 세 단계로 나뉩니다. 기본, 중급, 과 전진 . 다양한 수준의 프로젝트와 코드 작동 방식에 대해 설명합니다.이렇게하면 웹 개발 프로세스를 더 잘 이해하고 다양한 스크립팅 언어를 사용하여 자신의 웹 사이트를 구축 할 수있는 아이디어를 얻을 수 있습니다. 이제 기본 수준의 프로젝트부터 시작하겠습니다.
반응 형 레이아웃
프런트 엔드 개발자의 주요 역할 중 하나는 반응 형 디자인 원칙을 이해하고이를 코딩 측면에서 구현하는 방법입니다.
이 프로젝트에서는 단일 반응 형 페이지의 기본 레이아웃을 만들고 다목적 웹 사이트를 구축하기 위해 웹 개발에서 작동하는 방식을 만듭니다. 첫 번째 단계는 HTML 레이아웃을 만들고 웹 페이지의 헤드 부분을 디자인하는 것입니다.
* {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 : 왼쪽 너비 : 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) {/ * 휴대폰 : * / .menu, .main, .right {width : 100 %}} 이전 질문 다음 질문 퀴즈 제출다음으로 퀴즈를 만들고, 결과를 표시하고, 모두 종합 할 수있는 방법이 필요합니다. JavaScript의 도움으로 함수를 레이아웃하는 것으로 시작할 수 있습니다.
quiz.js
(function () {const myQuestions = [{question : 'Which sea creature has three hearts?', answers : {a : 'Octopus', b : 'Blue Whale', c : 'Sea Turtle'}, correctAnswer : 'a '}, {질문 :'파이에 대한 이탈리아어 단어는 무엇입니까? ', 답변 : {a :'도넛 ', b :'파이 케이크 ', c :'피자 '}, correctAnswer :'c '}, {질문 : '도약 할 수없는 유일한 포유류는 누구입니까?', 답변 : {a : '뱀', b : '코끼리', c : '캥거루',}, correctAnswer : 'b'}] function buildQuiz () {// HTML 출력을 저장할 장소가 필요합니다 const output = [] // 각 질문에 대해 ... myQuestions.forEach ((currentQuestion, questionNumber) => {// 답변 선택 목록을 저장하고 싶습니다 const Answers = [] // 사용 가능한 각 답변에 대해 ... for (currentQuestion.answers의 문자) {// ... HTML 라디오 버튼 추가 answers.push (`$ {letter} : $ {currentQuestion.answers [letter ]}`)} //이 질문과 답을 출력에 추가 output.push (`$ {currentQuestion.question} $ {answers.join ( '')}`)}) // 마지막으로 출력을 결합합니다. 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 {// 답변 인 경우 잘못되었거나 비어 있음 // 답변에 빨간색 색상 지정 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 ( '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) 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 } 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 cursor : pointer margin-bottom : 20px} button : hover {background-color : # 38a} .slide {position : 절대 왼쪽 : 0px top : 0px 너비 : 100 % z-index : 1 opacity : 0 transition : opacity 0.5s} .active- 슬라이드 {불투명도 : 1 z-index : 2} .quiz-container {위치 : 상대 높이 : 200px margin-top : 40px}산출:
이것은 웹 개발 프로젝트의 일부였습니다. 이것으로 우리는이 기사의 끝까지 왔습니다. 다양한 수준의 프로젝트를 이해하고 자신의 웹 페이지를 구축하고 필요에 따라 디자인하는 방법에 대한 아이디어를 얻었기를 바랍니다.
이제 JavaScript Loops에 대해 알았으니 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
질문이 있으십니까? '웹 개발 프로젝트'의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.
html과 xml의 차이점은 무엇입니까