שם השיעור: בניית Header – חלק 1
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: בניית דף הבית
- דומיין, אפליקציה חדשה והגדרות ראשוניות (42:16)
- בניית Header – חלק 1 (27:11)
- בניית Header – חלק 2 (26:40)
- בניית Footer (26:49)
- Hero Section (27:00)
- סקשן למה לעבוד איתנו (26:56)
מודול: דפים פנימיים
- סקשן אודות (26:21)
- סקשן תחומי התמחות (26:22)
- סקשן המלצות (26:53)
- סקשן הצוות שלנו חלק 1 (26:41)
- סקשן הצוות שלנו חלק 2 (26:56)
- הנעה לפעולה (26:36)
- שאלות נפוצות (26:32)
- סקשן בלוג (26:31)
- סקשן יצירת קשר (26:26)
- התאמה למובייל חלק 1 (26:51)
- התאמה למובייל חלק 2 (26:24)
- דף אודות (26:51)
- דף הצוות שלנו (27:37)
- דף איש צוות (26:02)
- ארכיון מאמרים – חלק 1 (26:27)
- ארכיון מאמרים – חלק 2 (26:33)
- מאמר בודד – חלק 1 (26:15)
- מאמר בודד – חלק 2 (25:55)
- ארכיון תחומי ההתמחות (26:29)
- דף תחום התמחות – חלק 1 (26:27)
- דף תחום התמחות – חלק 2 (26:24)
- מאמר בודד – חלק 3 (26:43)
- דף צור קשר (26:18)
- 404 ודפים כלליים (25:59)
נו..? איך היה השיעור?
מה נלמד בשיעור הזה?
- נבנה אסטרטגיה לבניית הHeader שלנו על ידי הבנה של עיצוב האתר בFigma
- נמקם את כל האלמנטים שלנו ללא יצירת עיצוב ובהתאם לרוחב של כל אלמנט מהעיצוב
- נוריד את האייקונים מהFigma בפורמט SVG ונתאים את הקוד שלהם בצורה פשוטה על ידי הזנת currentColor בתוך כל מאפייני הfill. נבצע את זה בעזרת VS Code (שיעור על VS Code כאן למי שפספס).
- נכיר את הכלי המדהים SVGO ואיך להשתמש בו
- ניצור תפריט דמו ונשתמש בו בHeader שלנו
- נחליף בעזרת CSS את האייקון של החיפוש. קוד הCSS נמצא פה לנוחיותכם
וקצת יותר בפירוט...
בשיעור "בניית Header – חלק 1", נעסוק בהנחת יסודות ליצירת אזור ה-Header באתר, תוך שמירה על עקרונות עיצוב מותאמים ומתקדמים. נתחיל בגיבוש אסטרטגיה המבוססת על עיצוב האתר כפי שמוצג בקובץ Figma. האסטרטגיה תתמקד במיקום האלמנטים השונים, תוך שמירה על יחסים נכונים בין הרוחבים, בהתאמה מלאה לעיצוב המקורי, אך ללא יצירת עיצוב חדש בשלב זה.
במסגרת השיעור, נוריד את האייקונים הנדרשים בפורמט SVG ישירות מתוך קובץ ה-Figma. כדי להבטיח גמישות עיצובית ושימוש יעיל, נתאים את הקוד שלהם על ידי הוספת הערך "currentColor" למאפייני ה-fill, מה שיאפשר שליטה בצבע דרך CSS בלבד. העבודה תתבצע בעזרת עורך הקוד VS Code, כלי חשוב בתהליך בניית אתרים ב-WordPress, עם קישור לשיעור נוסף על השימוש בו למי שזקוק לרענון.
בהמשך, נכיר את הכלי SVGO, שמאפשר אופטימיזציה לקבצי SVG באופן קל ופשוט, ובכך משפר את ביצועי האתר. לאחר מכן, ניצור תפריט דמו שיוטמע באזור ה-Header, ונשדרג את אייקון החיפוש בעזרת CSS מותאם. קוד ה-CSS זמין לנוחותכם כדי לייעל את התהליך. שלב זה הוא קריטי להקמת Header מקצועי ומעוצב, המשלב פונקציונליות ונראות מושלמת כחלק מתהליך לימוד בניית אתרים בוורדפרס.