Αν θέλεις να βελτιώσεις τις δεξιότητές σου στον προγραμματισμό και να δημιουργήσεις κάτι πρακτικό που μπορείς να χρησιμοποιήσεις και στο βιογραφικό σου, τότε αυτό το project είναι για εσένα! Θα φτιάξουμε μια προσωπική ιστοσελίδα με HTML, CSS και λίγο JavaScript.
🎯 Στόχοι του Project
✔ Να μάθεις τις βασικές έννοιες της δημιουργίας ιστοσελίδων.
✔ Να εξασκηθείς στη χρήση HTML και CSS.
✔ Να προσθέσεις βασική διαδραστικότητα με JavaScript.
✔ Να έχεις ένα προσωπικό portfolio που μπορείς να δείξεις σε εργοδότες ή καθηγητές.
🔧 Εργαλεία που θα χρειαστείς
- Ένας απλός επεξεργαστής κώδικα (π.χ. Visual Studio Code ή Notepad++).
- Ένας browser (π.χ. Google Chrome, Firefox).
- (Προαιρετικά) GitHub για να ανεβάσεις την ιστοσελίδα σου online.
📌 Βήματα Υλοποίησης
1️⃣ Δημιουργία της HTML σελίδας
Η HTML είναι η βάση της ιστοσελίδας. Δημιούργησε ένα αρχείο index.html και πρόσθεσε τον παρακάτω κώδικα:
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Το Portfolio μου</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Καλώς ήρθες στο Portfolio μου</h1>
</header>
<section>
<h2>Λίγα λόγια για εμένα</h2>
<p>Είμαι μαθητής ΕΠΑΛ με πάθος για τον προγραμματισμό!</p>
</section>
</body>
</html>
2️⃣ Προσθήκη CSS για Στυλ
Δημιούργησε ένα αρχείο style.css και πρόσθεσε στυλ:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #007bff;
color: white;
padding: 20px;
}
section {
margin: 20px;
padding: 20px;
background: white;
border-radius: 10px;
}
3️⃣ Προσθήκη JavaScript για Διαδραστικότητα
Δημιούργησε ένα αρχείο script.js και πρόσθεσε κώδικα για να εμφανίζει ένα μήνυμα όταν πατά κάποιος σε ένα κουμπί:
document.addEventListener("DOMContentLoaded", function() {
alert("Καλώς ήρθες στην ιστοσελίδα μου!");
});
Στη συνέχεια, μην ξεχάσεις να συνδέσεις το script.js μέσα στο HTML σου:
<script src="script.js"></script>
🚀 Επιπλέον Ιδέες για Βελτίωση
🔹 Πρόσθεσε περισσότερες ενότητες (π.χ. "Τα έργα μου").
🔹 Χρησιμοποίησε CSS animations για πιο όμορφη εμφάνιση.
🔹 Ανέβασε την ιστοσελίδα στο GitHub Pages για να την κάνεις online!
Αυτό το project θα σε βοηθήσει να εξοικειωθείς με τις τεχνολογίες web development και να αποκτήσεις μια ολοκληρωμένη πρακτική εμπειρία! Καλή επιτυχία! 🚀
«Πρακτικό, δημιουργικό και χρήσιμο! Μια πολύ ωραία πρόταση για μαθητές πληροφορικής.»
ΑπάντησηΔιαγραφή