Bienvenue dans le développement Web : un guide pratique pour ceux qui partent de zéro

Sujets

• Présentation
• Qu'est-ce que le Web et comment ça marche ?
• Comment rendre votre site Web accessible au monde entier
• Outils essentiels pour les développeurs
• Combien pouvez-vous gagner en développement Web ?
• Conseils pour les débutants
• Conclusion : commencez aujourd'hui

Introduction

Si vous êtes ici, c'est parce que vous souhaitez comprendre comment fonctionne le monde du développement web et, qui sait, faire vos premiers pas dans une nouvelle carrière. Ce guide s'adresse à vous qui ne connaissez rien au domaine et souhaitez commencer depuis le début, comprendre les fondamentaux avant de vous plonger dans les langages et les outils. Explorons ensemble, de manière pratique et accessible, comment commencer ce voyage.

Qu’est-ce que le Web et comment ça marche ?

Le Web est un réseau mondial qui connecte des millions d'appareils et de systèmes, permettant d'accéder et de partager des informations en temps réel. En d’autres termes, le Web est comme une grande bibliothèque numérique. Lorsque vous accédez à un site Web, vous demandez des informations stockées quelque part dans le monde. Le navigateur (comme Google Chrome ou Firefox) est comme le « bibliothécaire » qui recherche et organise ces informations pour vous.

Voici les éléments clés qui font que tout fonctionne :

1. Navigateur et serveur
Comprenons ce qui se passe lorsque vous accédez au site https://www.pudim.com.br/. Le navigateur fait une requête, une requête au serveur, qui répond avec les fichiers nécessaires à l'affichage de la page. Dans le cas de Pudim, le serveur renvoie un fichier HTML contenant une structure de base du site Web, qui comprend un titre, une image et un lien email.

• Le navigateur est le programme que vous utilisez pour accéder à Internet (Chrome, Firefox, etc.). Il effectue des demandes d'informations et affiche les pages de manière organisée.

• Le serveur est l'ordinateur qui stocke les fichiers du site Web (textes, images, vidéos) et les envoie à votre navigateur lorsque vous, l'utilisateur, le demandez. Considérez le serveur comme un « ordinateur spécialisé » qui stocke les fichiers du site Web (textes, images, vidéos) et répond aux requêtes du navigateur en envoyant ces fichiers. Il est essentiel que le site internet soit accessible sur le web.
  Dans le cas de Pudim, le serveur renvoie un fichier HTML contenant une structure de base du site Web, qui comprend un titre, une image et un lien email.

2. Comment le navigateur et le serveur communiquent-ils ?
Lorsque vous accédez à un site Web, comme Pudding, le navigateur et le serveur doivent « parler » pour que le contenu s'affiche correctement. Cette communication s'effectue via HTTP (HyperText Transfer Protocol), un ensemble de règles qui définissent la manière dont les informations doivent être envoyées et reçues. Le navigateur envoie une requête au serveur (appelée requête HTTP) et le serveur répond avec les fichiers nécessaires (tels que HTML, CSS et JavaScript) pour assembler la page dans le navigateur. Cet échange d'informations est rapide et efficace, garantissant le bon affichage du site.

Exemple pratique : Tapez "https://www.pudim.com.br/" dans le navigateur et appuyez sur Entrée. Vous verrez une page simple avec une image de pudding et un lien e-mail.

3. Qu'est-ce qu'une API et comment s'intègre-t-elle ?
Imaginez maintenant que le site Pudim souhaite également afficher les prévisions météorologiques. Pour ce faire, il pourrait utiliser une API (Application Programming Interface). Les API fonctionnent comme des ponts qui permettent à différents systèmes d'échanger des informations.
Par exemple : imaginez que le site Web Pudding affiche également un message du type « Aujourd'hui est un bon jour pour manger du pudding ! » en fonction de la météo actuelle. Le navigateur enverrait une requête à une API météo, qui renverrait des informations sur la température et les conditions météorologiques. Le site internet pourrait alors afficher ce message de manière dynamique.

Résumé : Les API sont des outils essentiels dans le développement Web moderne car elles vous permettent d'ajouter des fonctionnalités dynamiques, telles que des données, à partir de n'importe quoi, mises à jour en temps réel.
Maintenant que vous comprenez les bases, commençons à apprendre les outils de base pour créer un site Web.

1. HTML : la structure du site
HTML (HyperText Markup Language) définit la structure de la page. Il est composé de balises, qui sont des éléments qui indiquent comment le contenu sera organisé et affiché dans le navigateur. Chaque balise a une fonction spécifique et peut contenir du texte, des images, des liens, entre autres éléments.
Exemples de balises :

•  : définit un titre principal.

•  : définit un paragraphe de texte.

•  : Insère une image sur la page.
•  : crée un lien.

Exemple pratique : Créez un fichier appelé index.html et collez le code suivant :

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

Ouvrez le fichier dans le navigateur et voyez votre première page Web !

2. CSS : Le style de page
CSS (Cascading Style Sheets) est utilisé pour donner de la couleur, de la forme et du style au site Web, le rendant ainsi plus beau.
Comment fonctionne CSS :

