terug naar lessenoverzicht

Introductie HTML CSS JS

In deze zelfstudie serie:
checkmark simple
Wat is HTML, CSS & Javascript?
checkmark simple
Chrome Dev Tools
checkmark simple
Visual Studio Code
checkmark simple
Documentatie
checkmark simple
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

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

*Er zijn geen links bij deze video reeks.

Project files

icon: 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

logo - discord

#code-cafe

200+ leden