Créer un Site Web Moderne en HTML & CSS : Guide Complet pour Débutants (2024)

Explore la création d'un site web moderne 100% #responsive et avec des animations grâce à #HTML et #CSS ! Découvre les étapes pour concevoir ton propre site web avec moi aujourd'hui. #webdesign
🔗 Liens sources / références :
Code Github (mets une étoile⭐): github.com/prakticode/html_cs...
Dossier "assets" : drive.google.com/file/d/1aHup...
GitHub Gist (bouts de code à copier/coller et code manquant responsive) : gist.github.com/prakticode/09...
Dans ce cours, tu apprendras à :
- Utiliser les variables et les propriétés en CSS
- Importer des fichiers CSS dans d'autres fichiers CSS
- Créer des animations avec AOS
- Maintenir une structure de fichiers et de dossiers bien organisée
- Adopter les principes de l'écriture d'un code clean
🌐Suis Prakticode sur les réseaux sociaux :
Instagram - / prakticode
Twitter - / prakticode
Linkedin : / prakticode
💼 Demandes commerciales : [e-mail]
---------------TIMESTAMPS---------------
00:00:00 Introduction
00:01:47 Outils requis
00:02:10 Setup
00:10:10 Section Header
00:25:55 Section Hero
00:53:34 Animations
00:57:16 Responsive

[@jean-danielkouassi8882]

Merci beaucoup. J'ai simplement envie de mettre plusieurs likes si cela était possible. Très bon contenu 👍

[@tilissesas2227]

Très bien fait merci beaucoup pour ce tutoriel.

[@assiabensaada1852]

bonjour, tout d'abord je vous remercie pour cette excellente vidéo, je suis entrain de créer un site avec bootstrap et je galère un peu avec les div/span en fait je sais pas quand les utiliser, cette vidéo m'a aidé à voir la façon de travailler , je m'abonne directement, continuez ce genre de vidéo qui va droit au but

[@campbellmiha5234]

Super vidéo L'apprentissage par projet c'est cool

[@loyan74]

depuis le temps que je recherchai une vidéo pour faire un site mais j'ai découvert encore mieux merci beaucoup

[@prakticode]

Avec plaisir 😁

[@sandrinegarnier550]

Un grand merci pour ta vidéo qui complète très bien ma formation. J'adore le résultat final. Tu as donc une nouvelle abonnée ;)

[@prakticode]

Je t'en prie, ravi que ça te plaise! Bon développement :-)

[@kologoalassane172]

@@prakticode bonsoir monsieur je suis en côte d'ivoire, tu peux m'aider a créer un site référence cinématographiques

[@francisdoueu7916]

vous m'aidé beaucoup dans mon apprentissage, merci beaucoup

[@prakticode]

Je vous en prie ! Bon courage dans votre apprentissage :)

[@Dragoon13014]

Très bon tuto, ça rafraichit la mémoire c'est top ! Petit point d'amélioration, ce n'est pas une critique négative le tuto est super bien réalisé : Je penses que tu aurais dû le faire sans AOS. En effet, c'est très pratique mais la découverte de l'animation en CSS avec des keyframes, des transform, etc.. est une base à connaitre selon moi. La partie JavaScript est un peu courte finalement, elle se contente d'importer une librairie alors qu'il y a tellement de choses possible avec JS ! C'est un super début et merci beaucoup d'avoir pris le temps de le faire, ça en aidera plus d'un ! Bonne continuation ! ;)

[@prakticode]

Salut et merci pour ton retour constructif ! 🙌 Je suis totalement d'accord avec toi concernant l'importance des animations en CSS avec les keyframes, transform, etc. C'est effectivement une base essentielle à connaître. Bonne nouvelle : j'ai prévu de couvrir cela en détail dans un prochain tuto sans utiliser AOS, justement pour montrer la puissance native du CSS en matière d'animations. Quant à la partie JavaScript, tu as raison, il y a tellement à explorer ! Ce tuto était une introduction, mais je compte approfondir le sujet dans de futures vidéos. Encore merci pour ton soutien et tes suggestions. Bon développement :-)

[@jean-danielkouassi8882]

Ahh excellent !@@prakticode

[@lordousmane1502]

Bonne vidéo

[@prakticode]

Ravi que tu aies aimé ! As-tu un sujet spécifique que tu aimerais que je traite dans une prochaine vidéo ?

[@Frmarlyjoseph]

J'aime ça 1:58

[@dailyshonen7613]

