Comment utiliser la Coding School

1 . Introduction

<iframe width="100%" height="715" src="https://www.youtube.com/embed/zjuyEhdU_9E" title="Introduction of the Coding School" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> Bienvenue sur la Coding School ! Dans ce tutoriel, nous allons voir pas-à-pas comment utiliser la plateforme. Si vous le souhaitez, une vidéo explicative est disponible sur la page principale. Vous êtes prêt ? C'est parti !

2 . L'accueil

Commençons par l'accueil ! Sur la Coding School, vous retrouverez **deux barres de navigation** sur vos pages. La première sur la gauche vous sert à la **navigation de la plateforme** : * Accueil * Projets * Chat * Tutoriels * Exercices  La seconde se trouve en haut de la page et va servir à vos informations personnelles et notifications :  Le menu burger sur la gauche (les 3 traits horizontaux) permet de **réduire la barre de navigation de gauche**. Le drapeau permet de **changer la langue** (français ou anglais). Les flèches permettent de mettre la plateforme en **plein écran** (très utile pour les petits écrans). La boîte permet d'afficher les **messages reçus** du chat. La cloche permet d’afficher les **notifications** (messages reçus, corrections terminés, demandes d’aide résolues, etc.). Le cercle avec vos initiales ouvre un menu déroulant :  Ce menu déroulant vous permet de : * Modifier votre nom, prénom et adresse email (en cliquant sur paramètres) * Modifier votre statut (en ligne, occupé, etc.) * Modifier le thème (clair, sombre, automatique) * Se déconnecter Maintenant que nous avons vu comment naviguer sur la plateforme, concentrons-nous sur le contenu de notre page d'accueil !  Les utilisateurs en **autoformation** sont d’office en **parcours libre** : c’est à dire qu’ils ont accès à tous les exercices et tous les tutoriels sans exception. Si vous êtes **étudiants** et suivez un cours, en cliquant sur “Parcours libre”, vous obtiendrez un menu déroulant avec vos classes. Vous pouvez vous aussi rester en parcours libre et avoir accès à tous les tutoriels et exercices mais en sélectionnant une classe, vous n’aurez que les tutoriels et exercices que votre professeur a sélectionnés.  L’onglet “**Mes cours**” permet d’afficher mes prochains cours ou les cours déjà commencé. Vous pourrez rejoindre facilement le cours en cliquant dessus. Ici je n’ai aucun prochain cours, mais si un cours débute vous aurez un petit 1 qui s’affichera sur l’onglet :  L’onglet “**Mes demandes d’aide**” répertorie toutes mes demandes d’aide, qu’elles soient en cours, terminées etc. Vous pourrez suivre la progression de la demande, votre problème, le correcteur, etc. En cliquant sur votre demande d’aide, vous serez redirigé vers le projet en question où vous pourrez voir la réponse.  L’onglet “**Mes corrections d’exercice**” répertorie tous les exercices notés effectués, en attente de correction ou corrigés. Une fois l’exercice corrigé, vous pourrez avoir les détails de votre note en cliquant sur “**détails**”.  Sous les 4 onglets, vous avez 4 tuiles :  * Vos projets * Les tutoriels à suivre * Le nombre d’exercices à faire en autonomie * Le nombre d’exercices notés En cliquant sur chacune de ces tuiles, vous serez redirigé sur la page correspondante. Sous les 4 tuiles, vous pouvez regarder une vidéo qui vous apprend à utiliser la Coding School. Enfin, une dernière tuile vous montre les **événements** futurs ou en cours avec la possibilité de vous inscrire ou rejoindre l’événement.  Ces événements sont des ateliers d’initiation à un langage ou une conférence sur un thème particulier (ex : le référencement).

3 . Projets

