יסודות הפריסה המודרנית - קורס חינם מבית Hexlet, הדרכה 9 שעות, תאריך: 5 בדצמבר 2023.
Miscellanea / / December 06, 2023
תלמדו עוד על סימון HTML ועל היכולות של תקן HTML5 המודרני. כמו כן, תקבל ידע בסיסי בסטיילינג באמצעות CSS: למד כיצד לחבר סגנונות, להשתמש בבוררים ולעבוד עם מדורגים. בנוסף ל-HTML ו-CSS, תלמדו לעבוד עם כלי ניפוי הפריסה המובנים של הדפדפן, בפרט Google Chrome DevTools. כתוצאה מכך, תלמדו כיצד להשתמש בשפת סימון HTML לפריסת טקסט באתר, וגם תכירו את הכללים הבסיסיים של שימוש ב-CSS וסגנון טקסט.
תוכל ליישם מיד את הכישורים החדשים שלך - נלמד עבורם עורכי פריסה ותוספים. בסוף כל שיעור תמצאו משימות קטנות עצמאיות. הם מכוונים להבנה מעשית יותר של הנושא המכוסה, ולכן מומלץ מאוד ליישום.
היסודות של הפריסה יהיו שימושיים אם תחליט ללמוד פיתוח אתרים, ללא קשר לכיוון. הידע מהקורס הזה עוזר למתכנתים לסמן נתונים ולהציג אותם באתר. קורס זה מתאים למתחילים ולמפתחים שלא נתקלו
מבוא
הקורס "יסודות הפריסה המודרנית" הוא הבסיס ללימוד היסודות של פריסת אתר HTML ו-CSS. בשיעור זה נדבר בקצרה על מה שאנו לומדים בקורס וכיצד ניתן ליישם את הידע הזה בפועל.
מבוא ל-HTML
השיעור מוקדש לפריסת HTML מאפס. אנו מדברים על תפקידן של תכונות ולומדים את הסכימה הכללית לתיאור תגי HTML.
דגם בלוק
אילו אלמנטים אחראים למסגרת של הדף, ואילו מסייעים בתהליך העיצוב שלו או הוספת חלקים פונקציונליים? בואו להכיר את רכיבי HTML בלוק ו-inline ונלמד את השפעת הסגנונות על הרוחב הסופי של האלמנטים.
HTML סמנטי
המטרה העיקרית של כל פריסת HTML היא להעביר את המשמעות של הבלוקים. בשיעור זה, נחקור את יכולות הסמנטיקה של תקן HTML5 העדכני ונלמד על נגישות לאינטרנט.
מבנה בסיסי של מסמך HTML
לכל מסמך HTML יש מבנה בסיסי המורכב מתגים ורכיבי שירות. הדפדפן צריך אותם כדי להציג מידע נכון. בשיעור זה נסתכל על כל שורה במבנה זה.
יסודות CSS
שפת CSS נוצרה לעיצוב ויזואלי של דף אינטרנט. אנו לומדים את היכולות הבסיסיות של השפה, מבינים כיצד להשתמש בהן יחד עם HTML. אנו לומדים לכלול קבצי CSS ומתוודעים לסוגי הסלקטורים הבסיסיים.
מדורגת ב-CSS
מה זה מדורג ואיך זה עובד ב-CSS? השיעור מוקדש להבדלים בסדר העדיפויות של הבורר וליכולת להשתמש בזה בפרויקטים שלך.
Chrome DevTools
בעת פריסת אתר אינטרנט, חשוב למצוא שגיאות בזמן או להבין כיצד להמיר נכון את הבלוק שאנו צריכים. בעבר, זה נעשה בעיקר ביד. כיום לדפדפנים מודרניים יש פונקציה של מפקח אינטרנט. בואו נבחן את היכולות של אחד מהם - Chrome DevTools.
עורכי קוד
כדי לשמור את העבודה שלך, אתה צריך עורך קוד. בשיעור זה נבחן כיצד להתקין Visual Studio Code. זהו כלי רב עוצמה שיכול לשמש לא רק לפריסה, אלא גם לתכנות בכל שפה.
אמט
בואו נלמד את אחד התוספים השימושיים ביותר עבור מעצבי פריסה - אמט. זה יאיץ את סימון קוד HTML ויסיר את רוב השלבים השגרתיים.
פרסום באינטרנט
כדי להעלות פרויקט לאינטרנט, צריך להשתמש ב-hosting - שרת מיוחד שיאחסן קבצים ויספק להם גישה באמצעות שם דומיין. במדריך זה נסתכל על אירוח חינמי של GitHub.
עורך גרפי
ישנם מספר עורכים גדולים בשוק. חלקם ספציפיים למערכת הפעלה אחת בלבד, אחרים ניתנים להתקנה על כל אחת מהן. בסעיף זה, בואו נסתכל על השלבים העיקריים כאשר מעצב פריסה עובד עם עורך Figma המקוון.
עבודה עצמאית
משימות נוספות המאפשרות לך לגבש את התיאוריה הנרכשת
חומרים נוספים
מאמרים וסרטונים שנאספו על ידי צוות Hexlet. יעזור לך לצלול עמוק יותר לתוך נושא הקורס