$ 28.00 au lieu de $ 32.00

Tuto PACK WEB : Designez et Intégrez un site onepage avec Photoshop, CSS, jQuery bundle -13%

$ 28.00 au lieu de $ 32.00

  • Une formation vidéo de 6h41m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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

Adrien Gazaix a publié 90 tutoriels et obtenu une note moyenne de 4,7/5 sur 23 468 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

4,1
note moyenne

8
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
1
1 étoile
1
  • 5
    avis de grif51 laissé le 01/07/2016
    Bonne formation, le rendu final est sympas

  • 5
    avis de yohannadr laissé le 01/07/2016
    J'ai adoré la première parti grâce à toutes les astuces données qui reprend bien les bases d'une maquette psd et de son découpage pour l'intégration HTML.

  • 5
    avis de Toutkool laissé le 20/10/2015
    Facile a suivre, et tres bien explique meme pour un debutant.
    "Merci à toi ! Ça rassurera un peu les débutants qui hésitent à franchir le pas ;)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Photoshop CC, Photoshop CS6, Photoshop CS5.5
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1560 tuto gratuits


non, je ne veux pas me former gratuitement