אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: דף הבית
- בניית Header (30:27)
- בניית Hero Section (31:02)
- בניית כרטיס מוצר (30:26)
- סקשן מבצע קיץ ולמה אנחנו (32:19)
- סקשן מוצרים חדשים (31:57)
- סקשן השירותים שלנו (30:58)
- סקשן אודותינו (31:02)
- סקשן טיפים ומאמרים (31:16)
- סיום Footer ודף הבית בדסקטופ (30:49)
- התאמה למובייל של דף הבית (30:25)
מודול: הגדרות כלליות
- הגדרות שרת ויצירת אפליקציה (41:13)
- הגדרות גלובליות (30:22)
מודול: התאמה למובייל
- התאמה למובייל (39:57)
- התאמה למובייל חלק 2 (28:23)
- התאמה למובייל חלק 3 (29:34)
מודול: עמודי האתר
- התאמה למובייל של דף הבית (30:25)
- דף ארכיון השירותים שלנו (30:24)
- דף שירות בודד (30:00)
- דף בלוג ודף תוצאות חיפוש (30:27)
- דף מאמר בודד (30:09)
- דף שאלות נפוצות (28:50)
- דף אודות (30:33)
- דף יצירת קשר (29:23)
- דפים כלליים (29:12)
מודול: עמודי ווקומרס והרחבה נוספת
- דף החנות – חלק 1 (31:35)
- דף החנות – חלק 2 (31:31)
- דף המוצר – חלק 1 (31:43)
- דף המוצר – חלק 2 (31:03)
- הסרת דף עגלה ושימוש בעגלה צפה (31:03)
- דף תשלום ותודה לאחר תשלום (29:18)
- דף אזור אישי (30:18)
- חיבורי לינקים (29:48)
- הגדרות ווקומרס (30:43)
- הזמנות, לקוחות, דוחות ושיווק (30:00)
נו..? איך היה השיעור?
אחח חבל.. אם היית מנוי - היית יכול ללמוד ולדרג את השיעור!
מה נלמד בשיעור הזה?
- נתחיל בבניית הHeader
- נעלה את אייקון העגלה בSVG ונתאים אותו בתוך הקוד על ידי הגדרת הfill שיהיה עם ערך של Currentcolor (שיקבל את הצבע שלו מתוך אלמנטור ולא שיהיה מוגדר מראש)
- נבנה תפריט דמו שילווה אותנו בכל תהליך הפיתוח
- את אותה פעולה של שינוי קוד הSVG של אייקון העגלה נבצע גם באייקון האזור האישי ונבין שכיוון שהאייקון משתמש בstroke במקום בfill אז נדרשת התערבות של CSS ונבצע אותה
וקצת יותר בפירוט...
בשיעור זה נתחיל בבניית ה-Header, האלמנט המרכזי שמוביל את עיצוב האתר. תחילה, נעלה אייקון עגלה בפורמט **SVG** ונבצע התאמה מדויקת בקוד. ההתאמה כוללת שימוש במאפיין fill עם הערך Currentcolor, פעולה שמאפשרת לאייקון לקבל את צבעו באופן דינמי מתוך אלמנטור, במקום להיות מוגדר בצבע קבוע. גישה זו מעניקה גמישות עיצובית ומשפרת את הדינמיות של האתר.
בהמשך, ניצור **תפריט דמו** שישמש כבסיס פונקציונלי לדפי האתר במהלך הפיתוח. נבצע את אותה התאמה דינמית גם באייקון האזור האישי, תוך הבנה מעמיקה של ההבדלים בין שימוש במאפיינים stroke ו-fill באייקונים. במקרים שבהם נדרשת התאמה נוספת, נשתמש ב-CSS מתקדם כדי ליישר את העיצוב לדרישות הפרויקט.
שיעור זה מעניק ידע מעשי בעבודה עם אייקוני SVG, יצירת עיצובים דינמיים ושימוש מתקדם ב-CSS. המטרה היא להקנות מיומנויות לפיתוח ממשק משתמש אלגנטי ומקצועי, המשלב אסתטיקה ופונקציונליות.