--- title: Structurez votre portfolio développeur tags: cours, html, javascript robots: noindex, nofollow author: Giuseppe Militello --- # 😀 Création d'un Portfolio de Développeur Front ou Back ![](https://i.imgur.com/u3mRilZ.png) ## 🎓 Objectifs Le but de ce projet est de créer un portfolio en ligne attrayant qui mettra en valeur vos compétences en tant que développeur. Votre portfolio servira de vitrine de vos projets, compétences et expériences. Vous cherchez un stage ou un job cela est l'idéal pour mieux vous faire connaitre ## Description: Votre portfolio doit inclure les éléments suivants : ## 😎 Home page * Créez votre répertoire de travail avec tous les sous-répertoires : css/ asset/, js/, favicon. Un readme.md pour github * Une bannière avec votre nom et éventuellement une image de profil. * Une section "À propos de moi" où vous pourrez vous présenter brièvement. * Une section "Compétences" mettant en évidence vos compétences clés en développement front-end. * Une section "Projets" présentant quelques-uns de vos projets passés, avec des liens vers les démos ou les codes sources. * Un footer de page avec des liens vers vos profils sur les réseaux sociaux (par exemple, LinkedIn, GitHub, X) et copyright ## Page de Contact (contact.html): * Une adresse e-mail où les visiteurs peuvent vous contacter directement. * Des liens vers vos profils sur les réseaux sociaux. ## Exigences Techniques: :+1: 1. La page HTML doit être validée par le W3C 2. Assurez-vous que votre portfolio est accessible et respecte les bonnes pratiques d'accessibilité Web (WCAG). 3. En css pour les tailles de la police de caractères et tous les autres privilégiez le **REM** au lieu du **pixel** 4. Veillez à ce que votre code soit propre et bien commenté. 5. Utilisez des images optimisées pour le web afin d'optimiser les temps de chargement. 6. Le titre principal dans header > h1 7. Un logo ou votre photo 8. Une ou des sections (mon expérience, mes compétences, ma formation) sont en titre h2. 9. Chaque section contient une liste à puce. 10. Testez votre portfolio sur plusieurs navigateurs et appareils pour assurer une compatibilité croisée. 11. Remplissez tous critères pour valider vos connaissances techniques ## Suivie du projet Pour ce projet vous devez créer un dépôt git. Cela me permet de suivre l'évolution de votre portfolio, faciliter les échanges et pouvoir valider toutes les étapes. ## Pour la réalisation : evitez les déchets ![](https://hackmd.io/_uploads/Hka0ZTB02.png) Concentrez toute votre énergie à une réalisation pertinante et accessible pour le plus grand nombre d'utilisateurs : voyant, non voyant, smartphone, tablet et desktop. Créer une première version à évaluer en mode statique le html, css. Pour la suite vous pouvez séparer les contenus du contanant en créant soit un flux d'information, soit des informations stockées directement dans une base de donnée. ## Publication Le projet doit être livré dans un dépôt gitHubT dédié à cet effet. Assurez-vous que les liens internes entre les pages fonctionnent correctement. Sur gitHub vous devez à la fois afficher le code et publier la page d'index.html. Documentez avec beaucoup de soin votre **readme** ## Critères d'Évaluation: Le projet sera évalué en fonction des critères suivants: * Conformité aux exigences techniques. * Qualité du design et de l'expérience utilisateur: voir wireframe * Présentation des informations (compétences, projets, etc.). * Accessibilité et compatibilité avec différents appareils et navigateurs. * Propreté du code et commentaires. >N'hésitez pas à personnaliser cet énoncé en fonction de vos besoins spécifiques et de vos préférences de conception. Ce projet vous permettra de démontrer vos compétences en développement front-end et de créer une vitrine professionnelle en ligne pour votre travail. > **Auteur** : Militello Giuseppe