15 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>
<!-- στοιχεία επικοινωνίας, συμπεριλαμβανομένων των social media -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Γράψτε το email σας εδώ</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 και κάντε κλικ στο κουμπί + για να σταδιοποιήσετε τις αλλαγές.
Πληκτρολογήστε ένα μήνυμα δέσμευσης (Μια περιγραφή της αλλαγής που κάνατε στο έργο) και δεσμεύστε τις αλλαγές σας κάνοντας κλικ στο check. Όταν τελειώσετε με το έργο σας, επιλέξτε το εικονίδιο του μενού hamburger πάνω αριστερά για να επιστρέψετε στο αποθετήριο στο GitHub.
Συγχαρητήρια 🎉 Μόλις δημιουργήσατε την ιστοσελίδα του βιογραφικού σας χρησιμοποιώντας το vscode.dev σε λίγα βήματα.
🚀 Πρόκληση
Ανοίξτε ένα απομακρυσμένο αποθετήριο στο οποίο έχετε δικαιώματα για να κάνετε αλλαγές και ενημερώστε κάποια αρχεία. Στη συνέχεια, δοκιμάστε να δημιουργήσετε ένα νέο branch με τις αλλαγές σας και να κάνετε Pull Request.
Ανασκόπηση & Αυτομελέτη
Διαβάστε περισσότερα για το VSCode.dev και μερικά από τα άλλα χαρακτηριστικά του.
Αποποίηση Ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.