פרויקטים של פיתוח אתרים: ידעו לבנות ולעצב דפי אינטרנט

לפי TechRepublic , פיתוח אתרים הוא אחד מעשרת כישורי הטכנולוגיה החמים ביותר בשנת 2019.התעסוקה של מפתחי אתרים צפויה לגדול ב -15% משנת 2016 ל -2026, הרבה יותר מהר מהממוצע לכל המקצועות. זה הזמן הנכון לשפר את כישוריך ולהתחיל את הקריירה שלך למפתחי אתרים. במאמר זה נדון בחלק מה- פרויקטים שיעזרו לך לבנות יישומים בעצמך ברצף הבא:

• קריירה בפיתוח אתרים
• פרויקטים לפיתוח אתרים
  • פריסה רספונסיבית
  • דף אינטרנט דינמי
  • משחק חידון

קריירה בפיתוח אתרים

מפתח אתרים הוא מתכנת המתמחה בפיתוח יישומי אינטרנט ברחבי העולם באמצעות מודל שרת לקוח. הם גם אחראים על תכנון, קידוד ושינוי אתרים, מפריסה לפונקציה ולפי מפרט הלקוח.

דוגמא לבקר תצוגת java

אתה יכול למצוא אנשי מקצוע שהוכשרו בפיתוח אתרים עובדים כמתכנתים במחשבים, מהנדסי תוכנה ואפילו מעצבים גרפיים ממוקדים באינטרנט. חלק מתפקידי המפתח העיקריים הם:

• מפתח אינטרנט - מפתחי אתרים משתמשים בכישורי תכנות וטכנולוגיה כדי לבנות את המראה ואת חווית המשתמש באתר. השכר הממוצע הוא סביב Rs. 480,694.
• מתכנת מחשבים - מתכנתים מחשבים מפתחים ומתאימים את התפקוד התקין של התוכנה על ידי כתיבה ובדיקת קוד. טווח השכר הממוצע הוא בין 232,000 רופי ל -1 מיליון רופי.
• מעצב אינטרנט - מעצבי אתרים עובדים בקדמת האתר ועוסקים במראה חיצוני ובחוויית משתמש. השכר הממוצע עבור מעצב אתרים בהודו הוא 281,410 רופי.
• מעצב אתרים גרפי - מעצב גרפי פועל לשיפור חוויית המשתמש או היישום על ידי יצירת גרפיקה ומדיה חזותית אחרת. השכר הממוצע נע בין 118,000 רופי ל- 619,000 רופי.

עכשיו שאתה יודע על צמיחה בקריירה, בוא נסתכל על כמה מהפרויקטים לפיתוח אתרים שיעזרו לך להבין טוב יותר את התהליך של עיצוב אתרים וגם לבנות פרויקטים משלך.

פרויקטים לפיתוח אתרים

הפרויקטים לפיתוח אתרים מחולקים לשלוש רמות- בסיסי, ביניים, ו לְקַדֵם . נדון ברמות הפרויקטים השונות ובאופן פעולתו של הקוד.זה יעזור לך להבין טוב יותר את התהליך של פיתוח אתרים ולספק לך את הרעיון לבנות אתרים משלך באמצעות שפות סקריפט שונות. אז בואו נתחיל עם פרויקט ברמה הבסיסית.

פריסה רספונסיבית

תפקיד מרכזי אחד של מפתח חזית הוא להבין את עקרונות העיצוב הרספונסיבי וכיצד ליישם אותם בצד הקידוד.

בפרויקט זה ניצור פריסה בסיסית של דף רספונסיבי יחיד וכיצד הוא עובד בפיתוח אתרים לבניית אתרים רב-תכליתיים. השלב הראשון הוא ליצור את פריסת ה- HTML ולעצב את החלק הראשי של דף האינטרנט.

