terug naar lessenoverzicht
Introductie
Front End Web development
Front End coderen bestaat voornamelijk uit HTML CSS & Javascript. Deze 3 talen worden in bijna alle websites & apps gebruikt. Facebook, Pinterest en andere grote bedrijven maken gebruik van deze 3 technieken. In deze opleiding leer je de basis van deze talen en ga je tussenopdrachten en een toffe portfolio website bouwen.
Wat is HTML, CSS & Javascript?
De presentatie laag
Front End (HTML, CSS & JS) is de presentatie laag van een website of app. Dit is het gedeelte dat de bezoeker ziet op het scherm. De logica wordt vaak bepaald in een applicatie laag waar talen als JAVA, C#, Python, C++ etc worden gebruikt. Daarnaast is er vaak ook een database laag waar de data wordt opgeslagen. Deze 3 lagen communiceren met elkaar. In deze opleiding gaan wij aan de slag met de presentatie laag.
De lagen van Front End Web development
De laag waar wij in gaan werken bestaat vervolgens in grote lijnen weer uit 3 verschillende lagen: HTML, CSS & Javascript.
HTML:
HTML staat voor Hyper Text Markup Language. Hierin wordt de content en de structuur van de website geplaatst. Waar komen tekst zoals headers en paragrafen en wat is de inhoud hiervan? Waar komen de afbeeldingen? etc.
CSS:
CSS staat voor Cascading Style Sheets. Hierin wordt de presentatie van de content bepaald. Welke kleur heeft de tekst, welke font size? Hoe breed wordt een blok en welke achtergrond kleur krijgt het?
Javascript:
Hierin wordt de logica en het gedrag bepaald. Buttons kunnen functies oproepen, input van een gebruiken kan verwerkt worden etc. Ook kunnen we vanuit Javascript communiceren met de applicatie laag van de website of app.
*Presentatie in de video reeks kan afwijken van de te downloaden pdf presentatie. (week indeling is verwijderd)
Chrome Dev Tools
Chrome Dev Tools
Chrome Dev Tools is een toolbox die is ingebouwd in de Google Chrome browser. Hierin kun je snel problemen opsporen en code testen. Via de handige links kun je meer informatie op doen over deze tool.
Visual Studio Code
Visual Studio Code
Om HTML CSS en JS te kunnen schrijven heb je een editor nodig. Dit kan een simpele editor zijn als Notepad, maar een echte code editor die de codeertalen herkent suggesties doet en de code controleert is natuurlijk veel makkelijker en zal het coderen versnellen! Wij gebruiken de meest populaire code editor voor front end development: Visual Studio Code. Via de handige links kun je deze downloaden voor he besturingssysteem van jouw laptop/desktop.
Documentatie
Documentatie
Als developer kun je niet alle code uit je hoofd weten. Daarom is het belangrijk goed te kunnen zoeken online en bekend te zijn met de meest handige code bibliotheken. In deze cursus gaan we veel gebruik maken van online documentatie en zal je soms ook zelf iets moeten opzoeken. Developers maken veel gebruik van W3 Schools en Mozilla Docs. De link naar deze websites vind je onder het tabblad handige links
Vind jij programmeren leuk en wil jij een baan in de IT?
Bekijk dan de traineeships van ons ander bedrijf Qien!
*Er zijn geen links bij deze video reeks.
Project files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.
Stel vragen en help medestudenten
Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.
Het kanaal voor deze cursus op onze Discord:
portfolio-cursus
#code-cafe
200+ leden