Cours développement Web
Niveau débutant
Projet
Projet : Portfolio Personnel en Ligne
Objectifs
L'objectif de ce projet est de mettre en pratique vos compétences en HTML, CSS, JavaScript,
et objets JavaScript en créant un portfolio personnel en ligne pour présenter vos informations,
compétences, et projets.
Rappelons que le portfolio est un site web personnel qui agit comme un recueil de vos travaux,
réalisations, compétences, et informations professionnelles. C'est une plateforme où vous
pouvez mettre en avant votre expérience, vos projets, et vos talents, de manière à créer une
présence professionnelle en ligne. Un portfolio bien conçu est souvent utilisé par les
professionnels pour présenter leur expertise, attirer des opportunités de carrière, et partager
leur passion pour leur domaine d'activité avec un public plus large."
Ressources
• Énoncés des exercices ci-dessous.
• Éditeurs de texte (Notepad, Visual Studio Code, etc.).
• Navigateurs web.
• Ressources de cours.
• Forum de discussion de ce module.
Type de Projet
Projet individuel.
Page | 1
Cours développement Web
Niveau débutant
Outils de Communication
Forum de discussion de ce module.
Durée
Environ 10 heures.
Évaluation
• Évaluation par le tuteur.
Consignes Générales
1. Lisez attentivement les consignes de chaque étape avant de commencer.
2. Utilisez les structures et les instructions appropriées pour chaque étape.
3. Assurez-vous que les fichiers HTML et JavaScript sont correctement liés si nécessaire.
4. Testez régulièrement votre site web dans un navigateur pour vérifier les résultats.
5. Assurez-vous que le rendu final soit cohérent et réponde aux attentes de chaque étape.
Étapes du Projet
Étape 1 : Planification
• Définissez l'objectif de votre portfolio personnel.
• Concevez la structure de votre site web en identifiant les pages principales (par exemple
: Accueil, À propos, Compétences, Projets, hobbies, activités sportives, formulaire de
demande d’information, etc.).
• Créez une liste des compétences et projets que vous souhaitez inclure.
Étape 2 : Création des Pages HTML
• Créez les fichiers HTML pour chaque page de votre site.
• Utilisez des balises HTML appropriées pour structurer chaque page.
• Ajoutez des liens de navigation pour permettre la transition entre les pages.
Étape 3 : Mise en Forme avec CSS
• Utilisez des sélecteurs CSS pour appliquer des styles à vos éléments HTML.
Page | 2
Cours développement Web
Niveau débutant
• Choisissez une palette de couleurs cohérente.
• Intégrez des polices de caractères pour améliorer l'apparence de votre site.
Étape 4 : Ajout de Contenu
• Remplissez vos pages avec des informations personnelles, compétences, et projets.
• Utilisez des images, des listes, des paragraphes, etc., pour rendre vos informations
attrayantes et faciles à lire.
Étape 5 : Interaction avec JavaScript
• Ajoutez une petite interactivité à votre site web en utilisant JavaScript. Par exemple, un
formulaire de contact qui valide les entrées, ou un effet de survol sur vos projets.
• Assurez-vous que le code JavaScript est correctement intégré dans vos fichiers HTML.
Étape 6 : Test et Débogage
• Testez votre site sur différents navigateurs pour assurer la compatibilité.
• Vérifiez que toutes les fonctionnalités fonctionnent correctement.
• Relisez le contenu pour corriger les erreurs de frappe ou de grammaire.
Étape 7 : Publication
• Hébergez votre site sur un service d'hébergement gratuit (par exemple, GitHub Pages)
ou déployez-le sur un serveur personnel si vous en avez un.
• Vérifiez que votre site est accessible en ligne.
Page | 3