0.3 הרמת סביבת עבודה וכלי פיתוח פתרון

פתרונות¶

תרגיל 1: התקנת כלים¶

VS Code מותקן ופתוח.
כל חמשת התוספים מותקנים (אפשר לראות אותם ברשימת התוספים: Ctrl+Shift+X).
Node.js מותקן. הפלט הצפוי בטרמינל:

node --version
# v20.x.x (or newer LTS version)

npm --version
# 10.x.x (or newer)

אם מופיעים מספרי גרסה - הכל מותקן כמו שצריך.

תרגיל 2: יצירת פרויקט ראשון¶

הקובץ index.html אמור להיראות בערך ככה:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Amit</h1>
    <p>This is my first website</p>
</body>
</html>

כשפותחים עם Live Server, הדפדפן נפתח בכתובת http://127.0.0.1:5500 ומציג את הכותרת והפסקה. כששומרים שינוי ב-VS Code, הדפדפן מתרענן אוטומטית.

תרגיל 3: תרגול קיצורי מקלדת¶

אין פתרון ספציפי - העיקר שתרגלתם כל קיצור לפחות פעם אחת וזה עבד. קיצורים ללמוד אפשר רק על ידי שימוש חוזר.

תרגיל 4: תרגול Emmet¶

div.container ייצר:
```
<div class="container"></div>
```
div#header ייצר:
```
<div id="header"></div>
```

ul>li*3 ייצר:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

h1+p+p ייצר:
```
<h1></h1>
<p></p>
<p></p>
```

div.card>h2+p+button ייצר:

<div class="card">
    <h2></h2>
    <p></p>
    <button></button>
</div>

nav>ul>li*4>a ייצר:

<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

table>tr*3>td*3 ייצר:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

תרגיל 5: חקירת DevTools¶

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

בלשונית Console:
- alert("Hello!") - הציג חלון קופץ עם ההודעה "Hello!".
- document.title - הציג את הכותרת של הדף (מה שכתוב בלשונית של הדפדפן).
- 2 + 2 - הציג 4.

בלשונית Network:
- מספר הבקשות משתנה לפי האתר. לוויקיפדיה בדרך כלל עשרות בקשות.
- הבקשה הראשונה היא בדרך כלל הדף עצמו (HTML) עם סטטוס 200.
- מספר התמונות תלוי באתר.

מצב מובייל:
- האתר נראה אחרת - הפריסה מותאמת למסך צר יותר. זה נקרא רספונסיביות ונלמד על זה בהמשך.

תרגיל 6: הגדרת Prettier¶

אחרי הגדרת Format On Save ובחירת Prettier כ-Default Formatter, הקוד הלא מסודר:

<div><p>hello</p><span>world</span></div>

אמור להפוך אוטומטית בשמירה למשהו כזה:

<div>
    <p>hello</p>
    <span>world</span>
</div>

כל אלמנט בשורה נפרדת עם הזחה נכונה.