Hoe word ik een front-end ontwikkelaar (editie 2020)?

Hoe zou je willen werken bij toonaangevende bedrijven terwijl je impact maakt door een prachtige front-end ontwikkeling?


Er is veel vraag naar uitzonderlijke artiesten van het moderne internet en deze gids laat je zien hoe je aan de slag kunt.

En aangezien mensen die in de software werken tot de meest beloonde personen behoren, is het de moeite waard om te overwegen deze nieuwe vaardigheid op te pakken. Je weet maar nooit, het kan uiteindelijk een carrière voor je worden.

Het eerste deel van deze gids is gewijd aan het beantwoorden van prangende vragen over front-end ontwikkeling. Als je op de hoogte bent van verantwoordelijkheden, salarissen en andere aspecten van het zijn van een front-end ontwikkelaar, dan kun je het 2e deel overslaan. Het tweede deel van deze handleiding is gewijd aan bronnen, tutorials en tips.

Wat is front-end ontwikkeling?

Front-end webontwikkeling is de praktijk van het gebruik van HTML, CSS en JavaScript om unieke web-apps te creëren. Apps zoals websites, mobiele websites, maar ook mobiele apps en Progressive Web Apps.

Je kunt het ook zo zien: elke website die je bekijkt, inclusief deze, is op de een of andere manier gebouwd door een front-end ontwikkelaar. In ieder geval aan de kant van de klant.

Hoe nieuwe CSS alles verandert over grafisch ontwerp op het webluidsprekersdeckWat eens uitgebreide tools en frameworks vereiste, kan nu worden gedaan met native specificaties.

Hoewel front-end een van de meest toegankelijke paden is bij het ontwikkelen van websites, kan het ook een van de meest uitdagende zijn.

De technologie voor het maken van websites verandert voortdurend, wat betekent dat ontwikkelaars hun vaardigheden regelmatig moeten aanpassen aan de nieuwste praktijken. Het kan vermoeiend zijn voor een beginner, maar wordt beter na een jaar of twee van solide ontwikkelingspraktijken.

Kunt u gratis front-end ontwikkeling leren??

Dat kan absoluut!

Het wordt een stuk eenvoudiger om webontwikkeling te leren, vooral dankzij de enorme toestroom van nieuwe bronnen, tutorials en open-sourceprojecten.

Projecten zoals freeCodeCamp helpen miljoenen mensen om code te schrijven voor hun eerste programma’s. En de freeCodeCamp Blog staat vol spannende artikelen, niet alleen over front-end, maar ook over andere aspecten van webontwikkeling. Het is de moeite waard om een ​​bladwijzer te maken!

code syntax voorbeeldZiet er ingewikkeld uit? Het wordt gemakkelijker met oefenen!

Hoewel het uitgangspunt van deze gids is om u te helpen gratis te leren, kunnen we de voordelen van betaalde cursussen niet over het hoofd zien.

Er zijn genoeg startups die zich richten op het vastberaden publiek, en we zullen een aantal geweldige cursusplatforms benadrukken die je aan het einde van de wedstrijd zelfs een certificaat zullen geven.

Wat is het gemiddelde salaris voor een front-end ontwikkelaar?

Een front-end ontwikkelaar met eerdere ervaring kan meer verwachten dan mee naar huis te nemen $ 100.000 per jaar als u in de Verenigde Staten woont.

Dat is geen slecht nummer!

Juniors-ontwikkelaars kunnen verwachten dat ze overal mee naar huis kunnen nemen $ 60.000 en meer.

Gemiddelde Front End Developer salarissen in de Verenigde Staten

En de salarissen in Europa lijken ook redelijk te zijn; Duitsland heeft gemiddeld $ 50.000 per jaar.

Vermeldenswaard is dat de populariteit van werken op afstand is de afgelopen jaren explosief gestegen, wat betekent dat ontwikkelaars hun beloning over de hele linie willen afstemmen op internationale normen. Dit is meer de reden om te overwegen om front-end developer te worden!

Een baan vinden als front-end developer?

Technisch gezien zou een baan het laatste moeten zijn om over te praten. Eerst moet je de vaardigheden vergaren en dan nadenken over mogelijke kansen. Maar aangezien dit bericht als gids is gestructureerd, kunt u altijd terugkomen en dit gedeelte ter referentie raadplegen.

Remote Jobs Developer Design Schrijven Klantenservice MeerBanen op afstand groeien in een ongekend tempo. Wie houdt er immers niet van om thuis of beter nog rechtstreeks vanaf het strand te werken?

Hier is een lijst met de meest populaire vacaturesites voor front-end ontwikkelaars:

