1.10 פרויקטים פרויקט

פרויקטי CSS¶

בנו את הפרויקטים הבאים. כל פרויקט מיישם את כל מה שלמדנו בקורס ה-CSS.
חשוב: כל הפרויקטים הם HTML + CSS בלבד, בלי JavaScript.

פרויקט 1 - דף נחיתה רספונסיבי - Responsive Landing Page¶

בנו דף נחיתה מלא ורספונסיבי לחברה או מוצר בדוי.

מבנה העמוד¶

סקשן 1 - Hero:
- רקע עם תמונה או gradient
- כותרת ראשית גדולה ממורכזת
- תת-כותרת עם משפט שיווקי
- כפתור CTA (Call To Action) בולט
- הטקסט ממורכז אנכית ואופקית

סקשן 2 - שירותים/פיצ'רים - Features:
- כותרת סקשן
- 3-4 כרטיסים בגריד
- כל כרטיס מכיל: אייקון (אפשר להשתמש בתו Unicode או ב-emoji character), כותרת, ותיאור קצר
- הכרטיסים בגריד רספונסיבי

סקשן 3 - מחירון - Pricing:
- 3 כרטיסי מחיר (Basic, Pro, Enterprise)
- כל כרטיס מכיל: שם חבילה, מחיר, רשימת פיצ'רים, כפתור בחירה
- הכרטיס האמצעי (Pro) בולט יותר - גדול יותר, צבע שונה, תגית "popular"
- הכרטיסים ב-Grid

סקשן 4 - Footer:
- 3-4 עמודות (אודות, קישורים, צור קשר, סושיאל)
- שורת copyright בתחתית
- רקע כהה

דרישות טכניות¶

רספונסיביות מלאה - גישת mobile-first. האתר חייב להיראות טוב ב:
מובייל (320px+)
טאבלט (768px+)
דסקטופ (1024px+)
פלקסבוקס וגריד - השתמשו בגריד ל-layout הראשי ולכרטיסים, בפלקסבוקס לרכיבים פנימיים
אנימציות - hover effects על כפתורים וכרטיסים (scale, shadow, color change)
משתני CSS - כל הצבעים, הריווחים, וה-border-radius מוגדרים כ-CSS variables ב-:root
טיפוגרפיה רספונסיבית - השתמשו ב-clamp() לגדלי פונט
תגית viewport ב-HTML
max-width: 100% על תמונות

טיפים¶

התחילו מה-HTML - בנו את כל המבנה קודם
אחר כך הגדירו את משתני ה-CSS ב-:root
עצבו למובייל קודם
הוסיפו media queries לטאבלט ודסקטופ
בסוף הוסיפו אנימציות ופרטים קטנים

פרויקט 2 - שכפול אתר - Website Clone (CSS only)¶

בחרו אחד מהאתרים הבאים ושכפלו את העיצוב שלו כמה שיותר קרוב:

אפשרות א - דף הבית של Spotify¶

https://www.spotify.com
ה-hero section עם gradient
הכרטיסים של הplanים
ניווט עליון
footer מורכב עם הרבה עמודות

אפשרות ב - דף הנחיתה של Netflix¶

https://www.netflix.com
hero גדול עם רקע כהה
סקשנים עם טקסט + תמונה לסירוגין (ימין-שמאל, שמאל-ימין)
שאלות נפוצות (FAQ) - סגנון בלבד, בלי פונקציונליות פתיחה/סגירה
footer עם הרבה קישורים

אפשרות ג - דף מוצר של Apple¶

https://www.apple.com
ניווט מינימליסטי
hero sections גדולים עם תמונות
טיפוגרפיה נקייה ומדויקת
שימוש מרשים בwhite space

דרישות טכניות¶

דיוק ויזואלי - נסו להתקרב כמה שאפשר לעיצוב המקורי
layout - השתמשו בגריד ובפלקסבוקס לבניית ה-layout
צבעים - השתמשו ב-DevTools כדי לחלץ צבעים מהאתר המקורי (eyedropper tool)
טיפוגרפיה - נסו למצוא פונטים דומים (Google Fonts)
ריווחים - שימו לב ל-padding ו-margin - הם חשובים לא פחות מצבעים
רספונסיביות - האתר חייב להיות רספונסיבי (מובייל + דסקטופ לפחות)
אין צורך שלינקים יעבדו או שטפסים ישלחו - זה עיצוב בלבד
תמונות - אפשר להשתמש בתמונות מ-Unsplash או placeholders

תהליך עבודה מומלץ¶

צלמו screenshot של העמוד המקורי
זהו את האזורים הראשיים (header, hero, sections, footer)
בנו את ה-HTML של כל אזור
התחילו לעצב מלמעלה למטה
בסוף התאימו לרספונסיביות

פרויקט 3 - פורטפוליו אישי מאונימציה - Animated Personal Portfolio¶

בנו אתר פורטפוליו אישי עם אנימציות ומעברים.

מבנה העמוד (single page)¶

סקשן 1 - Hero:
- שם + תפקיד (למשל "Frontend Developer")
- אנימציית הופעה על הטקסט (fadeIn, typing effect, או slideIn)
- כפתורי CTA (קורות חיים, צור קשר)
- רקע gradient או תמונה

סקשן 2 - אודות - About:
- תמונה (אפשר placeholder)
- פסקת אודות
- הטקסט והתמונה מופיעים זה ליד זה בדסקטופ, ואנכית במובייל
- אנימציית fade-in על הופעת הסקשן

סקשן 3 - מיומנויות - Skills:
- רשימת טכנולוגיות עם progress bars (CSS בלבד)
- כל bar ממולא באחוז שונה
- אנימציה של מילוי ה-bars כשמגיעים לסקשן

סקשן 4 - פרויקטים - Projects:
- 4-6 כרטיסי פרויקט בגריד רספונסיבי
- כל כרטיס: תמונה, שם פרויקט, תיאור, טכנולוגיות
- אפקט hover: תמונה מתכהה ומופיע overlay עם כפתורים (view, source)
- stagger effect - כרטיסים מופיעים אחד אחרי השני

סקשן 5 - צור קשר - Contact:
- טופס יצירת קשר (שם, אימייל, הודעה, כפתור שליחה)
- הטופס לא צריך לעבוד - רק העיצוב
- עיצוב מותאם לinputs (focus states, borders)
- קישורי סושיאל

דרישות טכניות¶

ניווט חלק - smooth scrolling בין הסקשנים:
```
html {
  scroll-behavior: smooth;
}
```
ושימוש ב-anchor links: <a href="#about">About</a>
אנימציות CSS בלבד:
אנימציית הופעה על ה-hero (keyframes)
hover effects על כרטיסים וכפתורים (transitions)
stagger effect על כרטיסי פרויקטים (animation-delay)
progress bars עם אנימציית width
מצב כהה/בהיר - Dark/Light Mode:
כל הצבעים מוגדרים כ-CSS variables
מצב כהה כברירת מחדל (או לפי prefers-color-scheme)
הגדירו גם [data-theme="light"] עם צבעים בהירים
כדי לבדוק, שנו את ה-attribute ב-HTML ידנית
רספונסיביות מלאה:
מובייל: הכל בעמודה אחת, ניווט פשוט
טאבלט: גריד 2 עמודות
דסקטופ: layout מלא עם כל הפיצ'רים
מתודולוגיית BEM:
כל ה-CSS כתוב לפי BEM: block__element--modifier
כל סקשן הוא block
חלקים פנימיים הם elements
וריאציות הן modifiers
נגישות:
prefers-reduced-motion - מבטלים אנימציות למי שביקש
focus-visible - outlines למשתמשי מקלדת
כפתורים בגודל מינימלי של 44x44 פיקסלים

דוגמה לאנימציית progress bar¶

@keyframes fillBar {
  from { width: 0; }
  to { width: var(--skill-level); }
}

.skill-bar {
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.skill-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 5px;
  animation: fillBar 1.5s ease forwards;
}

<div class="skill-bar">
  <div class="skill-bar__fill" style="--skill-level: 85%"></div>
</div>

דוגמה ל-overlay על כרטיס פרויקט¶

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.project-card__image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover .project-card__image {
  transform: scale(1.1);
}

.project-card:hover .project-card__overlay {
  opacity: 1;
}

הנחיות כלליות לכל הפרויקטים¶

התחילו מה-HTML ורק אחר כך CSS
עבדו בגישת mobile-first
בדקו ב-DevTools Device Mode במכשירים שונים
השתמשו ב-CSS variables לכל ערך שחוזר על עצמו
שמרו על קוד מאורגן ונקי
הוסיפו הערות ב-CSS כדי שיהיה ברור מה כל חלק עושה
בדקו שאין overflow אופקי באף גודל מסך