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

תרגילים

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

התקינו את כל הכלים הבאים וודאו שהכל עובד:

1. התקינו את VS Code מהאתר https://code.visualstudio.com
2. התקינו את התוספים הבאים ב-VS Code:
3. Live Server
4. Prettier
5. ESLint
6. Auto Rename Tag
7. HTML CSS Support
8. התקינו Node.js מהאתר https://nodejs.org (גרסת LTS)
9. פתחו טרמינל (בתוך VS Code או בנפרד) ובדקו שההתקנה הצליחה:

node --version
npm --version

1. צלמו מסך שמראה את הגרסאות שהתקבלו.

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

1. צרו תיקייה חדשה בשם first-project.
2. פתחו את התיקייה ב-VS Code (File ואז Open Folder).
3. צרו קובץ בשם index.html.
4. כתבו html:5 ולחצו Tab כדי ליצור שלד HTML עם Emmet.
5. בתוך ה-body הוסיפו כותרת עם השם שלכם ופסקה שאומרת "This is my first website".
6. פתחו את הקובץ עם Live Server (לחיצה ימנית ואז Open with Live Server).
7. ודאו שאתם רואים את האתר בדפדפן.
8. שנו את הטקסט ב-VS Code, שמרו, ובדקו שהדפדפן מתעדכן אוטומטית.

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

פתחו את קובץ ה-index.html שיצרתם ותרגלו את הקיצורים הבאים:

1. השתמשו ב-Ctrl+D כדי לבחור מילה ולשנות כמה מופעים שלה בו-זמנית.
2. השתמשו ב-Alt+Up/Down כדי להזיז שורה למעלה או למטה.
3. השתמשו ב-Alt+Shift+Down כדי לשכפל שורה.
4. השתמשו ב-Ctrl+/ כדי להפוך שורה להערה ולהחזיר אותה.
5. השתמשו ב-Ctrl+Shift+K כדי למחוק שורה.
6. פתחו את הטרמינל המובנה עם Ctrl+`.
7. חפשו קובץ עם Ctrl+P.

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

בתוך קובץ HTML, נסו את הקיצורים הבאים של Emmet. כתבו כל קיצור ולחצו Tab, ובדקו שהתוצאה נכונה:

1. div.container - אמור ליצור div עם class בשם container
2. div#header - אמור ליצור div עם id בשם header
3. ul>li*3 - אמור ליצור רשימה עם 3 פריטים
4. h1+p+p - אמור ליצור כותרת ושתי פסקאות
5. div.card>h2+p+button - אמור ליצור div עם class בשם card שמכיל כותרת, פסקה וכפתור
6. nav>ul>li*4>a - אמור ליצור ניווט עם רשימה של 4 קישורים
7. table>tr*3>td*3 - אמור ליצור טבלה עם 3 שורות ו-3 עמודות

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

1. פתחו את Chrome וגלשו לאתר כלשהו (למשל https://www.wikipedia.org).
2. פתחו את DevTools עם F12.
3. בצעו את המשימות הבאות:

בלשונית Elements:
- מצאו את הכותרת הראשית של הדף.
- לחצו עליה פעמיים ושנו את הטקסט שלה. מה קרה?
- בחרו אלמנט כלשהו ובדקו את חוקי ה-CSS שחלים עליו (בצד ימין).
- נסו לכבות חוק CSS אחד על ידי הורדת הסימון (checkbox) - מה קרה?

בלשונית Console:
- הקלידו alert("Hello!") ולחצו Enter. מה קרה?
- הקלידו document.title ולחצו Enter. מה התקבל?
- הקלידו 2 + 2 ולחצו Enter.

בלשונית Network:
- רעננו את הדף (F5) עם לשונית Network פתוחה.
- כמה בקשות נשלחו?
- מה הבקשה הראשונה? מה הסטטוס שלה?
- סננו לפי סוג "Img" - כמה תמונות נטענו?

מצב מובייל:
- הפעילו Device Mode (אייקון טלפון או Ctrl+Shift+M).
- בחרו מכשיר iPhone מהרשימה.
- איך האתר נראה בטלפון? האם הוא שונה?

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

1. פתחו את ההגדרות של VS Code (Ctrl+,).
2. חפשו "Format On Save" וסמנו את האפשרות.
3. חפשו "Default Formatter" ובחרו Prettier.
4. כתבו קוד HTML לא מסודר (בלי הזחות נכונות):

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

1. שמרו את הקובץ (Ctrl+S) ובדקו ש-Prettier סידר את הקוד אוטומטית.