Je n'ai jamais utilisé mon ordinateur autrement que pour envoyer des mails, faire quelques recherches aller sur YouTube ou sur des site de streaming. J'ai donc voulu m'essayer à ce que je vois comme le cœur de l'ordinateur et d'internet: le codage. Je pars de zéro et ma capacité de concentration lorsqu'il s'agit d'outil numérique et technologique est aussi proche de zéro.
Mon objectif est de découvrir le codage, comprendre au moins la surface et pouvoir comprendre dans les grandes lignes comment le site internet sur lequel je navigue fonctionne lorsque j'utilise la touche f12.
Pour comprendre et apprendre j'ai regardé des vidéos YouTube qui m'ont expliqués les bases de ce qu'il y avait a comprendre, même si c'est un enfer à écouter j'ai pu comprendre que le html servait à la mécanique du site et le css à l’allure, l'habillage. Pour poursuivre j'ai posé beaucoup de question à chat gpt jusqu’à lui demander de me coder des sites pour les copier collers sur le logiciel et pouvoir jouer avec Je pense que c'est une des choses qui m'a le plus aidé. Mais la chose qui ma le plus aidé c'est de voir un copain faire un site en m'expliquant chaque étape.
J'ai alors voulu coder un site de vente (pas disponible sur internet) pour avoir un objectif et apprendre en même temps. Il s'agit d'un site de vente fictif des choses que l'on peut retrouver sur le plateau.
Le site
Page d’accueil
Effet de grossissement lorsqu'on passe la souris sur une image:
Deuxième page
qui apparait lorsque on clique sur un produit:
Troisième et dernière page
qui apparait lorsque on clique sur le bouton d'achat “ajouter à la besace”
Voila à quoi ressemble le site, maintenant, voyons comment cela fonctionne.
Fonctionnement
Tout d'abord il faut télécharger un logiciel de codage(visual studio code, atom, brakets…) ensuite il faut créer un dossier dans lequel va se trouver les différents fichiers de codage et les images.
site : 
Dossier : 
Le codage :
J'ai commencé par la page d'accueil, que j'ai appelé “index.html” qui ressemble a ça : 
cet index est composé de la partie “head” :
Le début est incompréhensible mais surement très utile. 
Mais pour le moment je recopie sans me poser de questions pour que le site fonctionne bien.
Puis après vient le titre avec cette commande:
<title>Ma Boutique</title>
Et enfin la commande pour relier le html au CSS:
<link rel="stylesheet" type="text/css" href="style.css" />
La partie “body” : 
Composé d'un header sur lequel est écrit “la Boutique” avec cette commande
<header>
<h1>LA Boutique</h1>
</header>
ce qui correspond a ça : 
Puis d'un Div : 
qui correspond au photo que l'on voit sur la page d'accueil :
Chaque href=“….html” dans cette div correspond à un fichier indépendant que j'ai copié collé en autant de produit que je voulais. Il me fallait plus qu'a changer l'image avec src=“nom de l'image dans le dossier principal.jpg (pour mon site j'ai du changer en pnj puisque j'ai voulu détourer mes images à l'aide de rimove.bg).
Ensuite, on va voir ce qui se passe lorsque on clique sur une des images, donc sur l'un des fichier html présent sur l'index.
(je prends l'exemple pour le club maté)
Qui est composé d'un header :
Avec comme pour l'index, le titre et la commande pour relier au CSS.
Puis d'un body :
La commande: class=“image” pour relier au CSS et src=“club_mate.png” pour relier au dossier principal dans lequel se trouve l'image du même nom.
Un peu de texte :
Puis un lien pour aller dans une autre fenêtre, lorsque on clique sur un bouton “ajouter à la besace”
En cliquant sur ce bouton, qui nous envoie vers le fichier suivant, donc poelvoorde.html, on arrive sur ça sur le site :
Et sur ça sur le logiciel de codage :
Qui fonctionne qu'avec des codes déjà vu au dessus.
CSS :
Voici à quoi ressemble la page css (aussi présente sur le dossier principal)
Ici chaque class fait reference à des codes html et a pour but de modifier leurs apparences, placements etc..