Dans ce tutoriel en vidéo, vous allez apprendre à intégrer un site onepage responsive de A à Z en ayant seulement les bases des langages HTML et CSS et en option, de JavaScript (voir l'introduction vidéo).
Cette formation en ligne a un objectif simple : vous faire réussir à intégrer un site onepage moderne tout en étant débutant dans le développement Web !
Côté CSS, il sera quand même préférable d'avoir des connaissances basiques des points suivants :
- Le responsive design avec les media queries / Les unités em et rem (ma formation complète à ce sujet)
- Flexbox (ma formation complète à ce sujet)
Un QCM vous sera proposé en fin de formation pour vous assurer que vous n'êtes passé à côté de rien !
Si jamais vous avez déjà un peu d'expérience et que vous souhaitez intégrer ce site avec des outils modernes, j'ai fait une formation totalement indépendante de celle-ci, qui vous permettra d'obtenir exactement le même résultat mais en utilisant le framework Tailwind CSS : Intégrez un site onepage avec un framework CSS.
Comme d'habitude, les fichiers du projet terminé ainsi que les différents liens utilisés durant la formation vous seront fournis en fichiers sources.
En cas de besoin, vous pourrez me retrouver dans le salon d'entraide pour que je puisse vous épauler durant votre intégration !
Table des matières de cette formation HTML, CSS (durée : 1h47m)
-
On met en place notre site
- Introduction gratuit 00:02:52
- Projet de base gratuit 00:04:48
-
Le header
- Importer Raleway depuis Google Fonts 00:03:03
- Création du conteneur et du logo 00:16:47
- La fenêtre de navigateur 00:19:31
- Le lien 00:06:57
- Font Awesome pour nos icônes 00:05:45
-
Le corps de la page
- Le premier média 00:07:38
- Les 3 autres médias 00:05:07
- On s'adapte aux plus grands écrans 00:05:34
-
Le footer
- Le footer 00:05:50
- Conclusion 00:03:10
-
La partie JavaScript
- On prépare notre projet 00:05:16
- Typed.js pour animer notre texte 00:06:34
- ScrollReveal pour animer nos éléments 00:08:13
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Steven Sil
-
Merci pour ce tuto il est plaisant a découvrir , je le garde sous le coude pour les effets que je viens de découvrir type.js et scroll reveal que je vais essayer d'approfondir quand j'aurais une meilleure maîtrise du javascript . Sinon comme d'habitude excellent tuto que je recommande aux étudiants .
-
Excellent tuto, merci beaucoup. Il est clair et très efficace. Je suis ravie ;-)
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML 5, CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés