Jouw toolkit voor coderen.
Om websites te bouwen heb je altijd twee programma’s nodig:
- Een code editor. Wij gebruiken Visual Studio Code
- Een FTP programma. Daarmee zet je je website online. Wij gebruiken FileZilla
Visual Studio Code installeren
1 Om een webpagina te maken heb je een code editor nodig. Hiermee schrijf je onder andere HTML en CSS.
Sinds dit jaar werken we bij het Ma met Visual Studio Code. Vorig jaar werkten we nog met Brackets. Maar dat programma is overgenomen door Visual Studio Code.
Download hier Visual Studio Code en installeer het programma. Zorg ervoor dat het programma in je apps map zit (als je een Mac hebt). Na installatie kun je de app in je appmap slepen in Finder.
Wat is Visual Studio Code?
Visual Studio Code is een code editor waarmee je programmeer talen kunt schrijven. Je kunt dat niet met bijvoorbeeld Ms Word schrijven. Er zijn heel veel code editors. Werk je liever met Atom, Sublime Text of Notepad++, dan mag dat natuurlijk ook.
FTP programma FileZilla installeren
2 Om iets online te zetten heb je het programma FileZilla nodig. Bekijk de instructievideo voor de installatie instructie hiernaast.
FileZilla is een FTP programma.
FTP staat voor File Transfer Protocol. Het is niet meer dan een doorgeefluik tussen jouw computer en de server waar je je website op zet.
Download FileZilla op https://filezilla-project.org/ en installeer FileZilla. Zorg ervoor dat het programma in je apps map zit (als je een Mac hebt). Na installatie kun je de app in je appmap slepen in Finder.
Inloggen op jouw server bij Ma doe je op https://panel.ma-cloud.nl/. Hier kun je jouw eigen hosting link vinden die je hebt bij het Mediacollege. Login met je studentnummer en Ma-wachtwoord.
Iets online zetten op de Ma-server
3 Nu ga je iets online op de ma-cloud zetten. Dat heet uploaden. Bekijk het video de voor de instructie.
Tip 1: gebruik alleen kleine letters
Maak het jezelf gemakkelijk.
In namen van bestanden en mappen gebruik je
- nooit spaties, punten, comma’s of tekens als &, #, %, *, @, !, etc…
- en liever geen hoofdletters.
Tip 2: ma-cloud link
Jouw website staat straks hier:
https://studentnummer.hosts1.ma-cloud.nl/
of hier
https://studentnummer.hosts2.ma-cloud.nl/
Check dit in jouw controlpanel van ma-cloud: panel.ma-cloud.nl
Opdracht: Eerste pagina online zetten op jouw ma-cloud
Instructie video: Jouw eerste html pagina maken en online zetten op ma-cloud.nl (04,37)
- Open het programma Visual Studio Code
- Klik links boven in het menu op Bestand > Nieuw of File > New
of druk op je keyboard op Command N (Macbook) of Ctrl N (Windows pc) - Schrijf hier je naam en studentnummer
- Sla dit bestand op in de map Ondrive > Mediacollege > Module 1 > WEB > eerste-pagina-online en noem bestand het index.html
- Zet dit bestand op jouw ma-cloud server met FileZilla
- Controleer of jouw 1ste html pagina online staat op:
https://studentnummer.hosts1.ma-cloud.nl/
of
https://studentnummer.hosts2.ma-cloud.nl/
Inleveren in de opdracht die klaarstaat in Teams
Weet je nog niet hoe je een webpagina moet inleveren? Check dan dit filmpje: Iets online zetten in ma-cloud.nl (4.44 min.)