COMMENT

Page d'accueil

Menus

Barre d'icônes Icône de menu Accordéon Onglets Onglets verticaux En-têtes d'onglet Onglets pleine page Onglets de survol Navigation supérieure Topnav réactif Barre de navigation avec icônes Menu de recherche Barre de recherche Barre latérale fixe Navigation dans les pages Barre latérale réactive Navigation plein écran Menu hors-toile Survolez les boutons Sidenav Barre latérale avec icônes Menu de défilement horizontal Menu vertical Navigation en bas Bas de page réactif Liens de navigation de la bordure inférieure Liens de menu alignés à droite Lien de menu centré Liens de menu de même largeur Menu fixe Faites glisser la barre vers le bas sur le défilement Masquer la barre de navigation sur le défilement Réduire la barre de navigation lors du défilement Barre de navigation collante Barre de navigation sur l'image Survolez les listes déroulantes Cliquez sur Listes déroulantes Liste déroulante en cascade Liste déroulante dans Topnav Liste déroulante dans Sidenav Liste déroulante de la barre de navigation Resp Menu de sous-navigation Déposer jusqu'à Méga Menu Menu mobile Menu rideau Barre latérale réduite Panneau latéral réduit Pagination Chapelure Groupe de boutons Groupe de boutons verticaux Barre sociale collante Navigation dans les pilules En-tête réactif

Images

Diaporama Galerie de diaporamas Images modales Boite à lumière Grille d'images réactive Grille d'images Galerie d'onglets Fondu de superposition d'image Diapositive de superposition d'image Zoom de superposition d'image Titre de superposition d'image Icône de superposition d'image Effets d'image Image en noir et blanc Texte de l'image Blocs de texte d'image Texte d'image transparent Image pleine page Formulaire sur l'image Image du héros Image d'arrière-plan floue Changer Bg sur le défilement Images côte à côte Images arrondies Images d'avatars Images réactives Centrer les images Vignettes Bordure autour de l'image Rencontrer l'équipe Image collante Retourner une image Secouer une image Galerie de portefeuilles Portefeuille avec filtrage Zoom sur les images Loupe d'image Curseur de comparaison d'images Icône de favori

Boutons

Boutons d'alerte Boutons de contour Boutons partagés Boutons animés Boutons de fondu Bouton sur l'image Boutons de médias sociaux En savoir plus En lire moins Boutons de chargement Boutons de téléchargement Boutons de pilule Bouton de notification Boutons d'icône Boutons suivant/précédent Plus de bouton dans la navigation Bloquer les boutons Boutons de texte Boutons ronds Bouton de défilement vers le haut

Formes

Formulaire de connexion Formulaire d'inscription Formulaire de paiement Formulaire de contact Formulaire de connexion sociale Formulaire d'inscription Formulaire avec icônes Bulletin Formulaire empilé Formulaire réactif Formulaire contextuel Formulaire en ligne Effacer le champ de saisie Masquer les flèches numérotées Copier le texte dans le presse-papiers Recherche animée Bouton de recherche Recherche plein écran Champ de saisie dans la barre de navigation Formulaire de connexion dans la barre de navigation Case à cocher personnalisée/Radio Sélection personnalisée Interrupteur à bascule Cochez la case Détecter le verrouillage des majuscules Bouton de déclenchement à l'entrée Validation du mot de passe Basculer la visibilité du mot de passe Formulaire en plusieurs étapes Saisie automatique Désactiver la saisie semi-automatique Désactiver le correcteur orthographique Bouton de téléchargement de fichier Validation d'entrée vide

Filtres

Filtrer la liste Tableau de filtrage Éléments filtrants Liste déroulante des filtres Trier la liste Sort Table

les tables

Table à rayures zébrées Tables centrales Tableau pleine largeur Tableaux côte à côte Tableaux réactifs Tableau de comparaison

Suite

