11 KiB
יצירת אתר קורות חיים באמצעות vscode.dev
כמה מגניב יהיה אם מגייס יבקש את קורות החיים שלך ואתה תשלח לו קישור? 😎
מטרות
לאחר משימה זו, תלמדו כיצד:
- ליצור אתר להצגת קורות החיים שלכם
דרישות מקדימות
- חשבון GitHub. נווטו ל-GitHub וצרו חשבון אם עדיין אין לכם.
שלבים
שלב 1: צרו מאגר חדש ב-GitHub ותנו לו את השם my-resume
שלב 2: צרו קובץ בשם index.html במאגר שלכם. נוסיף לפחות קובץ אחד בזמן שאנחנו עדיין ב-github.com מכיוון שלא ניתן לפתוח מאגר ריק ב-vscode.dev.
לחצו על הקישור creating a new file, הקלידו את השם index.html ובחרו בכפתור Commit new file.
שלב 3: פתחו את VSCode.dev ובחרו בכפתור Open Remote Repository.
העתיקו את כתובת ה-URL של המאגר שיצרתם עבור אתר קורות החיים שלכם והדביקו אותה בתיבת הקלט:
החליפו your-username בשם המשתמש שלכם ב-GitHub
https://github.com/your-username/my-resume
✅ אם הצלחתם, תראו את הפרויקט שלכם ואת הקובץ index.html פתוחים בעורך הטקסט בדפדפן.
שלב 4: פתחו את הקובץ index.html, הדביקו את הקוד הבא באזור הקוד שלכם ושמרו.
קוד HTML שאחראי על התוכן באתר קורות החיים שלכם.
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>השם שלך כאן!</title>
</head>
<body>
<header id="header">
<!-- כותרת קורות חיים עם השם והתפקיד שלך -->
<h1>השם שלך כאן!</h1>
<hr>
התפקיד שלך!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>יצירת קשר</h2>
<!-- פרטי קשר כולל רשתות חברתיות -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">כתוב את האימייל שלך כאן</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">כתוב את שם המשתמש שלך כאן!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">כתוב את שם המשתמש שלך כאן!</a>
</p>
</section>
<section>
<h2>כישורים</h2>
<!-- הכישורים שלך -->
<ul>
<li>כישור 1!</li>
<li>כישור 2!</li>
<li>כישור 3!</li>
<li>כישור 4!</li>
</ul>
</section>
<section>
<h2>השכלה</h2>
<!-- ההשכלה שלך -->
<h3>כתוב את הקורס שלך כאן!</h3>
<p>
כתוב את המוסד שלך כאן!
</p>
<p>
תאריך התחלה - תאריך סיום
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>אודות</h2>
<!-- מידע עליך -->
<p>כתוב כמה מילים על עצמך!</p>
</section>
<section>
<h2>ניסיון תעסוקתי</h2>
<!-- הניסיון התעסוקתי שלך -->
<h3>תפקיד</h3>
<p>
שם הארגון כאן | חודש התחלה – חודש סיום
</p>
<ul>
<li>משימה 1 - כתוב מה עשית!</li>
<li>משימה 2 - כתוב מה עשית!</li>
<li>כתוב את התוצאות/השפעת התרומה שלך</li>
</ul>
<h3>תפקיד 2</h3>
<p>
שם הארגון כאן | חודש התחלה – חודש סיום
</p>
<ul>
<li>משימה 1 - כתוב מה עשית!</li>
<li>משימה 2 - כתוב מה עשית!</li>
<li>כתוב את התוצאות/השפעת התרומה שלך</li>
</ul>
</section>
</article>
</main>
</body>
</html>
הוסיפו את פרטי קורות החיים שלכם במקום טקסט הממלא מקום בקוד ה-HTML.
שלב 5: רחפו מעל תיקיית My-Resume, לחצו על סמל New File ... וצרו 2 קבצים חדשים בפרויקט שלכם: style.css ו-codeswing.json.
שלב 6: פתחו את הקובץ style.css, הדביקו את הקוד הבא ושמרו.
קוד CSS לעיצוב פריסת האתר.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
שלב 6: פתחו את הקובץ codeswing.json, הדביקו את הקוד הבא ושמרו.
{
"scripts": [],
"styles": []
}
שלב 7: התקינו את ההרחבה Codeswing כדי לצפות באתר קורות החיים באזור הקוד.
לחצו על סמל Extensions בסרגל הפעילות והקלידו Codeswing. לחצו על כפתור ההתקנה הכחול בסרגל הפעילות המורחב או השתמשו בכפתור ההתקנה שמופיע באזור הקוד לאחר בחירת ההרחבה. מיד לאחר ההתקנה, שימו לב לשינויים בפרויקט שלכם 😃.
זה מה שתראו על המסך שלכם לאחר התקנת ההרחבה.
אם אתם מרוצים מהשינויים שביצעתם, רחפו מעל תיקיית Changes ולחצו על כפתור + כדי לשלב את השינויים.
הקלידו הודעת commit (תיאור השינוי שביצעתם בפרויקט) ובצעו commit לשינויים שלכם על ידי לחיצה על סימן ה-check. לאחר שסיימתם לעבוד על הפרויקט, בחרו בסמל תפריט ההמבורגר בפינה השמאלית העליונה כדי לחזור למאגר ב-GitHub.
מזל טוב 🎉 יצרתם אתר קורות חיים באמצעות vscode.dev בכמה צעדים פשוטים.
🚀 אתגר
פתחו מאגר מרוחק שיש לכם הרשאות לבצע בו שינויים ועדכנו כמה קבצים. לאחר מכן, נסו ליצור ענף חדש עם השינויים שלכם ובצעו Pull Request.
סקירה ולימוד עצמי
קראו עוד על VSCode.dev ועל כמה מהתכונות האחרות שלו.
כתב ויתור:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.