Voici une formation pour apprendre à créer un portfolio full reponsive en HTML 5 et CSS3. Ce tutoriel représente une suite logique de créer un site internet responsive webdesign en HTML5. Toutefois, aucun prérequis n'est demandé et vous pouvez suivre ce tutoriel sans difficultés si vous n'avez pas visionné cette première partie.

Dans ce tuto nous allons donc apprendre pas à pas comment réaliser un portfolio html5 full responsive s'adaptant à la perfection autant à votre écran d'ordinateur, votre iPad ou votre iPhone et le tout animé en CSS3 et jQuery.

Nous aborderons les points stratégiques suivants :

  • Les balises html5 figure, section, article
  • Les préfixes css3 (-webkit-, -moz-, ...)
  • L'animation css3 (transition, transform, scale)
  • Les dégradés css3 (linear)
  • z-index
  • fancybox (jQuery)

La formation s'adresse à des personnes ayant les bases HTLML et et un niveau intermédiaire en CSS. Les fichiers sources sont fournis. Je reste à votre disposition pour toutes questions ou commentaires.

Jetez un oeil à ces autres tuto Dreamweaver CS5, HTML 5, CSS 3

Découper et intégrer une maquette de site webDécouper et intégrer une…
Cette formation est consacrée au découpage et à l'intégration…

Créer une playlist administrable pour le player audio HTML5Créer une playlist administrable…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer et personnaliser un player audio HTML5 de A à ZCréer et personnaliser un…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer un blog full responsive en HTML5Créer un blog full responsive…
Dans ce tuto Dreamweaver nous allons aborder l'intégration…

Découper et intégrer une maquette de site internet web 2.0Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…

Créer un site internet responsive webdesign en HTML5Créer un site internet responsive…
Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons…

Dreamweaver CS5, Formation complèteDreamweaver CS5, Formation…
Formation Dreamweaver CS5 de 18h20, pour apprendre à créer…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Dreamweaver CS5, HTML 5, CSS 3 de 1 heure 19 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

bpdesign , Formateur

Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au monde du Webdesign. Aujourd'hui auto-entrepreneur dans la création de site internet j'enseigne également en Technologie de l'information et de la communication à l'Université Claude Bernard Lyon 1.

Toutes les formations de Bpdesign


Témoignage des clients de bpdesign

Tutos bien expliqués est très simples merci

J'ai appris pas mal de choses avec ce formateur. Merci

Les choses deviennent beaucoup plus simples avec tes tuto

Très bon formateur! C'est vraiment un plaisir d'apprendre avec lui...Merci!

De très bonnes formations, bien réalisées, compréhensibles, que du bonheur.

Lire les autres témoignages

 

D'autres tuto de bpdesign

Créer un site internet responsive webdesign en HTML5Créer un site internet responsive webdesign en HTML5
Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons voir comment réaliser un…

Effet 3d Relief sous PhotoshopEffet 3d Relief sous Photoshop
Dans ce petit tuto Photoshop CS5 gratuit, en vidéo vous allez apprendre rapidement à…

Découper et intégrer une maquette complète de portfolioDécouper et intégrer une maquette complète de portfolio
Dans ce tuto Photoshop de plus de 4H30, en vidéo, vous allez apprendre à découper…

