Intégrez un site onepage avec un framework CSS
Dans cette formation de plus de 2h40, vous allez apprendre à intégrer un site onepage responsive avec le framework Tailwind CSS.
Cette formation en ligne s'adresse à un public ayant un niveau intermédiaire sur les langages HTML et CSS, comprenant la maîtrise des points suivants :
- Utilisation de Flexbox (ma formation complète à ce sujet)
- Le responsive design avec les media queries / Les unités relatives comme le em et le rem (ma formation complète à ce sujet)
Si vous êtes débutant et que vous souhaitez réaliser cette formation sans framework (juste en CSS pur), vous le pourrez dans une deuxième formation qui sortira quelques jours après celle-ci. Les 2 formations mènent exactement au même résultat et sont totalement indépendantes l'une de l'autre.
Pour créer ce site, nous utiliserons également Node.js et NPM pour installer nos dépendances et il est donc important que vous soyez à l'aise à l'idée d'utiliser votre terminal (ou l'invite de commande de Windows) pour réaliser certaines opérations. Aucune connaissance préalable de Node.js est nécessaire pour suivre cette formation et nous l'installerons ensemble donc zéro pré-requis de ce côté là !
Le projet complet ainsi que l'ensemble des liens utilisés durant cette formation vous seront fournis dans les fichiers sources de la formation.
Table des matières de cette formation CSS, HTML (durée : 2h46m)
-
On met en place notre site
- Introduction gratuit 00:01:46
- Installation de Node.js gratuit 00:05:07
- Initiation à Tailwind CSS 00:14:17
- Création du projet et installation des dépendances 00:06:56
- On génère un fichier CSS pour utiliser Tailwind 00:09:24
-
Le header
- Importer Raleway depuis Google Fonts 00:02:35
- Le logo 00:15:45
- La fenêtre de navigateur 00:15:11
- Le lien 00:06:38
- Font Awesome pour nos icônes 00:07:15
- On utilise Typed.js 00:13:30
-
Les médias
- Le premier média 00:09:09
- Les 3 autres médias 00:05:35
- On s'adapte aux plus grands écrans 00:04:45
- ScrollReveal pour animer nos éléments 00:11:14
-
Le footer et Purgecss
- Le footer 00:06:17
- On vient purger notre CSS 00:10:26
-
Allez plus loin
- Tailwind directement dans nos fichiers CSS 00:04:34
- On copie les styles communs côté CSS 00:14:41
- Conclusion 00:01:36
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Steven Sil
-
Très bon tuto et formateur ! Ce tuto m'a apporté un petit vent de fraîcheur et m'a appris beaucoup de choses. Je recommande ce tuto :-)
-
Merci Steven, encore une fois un tuto au top, très pédagogue !
-
Merci steven d'avoir offert ce tuto pour le confinement . Formation de qualité comme d'habitude
-
Avec quelle version de logiciel ce tuto est-il compatible ?HTML 5
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés