Tutoriel Vidéo HTML-CSS : Créer un site "One Page"

Premier vrai tutoriel sur l'intégration d'une maquette HTML & CSS,de plus d'une heure d'enregistrement. Ce tutoriel est le premier dans cette catégorie et ne sera pas le dernier. Dans celui-ci j'ai choisi de m'orienter vers une maquette pour un Portfolio personnel. Pour finir, nous allons utiliser jQuery pour créer une animation qui va nous permettre de Slider le contenu.

Démonstration


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Designer x Développeur. http://jeijones.com http://www.creatiq.fr http://jeijones.tumblr.com

Vous aimerez aussi

Un effet 3D avec le CSS3

Un effet 3D avec le CSS3
6m

Dans ce tutoriel CSS3, nous allons apprendre comment simuler un effet...

Keyframes, les animations en CSS3

Keyframes, les animations en CSS3
25m

Il est désormais possible de créer des animations avec les nouvelles...

15 commentaires
Ajouter un commentaire

ots Il y a 1 mois Répondre

Bonjour, et merci pour cet excellent tuto.
mais comment modifier le code js pour pouvoir mettre la colonne de droite dans un div d'une hauteur déterminée avec un overflow:hidden;
merci

nidnight Il y a 1 mois Répondre

Super tutoriel rien à dire

Roman Il y a 2 mois Répondre

Salut!
Tout d'abord, je te remercie pour ce tuto très intéressant.
J'ai quand même une question:
Comment faire pour que lorsqu'on scroll manuellement et qu'on arrive sur la div contact par exemple, pour que "contact" dans le menu prenne la class active?
Encore merci pour cette vidéo!

Matla Il y a 2 mois - Répondre

Bonjour. Merci pour ce très bon tuto. Je rejoins Roman sur la question. Comment peut-on déplacer la classe .active en fonction du scroll manuel ?

J'ai déjà vu ça sur certains sites. Ce serait très intéressant ! Merci.

Maï Il y a 2 mois Répondre

Bonjour,
Pourquoi sans faire la dernière partie "scrollTO", même le nav.js, le scroll fonctionne quand même...

Merci

Gothor Il y a 1 mois - Répondre

Bonjour,
scrollTo permet de faire un scroll automatique 'en douceur', si tu ne le mets pas, un lien vers une ancre amène directement à cette ancre mais de manière 'brute'.

TwiSka Il y a 3 mois Répondre

Super Tuto !

pierrot Il y a 4 mois Répondre

La petite fonction scrollTo est simple mais tellement efficace visuellement parlant

Merci pour cette astuce!

Bloodyred Il y a 4 mois Répondre

Super vidéo ! Merci
Et je me posais la même question que Carineb...

carineb Il y a 4 mois Répondre

Merci pour ce tuto
J'aurai juste une petite question. Quel est l'élément à modifier si je souhaite voir un défilement horizontal plutôt que vertical ?

facebookman Il y a 4 mois Répondre

saluuut, et merci pour cette video!

vaald Il y a 4 mois Répondre

J'ai un soucis, je l'ai déjà posté sur lesiteduzero : http://www.siteduzero.com/forum-83-726028-p1-probleme-redimentionnement-du-texte.html #r7000479 .
Si vous pourriez m'aider en répondant ici ou là-bas, je vous remercie d'avance.

whatsgoingon Il y a 5 mois Répondre

Génial, ça fonctionne !
1000 mercis, ça en jette !

shellquote Il y a 7 mois Répondre

Deja merci a toi pour le tuto, c'est tres sympa.
Mais je dois dire certaines choses :

Cerrtaines partie sont trop trop longues. on se moque un peu de savoir que les padding et les marge sont de 20 ou 15, ou 14px. Ta partie avec ta maquette non fini (c'est pas top top), c'est bcp trop long, les bordures sur les images, c'est tres long aussi. iL FAUT QUAND MEME RESTÉr CONCENTRÉ PENDANT 1H30.


Tu n'explique pas le line-height, qui est un element pas trés evident a saisir au début, du moins son intéret.


Pour la partie bloc tu pourrais plutot utilser un backgroung decalé pour les titres, plutot que d'avoir l'ímage dans le html, il n y a pas d'interet sémantique.

Tu n'explique pas non plus et ce qui est important, le position fixed ou absolute sur le div left.. sans le positionnement, cela ne crée le fond en 100% , mais uniquement sur l'ul. Et ceci est vraiment important parceque au debut on fait un height 100%, mais ca ne donne rien, il faut comprendre le fixed ou absolue pour saisir que c'est ca qui permet de l'avoir a 100%

tu melange dans la partie portfolio un h2 et apres un p, pourtant le p avec un classe subtitle a vraiment un interet semantique, il faudrait plutot utiliser un h4 ou h5.
Toujours dans la partie portfolio, tu mets en bloc tes lien, mais tu n'explique pas pourquoi cela. On s'apercoit juste que cela permet d'ajuster les images. Mais on ne comprends trop pourquoi.

en revanche, cést tres bien d'Expliquer le clear sur les float, c'est pas évident au début.

tu pourrais aussi preciser dans ton nav.js, a quoi sert le documen.ready function. Tester aussi avec un alert que ton nav.js est bien chargé.

Et pour fiir bravo pour ton expliquation du nav.js, qui est vraiment bien faite..


Bref Merci pour ton boulot, le temps que tu y prends pour partager ton travail et ton savoir faire..

Shellquote

Tony Il y a 7 mois Répondre

Je me disais bien que j'avais déjà vu ce tuto quelque part

ZiOu Il y a 7 mois Répondre

ça serait sympas une petite démonstration ^^

Aureliendu917 Il y a 7 mois Répondre

Premes :D

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.