et pour le npm quand vous l'installer il faut Pas cocher sur le case faire les mise a jour automatiquement et redémarrer Visual studio code

[@benedicte52]

Merci pour le tuto, il est clair et on comprend bien Possible de nous montrer comment mettre le site en ligne ?

[@Jery97229]

Merci pour cette vidéo, concernant le déploiement, est il possible de le mettre sur un hébergeur static simplement ? Car tu fait une installation npm de la librairie aos, il suffit de copier coller l’ensemble du dossier sur le ftp ? ou il va falloir passer par un VPS + nodejs ? Merci d’avance pour cette reponse, la partie déploiement reste toujours très flou avec toute les technologie de ojd…

[@prakticode]

Salut ! Merci pour ton commentaire 😊 Oui, avec Vite.js, c'est très simple. Utilise npm run build pour créer le dossier dist avec tous les fichiers nécessaires. Ensuite, copie simplement le contenu de dist sur ton hébergeur FTP. Pas besoin de VPS ni de Node.js, ton site sera prêt à être utilisé. Si tu as d'autres questions, n'hésite pas !

[@hercule75]

très bien merci beaucoup ! par contre je sais pas pour les autres mais vive la vitesse de lecture x0.75 lol XD

[@dailyshonen7613]

j'ai fini le tuto merci tu m'as appris pleins de chose ce qui est bien c'est que j'ai pris bcp d'automatisme, par contre tu trace sur tes explication et sur la commande peut être que je sui trop lent j'aurais préféré que la vidéo elle dure 3H c'est la 1er fois j'ai du mettre une vidéo en 0.5 de vitesse mais bref voila juste pour te dire merci et te faire un retour si tu peux continuer les tuto ca serait cool !

[@prakticode]

Merci pour ton retour ! Je suis ravi que le tuto t'ait été utile. Je prends note pour le rythme des explications, c'est important d'avoir ce genre de feedback. Je vais essayer d'ajuster ça pour les prochaines vidéos. Et oui, d'autres tutos sont en préparation ! 😊👍

[@NicoMt-kg8gl]

@@prakticode je confirme, c'est super rapide dans l'explication, faut déjà avoir certaines bases, en tout cas Merci😉

[@jeffdem]

Super video merci, je débute en html, css, js ... Petite question : Pourquoi faire toute ces manip MPN au lieu d'utiliser l'option "Go Live" dispo sur VSCode qui permet de voir le résultat en direct de la même manière que le truc MPN ?

[@prakticode]

Merci pour ton commentaire ! J'ai choisi d'utiliser Vite avec npm pour présenter l'outil et montrer comment ça marche, car c'est un outil qui est pratique pour des plus gros projets. Mais tu as raison pour ce petit projet j'aurais pu juste utiliser "Go Live" !

[@mind_clip]

salut, je n'arrive plus a revoir ma page web depuis cette partie de vidéo 14:49 et au même moment les buttons log in et sign up ne voulait pas se mettre a coté des autres. peux tu m'aider

[@mind_clip]

j'ai réusssi j'ai relancer la commande npm run dev

[@dailyshonen7613]

Bonjour a 9min tu parle de icone.png mais je crois tu l'as pas mis dans les assets.zip ou j'ai mal vu. D'ailleurs merci pour la vidéo ca m'aide énormément

[@prakticode]

Salut ! Tu as raison, j'avais oublié d'ajouter "cone.png dans les assets initiaux. Mes excuses pour l'oubli. J'ai depuis mis à jour le lien des assets pour y inclure icone.png. Tu devrais pouvoir le télécharger maintenant. Merci de l'avoir signalé et je suis ravi que la vidéo te soit utile ! N'hésite pas si tu as d'autres questions ou remarques. Bon développement :)

[@cristovinho]

A 10:47 tu dis que tu reviendras plus tard sur la syntaxe des classes et toute la vidéo j'ai attendu l'explication mais je crois que tu as oublié de l'expliquer ? En fait je trouve hyper intéressant les méthodes de travail qui permettent de se professionaliser et tu m'as appris beaucoup de choses (comme le fait d'avoir plusieurs fichiers css, variables en css etc) mais le __ (double tirets 8) je ne connaissais pas j'aurais trop voulu que tu l'expliques dans le tuto 😭😭😭😉

[@prakticode]

Salut ! Effectivement, j'ai omis de mentionner cette syntaxe car j'ai estimé que ça allait ajouter du détail superflu dans ce tuto pour débutants. L'idée c'est que cette syntaxe permet de mieux s'y retrouver dans le CSS, je l'évoquerai dans le prochain tuto HTML/CSS/JS que je suis entrain de préparer, mais si tu veux te renseigner desus dès maintenant c'est la méthodologie BEM (Blocks - Elements - Modifiers) qui est utilisée

[@cristovinho]

@@prakticode merci beaucoup pour l'info, de toute façon je suis abonné à ta chaine donc j'attends avec impatience les nouvelles vidéos 🙂

[@chrisborderies3233]

Salut ! Merci pour tes vidéos ! Je tente d'apprendre le html, css et java, tranquillement, et pourquoi pas en suivant tes vidéos une par une. Ayant eu un soucis pour afficher l'image de background de la vidéo, j'ai remarquer avoir tout simplement oublier la ligne de code : "" J'ai regarder la vidéo plusieurs fois, tu la pas mis pour que sa fonctionne, mais dans ton github tu a rajouter la ligne avec un zoom.. Bon grâce à toi j'ai pu comprendre le problème, alors j'ai rajouter la ligne et enlever le zoom car je pense que plus tard dans la vidéo on vas faire le design de tout. Mais, ma question, pourquoi ne pas avoir mis : "" à la place de : "" Proposition que gpt m'a faite, et vus que j'apprend avec tes vidéos, je n'ai pas su savoir le pourquoi du comment, laquelle est la mieux ? merci d'avance pour ta réponse. Bonne continuation !

[@prakticode]

Salut ! Merci pour ton commentaire et pour suivre mes vidéos 😊 Pour répondre à ta question, j'ai utilisé pour avoir plus de flexibilité avec le design et les animations CSS. Utiliser une div avec un background-image en CSS permet de mieux contrôler la position, la taille, etc. Mais utiliser est aussi une bonne option, plus simple à mettre en place et à comprendre. Bonne continuation et n'hésite pas si tu as d'autres questions ! (et désolé de répondre si tardivement)

[@user-gc8dj4zr4j]

j'aimerais vraiment avoir un autre tuto en html css cette fois ci un site de 2 a 3 pages . Merci

[@prakticode]

Ça arrive ! :)

[@salafsalihalhamdulillah5189]

Comment je déplace pour le 14:09

[@chakibdjeziri2451]

Je suis le 100e like🤣🤣

[@prakticode]

Merci ! Je prépare le prochain tuto 🙂 Bon développement

[@efekanymn]

Personnellement toutes les commandes npm dans le terminal ne fonctionne pas je sais pas pourquoi

[@prakticode]

Hello, Assures-toi d'avoir bien installé Node.js et redémarre Vscode, ça devrait fonctionner. (fais les commandes "node -v" et "npm -version" dans ton terminal pour vérifier que c'est tout bon, ça devrait t'afficher les numéros de versions)

[@efekanymn]

@@prakticode c’est bon enfaite j’avais une trop ancienne version de node.js j’ai supprimé et réinstaller et c’est bon

[@gabomax8226]

j'utilise un mac et quand je souhaite utiliser les commandes npm je recois une erreur me disant que ma version mac os est trop ancienne il y a-t-il une alternative ?

[@prakticode]

Salut, Tu peux soit essayer d'installer VirtualBox et d'installer une VM Ubuntu, sur laquelle tu mets Node.js et Vscode, là ça devrait fonctionner, soit tu essayes d'installer une version antérieure de node.js qui serait compatible avec ta version mac os (tu peux regarder sur le site de nodejs) J'espère que tu vas réussir à trouver une solution, sinon tu n'es pas obligé d'utiliser npm, tu peux juste installer l'extension "Live server" sur vscode et faire le projet en créant directement des dossiers / fichiers à la main

[@torahime277]

Salut ,très bon tuto mais je ne comprends pas dans ce cas précis à quoi sert d'initialiser le projet avec Vite, surtout qu'on supprime la moitié des fichiers juste après. Pourquoi ne pas juste créer son projet à la main ? Ce qui éviterai aussi de devoir run un serveur. Je débute en web donc si il y a un raison évidente je ne la connais pas Merci

[@prakticode]

