Projek Pembangunan Web: Tahu Bagaimana Membina & Merangka Halaman Web

Menurut TechRepublic , pembangunan web adalah salah satu daripada 10 kemahiran teknologi terpanas pada tahun 2019.Pekerjaan pembangun web diproyeksikan meningkat 15 peratus dari 2016 hingga 2026, jauh lebih cepat daripada rata-rata untuk semua pekerjaan. Ini adalah masa yang tepat untuk meningkatkan kemahiran anda dan memulakan karier pembangun web anda. Dalam artikel ini, kita akan membincangkan beberapa Projek yang akan membantu anda membina aplikasi sendiri mengikut urutan berikut:

• Kerjaya dalam Pembangunan Web
• Projek Pembangunan Web
  • Susun atur Responsif
  • Laman Web Dinamik
  • Permainan Kuiz

Kerjaya dalam Pembangunan Web

Pembangun web adalah pengaturcara yang pakar dalam pengembangan aplikasi World Wide Web menggunakan model pelayan pelanggan. Mereka juga bertanggung jawab untuk merancang, mengekod dan mengubah laman web, dari tata letak hingga berfungsi dan sesuai dengan spesifikasi pelanggan.

Anda boleh menemui profesional yang terlatih dalam pembangunan web yang bekerja sebagai pengaturcara komputer, jurutera perisian, dan bahkan pereka grafik yang berfokus pada web. Beberapa peranan pekerjaan Utama adalah:

• Pembangun Web - Pembangun web menggunakan kemahiran pengaturcaraan dan teknologi untuk membina penampilan dan pengalaman pengguna laman web. Gaji purata sekitar Rs. 480,694.
• Pemprogram komputer - Pengaturcara komputer mengembangkan dan menyesuaikan fungsi perisian yang betul dengan menulis dan menguji kod. Julat gaji purata antara Rs 232k hingga Rs 1m.
• Pereka web - Pereka laman web bekerja di bahagian depan laman web dan mementingkan penampilan dan pengalaman pengguna. Gaji purata untuk Pereka Web di India ialah Rs 281,410.
• Pereka Web Grafik - Pereka grafik berfungsi untuk meningkatkan pengalaman atau aplikasi pengguna dengan membuat grafik dan media visual lain. Gaji purata antara Rs 118k hingga Rs 619k.

Sekarang setelah anda mengetahui tentang pertumbuhan kerjaya, mari kita lihat beberapa Projek Pembangunan Web yang akan membantu anda memahami proses merancang web dengan lebih baik dan juga membina projek anda sendiri.

Projek Pembangunan Web

Projek Pembangunan Web terbahagi kepada tiga tahap- Asas, Menengah, dan Pendahuluan . Kami akan membincangkan pelbagai tahap projek dan bagaimana kod tersebut berfungsi.Ini akan membantu anda memahami proses pengembangan web dengan lebih baik dan memberi anda idea untuk membina laman web anda sendiri menggunakan bahasa skrip yang berbeza. Oleh itu, mari kita mulakan dengan Projek peringkat asas.

Susun atur Responsif

Salah satu peranan utama pemaju bahagian depan adalah memahami prinsip reka bentuk responsif dan bagaimana melaksanakannya dari sisi pengekodan.

Dalam projek ini, kami akan membuat susun atur asas satu halaman responsif dan bagaimana ia berfungsi dalam pembangunan web untuk membina laman web pelbagai guna. Langkah pertama adalah membuat HTML Layout dan merancang bahagian utama halaman web.

bagaimana cara kerja tostring di java

