À la fin de la dernière vidéo, j'ai mentionné que nous allons introduire une nouvelle structure de dossiers, nous allons donc commencer par créer les dossiers et dossiers appropriés en premier.
Donc, je vais aller à sublime et je vais faire mon nouveau fichier pour chaque équipe.
Juste être notre principal fichier HTML et je vais l'appeler indexé.
H Tim L et moi avons un dossier pour lui que j'appelle juste pour faire le projet de liste.
Donc index que HD M-L et puis nous allons ajouter dans notre base H-2 mail boilerplate et je vais appeler à faire la liste et enregistrer.
Et puis nous allons faire quelques nouveaux répertoires.
Et je vais juste faire cela à partir de finder afin que vous pouvez cliquer avec le bouton droit et faire un nouveau dossier.
Vous pouvez faire le changement de commande et vous pouvez aussi faire cela à partir de l'intérieur de sublime.
Si vous entrez dans un fichier nouveau fichier et que vous l'enregistrez, vous pouvez cliquer sur le nouveau dossier ici mais vous allez créer le nouveau dossier que nous allons faire un dossier appelé actifs et puis à l'intérieur des actifs, nous allons faire deux dossiers un Pour JS Et un autre pour nous.
Enfin, au lieu de J.S. Nous allons créer un autre dossier appelé lib.
Donc, si j'ouvre cette structure entière à l'intérieur de sublime en faisant glisser tout le projet sur comme cela, vous pouvez voir que notre structure est maintenant à faire ce projet et nous avons un index h t m l et puis nous avons un répertoire d'actifs au lieu d'actifs.
Nous avons C Ss et nous avons javascript et au lieu de javascript, nous avons un répertoire lib.
Nous allons donc mettre notre feuille de style au lieu du répertoire C S S et au lieu de J.S. Nous allons mettre notre propre javascript personnalisé où nous écrivons la requête jey et à l'intérieur de lib est où nous allons ajouter.
Interroger lui-même le fichier de requête J réel.
Nous allons commencer par là.
Allons-y et assurez-vous que nous avons une requête.
Donc, je vais juste aller à Jay Querrey dot com et plutôt que de faire un CDN parce que c'est plus d'un projet sérieux, nous allons télécharger la version compressée la plus récente.
C'est donc ici la production compressée 2.0 1.4.
Et puis je vais trouver ce fichier et il suffit de l'ajouter dans mes actifs.
J.S. Lib juste ajouter que dans comme ça et maintenant je vais aller lien à ce correct.
L'intérieur de mon fournisseur.
Donc, dans mon HMO, je dois ajouter une balise de script.
Et le chemin pour y arriver est actif slash J.S. Slash lib slash Jay se précipita pour pointer un point pour le dolmen.
Oui.
Donc, faisons maintenant que le type de script, parce que la source javascript égale les actifs slash J.S. Slash lib slash.
Jay tableau de requête 2.1 point un point quatre hommes.
C'est un nom de fichier oui long pour y arriver mais enregistrez ceci.
Et ouvrons-le dans un navigateur pour commencer.
Alors allez trouver notre étude d'index chaque fois que je vais l'ouvrir.
Nous n'avons rien à voir.
Mais si je vais ici je tape une requête.
Les choses fonctionnent très bien.
Je pourrais aussi testé en faisant cela en sélectionnant le corps et cela fonctionne aussi bien.
Cela signifie que nous sommes prêts à partir.
Ensuite nous allons nous concentrer sur l'obtention de notre feuille de style et notre propre fichier javascript personnalisé inclus.
Donc, nous allons faire la feuille de style en premier.
Alors nous allons faire un nouveau fichier et enregistrer cela et je vais juste appeler des styles que C-s nous et je vais aller dans mes actifs voir SS et en fait pour être cohérent faisons à Dewes fait le SS.
Donc, pour faire des trucs C Ss à l'intérieur de nos actifs C Ss répertoire et enregistrer et ajoutons quelque chose comme le fond du corps violet dont nous allons absolument se débarrasser.
Mais juste pour s'assurer que cela fonctionne, puis nous allons aller ici et ajouter la balise liée et ensuite ajouter le chemin correct qui est des actifs barre oblique C. SS slash à Dewes dot C Ss et nous allons enregistrer et actualiser et vous Pouvez voir notre feuille de style est maintenant correctement connecté.
La dernière chose que nous allons faire est d'obtenir notre propre fichier javascript personnalisé.
Donc je vais faire un nouveau fichier et l'enregistrer et nous allons appeler celui-ci pour faire Scott J.S. Et c'est là que nous allons écrire le code réel qui fera de notre To Do List de travail.
Donc cela devrait aller à l'intérieur des actifs.
J.S. et c'est tout.
Donc nous ne le mettons pas dans lib parce que lib est où nous allons placer le code externe et les bibliothèques comme Jay Querrey. Donc nous allons juste le mettre dans JS et sauver notre structure ressemble à ceci.
Actifs CSSA nous devons utiliser au lieu de J.S ..
Nous avons un répertoire lib qui a J requête en elle et nous avons notre propre à faire.
J.S. Au lieu du dossier G-S et les votes vont ajouter une alerte simple connecté et enregistrer.
Maintenant revenir à notre courrier HQ et ajouter dans une autre balise script et cette fois, nous allons ajouter source égale à slash actifs J.S. Slash pour faire oui et sauver.
Et maintenant voyons ce qui se passe quand nous rafraîchissons nous obtenons notre alerte connectée.
OK alors nous avons la structure de dossier configurée correctement alors nous allons introduire un autre fichier que nous devons placer une fois que nous parlons de Funt.
Awesome qui est une bibliothèque CSSA.
C'est essentiellement un tas d'icônes que nous pouvons inclure.
Nous reviendrons donc à cette structure de dossiers et nous y ajouterons dans la future vidéo.
Pour l'instant, c'est tout ce que nous devons faire dans la prochaine vidéo.