Salut, Tout d'abord merci pour ton feedback, j'apprécie énormément! 😊 En ce qui concerne ta question qui est totalement légitime, j'ai choisi d'utiliser Vite surtout pour présenter l'outil et la manière de l'utiliser dans le terminal pour rapidement mettre en place un environnement de développement, cela peut être pratique pour des développements futurs. Mais il est totalement possible de créer son projet à la main, et d'utiliser par exemple l'extension Live Server de VsCode pour lancer un serveur de développement local et avoir un reload en temps réel. J'apprécie ta question et ta curiosité, et j'espère que cela clarifie un peu la raison pour laquelle j'ai choisi cette approche. Bon développement 😊

[@torahime277]

@@prakticodeAhh je vois, merci pour ta réponse !

[@user-rj5fo9sd7o]

J'ai une question

[@prakticode]

@@user-rj5fo9sd7o Oui?

[@Architecdesignandelectricity]

La vidéo est trop flou

[@prakticode]

C'est réglé, j'ai ajouté le mode 4K !

[@Elnaaaaa]

Salut, j'étais bloqué au moment de mettre le background dans le fichier hero.css puis j'ai vu sur ton code GitHub que t'avais rajouté la div " " qui n'est pas présente dans ta vidéo à 38 minutes. Ce qui fait que la class "hero-overview__image" dans le CSS ne fonctionnait pas car elle faisait appel à une variable qui n'était pas déclaré. Top vidéo sinon !

[@prakticode]

Hello ! Merci d'avoir souligné ça en commentaire, j'ai dû en effet l'ajouter et oublier de filmer mon écran au moment où je l'ai fait ! Bon code

[@cristovinho]

Merci pour ce super projet, je suis entrain de le suivre. Petite question, comment ça se fait qu'à 9:14 tu donnes le chemin sans citer public ? Toi tu as mis /icon.png alors que je pensais qu'il fallait mettre public/icon.png ? ça fonctionne si on utilises npm install mais si je teste le site sur GoLive l'icon n'apparait pas

[@prakticode]

Merci pour ton commentaire, ça fait plaisir! :) Excellente question. Ici, comme j'utilise Vite, le dossier public est configuré comme un dossier de ressources statiques. Donc, quand je fais référence à un fichier à l'intérieur de ce dossier, j'ai pas besoin d'inclure le préfixe public/ dans le chemin. Vite s'occupe de servir ces fichiers correctement pour moi. Alors qu'avec "Go Live" de VSCode, ça sert les fichiers tels quels, sans cette configuration spéciale. C'est pourquoi tu dois spécifier le chemin complet, y compris le préfixe public/, pour que ça fonctionne. J'espère que ça éclaircit les choses ! N'hésite pas si tu as d'autres questions. 😊

[@cristovinho]

@@prakticode ok merci pour ta réponse j'ai tout compris et tout fonctionne à condition que je lance mon projet dans un environnement local de dévellopement (via : npm install et npm run dev) mais si je lance mon index dans chrome ou via Go Live (Vs Code) le favion n'apparaitra pas...et là c'est embêtant... 🤔désolé pour mes questions bêtes...

[@prakticode]

@@cristovinho Essayes de mettre ton "icon.png" à la racine du projet, ça devrait fonctionner si tu utilises Go Live ou que tu lances ton index.html directement dans chrome.

[@cristovinho]

@@prakticode 😁ça je le savais bien mais en fait j'essayais juste de comprendre l'intérêt de faire ce que tu as fait sachant qu'il y aura un soucis après et qu'il faudra déplacer à nouveau l'image. J'imagine qu'il me manque des connaissances car tu dois avoir une raison logique à faire ce que tu as fait car sinon je ne verrais pas l'intérêt puisque ce serait une perte de temps d'indiquer un chemin qui ne fonctionne pas par la suite quand on est dans GoLive ou sur Chrome (en non local). C'est pour progresser que je te pose la question et non pour t'embêter (je précise) 😉

[@prakticode]

@@cristovinho Je comprends tout à fait ta question, et je t'assure que tu ne m'embêtes pas du tout. C'est toujours bien de poser des questions pour progresser ! En fait le dossier public fourni à l'initialisation de Vite (et d'autres frameworks) est intéressant surtout quand on passe de développement à production, il sert surtout à placer les ressources (images, icones, fichiers..) statiques, donc qui n'ont pas besoin d'être modifiés ou traités entre le dev et la prod. Donc effectivement, si tu n'utilises plus l'outil Vite mais Go Live, ça va mal fonctionner car Go Live n'est pas fait pour ça, il permet juste de voir ce que tu fais en dev, contrairement à Vite qui te permet à la fois de voir ce que tu fais en dev, mais aussi de préparer ta mise en prod (quand tu veux héberger le site sur un serveur)