Berdasarkan TechRepublic , pengembangan web adalah salah satu dari 10 keterampilan teknologi terpanas di tahun 2019.Pekerjaan pengembang web diproyeksikan tumbuh 15 persen dari 2016 hingga 2026, jauh lebih cepat daripada rata-rata untuk semua pekerjaan. Ini adalah waktu yang tepat untuk meningkatkan keterampilan Anda dan memulai karier pengembang web Anda. Pada artikel ini, kita akan membahas beberapa di antaranya Proyek yang akan membantu Anda membangun aplikasi sendiri dalam urutan berikut:
Karir dalam Pengembangan Web
Pengembang web adalah seorang programmer yang mengkhususkan diri dalam pengembangan aplikasi World Wide Web menggunakan model klien-server. Mereka juga bertanggung jawab untuk merancang, membuat kode, dan memodifikasi situs web, dari tata letak hingga berfungsi dan sesuai dengan spesifikasi klien.
Anda dapat menemukan profesional terlatih dalam pengembangan web yang bekerja sebagai pemrogram komputer, insinyur perangkat lunak, dan bahkan desainer grafis yang berfokus pada web. Beberapa dari peran pekerjaan utama adalah:
- Pengembang Web - Pengembang web menggunakan keterampilan pemrograman dan teknologi untuk membangun tampilan dan pengalaman pengguna situs. Gaji rata-rata sekitar Rs. 480.694.
- Programmer komputer - Pemrogram komputer mengembangkan dan menyesuaikan fungsi perangkat lunak yang tepat dengan menulis dan menguji kode. Kisaran gaji rata-rata adalah antara Rs 232 ribu hingga Rs 1 juta.
- Desainer web - Desainer web bekerja di bagian depan situs dan memperhatikan tampilan luar dan pengalaman pengguna. Gaji rata-rata untuk Desainer Web di India adalah Rs 281.410.
- Desainer Web Grafis - Seorang desainer grafis bekerja untuk meningkatkan pengalaman pengguna atau aplikasi dengan membuat grafik dan media visual lainnya. Gaji rata-rata berkisar dari Rs 118k hingga Rs 619k.
Sekarang setelah Anda mengetahui tentang pertumbuhan karier, mari kita lihat beberapa Proyek Pengembangan Web yang akan membantu Anda memahami proses mendesain web dengan lebih baik dan juga membangun proyek Anda sendiri.
temukan elemen terbesar dalam array java
Proyek Pengembangan Web
Proyek Pengembangan Web dibagi menjadi tiga tingkatan- Dasar, Menengah, dan Muka . Kami akan membahas berbagai level proyek dan cara kerja kode.Ini akan membantu Anda memahami proses pengembangan web dengan lebih baik dan memberi Anda ide untuk membangun situs web Anda sendiri menggunakan bahasa skrip yang berbeda. Jadi, mari kita mulai dengan Proyek tingkat dasar.
Tata Letak Responsif
Salah satu peran utama developer front end adalah untuk memahami prinsip desain responsif dan cara menerapkannya di sisi pengkodean.
Dalam proyek ini, kami akan membuat tata letak dasar dari satu halaman responsif dan cara kerjanya dalam pengembangan web untuk membangun situs web multi guna. Langkah pertama adalah membuat Tata Letak HTML dan mendesain bagian kepala halaman 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 dan (max-width: 620px) {/ * Untuk ponsel: * / .menu, .main, .right {width: 100%}} Pertanyaan Sebelumnya Pertanyaan Berikutnya Kirim KuisSelanjutnya, kita memerlukan cara untuk membuat kuis, menunjukkan hasil, dan menggabungkan semuanya. Kita bisa mulai dengan meletakkan fungsi kita dengan bantuan JavaScript.
quiz.js
(function () {const myQuestions = [{pertanyaan: 'Makhluk laut manakah yang memiliki tiga hati?', jawaban: {a: 'Octopus', b: 'Blue Whale', c: 'Sea Turtle'}, correctAnswer: 'a '}, {pertanyaan:' Apa bahasa Italia untuk pie? ', jawaban: {a:' Donut ', b:' Pie cake ', c:' Pizza '}, correctAnswer:' c '}, {question: 'Manakah satu-satunya mamalia yang tidak bisa melompat?', Jawaban: {a: 'Snake', b: 'Elephant', c: 'Kangaroo',}, correctAnswer: 'b'}] function buildQuiz () {// kita memerlukan tempat untuk menyimpan output HTML const output = [] // untuk setiap pertanyaan ... myQuestions.forEach ((currentQuestion, questionNumber) => {// kami akan menyimpan daftar pilihan jawaban const answer = [] // dan untuk setiap jawaban yang tersedia ... untuk (letter in currentQuestion.answers) {// ... tambahkan tombol radio HTML Answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // tambahkan pertanyaan ini dan jawabannya ke output output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)}) // akhirnya gabungkan outpu kita t daftar ke dalam satu string HTML dan letakkan di halaman quizContainer.innerHTML = output.join ('')} function showResults () {// kumpulkan wadah jawaban dari quiz const answerContainers = quizContainer.querySelectorAll ('. Answers') // lacak jawaban pengguna let numCorrect = 0 // untuk setiap pertanyaan ... myQuestions.forEach ((currentQuestion, questionNumber) => {// temukan jawaban yang dipilih const answerContainer = answerContainers [questionNumber] const selector = `label input [ nama = pertanyaan $ {questionNumber}]: diperiksa` const userAnswer = (answerContainer.querySelector (selector) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Pilih jawaban pengguna var answerElem = answerContainer.querySelector ( selector1) const selector2 = `label [id = '$ {questionNumber} $ {currentQuestion.correctAnswer}']` var answerElem1 = answerContainer.querySelector (selector2) // jika jawaban benar jika (userAnswer === currentQuestion.correctAnswer) { // tambahkan jumlah jawaban yang benar numCorrect ++ // warnai jawaban dengan hijau //console.log(answerElem) answerElem.style.background = '# 70F85A' answerElem.style.fontWeight = '900'} else {// if answer salah atau kosong // warnai jawaban dengan merah answerElem1.style.color = '# 70F85A' answerElem.style.background = '# FD2929' answerElem1.style.fontWeight = '900' //console.log(answerContainers)}}) // tampilkan jumlah jawaban yang benar dari total resultsContainer.innerHTML = `$ {numCorrect} dari $ {myQuestions.length}`} fungsi showSlide (n) {slides [currentSlide] .classList.remove ('a ctive-slide ') slide [n] .classList.add (' active-slide ') currentSlide = n if (currentSlide === 0) {beforeButton.style.display =' none '} else {beforeButton.style.display = 'inline-block'} jika (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} lain {nextButton.style.display = 'inline -block 'submitButton.style.display =' none '}} function showNextSlide () {showSlide (currentSlide + 1)} fungsi showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('results') const submitButton = document.getElementById ('submit') // tampilkan kuis segera buildQuiz () const beforeButton = document.getElementById ('sebelumnya') const nextButton = document.getElementById ('next ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // saat mengirimkan, tampilkan hasil submitButton.addEventListener (' click ', showResult s) beforeButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()Akhirnya, kita dapat menggunakan CSS untuk menambahkan gaya yang berbeda pada game ini.
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 } tombol {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} tombol: hover {background-color: # 38a} .slide {position: absolute left: 0px top: 0px width: 100% z-index: 1 opacity: 0 transisi: opacity 0.5s} .active- geser {opacity: 1 z-index: 2} .quiz-container {position: relative height: 200px margin-top: 40px}Keluaran:
Ini adalah beberapa Proyek Pengembangan Web. dengan ini, kita sampai pada akhir artikel ini. Saya harap Anda memahami berbagai level proyek dan mendapatkan ide tentang cara membuat halaman web Anda sendiri dan mendesainnya sesuai dengan kebutuhan Anda.
stl sort c ++
Sekarang setelah Anda mengetahui tentang JavaScript Loops, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'Proyek Pengembangan Web' dan kami akan menghubungi Anda kembali.