* {box-sizing: border-box} .menu {float: kiri lebar: 20% text-align: center} .menu a {background-color: # deeba6 padding: 8px margin-top: 7px display: block block: 100 % color: black} .main {float: kiri lebar: 60% padding: 0 20px} .right {background-color: # f0b569 float: kiri kiri: 20% padding: 15px margin-top: 7px text-align: center} Skrin @media sahaja dan (lebar maksimum: 620px) {/ * Untuk telefon bimbit: * / .menu, .main, .right {width: 100%}} Soalan Sebelumnya Soalan Selanjutnya Hantar Kuiz

Seterusnya, kami memerlukan kaedah untuk membina kuiz, menunjukkan hasil, dan menyatukan semuanya. Kita boleh memulakan dengan meletakkan fungsi kita dengan bantuan JavaScript.

kuiz.js

(fungsi () {const myQuestions = [{soalan: 'Makhluk laut mana yang mempunyai tiga hati?', jawapan: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {question:' Apa kata Itali untuk pai? ', jawapan: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: 'Satu-satunya mamalia yang tidak boleh melompat?', Jawapan: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// kita akan memerlukan tempat untuk menyimpan output output HTML = [] // untuk setiap soalan ... myQuestions.forEach ((currentQuestion, questionNumber) => {// kami ingin menyimpan senarai pilihan jawapan const jawapan = [] // dan untuk setiap jawapan yang ada ... untuk (surat di currentQuestion.answers) {// ... tambahkan butang radio HTML Answers.push (`$ {letter}: $ {currentQuestion.answers [surat ]} `}} // tambahkan soalan ini dan jawapannya ke output output.push (` $ {currentQuestion.question} $ {answer.join ('')} `)}) // akhirnya menggabungkan outpu kami t senarai ke dalam satu rentetan HTML dan letakkan di halaman quizContainer.innerHTML = output.join ('')} function showResults () {// kumpulkan bekas jawapan dari kuiz const answerContainers = quizContainer.querySelectorAll ('. jawapan') // pantau jawapan pengguna biarkan numCorrect = 0 // untuk setiap soalan ... myQuestions.forEach ((currentQuestion, questionNumber) => {// cari jawapan yang dipilih const answerContainer = answerContainers [questionNumber] const selector = `input label [ name = question $ {questionNumber}]: check` const userAnswer = (answerContainer.querySelector (pemilih) || {}). value const answerID = (answerContainer.querySelector (pemilih) || {}). id const selector1 = `label [id = '$ {answerID}']` // Pilih jawapan pengguna var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // jika jawapan betul jika (userAnswer === currentQuestion.correctAnswer) { // tambah jumlah jawapan yang betul numCorrect ++ // warnakan jawapan hijau //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} lain {// jika jawapan salah atau kosong // warnakan jawapan merah jawapanElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // tunjukkan bilangan jawapan yang betul daripada jumlah hasilContainer.innerHTML = `$ {numCorrect} daripada $ {myQuestions.length}`} fungsi showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slaid [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {sebelumnyaButton.style.display =' none '} lain-lain {sebelumnyaButton.style.display = 'inline-block'} if (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} yang lain {nextButton.style.display = 'sebaris -block 'submButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} fungsi showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // kuiz paparan segera buildQuiz () const sebelumnyaButton = document.getElementById ('sebelumnya') const nextButton = document.getElementById ('seterusnya ') const slides = document.querySelectorAll ('. slide ') membiarkan currentSlide = 0 showSlide (0) // semasa menghantar, menunjukkan hasil submitButton.addEventListener (' click ', showResult s) sebelumnyaButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

Akhirnya, kita dapat menggunakan CSS untuk menambahkan gaya yang berbeza pada permainan ini.

kuiz.css

@import url (https://fonts.googleapis.com/css?family=Work+Sans:300,600) badan {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}. label jawapan {paparan: blok margin-bottom: 10px } butang {font-family: 'Work Sans', sans-serif font-size: 22px background-color: rgb (218, 167, 57) color: #fff border: 0px border-radius: 3px padding: 20px kursor: pointer margin-bottom: 20px} butang: arahkan {background-color: # 38a} .slide {position: absolut kiri: 0px atas: 0px lebar: 100% z-index: 1 opacity: 0 peralihan: opacity 0.5s} .active- slaid {opacity: 1 z-index: 2} .quiz-container {kedudukan: relatif tinggi: 200px margin-top: 40px}

Pengeluaran:

Ini adalah beberapa Projek Pembangunan Web. dengan ini, kita telah sampai ke akhir artikel ini. Saya harap anda memahami pelbagai peringkat projek dan mendapat idea bagaimana membina laman web anda sendiri dan merancangnya mengikut keperluan anda.

tetapkan jalan java di tingkap

Setelah anda mengetahui tentang Gelung JavaScript, lihat oleh Edureka. Latihan Pengesahan Pembangunan Web akan membantu anda belajar bagaimana membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen 'Projek Pembangunan Web' dan kami akan menghubungi anda.