Dit is een ietwat beknopte lijst met sites die aanbevelingen geven voor het vinden van je volgende front-end job. Andere alternatieven die je hebt, zijn om aan een persoonlijk project te werken in de hoop het winstgevend te maken of je tijd te besteden aan freelance-optredens.

Bronnen: waar te beginnen.

De volgende bronnen gaan allemaal over aan de slag. We hanteren in dit opzicht een redelijk lineaire benadering. En om de simpele reden dat er enorm veel middelen zijn.

Om u snel op weg te helpen, ligt onze focus op platforms en front-end tools die in de moderne workflow verweven zijn. Als gevolg hiervan kunt u de basissyntaxis van de codering leren, terwijl u de tools begrijpt die de workflow van de moderne ontwikkelaar bepalen.

Het wordt ten zeerste aanbevolen dat u de tijd neemt met deze bronnen, omdat deze u voorbereiden op cursussen en zelfstudies in het tweede deel van deze handleiding.

Codecademy

Codecademy

Als je zelfs maar een paar minuten besteedt aan het opzoeken van bronnen om te leren coderen, dan is Codecademy ongetwijfeld een van je eerste hits. Dit leer-om-te-coderen platform is bekend en heeft gedurende zeven jaar meer dan 100 miljoen mensen bediend.

Destijds was Codecademy behoorlijk revolutionair met zijn dynamische en interactieve coderingsinterface. En hoewel velen hetzelfde pad volgden, heeft Codecademy een consistent trackrecord behaald.

Tegenwoordig kunt u na voltooiing een certificaat krijgen en velen hebben het genoemde certificaat gebruikt om een ​​baan te vinden in een opstarten op het hoogste niveau; als een junior ontwikkelaar, niet minder.

Al die tijd is er het argument dat Codecademy niet genoeg is.

Vanuit het oogpunt van een ervaren ontwikkelaar – zeker, misschien is dit platform te simpel. Maar als u alleen leert over front-end ontwikkeling, dan is er niets bevredigender dan stapsgewijze instructies te volgen met realtime resultaten.

Codecademy biedt lessen aan over HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL en Java.

Leer CSS-layout

Leer CSS-layout

Als front-end ontwikkelaar ga je redelijk veel tijd besteden aan het werken met de layout. De lay-out is het canvas waarop u een website structureert. Deze blogtekst wordt in een rij geplaatst, die deel uitmaakt van een grotere container.

En dat geldt voor alle ontwerpen van webpagina’s. Met Learn CSS Layout kunt u een fundamenteel begrip krijgen van hoe containers en rijen werken, en ook hoe u inhoud precies kunt positioneren waar u het wilt.

Extra tools die u kunt verkennen zijn Flexbox Froggy voor Flexbox grondbeginselen en Grid Garden voor Raster basisprincipes.

De lay-out is een redelijk belangrijk onderwerp om te begrijpen, dus besteed een paar uur diep in je lay-outervaring. De beste manier om te leren is door te oefenen.

Bootstrap

Blogsjabloon · Bootstrap

Als je eenmaal begrijpt hoe lay-outs werken, is het tijd om wat concrete experimenten te doen. Natuurlijk kun je doorgaan en proberen een aangepaste gebruikersinterface te ontwikkelen als je eerste project, maar dat kan je misschien afschrikken van meer dan je aanmoedigen om door te gaan.

U moet dus een paar frameworks leren. Een framework is een eenvoudige manier om aan de slag te gaan met elke vorm van webontwikkeling. U krijgt de tools en de documentatie om op dag één te beginnen met het bouwen van interactieve websites. En een van de beste die het ooit heeft gedaan, is Bootstrap.

bootstrap draadframe kitBouw responsieve, mobiel-eerste projecten op internet met ‘s werelds populairste front-end componentenbibliotheek. Bootstrap is een open-source toolkit voor ontwikkeling met HTML, CSS en JS.

Bootstrap wordt veel gebruikt op het hele internet en is zonder twijfel een van de meest populaire front-end frameworks ter wereld.

Heck, een goed percentage van de sites die u dagelijks bezoekt, gebruikt een aantal Bootstrap-functionaliteit.

Een van de fantastische dingen van Bootstrap is hoe snel je kunt beginnen. De documentatiepagina’s staan ​​vol met voorbeelden en use cases. En het beste van alles is dat het Bootstraps-lay-outsysteem is ontworpen met het oog op responsief ontwerp. Uw op Bootstrap gebaseerde sites zijn dus automatisch mobielvriendelijk.

