Voici un pack de formation dédié à la création de A à Z d'un site de type One Page.
La première partie sera consacrée au design du site que nous réaliserons ensemble sur Photoshop. Ensuite, nous passerons à l'intégration de cette maquette pour obtenir un site One Page qui a la particularité de ne pas avoir de rechargement de page et où toute la navigation se fait grâce à un scroll fluide entre chaque rubrique. A la fin de cette formation, vous serez en mesure de designer & d'intégrer un site complet qui pourra être mis en ligne tout de suite.
Pour vous rendre compte du résultat que nous obtiendrons ensemble à la fin de ce tuto, je vous invite à regarder l'extrait vidéo personnalisé que j'ai réalisé. Sommaire de cette formation de plus de 6h30 :
PARTIE 1 : Design du Site
- Création d'un document pour le web
- Réinitialisation & Création d'un nouveau nuancier plus adapté
- Création du background full page ainsi qu'un pattern répété par-dessus
- Création et placements des différents répères
- Création de la sidebar (logo, menu, copyright...)
- Design du lecteur MP3
- Création de la partie News pour la home page du site
- Création de la partie About us
- Création de la partie Contact (formulaire + google map)
- Le mot de la fin de cette première partie
PARTIE 2 : Intégration du Site
- Découpage des images dans Photoshop : technique de découpage, formats d'images à choisir, création de sprites
- Mise en place d'un slider de plusieurs images sur le background en full page
- Intégration de la sidebar : logo, menu, réseaux sociaux, copyright & un bouton permettant de la cacher/montrer
- Création des 3 rubriques + mise en place du système one page avec scroll entre les rubriques
- Intégration de la partie "News" : Carousel responsive, déploiement d'une nouvelle sidebar pour lire le contenu de la news sélectionnée
- Intégration de la partie "About Us" : Colonnes CSS3, blockquote personnalisé
- Intégration de la partir "Contact" : Formulaire 3 champs, google map
- Développement du formulaire en Ajax/PHP avec test d'envoi sur une boîte email
- Création d'un lecteur MP3 personnalisé en jQuery
- Ajout d'interactions avec les touches du clavier (cacher tout le contenu du site et mettre le site en pause, puis l'inverse) & aussi quelques conseils pour mettre en ligne le site créé (logiciel FTP, hébergement)
Les logiciels dont vous avez besoin pour suivre la formation : Photoshop (depuis la CS2), un éditeur de code comme Notepad++ pour Windows ou Coda pour Mac, ainsi qu'un navigateur installé sur votre machine (Chrome par exemple). Vous aurez aussi besoin de Easyphp (ou Wamp/Mamp) pour créer un serveur local et tester l'envoi d'emails depuis le formulaire en PHP/Ajax que nous allons mettre en place.
Cette formation est pour un niveau débutant/intermédiaire. Je vous conseille donc d'avoir les bases du html/css pour suivre au mieux le tuto.
TOUT le site est inclus dans les sources (fichiers HTML, CSS, jQuery, PSD), ainsi que l'intégration de départ pour vous permettre de suivre la formation dans les meilleures conditions et refaire petit à petit le site one page en même temps que vous regardez la vidéo. Bonne formation !
Tuto composant ce bundle :
Designer un site one page moderne (voir la fiche produit)
- Création du document 00:03:11
- Nuancier 00:05:18
- Background et pattern 00:11:08
- Répères 00:06:25
- Sidebar 00:34:42
- Lecteur mp3 00:12:37
- Home page 00:23:46
- About us 00:12:35
- Contact 00:08:49
- Mot de la fin 00:06:55
Créer un site One Page complet de A à Z (voir la fiche produit)
- Partie 1 00:21:24
- Partie 2 00:14:07
- Partie 3 00:46:41
- Partie 4 00:32:11
- Partie 5 00:56:31
- Partie 6 00:10:06
- Partie 7 00:18:12
- Partie 8 00:31:16
- Partie 9 00:36:01
- Partie 10 00:09:46
Formateur : Adrien Gazaix
-
Trop bien et complet
-
Design & intégration Partie design: Facile, bien expliqué, aucun soucis. Partie intégration. Niveau intermédiaire requis. Tous fonctionne bien ceci dit. Cependant, quelques petites intéraction avec le site pourrait être améliorées. A la charge de l'apprennant si les connaissances en js le permettent. Ce qui, dans l'immédiat n'est pas mon cas :) Assistance rapide si besoin. Merci Adrien !
-
Bonne formation, le rendu final est sympas
-
Avec quelles versions de logiciels ce tuto est-il compatible ?Photoshop CC, Photoshop CS6, Photoshop CS5, CSS 3, jQuery
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés