קורס סלע גרין ושות'

שם השיעור: Hero Section

דף הבית / קורסים / סלע גרין ושות' / בניית דף הבית / Hero Section

אין לכם גישה לתוכן זה

לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה

לכל המסלולים
זה קל!

תוכן הקורס

מודול: בניית דף הבית

דומיין, אפליקציה חדשה והגדרות ראשוניות
עברו לשיעור
(09:54)
בניית Header – חלק 1
עברו לשיעור
(13:35)
בניית Header – חלק 2
עברו לשיעור
(16:29)
בניית Footer
עברו לשיעור
(11:14)
עכשיו: Hero Section
(16:07)
סקשן למה לעבוד איתנו
עברו לשיעור
(10:38)

מודול: דפים פנימיים

סקשן אודות
עברו לשיעור
(30:20)
סקשן תחומי התמחות
עברו לשיעור
(19:20)
סקשן המלצות
עברו לשיעור
(33:02)
סקשן הצוות שלנו חלק 1
עברו לשיעור
(21:41)
סקשן הצוות שלנו חלק 2
עברו לשיעור
(21:53)
הנעה לפעולה
עברו לשיעור
(11:40)
שאלות נפוצות
עברו לשיעור
(23:56)
סקשן בלוג
עברו לשיעור
(25:51)
סקשן יצירת קשר
עברו לשיעור
(12:01)
התאמה למובייל חלק 1
עברו לשיעור
(25:13)
התאמה למובייל חלק 2
עברו לשיעור
(43:26)
דף אודות
עברו לשיעור
(38:09)
ארכיון תחומי ההתמחות
עברו לשיעור
(32:22)
דף תחום התמחות – חלק 1
עברו לשיעור
(17:44)
דף תחום התמחות – חלק 2
עברו לשיעור
(24:32)
דף הצוות שלנו
עברו לשיעור
(06:52)
דף איש צוות
עברו לשיעור
(30:03)
ארכיון מאמרים – חלק 1
עברו לשיעור
(21:57)
ארכיון מאמרים – חלק 2
עברו לשיעור
(29:36)
מאמר בודד – חלק 1
עברו לשיעור
(33:28)
מאמר בודד – חלק 2
עברו לשיעור
(16:14)
מאמר בודד – חלק 3
עברו לשיעור
(39:11)
דף צור קשר
עברו לשיעור
(18:21)
404 ודפים כלליים
עברו לשיעור
(16:25)

מה נלמד בשיעור הזה?

  • נבנה אסטרטגיה איך לפנות נכון אל הבניה של הHero
  • ניצור דף בית, נגדיר אותו ראשונית ונתחיל לבנות את הקונטיינרים
  • נשתמש במיקום מוחלט עבור האייקון של הפטיש שנוכל למקם אותו בתוך הקונטיינר שלו במיקום שמתאים לעיצוב
  • נשתמש בHTML מובנה בתוך הכותרת כדי לחסוך באלמנטים ולצבוע את הטקסט בהתאם לעיצוב. (הHTML והCSS נמצאים בתוך האקורדיונים הנכונים פה למטה).
  • נבצע את הפיתוח הנדרש עבור תיבות האייקון למטה. כל הCSS נמצא תחת הערה "Icon Box Styling"

וקצת יותר בפירוט...

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

 

העבודה תתחיל ביצירת דף בית חדש והגדרתו כעמוד ראשי באתר, תוך התחלת בנייה של קונטיינרים שמרכיבים את מבנה ה-Hero. אחת מהטכניקות שנשתמש בהן היא מיקום מוחלט (absolute positioning) עבור אלמנטים גרפיים, כמו אייקון הפטיש. כך נוכל למקם את האייקון בדיוק במקום הנכון בהתאם לעיצוב, תוך שימוש נכון במרחב העיצובי של הקונטיינר שלו.

 

בהמשך, נשלב טכניקות חכמות של HTML ו-CSS לבניית כותרות מתקדמות. נשתמש ב-HTML מובנה בתוך הכותרת עצמה כדי לחסוך באלמנטים נוספים ולצבוע את הטקסט בהתאם לעיצוב, מה שתורם ליעילות הקוד ולשיפור ביצועי האתר. עבור תיבות האייקונים הממוקמות באזור התחתון של ה-Hero, נבצע התאמות עיצוביות ופיתוח לפי ההנחיות, עם שימוש בקוד CSS מוכן הנמצא תחת ההערה "Icon Box Styling". התוצאה תהיה Hero Section מקצועי ודינמי, שמדגיש את חשיבות העיצוב והפיתוח כחלק מלימודי בניית אתרים בוורדפרס.