En als je het leuk vindt wat Bootstrap te bieden heeft, zijn hier extra bronnen over populaire front-end frameworks:

  • 10 beste JavaScript-frameworks die u moet kennen
  • 10 beste CSS-frameworks voor front-end ontwikkelaars

Front-end checklist

De Front End Checklist

Ondanks de technologie die u gebruikt om uw websites te bouwen, moet u zich toch aan bepaalde regels en voorschriften houden. Natuurlijk kan men ervoor kiezen dergelijke vereisten te negeren, maar ten koste van de gebruikerservaring en digitale compatibiliteit.

Front-end checklist is een uitstekende tool waarmee u de URL van uw website kunt opgeven en het platform uw site controleert op praktische tips voor front-end ontwikkeling. Dit omvat het controleren of u uw afbeeldingen hebt geoptimaliseerd of dat u de beste SEO-praktijken volgt.

U moet deze app proberen te gebruiken zolang u nodig heeft om te begrijpen wat de moderne vereisten zijn voor professionele websites en apps. Bovendien is de niet-opdringerige en soepele gebruikersinterface een absoluut genot om mee te werken.

Vue.js

The Vue js

Vue.js is een geweldig voorbeeld dat laat zien hoe een klein idee / concept kan uitgroeien tot een van de meest erkende dingen ter wereld. Inderdaad, Vue.js heeft de front-end community door een storm getroffen.

Dit vooruitstrevende framework helpt ontwikkelaars geweldige gebruikersinterfaces te bouwen met HTML en JavaScript.

Het raamwerk wordt volledig ondersteund door de gemeenschap – zowel op financieel als op ontwikkelingsgebied.

Het is het perfecte voorbeeld van hoe open source samen kan komen en geweldige dingen kan laten gebeuren. En als front-end developer zou je er meer over moeten studeren open source en waarom het belangrijk is.

Hier zijn enkele zeer aan te bevelen reads op Vue.js:

En last but not least, bekijk de verschillende projecten gebouwd met Vue.js op de Vue.js Showcase website.

Front-End Fundamentals

FRONT-END FUNDAMENTALEN

Alles wat we tot nu toe hebben bekeken, was grotendeels gratis en open source. Het enige dat je nodig hebt, is jezelf vastgrijpen Sublieme tekst, en je kunt goed op weg zijn naar front-end experimenten, en dat zou je absoluut moeten zijn! Het lezen van tutorials en frameworkdocumentatie is slechts het halve werk.

Het echte leren gebeurt in uw teksteditor en de browser. Het enige nadeel van deze aanpak is dat deze niet helemaal systematisch is. U werkt in de gratis-voor-iedereen-modus en de resultaten kunnen variëren afhankelijk van uw vermogen om uzelf te disciplineren.

Tenzij u besluit te investeren en door te investeren, bedoel ik een symbolisch bedrag uit te geven om een ​​van de front-end boeken te kopen van Een boek apart. Deze jongens zijn enkele van de beste in de branche en ervaren front-end ontwikkelaars bevelen hun boeken herhaaldelijk aan.

Het gedeelte over de basisbeginselen bevat een boek over SVG, CSS, HTML, JavaScript en Sass, wat de perfecte startplaats is voor moderne front-end workflows.

GitHub

github

GitHub is uw digitale kantoor voor alles wat met coderen en ontwikkelen te maken heeft. Het is het grootste open-sourceplatform ter wereld, de thuisbasis van de meeste van de populairste frameworks en tools ter wereld.

Met GitHub kunt u uw projecten hosten en andere mensen verwelkomen om hun bijdragen in te dienen. En u kunt zelf bijdragen leveren aan andere projecten.

Je kunt GitHub ook verkennen en alles wat het te bieden heeft. GitHub is bijvoorbeeld de thuisbasis van de beroemde Awesome-lijsten, die enorme verzamelingen tutorials, bronnen, tools en andere dingen zijn voor specifieke frameworks en technologieën.

Bijv., Geweldige front-end lijst dat omvat up-to-date informatie over de laatste dingen die u moet weten over front-end en waar het naartoe gaat.

Stack Overflow

stapel overloop logo

Stack Overflow heeft een beruchte reputatie als de strengste Q&Een programmeersite in de wereld. En het is echt zo.

De gebruikers van Stack Overflow nemen geen lichtzinnige vragen die niet zijn onderzocht of niet goed zijn geanalyseerd. En hoewel dit misschien onaangenaam aanvoelt, helpt het om een ​​sterk gevoel van doelgerichtheid te creëren.