Vidéo plein écran Boîtes modales Supprimer modal Chronologie Indicateur de défilement Barres de progression Barre de compétences Curseurs de plage Info-bulles Survol de l'élément d'affichage Popups Pliant Calendrier HTML inclut Liste de choses à faire Chargeurs Évaluation étoilée Note de l'utilisateur Effet de superposition Contacter les puces Cartes Retourner la carte Carte de profil Fiche produit Alertes Faire appel à Remarques Étiquettes Cercles Style RH Coupon Groupe de liste Liste sans puces Texte réactif Texte découpé Texte lumineux Pied de page fixe Élément collant Hauteur égale Clearfix Flotteurs réactifs Snack-bar Fenêtre plein écran Faire défiler le dessin Défilement lisse Dégradé Bg Défilement En-tête collant Réduire l'en-tête lors du défilement Tableau des prix Parallaxe Ratio d'aspect Iframes réactifs Basculer J'aime/Je n'aime pas Basculer Masquer/Afficher Basculer en mode sombre Basculer le texte Basculer la classe Ajouter une classe Supprimer la classe Classe active Arborescence Supprimer la propriété Détection hors ligne Trouver l'élément caché Rediriger la page Web Zoom survol Boîte à rabat Centrer verticalement Bouton central en DIV Transition au survol Flèches Formes Lien de téléchargement Élément pleine hauteur Fenêtre du navigateur Barre de défilement personnalisée Masquer la barre de défilement Afficher/Forcer la barre de défilement Apparence de l'appareil Bordure modifiable Couleur de l'espace réservé Couleur de sélection de texte Couleur de puce Ligne verticale Diviseurs Animer des icônes Compte à rebours Machine à écrire Bientôt disponible Chat Messages Fenêtre de discussion contextuelle Écran divisé Témoignages Compteur de sections Diaporama de citations Éléments de liste fermables Points d'arrêt de périphérique typiques Élément HTML déplaçable Requêtes multimédia JS Surligneur de syntaxe Animations JS Longueur de la chaîne JS Exponentation JS Paramètres JS par défaut Obtenir l'URL actuelle Obtenir la taille d'écran actuelle Obtenir des éléments Iframe

Site Internet

Créer un site Web gratuit Créer un site Web Créer un site Web statique Créer un site Web (W3.CSS) Créer un site Web (BS3) Créer un site Web (BS4) Créer un site Web (BS5) Créer et afficher un site Web Créer un site Web d'arborescence de liens Créer un portefeuille Créer un CV Créer un site Web de restaurant Créer un site Web d'entreprise Créer un WebBook Site Web du centre Contacter la rubrique À propos de la page Grand en-tête Exemple de site Web

Grille

Disposition à 2 colonnes Disposition à 3 colonnes Disposition à 4 colonnes Grille extensible Affichage de la grille de liste Disposition des colonnes mixtes Cartes de colonne Disposition en zigzag Mise en page du blog

Google

Graphiques Google Polices Google Associations de polices Google Configurer Google Analytics

Convertisseurs

Convertir le poids Convertir la température Convertir la longueur Convertir la vitesse

Blog

Obtenir un emploi de développeur Devenez développeur front-end.

Comment créer un portefeuille

Le portfolio est essentiel pour se faire remarquer.

Créer un portfolio est un bon moyen de développer votre présence en ligne.

Le portfolio sert à mettre en valeur vos compétences et vos projets.

Cela peut vous aider à trouver un emploi, un travail indépendant ou un stage.

Créer mon portfolio gratuitement »

Qu'est-ce qu'un portefeuille

Le portfolio peut avoir le même objectif qu'un CV. La plupart des CV sont rédigés avec du texte, tandis que le portfolio est destiné à la présentation, il est donc visuel avec des images et souvent plus détaillé que le CV.

C'est un endroit où vous pouvez montrer votre expérience de travail et présenter les projets dont vous êtes le plus fier.

Votre portfolio en ligne peut être partagé avec son lien avec les entreprises, les responsables du recrutement et les recruteurs, afin qu'ils puissent vous remarquer.

Il s'agit de montrer et de donner aux autres une compréhension de qui vous êtes en tant que professionnel.


Pourquoi créer un portefeuille

C'est un excellent moyen de développer votre présence en ligne et de vous faire remarquer.

Il peut être utilisé pour obtenir un emploi ou pour attirer des clients vers vos services.

L'avoir en ligne en tant que site Web. Permet aux personnes du monde entier de vous trouver.

La conception du portfolio donnera au lecteur une impression de qui vous êtes. Assurez-vous qu'il apparaît d'une manière bonne et présentable!


À qui s'adresse un portefeuille

Créer un portfolio peut être important pour votre carrière.

Cela peut être utile lors de la recherche d'un emploi, d'un travail indépendant ou de la présentation de vos compétences à un nouveau client.

Les rôles typiques qui utilisent les portefeuilles sont des professionnels tels que, mais sans s'y limiter :

  • Développeurs de logiciels
  • Concepteurs UX
  • Graphistes
  • Photographes
  • Professionnels du marketing
  • Architectes
  • Écrivains

Avez-vous déjà entendu parler des Espaces W3Schools ? Ici, vous pouvez créer votre portfolio à partir de zéro ou utiliser un modèle et l'héberger gratuitement.

Commencez gratuitement ❯

* Pas de carte de crédit nécessaire


Quelles sont les sections les plus importantes d'un portfolio

Il existe de nombreuses façons de créer un portefeuille.

La façon de le créer dépend du type de professionnel que vous êtes, pour qui vous le construisez et pourquoi vous le créez.

Il faut tester, échouer et apprendre pour savoir quel type de portefeuille vous convient !

Certaines sections sont essentielles pour tous les types de portefeuilles, résumées ci-dessous :

1. Section héros.

La section héros est la première chose que les gens voient lorsqu'ils entrent dans votre portefeuille.

Il est affiché sous votre logo et votre menu.

La section héros aide le lecteur à comprendre ce que vous proposez, pourquoi quelqu'un devrait travailler avec vous et la valeur que vous offrez avec vos services.

Il contient souvent un bouton d'appel à l'action comme "contactez-moi", "réservez une réunion" ou similaire.

section héros

2. Section À propos de moi.

Donnez au lecteur un bref résumé de vous-même.

Incluez des sujets tels que votre formation, votre expérience de travail, vos projets et vos intérêts.

Aidez le lecteur à comprendre ce qui vous passionne et vos super pouvoirs (les choses pour lesquelles vous êtes vraiment doué).

N'oubliez pas de le garder court et simple.

à propos de la section

3. Rubrique Projets.

Listez les projets sur lesquels vous avez travaillé. Le moyen le plus utilisé est de classer la liste par date, mais dans certains cas, il peut être judicieux de les classer d'une autre manière logique.

Ajoutez des détails à chaque projet, y compris votre rôle, ce que vous avez fait et comment le projet s'est déroulé.

Ajouter des photos pour mettre en valeur ce que vous avez construit est un plus ! Présentez les choses dont vous êtes fier.

rubrique expérience professionnelle

4. Section Contactez-moi.

Faites savoir au lecteur comment et où il peut vous contacter.

Ajoutez vos coordonnées et d'autres canaux de contact tels que votre profil GitHub, LinkedIn, Youtube, etc.

rubrique contactez moi

Exemples de portefeuille

Découvrez quelques exemples de portefeuille.

Vous pouvez charger les modèles de portfolio dans les Espaces W3Schools . Lancez-vous dans la publication de votre portfolio en quelques clics.

Publier mon portfolio gratuitement ❯

* Pas de carte de crédit nécessaire

Modèle de portfolio noir et blanc

Dark Portfolio Template

People Portfolio

My Portfolio Template


What do I need to know to create my own portfolio?

HTML, CSS and JavaScript are the foundational languages to create a website.

You can come a long way just using these three!

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML ❯
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS ❯
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript ❯

How to create a portfolio step-by-step

Follow the steps to create your portfolio from the ground up.


Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor called W3Schools Spaces. Sign up and get started in a few clicks.

Start for free ❯

Create your index.html file. So that you are ready to enter the code.

All set up. Lets go!


Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which holds the code and ensures that it is properly displayed on the internet.

Read here for how to create a basic HTML Skeleton: How to create a HTML Skeleton


Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create well-structured navigation. So that your visitors can find what they are looking for.

Here is an example of how to create a top navigation bar: How to create a Top Navigation Bar


Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.

It should contain short information about several things such as:

  • Who are you?
  • What do you offer?
  • What is your profession?
  • Why should people work with you?
  • Which actions should you take?

Write in first-person and keep it short and simple.

Additional things preferred in the hero section are:

  • Eye-catching graphics, either as a background or side-by-side with the text.
  • An action button that leads to content on your portfolio or to the content of another website.

Here is an example on how to create a Hero section: How to create a Hero image


Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

  • Your introduction
  • Who are you as a professional
  • Your education
  • Your skills
  • Your work experience (present and/or past)
  • Your hobbies
  • Your goals and ambitions

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

Here is an example on how to create an about me section: How to create an About Me section


Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made along your way.

Here you can add:

  • Links to your projects with the project name and/or short description of what the project is about.
  • Links to blog posts that you have written with title and/or short description about what it is about.
  • Your professional awards or achievements.
  • Highlighting your work and your accomplishments is a way to create opportunities for yourself.
  • Visual representations such as images or graphics.

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing down your contact information such as:

  • Address
  • Email
  • Phone number
  • E.g. Github profile, LinkedIn profile, Youtube profile and so on.

Here is an example on how to create a basic contact section: How to create a Contact section


Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

  • Link to "Privacy policy" page
  • Link to "Terms of use" page
  • Contact information
  • Website navigation links
  • Links to social networks
  • Link to your shop

Here is an example on how to build a footer section: How to create a Footer section


W3Schools Spaces

Espaces W3Schools

Build and publish your own Portfolio with W3Schools Spaces.

Get Started for Free