tuto

Tuto

Bienvenue sur le tuto de démarrage qui explique le minimum requis pour commencer à développer vos premières pages web.

1: Installation

Pour commencer, installer un ide (un environnement de développement intégré), je vous recommande visual studio code, gratuit et complet ici: code.visualstudio.com ensuite, Installer dans VScode l'extension: open with live server (dans l’onglet extension à gauche) si elle n’est pas déjà installée par défaut, cela vous permettra de visualiser rapidement vos pages (clique droit de la souris puis sélectionnez open with live server).


2: Créer le fichier

Créer un dossier puis faite le glisser simplement dans votre fenêtre de VScode, ensuite créer un fichier dans ce dossier que vous appellerez: index.html ,important car le navigateur comprendra que la page “index” est la première page de votre site et .html que vous lui donnez du code HTML à traiter (pour JavaScript .js, pour CSS .css, pour PhP .php, etc…)

3: Intégrer du code

Rendez-vous à la page Codes de code box, choisissez le code qui vous intéresse, je vous conseille un menu simple pour commencer, accédez au code “GET” via le lien notion.so, copiez-collez le dans VScode directement sur la page index.html que vous venez de créer.

4: Voir le resultat

Ensuite rien de plus simple, clique droit dans VScode, sélectionnez open with live server et visualisez la page interprétée par le navigateur. Maintenant à vous de jouer, personnalisez votre page, modifier les couleurs, le style, rajouter du contenu etc… Si vous êtes perdu rendez-vous dans le Tchat et n'hésitez pas à demander de l'aide.

5: Mettre en ligne

Si vous voulez mettre votre site en ligne gratuitement je vous recommande le site netlify netlify.com qui vous permettra de mettre votre site en ligne rapidement par un simple glisser déposer. Pour aller plus loin, je vous recommande les sites suivants, grafikart.fr tutos nouvelle-techno.fr tutos openclassrooms.com cours en ligne codepen.io partage de code developer.mozilla.org la doc officielle de mozilla

logo html5 logo css3 logo javascript