โครงการพัฒนาเว็บ: รู้วิธีสร้างและออกแบบหน้าเว็บ

ตาม TechRepublic การพัฒนาเว็บเป็นหนึ่งใน 10 ทักษะด้านเทคโนโลยีที่ร้อนแรงที่สุดในปี 2019การจ้างงานนักพัฒนาเว็บคาดว่าจะเพิ่มขึ้น 15 เปอร์เซ็นต์จากปี 2016 ถึงปี 2026 ซึ่งเร็วกว่าค่าเฉลี่ยสำหรับทุกอาชีพ นี่เป็นเวลาที่เหมาะสมในการเพิ่มพูนทักษะของคุณและเริ่มอาชีพนักพัฒนาเว็บของคุณ ในบทความนี้เราจะพูดถึงไฟล์ โครงการที่จะช่วยคุณสร้างแอปพลิเคชันด้วยตัวคุณเองตามลำดับต่อไปนี้:

• อาชีพในการพัฒนาเว็บ
• โครงการพัฒนาเว็บ
  • เค้าโครงที่ตอบสนอง
  • หน้าเว็บแบบไดนามิก
  • เกมตอบคำถาม

อาชีพในการพัฒนาเว็บ

นักพัฒนาเว็บคือโปรแกรมเมอร์ที่เชี่ยวชาญในการพัฒนาแอปพลิเคชันเวิลด์ไวด์เว็บโดยใช้โมเดลไคลเอนต์เซิร์ฟเวอร์ พวกเขายังรับผิดชอบในการออกแบบเขียนโค้ดและแก้ไขเว็บไซต์ตั้งแต่รูปแบบไปจนถึงฟังก์ชันและตามข้อกำหนดของลูกค้า

อะไรคืออุดมคติที่ดีที่สุดสำหรับ java

คุณสามารถค้นหาผู้เชี่ยวชาญที่ผ่านการฝึกอบรมด้านการพัฒนาเว็บไซต์ซึ่งทำงานเป็นโปรแกรมเมอร์คอมพิวเตอร์วิศวกรซอฟต์แวร์และแม้แต่นักออกแบบกราฟิกที่เน้นเว็บ หน้าที่หลักบางประการ ได้แก่ :

• นักพัฒนาเว็บ - นักพัฒนาเว็บใช้ทักษะการเขียนโปรแกรมและเทคโนโลยีเพื่อสร้างรูปลักษณ์และประสบการณ์ผู้ใช้ของไซต์ เงินเดือนเฉลี่ยอยู่ที่ประมาณ Rs 480,694.
• นักเขียนโปรแกรมคอมพิวเตอร์ - โปรแกรมเมอร์คอมพิวเตอร์พัฒนาและปรับการทำงานของซอฟต์แวร์ให้เหมาะสมโดยการเขียนและทดสอบโค้ด ช่วงเงินเดือนเฉลี่ยอยู่ระหว่าง Rs 232k ถึง Rs 1m
• นักออกแบบเว็บไซต์ - นักออกแบบเว็บไซต์ทำงานที่ส่วนหน้าของไซต์และเกี่ยวข้องกับรูปลักษณ์ภายนอกและประสบการณ์ของผู้ใช้ เงินเดือนเฉลี่ยสำหรับ Web Designer ในอินเดียคือ 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: left width: 60% padding: 0 20px} .right {background-color: # f0b569 float: left width: 20% padding: 15px margin-top: 7px text-align: center} หน้าจอ @media เท่านั้นและ (max-width: 620px) {/ * สำหรับโทรศัพท์มือถือ: * / .menu, .main, .right {width: 100%}} คำถามก่อนหน้าคำถามถัดไปส่งแบบทดสอบ

ต่อไปเราจะต้องมีวิธีสร้างแบบทดสอบแสดงผลและรวบรวมทั้งหมดเข้าด้วยกัน เราสามารถเริ่มต้นด้วยการจัดวางฟังก์ชันของเราด้วยความช่วยเหลือของ JavaScript

quiz.js

(function () {const myQuestions = [{คำถาม: 'สัตว์ทะเลตัวใดมีหัวใจสามดวง', คำตอบ: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' คำภาษาอิตาลีสำหรับพายคืออะไร? ', คำตอบ: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: 'สัตว์เลี้ยงลูกด้วยนมชนิดใดที่ไม่สามารถกระโดดได้', คำตอบ: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// เราต้องการสถานที่สำหรับจัดเก็บเอาต์พุต HTML const output = [] // สำหรับแต่ละคำถาม ... myQuestions.forEach ((currentQuestion, questionNumber) => {// เราจะจัดเก็บรายการตัวเลือกคำตอบ const คำตอบ = [] // และสำหรับแต่ละคำตอบ ... สำหรับ (ตัวอักษรใน currentQuestion.answers) {// ... เพิ่มปุ่มตัวเลือก HTML answer.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // เพิ่มคำถามนี้และคำตอบลงในเอาต์พุต output.push (` $ {currentQuestion.question} $ {answers.join ('')} `)}) // ในที่สุดก็รวมเอาท์พุทของเรา t แสดงรายการเป็นสตริง HTML หนึ่งสตริงและวางไว้บนหน้า quizContainer.innerHTML = output.join ('')} function showResults () {// รวบรวมคำตอบจากคำถามของเรา const answerContainers = quizContainer.querySelectorAll ('. answers') // ติดตามคำตอบของผู้ใช้ให้ numCorrect = 0 // สำหรับแต่ละคำถาม ... myQuestions.forEach ((currentQuestion, questionNumber) => {// ค้นหาคำตอบที่เลือก const answerContainer = answerContainers [questionNumber] const selector = `label input [ name = คำถาม $ {questionNumber}]: checked` const userAnswer = (answerContainer.querySelector (ตัวเลือก) || {}). value 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 ') 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 '}} ฟังก์ชัน 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 ') ให้ currentSlide = 0 showSlide (0) // เมื่อส่งแสดงผลลัพธ์ submitButton.addEventListener (' คลิก ', showResult s) previousButton.addEventListener ('คลิก', showPreviousSlide) nextButton.addEventListener ('คลิก', showNextSlide)}) ()

สุดท้ายเราสามารถใช้ CSS เพื่อเพิ่มสไตล์ต่างๆให้กับเกมนี้ได้

ค่าเริ่มต้นของ char ใน java

quiz.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) body {font-size: 30px font-family: 'Work Sans', สี sans-serif: 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 {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: 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}

เอาท์พุต:

การเรียงลำดับอาร์เรย์ c ++

นี่คือบางส่วนของโครงการพัฒนาเว็บ ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความนี้ ฉันหวังว่าคุณจะเข้าใจระดับต่างๆของโครงการและมีแนวคิดในการสร้างหน้าเว็บของคุณเองและออกแบบตามความต้องการของคุณ

ตอนนี้คุณรู้เกี่ยวกับ JavaScript Loops แล้วลองดูไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ โครงการพัฒนาเว็บ” แล้วเราจะติดต่อกลับไป