مشاريع تطوير الويب: تعرف على كيفية بناء وتصميم صفحات الويب

وفق TechRepublic ، يعد تطوير الويب أحد أهم 10 مهارات تقنية في عام 2019.من المتوقع أن ينمو توظيف مطوري الويب بنسبة 15 في المائة من عام 2016 إلى عام 2026 ، وهو أسرع بكثير من المتوسط ​​لجميع المهن. هذا هو الوقت المناسب لتحسين مهاراتك وبدء حياتك المهنية كمطور ويب. في هذه المقالة ، سنناقش بعض المشاريع التي ستساعدك على إنشاء التطبيقات بنفسك بالتسلسل التالي:

• الوظيفي في تطوير الويب
• مشاريع تطوير الويب
  • تصميم متجاوب
  • صفحة ويب ديناميكية
  • لعبة مسابقة

الوظيفي في تطوير الويب

مطور الويب هو مبرمج متخصص في تطوير تطبيقات الويب العالمية باستخدام نموذج خادم العميل. كما أنهم مسؤولون عن تصميم مواقع الويب وترميزها وتعديلها ، من التخطيط إلى الوظيفة ووفقًا لمواصفات العميل.

يمكنك العثور على محترفين مدربين على تطوير الويب يعملون كمبرمجي كمبيوتر ، ومهندسي برمجيات ، وحتى مصممي رسوم على الويب. بعض الأدوار الوظيفية الرئيسية هي:

• مطور ويب - يستخدم مطورو الويب مهارات البرمجة والتكنولوجيا لبناء مظهر الموقع وتجربته. متوسط ​​الراتب حوالي روبية. 480،694.
• مبرمج كمبيوتر - يقوم مبرمجو الكمبيوتر بتطوير وضبط الوظيفة المناسبة للبرنامج عن طريق كتابة واختبار الكود. يتراوح متوسط ​​الراتب بين 232 ألف روبية و 1 مليون روبية.
• مصمم الويب - يعمل مصممو الويب على الواجهة الأمامية للموقع ويهتمون بالمظهر الخارجي وتجربة المستخدم. متوسط ​​الراتب لمصمم الويب في الهند هو 281.410 روبية.
• مصمم الويب الجرافيكي - يعمل مصمم الرسوم على تحسين تجربة المستخدم أو التطبيق من خلال إنشاء الرسومات والوسائط المرئية الأخرى. يتراوح متوسط ​​الراتب من 118 ألف روبية إلى 619 ألف روبية.

الآن بعد أن تعرفت على النمو الوظيفي ، دعنا نلقي نظرة على بعض مشاريع تطوير الويب التي ستساعدك على فهم عملية تصميم الويب بشكل أفضل وكذلك بناء مشاريعك الخاصة.

إنهاء برنامج في جافا

مشاريع تطوير الويب

تنقسم مشاريع تطوير الويب إلى ثلاثة مستويات - أساسي ، متوسط ​​، و تقدم . سنناقش المستويات المختلفة للمشاريع وكيف تعمل الكود.سيساعدك هذا على فهم عملية تطوير الويب بشكل أفضل ويوفر لك فكرة إنشاء مواقع الويب الخاصة بك باستخدام لغات البرمجة النصية المختلفة. لذا ، فلنبدأ بالمشروع الأساسي.

تصميم متجاوب

يتمثل أحد الأدوار الرئيسية لمطور الواجهة الأمامية في فهم مبادئ التصميم المتجاوب وكيفية تنفيذها على جانب الترميز.

في هذا المشروع ، سننشئ تخطيطًا أساسيًا لصفحة واحدة سريعة الاستجابة وكيف تعمل في تطوير الويب لبناء مواقع ويب متعددة الأغراض. تتمثل الخطوة الأولى في إنشاء تخطيط 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 only و (max-width: 620px) {/ * للهواتف الجوالة: * / .menu، .main، .right {width: 100٪}} السؤال السابق السؤال التالي إرسال الاختبار

بعد ذلك ، سنحتاج إلى طريقة لإنشاء اختبار ، وإظهار النتائج ، وجمعها معًا. يمكننا البدء بوضع وظائفنا بمساعدة JavaScript.

quiz.js

(function () {const myQuestions = [{question: 'أي مخلوق بحري له ثلاثة قلوب؟' ، الإجابات: {a: 'Octopus'، b: 'Blue Whale'، c: 'Sea Turtle'}، rightAnswer: 'a '}، {question:' What is the Italian word for pie؟ '، answer: {a:' Donut '، b:' Pie cake '، c:' Pizza '}، correctAnswer:' c '}، {question: 'ما هي الثدييات الوحيدة التي لا تستطيع القفز؟' ، يجيب: {a: 'Snake'، b: 'Elephant'، c: 'Kangaroo'،}، correctAnswer: 'b'}] function buildQuiz () {// سنحتاج إلى مكان لتخزين إخراج HTML const الإخراج = [] // لكل سؤال ... myQuestions.forEach ((currentQuestion، questionNumber) => {// سنريد تخزين قائمة خيارات الإجابات const answer = [] // ولكل إجابة متاحة ... لـ (letter in currentQuestion.answers) {// ... أضف زر اختيار HTML Answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // أضف هذا السؤال وإجاباته إلى الإخراج output.push (` $ {currentQuestion.question} $ {Answers.join ('')} `)}) // أخيرًا اجمع outpu الخاص بنا قائمة t في سلسلة HTML واحدة ووضعها في الصفحة quizContainer.innerHTML = output.join ('')} وظيفة showResults () {// جمع حاويات الإجابات من اختبارنا الثابت answerContainers = quizContainer.querySelectorAll ('. Answers') // تتبع إجابات المستخدم اسمح لـ numCorrect = 0 // لكل سؤال ... myQuestions.forEach ((currentQuestion، questionNumber) => {// find selected answer const answerContainer = answerContainers [questionNumber] const selector = `label input [ الاسم = سؤال $ {questionNumber}]: تم الفحص` const userAnswer = (answerContainer.querySelector (محدد) || {}). value const answerID = (answerContainer.querySelector (selector) || {}). id const selector1 = `label [id = '$ {answerID}']` // Select user's answer var answerElem = answerContainer.querySelector (( selector1) const selector2 = `التسمية [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 ') [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 ') 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) حجم الخط: 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 } الزر {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: definitely left: 0px top: 0px width: 100٪ z-index: 1 opacity: 0 transfer: opacity 0.5s} .active- شريحة {opacity: 1 z-index: 2} .quiz-container {position: dynamic height: 200px margin-top: 40px}

انتاج:

كانت هذه بعض مشاريع تطوير الويب. بهذا نكون قد وصلنا إلى نهاية هذا المقال. أتمنى أن تكون قد فهمت المستويات المختلفة للمشاريع وأن تكون قد حصلت على فكرة عن كيفية إنشاء صفحة الويب الخاصة بك وتصميمها وفقًا لاحتياجاتك.

هندسة معمارية mvc في جافا مع مثال

الآن بعد أن تعرفت على JavaScript Loops ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'مشاريع تطوير الويب' وسنعاود الاتصال بك.