Dans cette formation Créer un template d'un blog en HTML et CSS d'une durée d'environ de 3 heures et découpée en 14 vidéo, vous allez apprendre à créer un template d'un blog ou site en HTML et CSS.

Je vous expliquerai, pas à pas, les bases nécessaires pour créer des pages HTML et comment travailler leurs styles pour leurs donner une présentation personnalisée. Avec la création de ce template de blog, nous aurons l'occasion de voir la majorité des balises HTML5 et CSS3 nécessaires pour créer un site web. Nous partirons d'une page blanche et nous réaliserons étape par étape les différentes pages qui composent notre blog.

  • Créer des pages HTML structurées.
  • Créer des feuilles de styles.
  • Décomposer une page HTML (Header, Navigation, Contenu,... et Footer).
  • Créer une barre de navigation.
  • Installer SASS ou Compass pour compiler le CSS.
  • Travailler avec SASS pour générer le CSS.
  • Intégrer un slider de plusieurs images.
  • Créer une présentation pour une page.
  • Créer une page d'articles (la liste des articles du blog).
  • Créer une Sidebar.
  • Créer une pagination.
  • Créer une page single d'un article.
  • Créer des formulaires.
  • Insérer une carte GoogleMaps.
  • Créer une page de contact.
  • Créer les pages de connexion et d'inscription.
  • Les balises HTML5 et CSS3.

A la fin de cette formation, vous serez en mesure de créer un Blog ou un site complet en HTML5 et CSS3. Tout le blog est inclus dans les sources fournies avec cette formation.

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

Créer une application autour de moi en HTML5Créer une application autour…
Dans ce tuto HTML5 en vidéo, nous allons voir comment créer…

Pack : Créer votre site Internet, les bases pour débutantsPack : Créer votre site Internet,…
Dans ce pack, nous allons vous donner toutes les bases HTML…

Aller plus loin en HTML5 : Le drag and dropAller plus loin en HTML5 :…
Gérez le glissé/déposé avec JavaScript Vous êtes développeur…

Création et montage HTML / CSS d'un thème E-CommerceCréation et montage HTML…
Nous allons apprendre à créer un thème de site qui pourra…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…

Montage HTML / CSS d'un site Internet ResponsiveMontage HTML / CSS d'un site…
Voici une formation sur le découpage et l'intégration d'un…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

Administration en AJAX et HTML5Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…

Cette formation contient 14 leçons en vidéo pour une durée totale de 3h03.
Voici le programme complet abordé au cours de cette formation :

  • Introduction00:01:17 
  • Décomposer la page d'accueil00:03:44 
  • Structure HTML de la page d'accueil00:10:49 
  • Contenu de la page d'Accueil00:15:55 
  • Installation de SASS et COMPASS00:12:23 
  • Barre de navigation00:12:19 
  • HEADER00:11:49 
  • Style de la page d'accueil00:23:16 
  • Slider00:12:03 
  • Page blog la liste des articles00:29:29 
  • Page article single00:26:44 
  • Page de contact00:14:47 
  • Page de connexion et d'inscription00:07:58 
  • Conclusion00:01:15 

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

athakim , Formateur

Je m'appel Hakim , je suis Chef de projet informatique dans un grand groupe de distribution. J'ai travaillé dans le développement informatique et les Systèmes d'informations . Actuellement je prépare mon diplôme d'ingénieur avec le CNAM de paris .

Toutes les formations de Athakim


 

D'autres tuto de athakim

Introduction à l’API Google Maps JavaScript v3Introduction à l’API Google Maps JavaScript v3
Dans ce tutoriel vidéo Introduction à l'API GoogleMaps Javascript V3, d'environ 48…

Paypal Express Checkout de A à ZPaypal Express Checkout de A à Z
Dans ce tutoriel Paypal Express Checkout et PHP en vidéo, je vous montrerai de A à…

MongoDB : tuto d'introductionMongoDB : tuto d'introduction
Voici un tuto gratuit sur MongoDB. MongoDB est un Système de gestion de base de données…

Laravel : formation sur ce framework PHPLaravel : formation sur ce framework PHP
Dans cette formation Laravel en vidéo, nous couvrirons l'Essentiel de Laravel sur une…

voir tous les tuto de athakim

Notes attribuées par les utilisateurs (9 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (11)

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

" Bonjour Anonyminecrafta,
le & , il s'utilise en SASS pour faire appel au parent dans les imbrications de css.
et concernant l'éffet de couleur hover
dans le .CSS enlève le & comme suite :

.lastArticles ul li:hover
{
cursor:pointer;
color:#ddd;
}
merci. "

par Anonyminecrafta voté :
(a acheté ce tuto - 24 août 2013)

" C'est un très très bon tuto, merci beaucoup Hatakim, par contre j'ai un petit problème en css lorsque tu fait le :
.lastArticles ul li &:hover
{
cursor:pointer;
color:#ddd;
}

pour faire l'effet de gris au passage de la souris sur les articles, moi ça ne marche pas, pourrais tu m'aider s'il te plaît. Pour information, je n'ai pas compris à quoi correspondait le & du hover vu qu'il n'est pas dans le HTML..

Merci par avance,
Cdt,
Emmanuel ADAD "

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

" Excellent tutoriel ! Les explications du formateur sont très clair très précise. Le code généré est simple et professionnel.

Formateur a suivre ! "

par moktarbaa voté :
(a acheté ce tuto - 19 mars 2013)

" Je recommande cete formation. C'est une formation complète pour les débutants. "

par 43860903400022a voté :
(a acheté ce tuto - 21 février 2013)

" Bonne prise en main , clair et détaillé une bonne aide pour commencer en html "

par doctor-pixela voté :
(a acheté ce tuto - 19 février 2013)

" Moi j'aime bien les tutos de hakim.
Bon parfois il y a des petites hésitations ou confusion mais le code proposé est toujours de bonne qualité.
Par contre il faut absolument améliorer la qualité de la vidéo car à beaucoup d'endroits c'est parfois ilisible, et c'est très agaçant. "

par lolodena voté :
(a acheté ce tuto - 15 février 2013)

" Un très bon tuto, qui m'a permis d'approfondir mes connaissances et le formateur est très sympa à suivre :)
Je recommande et j'ai hâte d'attaquer la partie php et le back office maintenant ! "

par Olivier75009a voté :
(a acheté ce tuto - 23 janvier 2013)

" Excellent tuto que j'ai eu un grand plaisir à suivre de bout en bout.

J'ai d'ailleurs suivi le tuto sur le site e-commerce avec Paypal, et ne peux cacher mon impatience pour la suite de ce tuto et la partie PHP/dynamisme du blog.
Alors on se dépêche Athakim ;)

Un grand merci ! "

par lgueza voté :
(a acheté ce tuto - 17 janvier 2013)

" bon début pour expliquer comment créer la maquette du blog "

par neelo
(a acheté ce tuto - 16 janvier 2013)

" On ne comte pas, par exemple ...

compte, du verbe compter probablement, donc : on ne compte pas ! "

par DominiqueGa voté :
(a acheté ce tuto - 15 janvier 2013)

" Beaucoup d'hésitations et des commentaires qui ne sont pas clairs par moment, sans oublier les mauvaises tournures de phrase.

On ne comte pas, par exemple, les "Qui sont"

Dommage "

 

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 HTML 5, CSS 3 d’une durée de 3 heures 3 minutes a été acheté 157 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 14 janvier 2013 par athakim, contributeur, ayant reçu une note moyenne de 4,2/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto HTML Intégration.

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

Cette formation qui se présente sous la forme de plusieurs vidéos, 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 !