Oefening: de structuur van uw web-app instellen

  • 5 minuten

Er zijn verschillende manieren om websiteprojecten te maken en te beheren. Sommige van deze verschillen zijn afhankelijk van de specifieke hulpprogramma's die u hebt en de voorkeuren van uw organisatie. Wanneer u een website maakt, is het niet ongebruikelijk dat uw projectstructuur in de loop van de tijd verandert omdat het ingewikkelder wordt. Grote projecten vereisen vaak een hogere mate van zorg en aandacht, zodat veel mensen alles georganiseerd kunnen houden. De sleutel is het onderhouden van een schijn van organisatie en er zijn algemene strategieën om u te helpen.

In deze les maakt u een kleine projectstructuur met behulp van Visual Studio Code. Het project heeft drie bestanden: een HTML-bestand, een CSS-bestand en een JavaScript-bestand. U voegt ook een Visual Studio Code-extensie toe om het uitvoeren van de website in uw browser te vereenvoudigen.

Een nieuwe map voor uw website maken

  1. Open Visual Studio Code.

    Wanneer u Visual Studio Code opent, wordt de welkomstpagina geopend. U ziet dat u een nieuw bestand kunt maken of een map kunt openen in de lijst Start .

    Schermopname van de pagina Aan de slag met Visual Studio Code.

    Als de welkomstpagina niet zichtbaar is, kunt u deze weergeven door Welkom bij Help > in het menu te selecteren. (U kunt ook de Welkomstpagina door het opdrachtenpalet te openen met behulp van de sneltoets Shift+Ctrl+P op een Windows-computer of Shift+Cmd+P in een macOS, of door opdrachtpalet weergeven > te selecteren in het menu van Visual Studio Code. Wanneer het opdrachtpalet wordt weergegeven, voert u >Help in: Welkom in het zoekveld om de welkomstpagina te openen.)

  2. Selecteer De map Openen in de lijst Start van de welkomstpagina of selecteer Map openen > in het menu Visual Studio Code.

    Schermopname van het dialoogvenster Map openen van het Windows-besturingssysteem.

    Wanneer u een map opent, heeft het besturingssysteem een menuoptie om een nieuwe map te maken.

  3. Navigeer naar de locatie waar u de nieuwe map voor uw website wilt maken en selecteer Nieuwe map.

  4. Noem de map simple-website en selecteer Map selecteren.

    Belangrijk

    Als er een Visual Studio Code-dialoogvenster wordt weergegeven, selecteert u De auteurs van alle bestanden in de bovenliggende map vertrouwen...; dit is de functie Werkruimtevertrouwen waarmee u kunt bepalen of uw projectmappen automatische uitvoering van code moeten toestaan of beperken. U hebt zojuist de map gemaakt, dus het is veilig.

Een aantal bestanden maken

  1. Maak een nieuw bestand door Bestand nieuw bestand>in het menu of met Control+N in Windows of Command+N in macOS.

  2. Sla het bestand op door Control+S te selecteren in Windows of Command+S in macOS.

  3. Voer index.html de bestandsnaam in en selecteer Opslaan.

  4. Herhaal de voorgaande stappen om nog twee bestanden te maken: main.css en app.js. Wanneer u klaar bent, moet de projectmap simple-website in Visual Studio Code Explorer de volgende bestanden bevatten:

    • index.html
    • main.css
    • app.js

    Schermopname van uw bestanden in de weergave Visual Studio Code Explorer.

U kunt een website bouwen door al uw HTML-, CSS-stijlen en JavaScript-code in één bestand op te slaan. In deze oefening gebruikt u echter een HTML-bestand voor uw inhoud, een CSS-bestand voor uw stijl en een JavaScript-bestand voor uw interactiviteit.

Als u drie bestanden instelt, kunt u uw websiteproject georganiseerd houden. De scheiding van inhoud, stijlen en logica is een voorbeeld van progressieve verbetering. Als JavaScript niet is ingeschakeld of ondersteund door uw klanten, werken uw CSS en HTML nog steeds. Als CSS echter niet wordt ondersteund door uw klanten, wordt ten minste uw HTML-inhoud weergegeven.

Extensies of pakketten installeren

U kunt de functionaliteit van Visual Studio Code uitbreiden met behulp van de marketplace voor extensies. Houd er rekening mee dat deze extensies door de community ontwikkelde resources zijn en er vaak verschillende oplossingen zijn voor hetzelfde type functie. U kunt extensies afzonderlijk installeren in uw editor of meerdere tegelijk met behulp van de opdrachtregel.

Voor webontwikkeling is alles wat u nu nodig hebt, geopend in de browser. Met deze extensie kunt u de website snel openen in uw standaardbrowser, in plaats van de bestands-URL naar uw browser te kopiëren en plakken.

Voer de volgende stappen uit om deze extensie te installeren:

  1. Selecteer het pictogram Extensies op de verticale activiteitenbalk (linkerdeelvenster).

  2. Voer open in het zoekvak in en selecteer vervolgens het openen in de browserextensie die is gepubliceerd door TechER.

  3. Selecteer Installeren en Visual Studio Code installeert de extensie.

    Schermopname van de zijbalk van de Visual Studio Code-extensie met de woorden 'openen in' in het zoekveld en een lijst met overeenkomende extensies.

  4. Ga terug naar Explorer door op het bovenste pictogram in de activiteitenbalk te klikken of gebruik Control+Shift-E in Windows of Command+Shift-E in macOS.

Goed gedaan! Het installeren en instellen duurt wat extra tijd, maar u hoeft maar één keer te installeren en in te stellen. U bent nu klaar om een website te maken.