Wil je (meer over) front-end coderen leren? Dan moet je op een gegeven moment wel keuzes maken, zoals het gebied waar je je in wilt verdiepen. In dit artikel maken de young professional front-enders van Competa IT je wegwijs voor als je begint met front-end development.

de basis moet aanwezig zijn

Voordat je ‘écht’ begint met front-end development, moeten je basiskennis en -skills op orde zijn. Met de basis bedoelen we HTML, CSS, SCSS (Sass), (basis) Javascript en minifiers. HTML is de basis, het skelet, van alle websites. Binnen HTML dien je bijvoorbeeld te weten welke elementen er zijn, wat je ermee kunt en wanneer je deze elementen toepast.

Daarnaast moet je ook wat weten over de opmaak (CSS), zodat je lettertypes, kleuren, opvulling, marges en stijlen op de juiste manier kunt toepassen. Daarbij is het ook goed als je hebt gewerkt met ‘pre-processors’, zoals SCSS (ook wel bekend als Sass). Hiermee kun je efficiënter werken in stylesheets. Een voorbeeld hiervan is een standaard lettertype voor alle footerteksten. Deze sla je in Sass op in een variabele. In de stylesheet kun je deze dan voor alle footerelemementen instellen. En pas je de variabele aan, dan worden alle footer-elementen automatisch bijgewerkt. Naast Sass zijn er ook andere opties, maar Sass is een gangbare in developersland.

JavaScript-kennis is ook een must, maar niet het eerste waar je je in moet verdiepen. Javascript wordt gebruikt om HTML interactief te maken, zodat de website of de applicatie reageert op gebruikersgedrag. Minifiers, zoals Gulp.js, Grunt en WebPack maken je code compact. Ze comprimeren bestanden doordat ze je code in één bundel kunnen plaatsen. Dit is fijn voor browsers. Onnodige tekens worden namelijk uit de broncode van geïnterpreteerde programmeertalen gehaald, waardoor browsers een minder groot bestand hoeven te lezen.

what’s next?

Zoals je hierboven hebt kunnen lezen: het is niet een kwestie van een framework kiezen en jezelf daarin gaan verdiepen. Zou mooi zijn als we zo zouden kunnen beginnen met programmeren :-). Je moet een mooie website eerst kunnen ontleden voordat je zelf kunt coderen. Je moet het onderscheid en de samenhang tussen HTML en CSS begrijpen en kunnen ‘lezen’. Ook moet je zelf een “index.html” en “style.css” kunnen maken, bundelen in een map en laten zien. Basiskennis van JavaScript is daarbij ook vereist. Als je dit eenmaal onder de knie hebt komt de volgende stap: frameworks.

Angular, React en/of Vue.js

Op de front-end heb je verschillende frameworks, waarvan Angular, React en Vue.js het meest bekend zijn op het moment. Van de drie genoemde frameworks genieten vooral Angular en React veel populariteit. In zowel Angular als React schrijf je met Javascript (je schrijft in feite Javascript-functies). Echter, in beide frameworks kun je ook Typescript gebruiken. Typescript voegt typing en objectgeoriënteerd programmeren toe aan de taal. Je kunt Typescript zien als een superset van Javascript die meer features aanbiedt.

Meer weten over Angular en/of React? Houd dan de komende tijd TechGirl.nl in de gaten! De Angular en React developers van Competa IT zullen in hun volgende bijdrage dieper ingaan op deze twee frameworks.