---
title: Portfolio & cv
tags: support, accessibility, good practice
robots: noindex, nofollow
author: Giuseppe Militello
---
# 🚀 Conception et intégration html css de votre Portfolio
> © [Giuseppe Militello](https://www.linkedin.com/in/giuseppe-militello-22406ab0/) - All rights reserved for educational purposes only
>Pour l'année prochaine en vue de vos examens vous avez l'obligation pour le E5 de faire une présentation professionnelle de votre projet qui sera lié à votre Portfolio.
## bonnes pratique pour réussir son portfolio
| N° | Bonne Pratique pour un Portfolio HTML/CSS | Description |
|-----|---------------------------------------------------|--------------------------------------------------------------------------------------------------------------|
| 1 | Design clair et attractif | Utiliser une mise en page propre et professionnelle avec une palette de couleurs cohérente et des polices lisibles pour attirer l'attention des visiteurs. |
| 2 | Navigation intuitive | Assurer une navigation simple et logique avec un menu clair et des liens facilement accessibles pour que les visiteurs puissent facilement trouver les informations. |
| 3 | Réactivité (Responsive Design) | Utiliser des media queries pour que le portfolio s'affiche correctement sur tous les appareils, y compris les smartphones, les tablettes et les ordinateurs de bureau. |
| 4 | Présentation des projets | Inclure des descriptions détaillées, des images et des liens vers les projets réalisés pour montrer vos compétences et expériences de manière efficace. |
| 5 | Optimisation des performances | Optimiser les images, minimiser le CSS et le JavaScript, et utiliser des techniques comme la mise en cache pour garantir des temps de chargement rapides.
## Design thinking
Le design thinking est une méthodologie empruntée aux designers qui peut s'appliquer à n'importe quel projet.
*Les différents étapes du design thinking*
## Menez un petit projet comme la création ou la refonte de votre CV
1. **empathie** : faire de la recherche sur le poste et les entreprises que vous visez, leur culture, les atouts auxquelles elles sont sensibles, les compétences recherchées sur le marché de l'emploi qui lui est lié…
2. **définition** : formuler en une phrase le CV idéal qui vous décrochera un entretien d'embauche pour l'entreprise et le poste que vous visez.
3. **brainstorming** : faire un "mood board" visuel des couleurs, designs, dispositions de contenus des CV les plus créatifs et/ou en lien avec le domaine ; trouver des idées pour se démarquer des autres…
4. **prototype** : réaliser un premier jet ou un brouillon au crayon sur une feuille de papier pour visualiser l'emplacement des différentes sections et leur apparence.
Montrer ce CV brouillon à des personnes lié à ce secteur d'activité et leur demander leurs retours critiques.
5. **itération** : améliorer le brouillon en prenant en compte le feedback puis passer au niveau au-dessus pour réaliser le CV depuis votre ordinateur à l'aide d'un outil graphique ou numérique. Tester cette nouvelle version auprès de votre réseau pour le peaufiner et ajouter les derniers détails. Puis, postulez avec ce CV.
## Prototyper
Le prototypage c'est un travail de représentation visuelle du concept à concevoir.
On parle aussi de maquette. Un prototype n'a pas vocation à être abouti. C'est une première version. Vouloir faire un prototype parfait dès le début est une erreur de débutant.
## 🧑💻 Etape de conception
1. Créez une maquette ou un wireframe pour visualiser la structure et la disposition de votre page
2. Choisissez une approche de conception responsive pour garantir une expérience utilisateur optimale sur tous les appareils
3. Concevoir pour tous les appareils: smartphone, tablette et pc
## 💻 Etape intégration : respecter les consignes ci-dessous:
1. vous devez créer un répertoire "*projet-portfolio*" qui doit contenir : un répertoire **asset, favicon, css, .gitignore, readme.md le fichier index.html**
2. On vous proposer d'enrichir toute la partie d'entête, puisque par défaut certaines balise ne sont pas intégrées: il faut améliorer le head de la page et ajouter des icônes.
3. Pour la css vous devez utiliser les méthodes que nous avons utilisées en cours : reset et thème: privilégier l'importation des fichiers css.
## 🧑💻 Structure d'exemple html
```html=
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio : développement web</title>
</head>
<body>
<header>
<h1>
Portfolio : développement web
</h1>
</header>
<main>
<figure>
<img src="https://www.les-prenoms.org/i/icon/casadepapel.png" alt="Logo du portfolio">
<figcaption>
<h2>Compétences</h2>
<ul>
<li>Accueillir</li>
<li>Vendre</li>
<li>Orienter</li>
</ul>
<h2> Logiciel, IDE web ou expertise </h2>
<ul>
<li>Visual Studio</li>
<li>Doctolib professionnel</li>
<li>Words / Excel / Powerpoint</li>
</ul>
<h2>Experiences professionnelles</h2>
<ul>
<li><time datetime="2021-09-01">[09/2021 - 10/2021]</time> Centre sportif (Agent d'accueil)</li>
<li><time datetime="2016-01-01">[11/2016 - 05/2018]</time> Club Med</li>
<li><time datetime="2014-01-01">[11/2014 - 12/2014]</time> Darty (Vendeur Multimedia)</li>
</ul>
<h2>Etudes</h2>
<ul>
<li><time datetime="2014-01-01">[2014 - 2015]</time> Baccalauréat professionnel de commerce (Bac)</li>
<li><time datetime="2013-01-01">[2013 -2014]</time> Brevet d’études professionnelles (BEP)</li>
<li><time datetime="2013-01-01">[2013 -2014]</time> Brevet des collèges</li>
</ul>
<h2>Activités extra-professionnelles</h2>
<ul>
<li>Lecture</li>
<li>Jeux Video</li>
<li>Musique</li>
</ul>
</figcaption>
</figure>
</main>
<footer>
<p>
© - MIT - 2022
</p>
</footer>
</body>
</html>
````
> La structure que vous réaliserez sera en rélation ce que vous ferez en conception
> Utilisez des balises sémantiques HTML pour structurer correctement le contenu de votre page (par exemple, `<header>, <nav>, <main>, <footer>).`
## 💻 Etape fonctionnelle
>Cette étape consiste à créer des composants d'interface capable de faire modifier la page par l'internaute.
>Toutes les fonctionnalités seront développées en javascript
>Tout le code html, css et javscript doit être au normes: html5, css3 et EcmaScript 6,7,8 pas de version 5.
>Ce portfolio ne comorte pas de framework js ni css
>Pour la présentation et les différentes étapes du projet doivent être déposées dans votre dépôt GitHub
> 👍**Bon travail!**
Sign in with Wallet
Connect another wallet