Créer une info boxCréer une info box
Dans ce tuto Photoshop vous allez apprendre à créer une info box sur tons gris. Nous…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (4 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (15)

par AGZORa voté :
(a acheté ce tuto - 25 février 2014)

" Un peu chère payé pour 1h de vidéo , les fichiers source étant disponible publiquement sur le site de l'auteur apparemment...
Alors on ne creé pas un portfolio, on ne fait qu’intégrer un design tout prêt.
Pareille pour lautre tuto concernant le blog, on ne creer pas un blog, on integre un truc qui sort de nulle par, et encore ce n'est pas tout a fait un blog. Un nous d'integrer sur framework compatible etc...
En gors on achete un peu de cours HTML CSS. les fichier/design sont en libre service
Ceci etant dit, c'est claire. "

par bpdesign
(auteur de ce tuto - 27 août 2013)

" hello Eriam,
oui le but de cette formation est d'apprendre à intégrer le design d'un portfolio en html5/css3. Nous n'abordons pas le design ou photoshop ici "

par Eriam
(n'a pas acheté ce tuto - 27 août 2013)

" Bonjour,

Apprend t-on aussi a creer le design du site et le convertir en HTML5/CSS3 ?

Merci à vous ! "

par MatthieuMomixa voté :
(a acheté ce tuto - 07 avril 2013)

" très bon tuto, indispensable aux 2 autres tuto pour réaliser son site internet.
J'ai pu grâce aux 3 tuto "HTML5 + CSS en Full responsive" de bpdesign, à créer mon site internet, et à le modifier complètement à ma manière.
Merci encore :) "

par raikal7a voté :
(a acheté ce tuto - 18 janvier 2013)

" Super tuto encore merci pour ton travail.
Pour débuter je le conseil grandement "

par bpdesign
(auteur de ce tuto - 08 novembre 2012)

" OK merci! Après j'imagine qu'il faut simplement affiner le css ou rajouter des medias queries ;) "

par jpmoreau
(a acheté ce tuto - 08 novembre 2012)

" Bonjour,
Merci de ta réponse,
Tout irait parfaitement ou presque, mais ce n'est pas mal.
Seul bémol : le logo 'fuel responsive' chevauche le menu et se place sur 'Home Portfolio' .
Ce menu navigation n'est peut-être pas assez décalé d'une ligne.
Test effectué sur HTC One X avec navigateur Google Chrome.
A+
JP "

par bpdesign
(auteur de ce tuto - 07 novembre 2012)

" Hello jp, je te laisse tester sur un android http://bp-design.fr/theme/fuel/portfolio.html et nous dire ;) "

par jpmoreau
(a acheté ce tuto - 07 novembre 2012)

" Cette formation est-elle valable aussi pour une adaptation (notamment de boutons) sur smartphone avec un système Android ?
Merci de votre réponse "

par lolo301187a voté :
(a acheté ce tuto - 26 octobre 2012)

" Excellent tuto ! Très clair et très précis ! Moi qui suis mauvais en design j'ai appris beaucoup de chose !
Un excellent formateur !

j'attend d'autre tutos du même style avec impatience ! "

par DunkDesign
(n'a pas acheté ce tuto - 14 octobre 2012)

" Ok cool je prend ! :D "

par bpdesign
(auteur de ce tuto - 14 octobre 2012)

" Oui bien sur! Mais on passe plus vite sur le html et les medias queries sur le seond c'est tout ;) "

par DunkDesign
(n'a pas acheté ce tuto - 14 octobre 2012)

" Oui le probleme est que je veut cree un portfolio avec des catégories comme tu as fait mais je veut pas prendre les deux tuto, est ce que je pourrais reussir a faire mon portfolio en regardant juste le deuxieme ? "

par bpdesign
(auteur de ce tuto - 14 octobre 2012)

" Dans le 1er tuto on s'attache plutôt sur la partie HTML5 et surtout responsive avec les medias queries.
Dans le second, on se focalise sur le portfolio avec un filtrage CSS3 (animations, transformation,...) et on intègre fancybox pour la preview des images en jQuery.

J'espère être clair? ^^ "

par DunkDesign
(n'a pas acheté ce tuto - 14 octobre 2012)

" Bonjour, est-ce que dans ce tuto tu apprend à crée tout le site ou il faut suivre ton autre tuto ?
Tu pourrait enfaite m'expliquer t'apprend quoi de différents dans les 2 tutos :) "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Dreamweaver CS5, HTML 5, CSS 3 d’une durée de 1 heure 19 minutes a été acheté 397 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 12 octobre 2012 par bpdesign, contributeur, ayant reçu une note moyenne de 4,3/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Dreamweaver webdesign.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !