לדלג לתוכן

🎨 מבוא ל-CSS

ברוכים הבאים!

קורס מקיף ללימוד CSS מאפס. הקורס מיועד למתחילים ומכסה את כל היסודות החשובים עם דגש על תחביר וצורת כתיבה נכונה.

למה CSS?

  • 🎨 שפת העיצוב של האינטרנט
  • 🖌️ מפרידה בין תוכן (HTML) לעיצוב
  • 📱 מאפשרת עיצוב רספונסיבי
  • ✨ אנימציות ואפקטים ויזואליים

📚 מבנה הקורס

חלק א' - יסודות

מספר נושא קובץ
1 רקע והיסטוריה 01_background.md
2 תחביר בסיסי 02_syntax.md
3 סלקטורים 03_selectors.md

חלק ב' - עיצוב בסיסי

מספר נושא קובץ
4 צבעים ורקעים 04_colors_backgrounds.md
5 טקסט וגופנים 05_text_fonts.md
6 מודל הקופסה 06_box_model.md

חלק ג' - פריסה (Layout)

מספר נושא קובץ
7 פריסה בסיסית 07_layout.md
8 Flexbox 08_flexbox.md
9 CSS Grid 09_grid.md

חלק ד' - מתקדם

מספר נושא קובץ
10 עיצוב רספונסיבי 10_responsive.md
11 אנימציות ומעברים 11_animations.md
12 שיטות עבודה מומלצות 12_best_practices.md

📁 דוגמאות קוד

מספר נושא קובץ
1 תחביר בסיסי 01_basic_syntax.html
2 סלקטורים 02_selectors.html
3 צבעים ורקעים 03_colors.html
4 עיצוב טקסט 04_text_styling.html
5 מודל הקופסה 05_box_model.html
6 פריסה 06_layout.html
7 Flexbox 07_flexbox.html
8 Grid 08_grid.html
9 רספונסיבי 09_responsive.html
10 אנימציות 10_animations.html
11 דף שלם 11_complete_page.html

🚀 איך להתחיל?

צעד 1: הוספת CSS ל-HTML

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>הדף הראשון שלי עם CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>שלום עולם!</h1>
</body>
</html>

צעד 2: הבנת המבנה הבסיסי

selector {
    property: value;
}
  • Selector - בוחר אילו אלמנטים לעצב
  • Property - מה לשנות (צבע, גודל, רקע...)
  • Value - הערך החדש

📖 סדר לימוד מומלץ

  1. יום 1: רקע + תחביר + סלקטורים (פרקים 1-3)
  2. יום 2: צבעים + טקסט + מודל הקופסה (פרקים 4-6)
  3. יום 3: פריסה בסיסית (פרק 7)
  4. יום 4: Flexbox + Grid (פרקים 8-9)
  5. יום 5: רספונסיב + אנימציות + Best Practices (פרקים 10-12)

📋 נושאים שנכללים

  • ✅ תחביר CSS בסיסי
  • ✅ סלקטורים (element, class, id, pseudo)
  • ✅ צבעים ורקעים
  • ✅ עיצוב טקסט וגופנים
  • ✅ מודל הקופסה (Box Model)
  • ✅ Display ו-Position
  • ✅ Flexbox
  • ✅ CSS Grid
  • ✅ Media Queries
  • ✅ אנימציות ומעברים
  • ✅ שיטות עבודה מומלצות

🛠️ כלים מומלצים

עורכי קוד

  • Visual Studio Code - חינמי ופופולרי
  • Sublime Text
  • WebStorm

תוספים מומלצים ל-VS Code

  • Live Server - לרענון אוטומטי
  • CSS Peek
  • IntelliSense for CSS

כלי עזר

בהצלחה בלימוד CSS! 🎉