U ziet dat wanneer een gebruiker een antwoord op een vraag indient, andere gebruikers naar voren kunnen komen en dat antwoord kunnen stemmen. Uiteindelijk krijg je verschillende ‘geverifieerde’ antwoorden die de vragen van de gebruikers grondig beantwoorden. Hierdoor blijft de hiërarchie van de site duidelijk en consistent.

Als beginnende front-end ontwikkelaar wil je Stack Overflow gebruiken om bepaalde onderwerpen te begrijpen, maar ook om vragen te stellen als dat nodig is. Voor het merendeel van het beginnersmateriaal zou je binnen enkele seconden beknopte antwoorden moeten kunnen vinden.

Tutorials & Cursussen: grip krijgen op het ecosysteem.

Het eerste gedeelte was volledig gewijd aan bronnen en platforms waarmee u aan de slag kunt. U moet een redelijke hoeveelheid tijd besteden aan elke bron die we hebben vermeld, zodat u een idee krijgt van wat u kunt verwachten van front-end ontwikkeling.

Als je dat allemaal hebt gedaan, kun je je aandacht richten op tutorials en cursussen. Dit zijn meer strikt georganiseerde bronnen met een sterke nadruk op leren.

Het front-end spectrumFront-end ontwikkeling is een verzameling tools, frameworks, bibliotheken, testsoftware en nog veel meer. Laat u echter niet afschrikken door de enorme omvang ervan!

Het is vermeldenswaard dat sommige van de volgende cursussen niet gratis beschikbaar zijn. We verzekeren u echter dat de volgende aanbevelingen absoluut top zijn.

Bovendien brengen platforms zoals Frontend Masters u op de hoogte met alle technologieën die worden gebruikt in ‘s werelds meest succesvolle startups.

Het doel van dit bericht is niet om front-end ontwikkeling als hobby te promoten, maar om je tastbare middelen te geven zodat je op weg bent om een ​​carrière op te bouwen uit al je leren.

MDN Web Docs

MDN Web Docs

MDN (Mozilla Developer Network) gaat op de een of andere manier kennismaken. Dit webdocumentatieplatform is volledig gewijd aan het promoten van hoe het web werkt. Hier kunt u leren over ontwikkelaarstools, webtechnologieën en webontwikkeling zelf.

Wanneer u naar specifieke informatie zoekt op CSS of HTML, is het vaak MDN dat als eerste resultaat naar voren komt op Google en andere zoekmachines. De handleidingen, specificaties en algemene inzichten zijn gestructureerd op een manier die logisch is voor front-end ontwikkelaars.

edX Front-End cursussen

Front End Web Development edX

Zoals eerder in deze gids vermeld, is het volgen van een strikt curriculum een ​​veel lineaire manier om te leren en aan te passen. En om je op weg te helpen met de cursussen, moet je kijken wat edX te bieden heeft. U kunt niet alleen certificaten behalen na voltooiing, maar u kunt ook leren in uw favoriete tempo.

edX-cursussen zijn grondig gestructureerd, met een duidelijke nadruk op het helpen van studenten om de basisprincipes van elk cursusonderwerp te begrijpen. Op dit moment kunt u technologieën leren zoals JavaScript, HTML5, CSS3 en meer.

Als u het volledige front-end-certificaat wilt behalen, moet u een bescheiden investering van $ 500 doen, maar dit geeft u ook directe toegang tot de cursusinstructeurs en meer. Talloze bedrijven hebben edX gebruikt om hun werknemers in te schrijven voor dit specifieke programma.

Frontend Masters

Frontend Masters

Frontend Masters lijkt op een bootcamp-ervaring. De cursussen die u op dit platform kunt vinden, zijn uiterst grondig, met de nadruk op inhoud met een lange vorm en projectgericht leren.

Hier kun je meer te weten komen over technologieën zoals React, Vue, Angular, Node.js en nog veel meer. De productiekwaliteit is van extreem hoge kwaliteit, zodat u kunt genieten van een ervaring die vergelijkbaar is met die in een echte Bootcamp-cursus.

Als geregistreerde gebruiker kunt u uw voortgang volgen op de Leren bladzijde. Deze pagina houdt uw leervoortgang bij, met percentages voor elke technologie afzonderlijk, maar ook percentages voor hele stapels. Het is een leuke manier om gemotiveerd te blijven.

Last but not least zal het hebben van een Frontend Masters-cursus op je cv niet onopgemerkt blijven door je werkgever.

Egghead

Egghead

Egghead lijkt erg op het hierboven genoemde platform, maar valt op met stevigere en bekrompen lessen. De les ‘Dynamische lijsten bouwen in flutter met ListViews’ duurt bijvoorbeeld maar 2 minuten, maar geeft je genoeg leermateriaal om het concept echt te begrijpen.

