Apprentissage de codage

Voici quelques sites gratuits pour apprendre le développement web :

*Pour apprendre les langages :*

1. *Codecademy* : Des cours interactifs pour apprendre HTML, CSS, JavaScript, PHP, etc.
2. *FreeCodeCamp* : Un site qui propose des cours et des projets pour apprendre le développement web.
3. *W3Schools* : Des tutoriels et des références pour apprendre HTML, CSS, JavaScript, etc.
4. *OpenClassrooms* : Des cours en ligne gratuits pour apprendre le développement web.

*Pour pratiquer et créer des projets :*

1. *JSFiddle* : Un site pour créer et partager des projets HTML, CSS et JavaScript.
2. *CodePen* : Un site pour créer et partager des projets HTML, CSS et JavaScript.
3. Repl.it : Un site pour créer et partager des projets de développement web.

*Pour obtenir de l'aide et des ressources :*

1. *Stack Overflow* : Un site de questions-réponses pour les développeurs web.
2. *MDN Web Docs* : La documentation officielle de Mozilla pour les développeurs web.
3. *GitHub* : Un site pour partager et collaborer sur des projets de développement web.

*Autres ressources :*

1. *Coursera* : Des cours en ligne gratuits de niveau universitaire sur le développement web.
2. *edX* : Des cours en ligne gratuits de niveau universitaire sur le développement web.
3. *YouTube* : Des chaînes YouTube comme Traversy Media, The Net Ninja, etc. proposent des tutoriels et des cours sur le développement web.

Chatgpt est de bon conseil si tu sais lui limité ses réponse.

Si tu lui demandes je veux un site web pour truc machin. Il est fort à parier qu'il te donnera une réponse mais de la à comprendre la solution il y a un monde.

Le petit tutoriel que j'ai présenté à été entièrement rédigé par chatgpt, il je lui est posé des questions simples li m'as donné des réponses concises.

Il m'a même suggéré des options. Ia est payé {même sa version gratuite} au chiffre d'affaires. Il te gave de trucs dont tu n'a rien à faire pour te dire que ton cota est atteint.

Tu dois avoir un minimum de vocabulaire pour poser des questions et entrevoir la pertinence des réponses 

Bonjour Sophie,

Avez-vous vraiment besoin de monter un site complet vous-même !?

Il existe bon nombre de CMS qui permette de le faire sans beaucoup de connaissance ;-)

A+

Bonjour Sophie et bonjours NonoM45,

Je suis entièrement d'accord avec NonoM45 sur l'opportunité de créer son site soit même. Ceci dit si, c'est pour son hygiène intellectuelle !    

Note que chatGPT est un bon allié, mais encore faut il savoir lui parler... de surcroît sur un sujet que tu connais mal, voire pas du tout. Je t'invite à te renseigner sur le sujet avant de te lancer.

Tu peux aussi télécharger ce cours html et l'ouvrir dans ton navigateur.

Bonjour à tous les deux,

13884061  @SOphie_2112 StatutMembreQuelques recommandations préalable pour vos futurs messages :

• Pensez à utiliser le bouton "Insérer un extrait de code" (8e bouton au dessus de la boîte dans laquelle vous rédigez un message) pour partager du code. Cela permet de le mettre en forme et en couleur en fonction du langage (e.g. HTML, PHP ou CSS).
• Merci de soigner l'orthographe :-)
• Pour créer un lien, vous pouvez utiliser le bouton dédié (6e bouton) ou ctrl+K.
• Merci de faire un fil de discussion par problème. Ici le problème initial est "comment apprendre les bases pour créer un site web", or la discussion est en train de dériver sur d'autres sujets (par exemple "comment définir un fond de page en CSS"). Merci d'ouvrir un nouveau sujet pour chaque nouveau problème.
  • Forum CSS
  • Forum HTML
  • Forum PHP
  • Forum Créer un site web

Pour répondre à la question initiale :

Commence par apprendre HTML :

Il suffit d'un éditeur texte pour écrire un tel fichier et un navigateur pour en faire le rendu. Au début, il te faudra apprendre les balises (tag) associé à chaque élément:

• h1, h2, h3, ... : titres de niveau 1, 2, 3
• a : lien
• p : paragraphe
• br : retour à la ligne
• img : image
• div : calque (permet de regrouper des éléments, plus tu vas avancer, plus ça va servir)
• ...

Je te conseille w3schools comme site de référence car au début, clairement tu ne pourras pas tout connaître par cœur.

Exemple : 

<html>
 <body>
  <h1>Titre 1</h1>
  <h2>Titre 2</h2>
  <h3>Titre 3</h3>
  <p>Un paragraphe</p>
  <a href="https://google.fr">Lien vers google</a>
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1024px-Wikipedia-logo-v2.svg.png"/>
 </body>
</html>

Comme le montre cet exemple, HTML est un langage qui consiste à emboîter des balises les unes dans les autres, un peu comme des poupées russes.

• Il y a les balises ouvrantes (<x ...>) et les balises fermantes (</x ...>)
• Certaines balises (comme img ou br) peuvent être les deux à la fois <img ... />)

