PACK WEB : Designez et Intégrez un site onepage
ERROR
00:00
00:00

TUTO PACK WEB : Designez et Intégrez un site onepage

Adrien Gazaix
Promo -13%
28,00€32,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 repè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 !

Cours dans ce bundle

Designer un site one page moderne Cours 1

Designer un site one page moderne

Créer un site One Page complet de A à Z Cours 2

Créer un site One Page complet de A à Z

Plan détaillé des cours

 
Leçon 1Création du document
03m11s
Leçon 2Nuancier
05m18s
Leçon 3Background et pattern
11m08s
Leçon 4Répères
06m25s
Leçon 5Sidebar
34m42s
Leçon 6Lecteur mp3
12m37s
Leçon 7Home page
23m46s
Leçon 8About us
12m35s
Leçon 9Contact
08m49s
Leçon 10Mot de la fin
06m55s
 
Leçon 1Partie 1
21m24s
Leçon 2Partie 2
14m07s
Leçon 3Partie 3
46m41s
Leçon 4Partie 4
32m11s
Leçon 5Partie 5
56m31s
Leçon 6Partie 6
10m06s
Leçon 7Partie 7
18m12s
Leçon 8Partie 8
31m16s
Leçon 9Partie 9
36m01s
Leçon 10Partie 10
09m46s

Avis des apprenants

Détail des avis
352
Apprenants
10
Commentaires
4,3/5
Note moyenne
5/5
8
4/5
0
3/5
0
2/5
1
1/5
1
Antonio Coelho
Antonio Coelho
Publié le 08/03/2021
trop bien et complet
Geoffroy Pinceloup
Geoffroy Pinceloup
Publié le 01/11/2019
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 !
Sébastien Bauer
Sébastien Bauer
Publié le 01/07/2016
Bonne formation, le rendu final est sympas

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Photoshop CC, Photoshop CS6, Photoshop CS5

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données