Intégration HTML5 / CSS3 d'un portfolio minimaliste
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Intégration HTML5 / CSS3 d'un portfolio minimaliste

Damien Gallez
19,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici la suite de la formation Photoshop consacrée à la création des maquettes des pages du site Internet Portfolio minimaliste.

Cette 2ème partie sera consacrée à l'intégration HTML5 et CSS3 des maquettes Photoshop. Voici le programme de ce tuto :

Page d'accueil :

  • Mise en place d'un moteur de recherche animé
  • Effet d'opacité sur les icônes des réseaux sociaux
  • Création du menu
  • Mise en place d'un slider aux couleurs du site
  • Mise en place des derniers articles à afficher sur la page d'accueil
  • Installation d'un carrousel pour lister vos clients
  • Création du footer

Page A propos :

  • Mise en place d'un slider
  • Installation de barres de compétences animées
  • Mise en place d'un carrousel pour afficher les membres de l'équipe
  • Création d'un sidebar et mise en place des éléments qui la constitue (dernier article, dernier projet, newsletter...)

Page portfolio :

  • Installation d'un portfolio filtrable fluide
  • Effet au rollover sur les images avec icône superposée

Page Singleportfolio :

  • Récupération du slider afin de mettre plusieurs images par projet
  • Informations complémentaires client (date, nom du client, description, site web)
  • Récupération du carrousel pour afficher les projets similaires

Page blog :

  • Listing des dernières actualités du blog avec effet animé sur les images au survol
  • Affichage des catégories du blog dans la sidebar

Page SingleBlog :

  • Récupération du slider afin de mettre plusieurs images par article
  • Récupération du carrousel pour afficher les articles similaires

Au vu du graphisme minimaliste du site, ce dernier sera seulement optimisé pour de l'affichage tablette / mobile. Pour plus d'informations concernant le tuto, merci de visionner l'extrait. Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Intégration de la page d'accueil, partie 1
Leçon 2
Intégration de la page d'accueil, partie 2
Leçon 3
Intégration de la page d'accueil, partie 3
Leçon 4
Intégration de la page d'accueil, partie 4
Leçon 5
Intégration de la page d'accueil, partie 5
Leçon 6
Intégration de la page d'accueil, partie 6
Leçon 7
Intégration de la page d'accueil, partie 7

Plan détaillé du cours

Leçon 1Intégration de la page d'accueil, partie 1
22m19
Leçon 2Intégration de la page d'accueil, partie 2
22m31
Leçon 3Intégration de la page d'accueil, partie 3
20m48
Leçon 4Intégration de la page d'accueil, partie 4
27m02
Leçon 5Intégration de la page d'accueil, partie 5
34m28
Leçon 6Intégration de la page d'accueil, partie 6
24m25
Leçon 7Intégration de la page d'accueil, partie 7
31m26
Leçon 8Intégration de la page A propos, partie 1
23m54
Leçon 9Intégration de la page A propos, partie 2
20m26
Leçon 10Intégration de la page Portfolio
21m18
Leçon 11Intégration de la page Projet
23m40
Leçon 12Intégration de la page Blog
20m56
Leçon 13Intégration de la page Article blog
05m08
Leçon 14Conclusion
06m39

Aperçus

Avis des apprenants

Détail des avis
393
Apprenants
14
Commentaires
5/5
Note moyenne
5/5
11
4/5
1
3/5
0
2/5
0
1/5
0
Ced Dec
Ced Dec
Publié le 24/04/2015
Bonsoir, Comme toujours, très bon tuto. Par contre j'ai un truc un peu bizarre avec le caroussel. En local tout fonctionne parfaitement, mais une fois que je l'envoie sur le serveur, j'ai pas les images. Pourtant elles se trouvent dans le même répertoire que les autres images. il y a une manipulation particulière à faire ou cela vient de mon hébergeur? Je suis chez EX2 et le lien est ici beta.alpha-hydrae.fr Ce n'est vraiment pas urgent, je suis conscient que nous sommes vendredi soir mais d'avance merci.
Damien Gallez
Damien Gallez
Hello je vois les images :) As tu réglé ton problème ?
Patricia Neve
Patricia Neve
Publié le 16/02/2015
Très bon tuto pour un portfolio sympa et dynamqiue. Bravo au formateur pour ses explications claires, techniques, design. J'enchaîne bien évidemment avec l'int'égration dans Wordpress !
Azade Dinesh
Azade Dinesh
Publié le 27/01/2015
super merci bon tuto tres facile a suivre et a comprendre

Payer plus tard

Prix d'achat : 19,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1402 tutos gratuits

Notre politique de protection des données