ברוכים הבאים לעולם ה-MODERN LAYOUTS
בשיעור זה נצלול לעומק עולם ה-Layouts. נבין איך הופכים דף HTML פשוט למבנה ארכיטקטוני מורכב, גמיש וחכם שמתאים לכל מסך.
Flexbox
מערכת פריסה חד-ממדית המיועדת לסידור אלמנטים בשורה או בטור.
CSS Grid
מערכת פריסה דו-ממדית המאפשרת שליטה מלאה על שורות ועמודות בו-זמנית.
fr (Fractional Unit)
יחידת מידה גמישה ב-Grid המייצגת חלק מהשטח הפנוי ב-CONTAINER.
Gap
תכונה הקובעת את המרווח בין האלמנטים בתוך GRID או FLEXBOX.
המהפכה של TechFlow: אימוץ FLEXBOX ו-GRID
חברת TechFlow, סטארט-אפ המפתח פלטפורמות דשבורד מורכבות, נתקלה בבעיה קשה: אתר הניהול שלהם נשבר בכל פעם שמשתמש ניסה לצפות בו מהסמארטפון. הקוד המקורי נכתב באמצעות FLOAT: LEFT וחישובים ידניים של אחוזים. צוות הפיתוח החליט על מהלך אסטרטגי של מעבר ל-FLEXBOX עבור רכיבי התפריט ול-CSS GRID עבור המבנה הראשי. התוצאה הייתה ירידה של 40% בכמות הקוד ושיפור דרמטי בזמן הפיתוח של פיצ'רים חדשים.
שאלה 1
מתי נבחר להשתמש ב-Flexbox ככלי המרכזי?
שאלה 2
איזו תכונה ב-CSS Grid מאפשרת לנו להגדיר אזורים בשמות?
ניתוח ארכיטקטוני: מהעולם הישן למודרני
בניתוח מקרה זה, עליך לבחון קטע קוד ישן המשתמש בשיטות פריסה מיושנות כמו FLOATS ו-TABLE-CELL. עליך לזהות את נקודות התורפה במבנה הקיים ולהסביר כיצד ארכיטקטורה מבוססת CSS GRID הייתה פותרת בעיות של רספונסיביות ותחזוקתיות.
🏆
כל הכבוד!
סיימתם את פרק 3 בהצלחה.