התחבר הצטרף עכשיו 🚀
מודול: מודל הקופסה קורס: CSS – עיצוב ומבנה רספונסיבי

מודל הקופסה - פרויקט מודרך

שלב היישום: פרויקט מונחה שלב־אחר־שלב, עם מעקב התקדמות, ציון ומשוב בתוך המערכת.

יש להתחבר למערכת.

כדי לגשת אל הפרויקט, עליך להתחבר לחשבון המשתמש שלך.

בפרויקט זה תבינו לעומק את מודל הקופסה (Box Model) ותתרגלו את המרכיבים המרכזיים שלו: Margin, Padding, Border ו־Box Sizing (content-box לעומת border-box). בנוסף תתרגלו את תכונת display, תוספת צל בעזרת box-shadow, עבודה עם float ו־clear לזרימת תוכן בסיסית, שימוש ב־overflow לטיפול בגלישה, ולבסוף בניית פריסה קטנה של עמוד (Sidebar + Content) באמצעות כלים בסיסיים של מודל הקופסה.

טעימה מהצעדים במיני-פרויקט

זו רק הצצה לשלבים הראשונים. ביצוע מלא נפתח אחרי התחברות.
1

שלב 1: היכרות + Display

  1. פתח/י את index.html בדפדפן.
  2. ב-.pill נסה/י display: inline ואז block ואז inline-block.
  3. שים/י לב להבדלים במרווחים, רוחב ושבירת שורה.
2

שלב 2: Margin & Padding

3

שלב 3: Border Styles

במצב מחובר תוכל לראות את כל הצעדים, לסמן בוצע, להעלות ZIP ולקבל משוב מהמדריך.

כבר יש לך משתמש? התחבר ותוכל להמשיך מאיפה שעצרת במודולים ובמיני-פרויקטים.
Skip to content