Article original : How to build and deploy your own personal portfolio site
Par Kevin Powell
Bonjour ! Je m'appelle Kevin Powell. J'adore enseigner aux gens comment construire le web et comment le rendre beau en même temps.
Je suis ravi d'annoncer que je viens de lancer un cours gratuit qui vous apprend à créer votre propre site portfolio totalement responsive.
Après avoir terminé ce cours, vous aurez un site portfolio élégant qui vous aidera à obtenir des entretiens d'embauche et des missions freelance. C'est aussi quelque chose de cool à montrer à vos amis et à votre famille.
Nous allons construire le portfolio en utilisant la plateforme interactive d'apprentissage du code de Scrimba, puis le déployer en utilisant les services cloud de DigitalOcean.
De plus, DigitalOcean a généreusement offert à tous ceux qui s'inscrivent un crédit gratuit, donc cela ne vous coûtera rien pour le mettre en ligne.
Cet article est une présentation du cours lui-même, vous donnant une idée de ce qui est inclus dans toutes les leçons. Si vous aimez ce que vous voyez, assurez-vous de le vérifier sur Scrimba !
Leçon 1 : Introduction
Dans la première leçon, vous aurez un aperçu du cours afin de savoir à quoi vous attendre, ce que vous devriez savoir avant de le suivre, et ce que vous aurez une fois terminé. Je vous donne également une rapide introduction à moi-même.
Leçon 2 : Configuration des éléments - HTML
Dans la deuxième partie, je vais vous montrer l'environnement Scrimba et nous allons également configurer le projet.
Toutes les images sont fournies, donc vous n'aurez pas à vous soucier de chercher la photo parfaite pour l'instant. Nous pouvons nous concentrer sur la construction du portfolio !
N'oubliez pas que vous pouvez accéder à tout ce dont vous avez besoin, des textes et couleurs aux polices et bien plus encore, sur notre page de design dédiée.
Leçon 3 : La zone d'en-tête - HTML
Il est enfin temps de commencer à construire le portfolio. Dans cette leçon, nous allons créer la section d'en-tête. Nous allons nous rafraîchir la mémoire sur la méthodologie BEM pour définir les noms de classes en CSS, et je pense que vous trouverez que cela rend la navigation simple et directe à créer.
Leçon 4 : Section d'introduction
Ensuite, nous avons la section d'introduction du portfolio. C'est ici que nous allons nous présenter et mettre une photo de nous-mêmes.
À la fin, nous ajoutons une section sur les principales compétences/services que nous pouvons offrir. Pour l'instant, nous pouvons simplement la remplir avec du texte "Lorem ipsum" comme espace réservé, jusqu'à ce que vous soyez prêt à la remplir avec votre propre texte.
Leçon 5 : À propos de moi, Travail et Pied de page - HTML
Dans ce chapitre, nous terminons le reste de notre HTML avec les trois dernières sections : À propos de moi, où nous allons nous présenter en détail ; Travail, où nous allons ajouter quelques exemples de notre portfolio, et notre pied de page.
Les pieds de page sont idéaux pour lier des adresses e-mail et je vais vous montrer comment faire cela avec une balise <a>. Nous pouvons également ajouter nos liens de réseaux sociaux là aussi.
Pour l'instant, tout cela semble un peu brut et tout le plaisir du CSS nous attend.
Leçon 6 : Configuration des propriétés personnalisées et des styles généraux
D'accord, il est temps de rendre cette page incroyable !
Dans cette partie, nous allons apprendre à ajouter des propriétés personnalisées.
Bien que la configuration des variables CSS puisse prendre un certain temps, cela en vaut vraiment la peine à mesure que le site se construit. Elles sont également parfaites pour vous permettre de personnaliser les couleurs et les polices du site en quelques secondes, ce que je vais examiner comment faire une fois que nous aurons terminé le site.
Leçon 7 : Stylisation des titres et sous-titres
Ayant défini toute la typographie nécessaire, je vais vous guider à travers les sous-titres de la conception et du style des titres et sous-titres dans nos sections.
Leçon 8 : Configuration de la section d'introduction
Au cours des prochains chapitres, cela va être assez pratique, donc ne vous inquiétez pas si vous avez l'impression de devoir regarder les screencasts plusieurs fois.
Nous gardons tout responsive, en utilisant CSS Grid et en plongeant un peu dans l'utilisation des unités em.
C'est l'exemple parfait où CSS Grid se distingue et nous allons apprendre à utiliser des propriétés comme grid-column-gap, grid-template-areas et grid-template-columns.
Leçon 9 : Stylisation de la section des services
Pour ajouter un peu d'intérêt, je regarde comment nous pouvons ajouter une background-image à cette section du site. C'est une bonne façon de briser la seconde et d'éviter d'avoir des arrière-plans de couleur unie partout, et je regarde également comment vous pourriez utiliser background-blend-mode pour changer la couleur de l'image afin d'aider à garder l'apparence de votre site cohérente.
En bonus, nous allons également apprendre à styliser les boutons lorsqu'ils sont survolés ou sélectionnés lorsque nous parcourons la page avec la touche de tabulation.
Leçon 10 : La section À propos de moi
Super progression ! Donc voici la section très importante À propos de moi. Celle-ci est assez similaire à l'Intro car nous allons utiliser CSS Grid, mais déplacer l'image à droite et trouver un exemple utile pour l'unité CSS fr.
Leçon 11 : Le portfolio
Dans ce screencast, je vais montrer comment construire notre section portfolio pour afficher certains de nos grands travaux. Et nous allons même apprendre à utiliser cubic-bezier() pour un effet impressionnant avec un peu de style de survol !
Leçon 12 : Ajout des icônes sociales avec Font Awesome
Ce cast sera court et doux, donc vous pouvez vous reposer un peu et apprendre quelques astuces et conseils rapides.
Ajouter des liens de réseaux sociaux avec des icônes Font Awesome est un jeu d'enfant. Nous pouvons le faire avec une balise <i> puis en ajoutant un nom de classe d'une icône que vous souhaitez ajouter.
Par exemple, voici comment ajouter une icône pour GitHub une fois que vous avez lié Font Awesome dans votre balisage.
<i class="fab fa-github"></i>
Leçon 13 : Stylisation du pied de page
Bien que les icônes soient en place, nous devons ajouter plus de style ici pour les configurer comme nous le souhaitons.
Avec une petite utilisation de flexbox et en supprimant le style de la liste avec list-style: none, c'est relativement simple.
Leçon 14 : Configuration des styles de navigation
Nous avons laissé la navigation pour la fin car très souvent c'est l'une de ces choses simples qui peuvent prendre le plus de temps à configurer et à faire correctement.
Une fois terminée, la navigation sera hors écran, mais glissera lorsque l'utilisateur cliquera sur l'icône du menu hamburger. La première étape, cependant, est de la styliser comme nous le voulons, puis nous pourrons nous soucier de la faire fonctionner !
Leçon 14 : Création du menu hamburger
Dans ce screencast, vous apprendrez comment ajouter un menu hamburger pour passer à la vue de navigation. Ce n'est pas une icône ou un svg, mais du CSS pur.
Nous aurons l'occasion de pratiquer les pseudo-sélecteurs ::before et ::after, la transition, et, puisque ce n'est pas un lien mais un button, nous devons également définir le curseur différent lorsque nous survolons l'icône du menu hamburger pour indiquer qu'il peut être cliqué avec cursor: pointer.
Leçon 15 : Ajout du JavaScript
Avec un peu de JavaScript, je vais vous guider à travers la mise en œuvre d'une transition vraiment agréable et fluide de notre écran principal à la fenêtre de navigation en cliquant sur le menu hamburger.
Je regarde également comment nous pouvons ajouter un défilement fluide avec uniquement du CSS en utilisant scroll-behavior: smooth. Oui, c'est vraiment aussi simple ! Cela fait également un excellent tweet pour Today I Learned (TIL). N'hésitez pas à envoyer vos TILs à @scrimba et je suis sûr qu'ils seront très heureux de les retweeter !
Leçon 16 : Création de la page des éléments du portfolio
Avec la page d'accueil terminée, il est temps de travailler sur une page de portfolio modèle qui peut être utilisée pour donner plus de détails sur chacun des projets que vous mettez dans votre portfolio.
Nous allons également apprendre à la lier de manière transparente avec notre page principale pour une bonne expérience utilisateur.
Leçon 17 : Personnalisation de votre page
C'est ici que la magie des propriétés personnalisées CSS entre en jeu !
Dans cette vidéo, je regarde comment nous pouvons personnaliser les propriétés personnalisées que nous avons configurées pour changer le schéma de couleurs de votre site en quelques secondes, et comment nous pouvons mettre à jour les polices rapidement et facilement afin de rendre le site vraiment vôtre !
Leçon 18 : DigitalOcean Droplets - Qu'est-ce que c'est et comment en configurer un
Dans ce screencast, nous allons explorer les droplets de DigitalOcean. Ce sont des machines virtuelles basées sur Linux et chaque droplet est un nouveau serveur que vous pouvez utiliser.
Cela peut sembler intimidant, mais ils sont super faciles à configurer, très personnalisables et viennent avec beaucoup de fonctionnalités utiles, comme un pare-feu automatique.
Je vais vous guider à travers chaque étape afin que vous sachiez exactement comment configurer un droplet.
Leçon 19 : DigitalOcean Droplets - Téléchargement de fichiers via FTP
Pour terminer tout le processus, laissez-moi vous montrer comment nous pouvons télécharger notre portfolio sur le droplet que nous avons créé dans le chapitre précédent et maintenant il est en ligne pour que les autres puissent le voir !
Leçon 20 : Conclusion
Et c'est tout ! Votre prochaine étape peut être de faire de cette page une page entièrement à votre image, d'ajouter tous les exemples pertinents, de nous parler de vous et de la rendre vivante dans un droplet DigitalOcean.
Une fois que vous aurez assemblé la vôtre et l'aurez mise en ligne, veuillez partager votre portfolio avec moi et l'équipe de Scrimba ! Vous pouvez nous trouver sur Twitter à @KevinJPowell et @scrimba, et nous serions vraiment heureux de partager ce que vous faites !
Consultez le cours complet
Rappelez-vous, ce cours est complètement gratuit. Rendez-vous sur Scrimba maintenant et vous pouvez le suivre et construire un site fantastique !