Ce que je te conseille, c'est d'avoir un éditeur qui fait de la coloration syntaxique (par exemple Notepad++, ça suffit amplement pour commencer, inutile de s'embarasser avec un IDE compliqué) et d'afficher / rafraîchir la page dans ton navigateur (touche F5) pour tester au fur et à mesure tes changements.

Tu verras assez rapidement que certains tags HTML permettent de faire de la mise en forme.

• b : gras
• i : italique
• u : souligné
• em : emphase
• ...
• En pratique, ils sont rarement utilisés car on déporte le style dans un fichier CSS. Ceci dit, ça peut être un bon exercice pour commencer à emboîter des balises les unes dans les autres.
• Quand tu en seras là, tu pourras commencer à déporter la mise en forme, que tu faisais jusqu'ici en HTML avec du CSS. Attention car CSS a ses propres notations, qui ne correspondent pas forcément aux attributs HTML. Tu peux commencer par les mettre au niveau de la balise :

  <html>
   <body>
    <p style="color: red; font-size: 2em">Texte rouge</p>
   </body>
  </html>

  ... puis dans une feuille de style, embarquée dans la page : 

  <html>
   <head>
     <style>
       p {
         color: red;
         font-size: 2em;
       }
     </style>
   </head>
   <body>
    <p>Texte rouge</p>
   </body>
  </html>

  ... puis dans un fichier CSS dédié. Voir cette page.

Poursuis avec CSS

Un fichier CSS est un ensemble de règles (critère : devant l'accolade ouvrante ; règles : entre la paire d'accolades). Il y a des règles de priorités entre les règles. Intuitivement, si deux règles sont légitimes pour définir un style, c'est la plus spécifique l'emporte.

• Ici aussi w3schools est un bon point de départ.

• Plusieurs opérateurs CSS doivent être connus :
  • .mon_style : s'applique à tout tag HTML où class="mon_style
  • En particulier la règle CSS a.mon_style { ... } s'applique à tout tag <a style="mon_style"> ... </a>.
  • Exemple : 

    <html>
     <head>
       <style>
         .mon_style {
           color: red;
           font-size: 2em;
         }
       </style>
     </head>
     <body>
      <p class="mon_style">Texte rouge</p>
     </body>
    </html>

  • #mon_id : s'applique à tout tag HTML où id="mon_id"

Programmation d'un site

Dès qu'on fait plus que de l'affichage, il faut implémenter un programme avec un langage spécifique, car HTML et CSS ne servent qu'à faire de l'affichage.

La première question, c'est :

• si le code doit être exécuté par le navigateur, en toute autonomie : dans ce cas, on se tourne vers Javascript si ça n'est pas faisable en CSS.
  • Par le passé, programmer un menu déroulant devait se faire en Javascript. Depuis CSS a évolué et on peut le faire en CSS.
  • Voir sur w3schools/JavaScript
  • Attention, javascript est un monde TRÈS vaste, assez ingrat (selon le navigateur, certains code javascript peuvent marcher ou non), parfois compliqué à déboguer (voir clic droit inspecter dans Firefox ou Chrome).
  • Selon tes usages, tu auras peut être besoin de certains modules Javascript sur étagères. En voici quelques uns :
    • jquery : manipulations sur l'arbre DOM (c'est à dire la hiérarchie de balises HTML définie dans un page), pas trop compliqué et très utilisé
    • d3js : rendu de données (graphes, graphiques, ...), très compliqué à prendre en main mais incroyablement puissant
    • ...
• si le code ne peut être exécuté que par le serveur : par exemple parce qu'il met en jeu des opérations que seul le serveur peut réaliser (par exemple intéragir avec une base de données) : dans ce cas on utilise traditionnellement PHP, mais d'autres langages peuvent être considérés.
  • Voir w3schools/PHP
  • Si tu as besoin d'une base de données, il faudra en plus apprendre le SQL, qui est un langage dédié aux bases de données. Voir w3schools/SQL. Il existe plusieurs serveurs SQL (MySQL, PostgresSQL). Les deux sont biens, très similaires tant que tu fais des choses "simples". Généralement apprendre l'un des deux est suffisant. Tu peux commencer par w3schools/MySQLw3schools/MySQL.

D'un point de vue formation, ces deux chemins sont assez différents, vastes. Dans la vie professionnelle ils peuvent donner lieu à des postes différents (voir développeur front-end et back-end). Quelle que soit la voie à laquelle tu te destines, il est toujours utile d'avoir quelques notions dans les deux.

Bonne chance

Bonjour,

Je laisse tomber, je n’arrive pas à insérer les liens !

Au mieux, ils se transforment en texte non exploitable, au pire ils s’effacent.
Ils se trouvent dans le fichier HTML que j’ai réussi, non sans difficulté, à uploader.

Intéresse-toi à Largon, une suite fonctionnant sur clé USB avec Apache, MySQL, PHP et phpMyAdmin.

pour l'instant tu n'as nullement besoin d'un hébergeur tu es en apprentissage et Largon t'offre tout ce dont tu as besoins pour développer ton site internet.  

https://openclassrooms.com/fr/courses 

tu peux également télécharger VsCode
https://code.visualstudio.com/Download