Retrouvez cette formation dans le bundle :
Pack créer et développer un portfolio de A à Z
-25% de réduction
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 !
Table des matières de cette formation Dreamweaver, HTML, CSS (durée : 5h04m)
-
- Intégration de la page d'accueil, partie 1 00:22:19
- Intégration de la page d'accueil, partie 2 00:22:31
- Intégration de la page d'accueil, partie 3 00:20:48
- Intégration de la page d'accueil, partie 4 00:27:02
- Intégration de la page d'accueil, partie 5 00:34:28
- Intégration de la page d'accueil, partie 6 00:24:25
- Intégration de la page d'accueil, partie 7 00:31:26
- Intégration de la page A propos, partie 1 00:23:54
- Intégration de la page A propos, partie 2 00:20:26
- Intégration de la page Portfolio 00:21:18
- Intégration de la page Projet 00:23:40
- Intégration de la page Blog 00:20:56
- Intégration de la page Article blog 00:05:08
- Conclusion 00:06:39
- Fichiers sourcestélécharger
- Certificat
Formateur : Damien Gallez
-
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.
-
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 !
-
Super merci bon tuto tres facile a suivre et a comprendre
note moyenne
avis laissés