Front-end webontwikkeling - waar te beginnen?

Als je overweegt om te beginnen met het leren van webontwikkeling, dan is de frontend een goede plek om te beginnen, zelfs van backend-ontwikkelaars wordt verwacht dat ze enige kennis van frontend hebben en begrijpen hoe wat ze produceren in de frontend zal worden gebruikt.

Er is veel informatie over het leren van frontends, maar soms lijkt het allemaal zo ingewikkeld en onduidelijk waar te beginnen.

In dit artikel zullen we proberen wat advies te geven over waar je je reis kunt beginnen.

De gouden driehoek van webontwikkeling

Uw webbrowser, welke u ook gebruikt, bijvoorbeeld Chrome, Firefox of Edge, is gewoon een toepassing zoals elke andere. Het ontvangt bestanden in bepaalde talen om te vertellen wat het moet weergeven.

Bij het verbinden met het web ontvangen we deze bestanden van een adres en tonen ze in onze browser, maar we kunnen deze bestanden ook zelf aanmaken en in onze browser weergeven.

Onze browser begrijpt drie talen bij het weergeven van inhoud. (Als we verbinding maken met internet, ontvangen we ook andere soorten informatie of metagegevens, maar dit is niet nodig om te beginnen)

Deze talen zijn HTML, CSS en Javascript (JS).

HTML

Html-bestanden (Hyper Text Markup Language) vormen de basis van wat de browser weergeeft, een html-bestand is nodig om de browser iets te laten weergeven.

Html beschrijft de inhoud van de pagina en de instructies voor het opmaken van de weergegeven inhoud.

Het kan ook links naar andere bestanden en verwijzingen naar instructies in die bestanden bevatten, zoals onze CSS- en JS-bestanden.

CSS

CSS (Cascading style sheets) geeft stijl aan onze pagina's en er wordt naar verwezen in onze html-bestanden. Stijlen kunnen rechtstreeks in onze html-bestanden worden geschreven, ofwel rechtstreeks in de sectie-instructies op onze pagina of onder de eigen stijlsectie, maar dit wordt normaal gesproken niet gedaan in moderne webontwikkeling, omdat het onze html moeilijk leesbaar en beheersbaar kan maken. Probeer je voor te stellen dat één ding één taak doet.

JS

JS ( Javascript ) biedt functionaliteit aan onze pagina's. Het stelt ons in staat om onze html-pagina's te manipuleren en is verantwoordelijk voor het interactief maken van onze pagina's. Net als CSS kan dit rechtstreeks in onze html-pagina's worden geschreven, maar wordt dit normaal niet gedaan.

Interactiviteit op onze pagina's werkt op basis van het luisteren naar gebeurtenissen, dit kan zijn wanneer er op iets wordt geklikt of wanneer iets wordt geladen of erover wordt gehangen en vele andere dingen.

In moderne Html en Css zijn sommige van deze gebeurtenissen al toegankelijk op bepaalde elementen, zoals onClick of in css , hover events. Deze gebeurtenissen gebruiken nog steeds js op de achtergrond.

JS kan het meest intimiderende onderdeel zijn om te leren voor nieuwe ontwikkelaars, omdat het de basis van de programmeersyntaxis moet leren.

Waar te beginnen?

Het is belangrijk om te vinden wat het beste voor u werkt, er zijn schriftelijke documenten, video's en interactieve cursussen. Ik zou aanraden iets interactiefs te proberen, omdat de kennis beter wordt onthouden door op deze manier te werken.

Er zijn veel eenvoudige you tube-cursussen die gratis kunnen worden gevolgd, ik raad aan om altijd samen met deze video's te coderen.

Hier zijn enkele basisvideo's die een goede basis kunnen bieden, maar er zijn veel verschillende beschikbaar.

Free Codecamp

Programming with Mosh

Ik zou ook de gratis cursussen aanbevelen op Codeademy.com

En de gratis lessen op W3Schools.com

Als je een meer complete en gestructureerde optie wilt, raad ik je aan te investeren in een cursus op Udemy.com

Ik zou een cursus webontwikkeling door Maximilian Schwartzmuller aanbevelen

Sommige mensen zouden aanraden om eerst Html te leren, dan CSS en dan JS, persoonlijk zou ik willen voorstellen dat je kleine stukjes van ze allemaal leert voordat je dieper ingaat op dingen. Stel het leren van JS niet uit, het is een zeer belangrijk onderdeel en noodzakelijk voor elke beginnende front-end ontwikkelaar.

Welke hulpmiddelen te gebruiken?

In theorie heb je alleen een browser en een teksteditor nodig, maar ik zou aanraden om een programma zoals Visual Studio Code te gebruiken, dat helpt bij de basis.

Er zijn veel meer handige hulpmiddelen naarmate je verder in je reis komt, maar je hebt deze pas nodig in meer gevorderde stadia.

Volgende stappen

Naarmate je verder komt op je reis, wil je meer leren over geavanceerdere onderwerpen zoals front-end frameworks. De drie meest populaire hiervan zijn Angular, React en VUE. Ze kunnen verschillende, voor- en nadelen hebben, en verschillende leercurves. Dit zijn dingen die je tegenkomt als je dieper in de front-end gaat. Als je wilt beginnen met een frontend-framework dat een gemakkelijkere leercurve heeft, raad ik je aan te kijken naar SVELTE. Dit is een lichtgewicht front-end-framework dat aan populariteit wint en een goede plek kan zijn om te beginnen met begrijpen hen.

Andere dingen die je vooruitgang kunnen helpen, zijn het leren van Typescript en een CSS-preprocessor zoals SASS of SCSS. Typescript is een superset van Javascript , dit betekent dat het zich op Javascript uitbreidt met extra functionaliteit, en de CSS-preprocessors geven extra functionaliteit aan CSS. Al deze dingen moeten worden gecompileerd naar de JS of CSS voordat een browser ze kan lezen.

Conclusie

Begin met kleine stapjes, kijk eerst of frontend development iets voor jou is en ga dan door naar enkele van de bovengenoemde cursussen. Probeer ervoor te zorgen dat je altijd je eigen testprojecten maakt, zelfs als je een cursus volgt, op welk niveau je ook zit, het overbrengen van de kennis naar een echte applicatie helpt echt om dat leren vast te houden. Wees niet bang om lessen die je al hebt gevolgd opnieuw te bekijken, er valt veel te leren en je kunt niet verwachten dat je alles meteen zult onthouden.

Wanneer je klaar bent voor de volgende stap, neem dan contact met ons op bij BEE-Ideas, we kunnen je helpen om je carrièreverandering te realiseren.

Wellicht vind je dit ook interessant

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram