Intégration HTML5 / CSS3 d'un portfolio minimaliste
ERROR
00:00
00:00

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

Damien Gallez
20,00€

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
22m19s
Leçon 2Intégration de la page d'accueil, partie 2
22m31s
Leçon 3Intégration de la page d'accueil, partie 3
20m48s
Leçon 4Intégration de la page d'accueil, partie 4
27m02s
Leçon 5Intégration de la page d'accueil, partie 5
34m28s
Leçon 6Intégration de la page d'accueil, partie 6
24m25s
Leçon 7Intégration de la page d'accueil, partie 7
31m26s
Leçon 8Intégration de la page A propos, partie 1
23m54s
Leçon 9Intégration de la page A propos, partie 2
20m26s
Leçon 10Intégration de la page Portfolio
21m18s
Leçon 11Intégration de la page Projet
23m40s
Leçon 12Intégration de la page Blog
20m56s
Leçon 13Intégration de la page Article blog
05m08s
Leçon 14Conclusion
06m39s

Aperçus

Avis des apprenants

Détail des avis
335
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

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données