Comment créer et déployer votre propre site de portfolio personnel

salut! Je m'appelle Kevin Powell. J'adore apprendre aux gens comment créer le Web et comment le rendre beau tant qu'ils y sont.

Je suis ravi d'annoncer que je viens de lancer un cours gratuit qui vous apprend à créer votre propre site Web de portfolio entièrement réactif .

Après avoir terminé ce cours, vous aurez un site de portfolio soigné qui vous aidera à décrocher des entretiens d'embauche et des concerts en freelance. C'est aussi une bonne chose à montrer à vos amis et à votre famille.

Nous allons créer le portefeuille à l'aide de la plate-forme d'apprentissage de code interactive de Scrimba, puis le déployer à l'aide des services cloud de DigitalOcean.

En outre, DigitalOcean a été généreux de donner à tous ceux qui s'inscrivent un crédit gratuit , de sorte que cela ne vous coûtera rien pour le faire fonctionner.

Cet article est une ventilation 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 devez savoir avant de le suivre et ce que vous obtiendrez une fois que vous aurez terminé. Je vous donne également une brève introduction à moi-même.

Quelques informations générales sur l'auteur du cours

Leçon 2: Configurer les choses - HTML

Dans la deuxième partie, je vais vous montrer l'environnement Scrimba et nous allons également mettre en place le projet.

Toutes les images sont fournies, vous n'aurez donc pas à vous soucier de la recherche de la photo parfaite pour le moment. Nous pouvons nous concentrer sur la construction du portefeuille!

N'oubliez pas que vous pouvez accéder à tout ce dont vous avez besoin, du texte et des couleurs aux polices et bien plus encore sur notre page de conception dédiée.

Leçon 3: La zone d'en-tête - HTML

Il est enfin temps de commencer à construire le portefeuille. Dans cette conférence, nous allons créer la section d'en-tête. Nous allons revoir la méthodologie BEM pour définir les noms de classes en CSS, et je pense que vous constaterez que cela rend la navigation simple et directe à créer.

Leçon 4: section Intro

La prochaine étape est la section Intro du portfolio. C'est là que nous allons nous présenter et mettre une image de nous-mêmes.

À la fin, nous ajoutons une section sur les principales compétences / services que nous pouvons faire. Pour le moment, nous pouvons simplement tout remplir avec le texte «Lorem ipsum» comme espace réservé, jusqu'à ce que vous soyez prêt à le 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 3 dernières sections: À propos de moi, où nous allons nous présenter plus en détail; Work, où nous allons ajouter certains de nos exemples de portfolio, et notre pied de page.

Les pieds de page sont idéaux pour créer des liens vers des adresses e-mail et je vais vous montrer comment le faire avec une balise. Nous pouvons également y ajouter nos liens de médias sociaux.

Pour l'instant, tout semble un peu brut et tout le plaisir CSS est devant nous.

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 comment ajouter des propriétés personnalisées.

Bien que la configuration des variables CSS puisse prendre un certain temps, cela est vraiment rentable au fur et à mesure que le site se réunit. Ils sont également parfaits pour vous permettre de personnaliser les couleurs et les polices du site en quelques secondes, ce que je regarde comment faire une fois le site terminé.

Leçon 7: Styliser les titres et sous-titres

Après avoir défini toute la typographie nécessaire, je vous guiderai à travers les sous-titres de conception et de style des titres et des sous-titres dans nos sections.

Leçon 8: Configuration de la section intro

Au cours des prochains chapitres, ce sera assez pratique, donc ne vous inquiétez pas si vous avez envie de revoir les captures d'écran plusieurs fois.

Nous gardons tout réactif, en utilisant CSS Grid et en nous plongeant un peu dans l'utilisation des emunités.

C'est l'exemple parfait où CSS Grid brille et nous allons apprendre à utiliser des propriétés telles que grid-column-gap, grid-template-areaset grid-template-columns.

Section d'introduction du site

Leçon 9: Styliser la section des services

Pour ajouter un peu d'intérêt, je regarde comment nous pouvons ajouter un background-imageà cette section du site. C'est un bon moyen de briser la seconde et d'éviter d'avoir des arrière-plans de couleur unie partout, et je regarde également comment vous pouvez utiliser background-blend-modepour changer la couleur de l'image pour aider à garder l'apparence de votre site cohérente.

En prime, nous allons également apprendre à styliser les boutons lorsqu'ils sont survolés ou sélectionnés lorsque nous naviguons sur la page.

La section services du site

Leçon 10: La section À propos de moi

Grand progrès! Voici donc la section la plus importante à mon sujet. Celui-ci est assez similaire à l'Intro car nous allons utiliser CSS Grid, mais déplacez l'image vers le côté droit et trouvez un exemple utile pour l' frunité CSS .

La section À propos de moi du site

Leçon 11: Le portfolio

La section portfolio

Dans ce screencast, je vais montrer comment créer notre section portfolio pour afficher certains de nos excellents travaux. Et nous allons même apprendre à utiliser cubic-bezier()pour un effet génial et impressionnant avec un style de survol!

Section portfolio avec élément en surbrillance

Leçon 12: Ajout des icônes sociales avec Font Awesome

Ce casting sera doux et court, vous pourrez donc vous reposer un peu et apprendre quelques trucs et astuces rapides.

L'ajout de liens de médias sociaux avec les icônes Font Awesome est un jeu d'enfant. Nous pouvons le faire avec une balise, puis en ajoutant un nom de classe d'une icône que vous souhaitez ajouter.

À titre d'exemple, voici comment ajouter une icône pour GitHub une fois que Font Awesome est lié dans votre balisage.

Leçon 13: Styliser le pied de page

Le pied de page

Pendant que les icônes sont en place, nous devons ajouter plus de style ici pour les configurer comme nous en avons besoin.

Avec un peu d'utilisation de flexbox et en supprimant le style de la liste, list-style: nonec'est relativement simple.

Leçon 14: Configuration des styles de navigation

Nous avons laissé la navigation à la fin car c'est très souvent 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 glisse lorsqu'un utilisateur clique sur l'icône du hamburger. Cependant, la première étape consiste à lui donner le style que nous voulons, puis nous pouvons nous soucier de le faire fonctionner!

menu de navigation stylisé

Leçon 14: Créer le hamburger

plan du haut de la page avec une flèche mettant en évidence l'icône du hambuerger

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 allons avoir une pratique aléatoire ::beforeet des ::afterpseudo-sélecteurs, une transition et, comme 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 hamburger pour indiquer qu'il est possible de cliquer dessus cursor: pointer.

Leçon 15: Ajout du JS

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.

menu ouvrir / fermer l'animation

Je regarde également comment nous pouvons ajouter un défilement fluide avec CSS uniquement en utilisant scroll-behavior: smooth. Oui, c'est aussi simple que cela! C'est aussi un excellent tweet pour Today I Learned (TIL). N'hésitez pas à vous envoyer des TIL à @scrimba et je suis sûr qu'ils seront très heureux de les retweeter!

Leçon 16: Création de la page d'élément de portefeuille

Une fois la page d'accueil terminée, il est temps de travailler sur un modèle de page de portefeuille qui peut être utilisé pour donner plus de détails sur chacun des projets que vous mettez dans votre portefeuille.

Nous allons également apprendre à le lier de manière transparente à notre page principale pour une expérience utilisateur agréable.

page d'élément de portefeuille

Leçon 17: Personnaliser votre page

C'est là 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 jeu de couleurs de votre site en quelques secondes, et comment nous pouvons mettre à jour les polices rapidement et facilement afin de personnaliser le site!

Leçon 18: Gouttelettes DigitalOcean - Ce qu'elles sont et comment en configurer une

Dans ce screencast, nous allons explorer les gouttelettes 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 sont livrés avec de nombreuses fonctionnalités utiles, comme un pare-feu automatiquement.

Tableau de bord DigitalOcean

Je vais vous expliquer chaque étape du processus afin que vous sachiez exactement comment mettre en place une gouttelette.

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 dans la gouttelette que nous avons créée dans le chapitre précédent et maintenant elle est en ligne pour que les autres le voient!

Leçon 20: Récapitulation

Et c'est tout! Votre prochaine étape peut être de faire en sorte que cette page soit entièrement consacrée à vous, d'ajouter tous les exemples pertinents, de nous parler de vous et de la faire vivre dans une goutte DigitalOcean.

Une fois que vous avez assemblé le vôtre et l'avez mis en ligne, partagez votre portfolio avec Moi et l'équipe de Scrimba! Vous pouvez nous trouver sur @KevinJPowell et @scrimba sur Twitter, et nous serions très heureux de partager ce que vous faites!

Découvrez le cours complet

N'oubliez pas que ce cours est entièrement gratuit. Rendez-vous sur Scrimba maintenant et vous pouvez le suivre et créer un site fantastique!

Original text