25,00

Tuto Atelier HTML & CSS : Intégrer un Blog responsive de A à Z avec HTML, CSS, Figma

25,00

  • Une formation vidéo de 3h03m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Atelier HTML & CSS : Intégrer un Blog responsive de A à Z

ajouter ce cours aux favoris retirer ce cours des favoris

Dans ce atelier pratique HTML & CSS en vidéo, je vous propose de découvrir ensemble comment intégrer plusieurs maquettes de blog.
Il vous permettra de développer vos compétences de développeur front-end.
Les maquettes graphiques que nous allons intégrer sont celles que nous avons précédemment appris à créer sous le logiciel création d'UI : Figma. Ce cours de webdesign optionnel peut être suivi de manière indépendante.

Nous utiliserons les langages HTML & CSS ainsi que des techniques modernes d'intégration telles que les Flexbox et les Grid.
Dans cet atelier de plus de 3h, nous n'aurons pas besoin de framework tel que Bootstrap donc nous ferons toute l'intégration de A à Z en pure CSS.
A la fin de cette formation, vous aurez une intégration pixel perfect de vos maquettes, et toutes les cartes en main pour créer un futur thème WordPress.

Pré-requis pour suivre cette formation dans de bonnes conditions :

  • Connaître les bases du HTML : créer une page .html, le système de balisage...
  • Connaître les bases du CSS : créer une feuille de style, la lier avec une page .html...

Ce que nous allons intégrer dans cette formation Blog Responsive de A à Z :

  • Template de page d'accueil : header, box d'articles, footer,
  • Template single d'un article,
  • Template d'une catégorie avec déclinaisons autres couleurs,
  • Template de la page A propos,
  • Template de la page contact avec formulaire,
  • Template d'une page classique : mentions légales,

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du rendu final obtenu à la fin de la formation.

Vous aurez les fichiers de départ, les templates HTML / CSS finalisés, ainsi que la maquette Figma dans les sources fournies avec la vidéo.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrer des difficultés pendant ou après le visionnage de la vidéo.

Bonne formation à tous !

Table des matières de cette formation HTML, CSS, Figma (durée : 3h03m)

    • Introduction gratuit 00:04:06
    • Exporter des médias depuis Figma 00:06:08
    • Header - Partie 01 : Le Logo 00:07:22
    • Header - Partie 02 : Le menu principal 00:14:18
    • Box d'article - Partie 01 00:21:21
    • Box d'article - Partie 02 00:17:52
    • Intégration du Footer 00:19:10
    • Template de catégorie avec les variantes de couleurs 00:28:39
    • Single d'un article 00:17:28
    • La page A propos 00:06:00
    • Page contact avec le formulaire 00:19:39
    • Template de page classique : mentions légales 00:06:49
    • Rendre tout le blog entièrement responsive tablette/mobile 00:13:28
    • Conclusion 00:00:57



Formateur : Adrien Gazaix

Adrien Gazaix a publié 145 tutoriels et obtenu une note moyenne de 4,8/5 sur 52 715 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de izigrafik laissé le 10/10/2021
    Adrien, vous êtes vraiment FORMIDABLE !!! Encore une formation excellente qui correspond exactement à mes attentes ;) Tout est expliqué clairement, précisément.....je révise mon CSS avec une grande liberté et efficacité !! Merci encore pour vos initiatives dans vos formations, elles sont parfaites ;) Au plaisir de vous retrouver bientôt ! Eric
    "Un grand merci pour ces super retours 😁 a très bientôt pour de nouveaux tuto !!"

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    HTML , CSS , Figma
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
  • Que contient le fichier source ?
    Les fichiers de départ, les templates HTML/CSS obtenus à la fin de la formation ainsi que les maquettes créées sur Figma.
Parcours Developpeur Front End
accédez à plus de 1356 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données