Créer une Landing Page Simple - De Figma au code HTML/CSS/JavaScript : Guide Complet pour Débutants

Dans cette vidéo, je te montre comment créer une #landingpage simple, étape par étape, en utilisant #Figma pour la conception et #HTML, #CSS, et #JavaScript pour le développement. #webdesign

Ce guide complet est parfait pour les débutants qui souhaitent apprendre à transformer une maquette en un site web fonctionnel. Abonne-toi pour découvrir les bases de la conception web et du codage.

🔗 Liens sources / références :
Code Github (mets une étoile⭐): https://github.com/prakticode/primepr...
Maquette Figma : https://www.figma.com/design/caPLIR36...
Logo : https://logoipsum.com/
Icones : https://remixicon.com/
Font: https://fonts.google.com/specimen/Roboto

Dans ce cours, tu apprendras à :

- Concevoir une landing page sur Figma avec les bonnes pratiques
- Transformer la maquette Figma en code HTML
- Styliser la page avec CSS
- Ajouter le Responsive en CSS
- Ajouter des fonctionnalités interactives avec JavaScript

Abonne-toi pour plus de tutoriels et n'oublie pas de liker la vidéo si elle t'a aidé ! :)

🌐Suis Prakticode sur les réseaux sociaux :

Instagram -   / prakticode  
X (Twitter) -   / prakticode  
Linkedin :   / prakticode  

💼 Demandes commerciales : [email protected]

---------------TIMESTAMPS---------------

00:00:00 Introduction
00:00:33 Figma - Design
00:23:17 Figma - Composants & Prototypage
00:32:52 HTML - Setup
00:35:20 HTML - Header
00:37:29 HTML - Main
00:41:31 HTML - Footer
00:44:07 CSS - Setup
00:50:32 CSS - Header
01:02:25 CSS - Main
01:12:23 CSS - Footer
01:18:22 CSS - Body Flex
01:19:08 BONUS - Responsive CSS & Animations JS
01:19:24 Responsive CSS - Header
01:23:38 Responsive CSS - Main
01:27:17 Responsive CSS - Footer
01:29:22 Animations JavaScript