Egghead biedt tutorials en cursussen over frameworks, bibliotheken, talen, tools en platforms. Wil je meer weten over mobiele ontwikkeling? Geen probleem, Egghead heeft cursusmateriaal voor iOS, Android en andere platforms.

De jaarlijkse prijs is een bescheiden $ 250, maar dit geeft je toegang tot elke cursus en tutorial op de site. Je kunt elke les ook bespreken met andere communityleden. Zeker de investering waard!

CSS-trucs

CSS-trucs

Chris Coyier is een absolute legende in de CSS-gemeenschap. Niet alleen heeft hij CSS-Tricks al meer dan een decennium bijgehouden, maar hij is ook de mede-oprichter van CodePen – een populair platform voor het delen van code voor webontwikkelaars.

Een ding waar je op kunt rekenen over CSS-Tricks is dat het consistent wordt bijgewerkt en verhalen worden gepubliceerd op basis van actuele trending onderwerpen en technologieën. Als gevolg hiervan kunt u uw vaardigheden snel verbeteren met behulp van de tutorials van veel van de auteurs van de site.

Kortom, het is een handige site om uw bladwijzers in te bewaren en één keer per dag te controleren. Je zult enorme waarde halen uit de tutorials zelf, maar ook uit de aanbevelingen die daarbij komen.

Scotch

Training voor webontwikkeling van de bovenste plank - Scotch io

Scotch is zowel een leermiddel als een plaats voor de laatste gebeurtenissen in webontwikkeling. De site bestaat al sinds 2014 – de site heeft een enorme aanhang verzameld naast duizenden gratis tutorials over webontwikkeling.

Schotse auteurs richten zich sterk op technologieën zoals Vue, React, Laravel, Angular, JavaScript, Node.js en dergelijke. En denk niet dat dit ook een paar knock-off tutorials zijn.

Voor het grootste deel ga je echte en tastbare apps bouwen. Bijv. Wil je leren hoe je een Twitter-kloon Vue en Adonis kunt bouwen? Geen probleem, schrijf je gewoon in voor de gratis cursus en je bent klaar.

Geweldige site en kan het niet genoeg aanbevelen voor nieuwe en bestaande front-end ontwikkelaars!

Tips: als er geen strijd is, is er geen vooruitgang.

Aangezien je zo ver bent gekomen, kun je net zo goed jezelf verwennen met enkele van de volgende tips. Hoewel front-end een lucratieve carrièrekeuze is, gaat het om een ​​vrij steile leercurve en nogal wat hoofdpijn terwijl je je hoofd rond de huidige tijdlijn wikkelt.

Niettemin, voor het niveau van kansen dat u kunt aantrekken, is het de zware strijd zeker waard!

Leer binnen redelijke grenzen.

Waarom leer je programmeren? Wil je een betere baan krijgen? Wil je creatieve websites bouwen? Zoek je reden uit, want het komt goed van pas. Het zal van pas komen in die dagen, zelfs weken, wanneer je je hoofd tegen een muur slaat – je afvragend of dit alles de moeite waard is.

Vind je stam.

Je zult op zijn minst een paar connecties willen maken met gelijkgestemde individuen, en indien mogelijk zelfs mentoren. Toen ik op mijn oude school een Pascal-boek ging lenen van een CS-leraar, was hij supervriendelijk en stond hij open voor het idee om me te helpen met eventuele problemen. Overweeg een vergelijkbare route, door een lokale gemeenschap te vinden of door andere ontwikkelaars in online gemeenschappen te vinden. Het is veel gemakkelijker om te leren wanneer iemand met een vinger wijst naar waar je moet kijken.

Vermijd alles te leren.

Leg niet de last van alles te moeten weten op jezelf. Als het op front-end aankomt, is het beginnen met HTML5 en CSS3 meer dan genoeg. JavaScript is als kers op de taart, dus wees voorzichtig met hoeveel glazuur je krijgt, want je zou jezelf kunnen opzwellen! Nadat u vertrouwd bent met de basis, kunt u nieuwe gebieden, onderwerpen en kaders verkennen. Kleine en compacte leerbeten zijn hier de sleutel.

Als je meer wilt weten, lees dan dit bericht door Ali Spittel waar ze meer dan 25 tips deelt voor nieuwe ontwikkelaars.

Ga daar weg

Waar wacht je op? Ga erop uit en begin met leren! Zorg ervoor dat je deze handleiding om de paar maanden bekijkt voor front-end ontwikkeling voor nieuwe updates en tips.

Succes!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map