• Sélecteurs : identifiez les éléments que vous souhaitez styliser. Par exemple, body pour le corps de la page ou h1 pour les titres.
• Propriétés et valeurs : Spécifiez le style appliqué. Par exemple, couleur : bleu ; change la couleur du texte en bleu.

Exemple de règles CSS :

• corps { couleur d'arrière-plan : #f0f0f0 ; } définit la couleur d'arrière-plan de la page.
• h1 { taille de police : 24px ; couleur : #0066cc ; } change la taille et la couleur du titre.

Exemple pratique : Créez un fichier appelé styles.css et ajoutez ce qui suit :

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

Connectez CSS au HTML en ajoutant la ligne ci-dessous dans le

à partir du fichier index.html :

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Actualisez votre navigateur et voyez les changements de style de page.

3. JavaScript : ajout d'interactivité
JavaScript est le langage qui rend la page interactive, vous permettant d'ajouter des animations, de valider des formulaires, de manipuler des éléments, etc. (nous parlerons davantage de javascript dans un autre post, restez connectés ❤)

Exemple d'interactivité :

• Une alerte affichée lorsque l'utilisateur clique sur un bouton.
• Modifiez le texte d'un élément lorsque vous le survolez.

Exemple pratique : Ajouter la partie javascript <script> dans votre fichier index.html. Cela ressemblera à ceci :<br> </script>

 <link rel="stylesheet" href="styles.css"> 

Désormais, lorsque vous cliquez sur le titre, un message s'affichera à l'écran.

Comment rendre votre site Web accessible au monde entier

Vous vous demandez peut-être : "Comment mon code HTML, CSS et JavaScript peut-il être accessible à d'autres personnes, tout comme j'ai accédé au site Pudim ?". Eh bien, pendant que vous créez et testez votre site Web sur votre ordinateur, il n’est visible que par vous. Pour que les autres utilisateurs sur Internet puissent accéder à votre travail, vous devez le publier sur un serveur.

Considérez le serveur comme une bibliothèque qui stocke tous les fichiers de votre site Web. Lorsque quelqu'un saisit l'adresse de votre site Web dans son navigateur, le serveur envoie les fichiers nécessaires à l'affichage de la page. Sans cela, votre site Web ne serait pas accessible aux autres.

Ce processus de mise à disposition du site Web au monde entier est appelé hébergement. Il existe plusieurs types de serveurs et de services d'hébergement qui facilitent cette tâche. Maintenant que vous comprenez le concept, il est temps d'explorer comment créer des projets plus complets et éventuellement de les publier à la vue du monde entier !

Outils essentiels pour les développeurs

1. Éditeur de code : utilisez un éditeur tel que Visual Studio Code pour écrire et organiser votre code.

2. Contrôle de version avec Git : Git vous permet de suivre les modifications de code et GitHub vous aide à partager vos projets en ligne.

3. Ressources en ligne : des plateformes comme FreeCodeCamp, MDN Web Docs et W3Schools proposent d'excellents didacticiels gratuits.

Combien pouvez-vous gagner en développement Web ?

Le domaine du développement Web est bien rémunéré et très demandé. Voici les salaires moyens au Brésil :

• Junior : 2 500 à 4 000 R$ par mois.
• Complet : 5 000 R$ à 8 000 R$ par mois.
• Senior : 9 000 à 13 000 R$ par mois.

Ces valeurs sont basées sur les données de Glassdoor et peuvent varier selon l'entreprise et la région.

Conseils pour ceux qui débutent

1. Pratiquez tous les jours : Même si pour une courte période, la pratique quotidienne est essentielle.
2. Rejoignez les communautés : les groupes Discord et les forums comme Dev.to et Rocketseat sont parfaits pour apprendre et poser des questions.
3. Construisez un portfolio : Présentez vos projets pour augmenter vos chances d'obtenir des opportunités.
4. Soyez curieux : explorez différentes technologies et restez à jour.

Commencez dès aujourd'hui

Ce guide présentait les bases des bases pour ceux qui débutent dans le développement web. L'objectif était de montrer les premières étapes et de donner une idée générale de ce qu'il faut étudier pour commencer à construire ses propres projets.

Cependant, le développement Web est un vaste domaine plein de possibilités. Par exemple, ce que nous avons montré à propos du HTML n'est qu'un point de départ. Vous pouvez en savoir plus sur HTML5, les éléments sémantiques et les meilleures pratiques pour rendre vos sites Web accessibles et bien structurés.

Voici quelques suggestions de sites internet pour poursuivre vos études :

• MDN Web Docs : l'une des meilleures sources pour apprendre le HTML, le CSS et le JavaScript.
• W3Schools : Une plateforme conviviale pour apprendre et pratiquer le codage.
• FreeCodeCamp : Des cours gratuits et pratiques qui vous aident à développer de vrais projets.

Entraînez-vous chaque fois que vous le pouvez, explorez différents outils et n'ayez pas peur de faire des erreurs.

Le plus important est de continuer à apprendre et, petit à petit, vous vous sentirez plus en confiance pour créer des projets complets et même entrer sur le marché du travail. Partons ensemble pour ce voyage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!