Vejledning 02. Installer Visual Studio Community og lav et nyt website

Indledning

Visual Studio er en super professionel, meget brugt og en kæmpe editor, som du kan bruge til at skrive stort set hvilket som helst kodesprog, du måtte få lyst til. Fra HTML, CSS og JavaScript til C#, Java, Python, alt muligt. Visual Studio ejes af Microsoft. Programmet er meget dyrt, men heldigvis findes der en gratis udgave, som er fuld tilstrækkelig til vores brug.

Installation

  • Gå ind på https://visualstudio.microsoft.com/vs/community/ og download programmet derfra
  • I starten af installationen af VSC bliver du spurgt om, hvad du vil installere. Du skal som minimum installere
    • ASP.NET and web development (1)
    • MEGET VIGTIGT VING .NET Framework project and item templates (2) og Additional project templates (previous version) (3). Instruktionen fortsættes efter billedet …
  • Game development with Unity (4)
  • Data storage and processing (5)
  • Klik til sidst på knappen Install (6)
  • Bemærk: Hvis du vil bruge VSC til andet, f.eks. Python eller Node.js, så er du velkommen til også at installere disse muligheder. Bemærk at man endda kan koble en database på
  • Du skal regne med, at det tager lidt tid at installere programmet, min. 15 minutter
  • Når du kommer til billedet her, så klik bare Skip for now (1)

Frontend kodning til hjemmesider: HTML, CSS og JavaScript

  • Åbn Visual Studio og vælg Continue without code (1)
  • I Visual Studio vælg File (1) > Open (2) > Web Site … (3)
  • I det nye vindue vælg Local IIS (1). Klik på IIS Express Sites (2). Klik så på Create New Site (3). Giv dit nye site et navn f.eks. Test, WebSite2 eller hvad du vil (4). Klik til sidst på knappen Open nederst i vinduet Open Web Site (ikke vist).
  • Du får nu et næsten blankt vindue med panelet Solution Explorer til højre i billedet (1). Her vises filstrukturen på dit site

Nu har vi sitemappen på plads.

  • Hvis du højreklikker på Test (1), så får du en ret så bred vifte af muligheder. Start med at klikke på Add (2). For at lave din første HTML side, vælg Add New Item … (3). Bemærk at du kan lave mapper inde i sitet med New Folder (4). Vi får brug for mapper på et tidspunkt
  • Hvis din installation er rigtig, så vil du få følgende muligheder. Vælg HTML page (1), kald din fil noget fornuft f.eks. index.html (2) og til sidst på Add (3).
  • Nu får du en skabelon. Sæt lidt kode ind for at teste, f.eks. <h1>Hej verden</h1> inde i <body> tagget (1). Klik til sidst på den grønne pil øverst (2) …
  • … så ser du resultatet i en browser