מבוא לקורס

מדריך אינטראקטיבי: לצד הקורס יש גם המדריך האולטימטיבי ל-CSS, דף אחד עם בודק סלקטורים, עורכי Flexbox ו-Grid חיים ודוגמאות אנימציה.

ברוכים הבאים

קורס מקיף ללימוד CSS מאפס. הוא מתחיל בתחביר ובסלקטורים, עובר לצבעים, טקסט ומודל הקופסה, וממשיך לפריסה עם Flexbox ו-Grid, עיצוב רספונסיבי ואנימציות.

למה CSS?

שפת העיצוב של הרשת
מפרידה בין התוכן (HTML) לעיצוב
מאפשרת אתרים שנראים טוב בכל גודל מסך
אנימציות ומעברים בלי שורת JavaScript אחת

לפני שמתחילים

היכרות בסיסית עם HTML (קורס HTML)
דפדפן ועורך קוד (מומלץ VS Code עם התוסף Live Server)

מבנה הקורס

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

#	שיעור
1	רקע והיסטוריה
2	תחביר בסיסי
3	סלקטורים (Selectors)

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

#	שיעור
4	צבעים ורקעים
5	טקסט וגופנים
6	מודל הקופסה (Box Model)

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

#	שיעור
7	פריסה בסיסית (Layout)
8	Flexbox
9	CSS Grid

חלק ד' - מתקדם

#	שיעור
10	עיצוב רספונסיבי
11	אנימציות ומעברים
12	שיטות עבודה מומלצות

דוגמאות קוד

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

#	נושא	קובץ
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`

איך מתחילים

הדרך המהירה לנסות CSS היא תגית <style> בתוך ה-<head>:

<!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>

כל כלל CSS בנוי משלושה חלקים:

selector {
    property: value;
}

Selector - אילו אלמנטים לעצב
Property - מה לשנות (צבע, גודל, רקע...)
Value - הערך החדש

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

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

משאבים נוספים

בהצלחה! מתחילים בשיעור הראשון: רקע והיסטוריה.