Passons maintenant aux projets. En cliquant sur `Projets` sur la barre de navigation de gauche, un menu apparait me proposant 3 choix : * Mes Projets : permet de créer un nouveau projet avec le langage de mon choix et aussi d’accéder à mes projets d’autoformation. * Mes Projets d’équipe : permet de voir et accéder aux projets dans lesquels vous avez été ajouté. * Fichiers de cours : permet de voir et accéder aux fichiers créés pendant un cours  **Mes Projets :**  Comme expliqué précédemment, sur cette page vous allez pouvoir **créer un nouveau projet** du langage de votre choix, et **accéder à vos projets existants**. Pour créer un nouveau projet c’est très simple, il vous suffit de cliquer sur le projet de votre choix, par exemple web HTML/CSS/JAVASCRIPT :  Renseignez **tous les champs**. Si vous ne voulez pas rajouter d’équipier vous pouvez laisser le champ vide. Pensez à donner une description explicite à votre projet pour que ce soit plus facile pour nos Coachs de vous aider. Une fois les champs complétés, cliquez sur `Créer` pour être redirigé sur votre projet :  Vous voici sur votre espace de travail. Votre espace de travail est composé de **2 fenêtres distinctes** : * à gauche votre **feuille de code** qui va vous permettre de créer votre site web ou votre programme * à droite l’**aperçu** de votre code ou ce que l’internaute verra (c’est-à-dire le résultat) En cliquant sur `Tutoriels`, un **nouvel onglet s’installera à côté de l'aperçu**, vous permettant d’appliquer le contenu du tutoriel directement depuis votre espace de travail.  Il en est de même pour les **exercices** : en cliquant à gauche sur `Exercices` puis `Entrainement`, un **nouvel onglet s’installera à côté de l'aperçu**, vous permettant de réaliser un exercice en autoformation. Travaillez sur votre code à gauche, et quand vous avez terminé, cliquez sur `voir la correction` pour vous auto-corriger :  Vous pouvez facilement **rajouter une page** dans votre espace de travail en cliquant sur l’**icône des documents** et en cliquant ensuite sur l’**icône du fichier avec un +**. *Notez qu’il faut éviter les caractères spéciaux comme les accents, les espaces et bien mettre l’extension du fichier, par exemple : contact.html *  Pour **ajouter un fichier image depuis votre ordinateur**, vous n’avez qu’à glisser le fichier dans l’explorateur de fichiers :  Pour **demander de l’aide à un de nos Coachs**, cliquez sur l’icône `Help Me` en forme de point d'interrogation, renseignez le type d’aide (sur la Coding School si vous avez un souci sur la plateforme, sur mon code si vous avez un souci sur votre code) puis expliquer votre problème le plus explicitement possible :  Vous recevrez une notification quand le Coach vous aura répondu :  Vous pourrez voir le détail de sa réponse en cliquant sur votre demande d’aide :   Revenons brièvement sur **les projets de groupe**. Si vous avez créé un projet seul et que vous voulez rajouter quelqu’un après-coup, pas de panique ! Retournez dans `Mes projets`, cliquez sur `détails`, rajoutez votre coéquipier, cliquez sur le `+` puis `mettre à jour`.  Enfin, vous êtes fier de votre projet et voulez le **partager** avec un ami, cliquez sur le petit œil et copier-coller l’url de la fenêtre qui vient de s'ouvrir : 

4 . Le Chat

Vous voici maitenant sur le Chat de la Coding School ! Vous pouvez à tout moment contacter vos collègues sur le chat. C'est rapide, simple et efficace ! On va le faire très rapidement parce que je ne pense pas que ce soit la peine de vous expliquer comment un Chat fonctionne, mais sait-on jamais si l'information peu aider quelqu'un ! Pour commencer un nouveau chat, c’est très simple : cliquez sur le bouton `+`, recherchez la personne avec laquelle vous souhaitez dialoguer, cliquez sur son nom et c’est parti, vous pouvez écrire votre message. Cliquez sur la flèche pour envoyer votre message ou la touche `Entrer` de votre ordinateur. 

5 . Tutoriels

En cliquant sur la catégorie `Tutoriels` sur la barre de navigation à gauche, vous allez être redirigé sur la page de **tous les tutoriels**.  Comme vous pouvez le voir, les tutoriels apparaissent sous forme de vignettes, avec le **langage en haut à gauche**, une description, la **difficulté** (débutant, intermédiaire, avancé et expert), le temps de lecture estimé et un bouton pour le commencer ou le reprendre. On peut voir ensuite des chiffres en haut à droite. Cela permet de savoir combien il y a de tutoriels dans le langage et de les étudier dans le bon ordre. En cliquant sur le menu déroulant, vous pourrez **trier les tutoriels** par le langage souhaité pour votre apprentissage.  Vous pourrez aussi bien utiliser la barre de recherche pour trouver précisément le tutoriel voulu (exemple : “hypertext” va vous sortir le tutoriel HTML sur les liens HyperText). 

6 . Exercices

En cliquant sur la catégorie `Exercices` sur la barre de navigation à gauche, on vous proposera 2 options : * Entraînements * Notés  Il est recommandé de faire les **exercices d’entrainement dans un premier temps**, et une fois terminés de faire les exercices notés. Pour les **exercices d’entrainement**, il faut créer un projet et une fois dans votre projet, il faudra sélectionner `Exercices` puis `Entrainements` pour qu’ils s’ouvrent à côté de votre espace de travail comme on a pu le voir dans la section `Projets` de ce tutoriel. Les **exercices notés** sont néanmoins différents. Quand on clique dessus, on arrive sur une page avec tous les exercices notés. Cela fonctionne exactement comme les tutoriels, on peut utiliser un menu déroulant pour sélectionner le langage souhaité ou utiliser la barre de recherche.  Une fois l’exercice noté choisi, il suffit de cliquer sur `Commencer` et ça nous ouvre l’exercice automatiquement dans un projet. Une fois l’exercice terminé, cliquez sur le petit logo `valider` :