* {תפריט גודל: תיבה-גבול}. תפריט {צף: רוחב שמאל: 20% יישור טקסט: מרכז}. תפריט א {צבע-רקע: # ריפוד deeba6: שוליים 8 פיקסלים: תצוגה 7 פיקסלים: רוחב בלוק: 100 % color: black} .main {float: רוחב שמאל: 60% ריפוד: 0 20px}. ימין {רקע-color: # f0b569 float: רוחב שמאל: 20% ריפוד: 15px שוליים למעלה: 7px יישור טקסט: center} מסך @media בלבד ו- (רוחב מקסימלי: 620 פיקסלים) {/ * לטלפונים ניידים: * /. תפריט, .main,. Right {width: 100%}} שאלה קודמת שאלה הבאה הגש חידון

בשלב הבא נצטרך דרך לבנות חידון, להציג תוצאות ולהרכיב את הכל. נוכל להתחיל בפריסת הפונקציות שלנו בעזרת JavaScript.

quiz.js

(פונקציה () {const myQuestions = [{שאלה: 'לאיזה יצור ים יש שלושה לבבות?', עונה: {a: 'תמנון', b: 'לוויתן כחול', ג: 'צב ים'}, נכון תשובה: 'a '}, {שאלה:' מה המילה האיטלקית לפאי? ', עונה: {a:' סופגנייה ', b:' עוגת פשטידה ', c:' פיצה '}, נכון תשובה:' c '}, {שאלה: 'איזה היונק היחיד שלא יכול לקפוץ?', עונה: {a: 'נחש', b: 'פיל', c: 'קנגורו',}, correctAnswer: 'b'}] function buildQuiz () {// נצטרך מקום לאחסון פלט ה- HTML const output = [] // לכל שאלה ... myQuestions.forEach ((currentQuestion, questionNumber) => {// נרצה לאחסן את רשימת אפשרויות התשובה const תשובות = [] // ולכל תשובה זמינה ... עבור (אות ב- CurrentQuestion.answers) {// ... הוסף כפתור רדיו HTML answers.push (`$ {letter}: $ {currentQuestion.answers [letter ]} `)} // הוסף שאלה זו ותשובותיה לפלט הפלט.push ('$ {currentQuestion.question} $ {answers.join (' ')}`)}) // סוף סוף לשלב את ה- outpu שלנו לא רשום למחרוזת HTML אחת והכניס אותה לדף quizContainer.innerHTML = output.join ('')} פונקציה showResults () {// אסוף מכולות תשובות מה- quiz const שלנו // עקוב אחר התשובות של המשתמש בוא numCorrect = 0 // לכל שאלה ... myQuestions.forEach ((currentQuestion, questionNumber) => {// מצא תשובה שנבחרה const answerContainer = answerContainers [questionNumber] const selector = `קלט תווית [ שם = שאלה $ {questionNumber}]: מסומן` const userAnswer = (answerContainer.querySelector (בורר) || {}). ערך 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'} אחר {// אם תשובה שגוי או ריק // צבע את התשובות באדום 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 '} אחר {previousButton.style.display = 'inline-block'} אם (currentSlide === slides.length - 1) {nextButton.style.display = 'none' submitButton.style.display = 'inline-block'} אחר {nextButton.style.display = 'מוטבע -block 'submitButton.style.display =' none '}} פונקציה showNextSlide () {showSlide (currentSlide + 1)} פונקציה showPreviousSlide () {showSlide (currentSlide - 1)} const quizContainer = document.getElementById (' quiz ') const resultsContainer = document.getElementById ('תוצאות') const submitButton = document.getElementById ('submit') // להציג מיד חידון buildQuiz () const previousButton = document.getElementById ('הקודם') const nextButton = document.getElementById ('הבא ') const slides = document.querySelectorAll ('. slide ') let currentSlide = 0 showSlide (0) // on submit, show results submitButton.addEventListener (' click ', showResult s) previousButton.addEventListener ('click', showPreviousSlide) nextButton.addEventListener ('click', showNextSlide)}) ()

לבסוף, אנו יכולים להשתמש ב- CSS כדי להוסיף סגנונות שונים למשחק זה.

הגדר נתיב ג'אווה בחלונות

quiz.css

url @import (https://fonts.googleapis.com/css?family=Work+Sans:300,600) גוף {font-size: 30px-family font: 'Work Sans', sans-serif color: rgb (24, 23 , 23) משקל גופן: 300 יישור טקסט: צבע רקע מרכזי: # f8e8f2} h1 {משקל גופן: שוליים 300: ריפוד של 0 פיקסלים: גודל של 10 פיקסלים: צבע רקע של 40 פיקסלים: rgb (9, 107, 102) color: #fff} .question {font-size: 40px margin-bottom: 10px}. תשובות {margin-bottom: 20px יישור טקסט: display left: inline-block}. התווית התשובות {display: block margin-bottom: 10px } כפתור {font-family: 'Work Sans', גודל גופן sans-serif: 22 פיקסלים צבע רקע: rgb (218, 167, 57) צבע: #fff גבול: 0 פיקסלים רדיוס גבול: ריפוד 3 פיקסלים: 20 פיקסלים סמן: מצביע שוליים למטה: 20 פיקסלים} כפתור: רחף {רקע-צבע: # 38 א}. שקופית {מיקום: שמאל מוחלט: 0 פיקסלים למעלה: 0 פיקסלים רוחב: 100% z- אינדקס: 1 אטימות: 0 מעבר: אטימות 0.5 שניות}. פעיל- שקף {אטום: 1 z- אינדקס: 2}. מיכל חידון {מיקום: גובה יחסי: 200 פיקסלים שוליים למעלה: 40 פיקסלים}

תְפוּקָה:

ליצור פרמטר בתמונה

אלה היו כמה מהפרויקטים לפיתוח אתרים. עם זאת, הגענו לסוף מאמר זה. אני מקווה שהבנת את הרמות השונות של הפרויקטים וקיבלת את הרעיון כיצד לבנות דף אינטרנט משלך ולעצב אותם בהתאם לצרכים שלך.

עכשיו שאתה יודע על לולאות JavaScript, בדוק את מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- API של Google ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של 'פרויקטים של בניית אתרים' ונחזור אליך.