In de moderne wereld willen steeds meer mensen leren programmeren, terwijl ze niet weten waar ze moeten beginnen, maar tegelijkertijd is de IT-industrie waar ze van dromen, want webprogrammeur zijn is nu in de mode. Voor veel mensen positioneert het de eerste stap in deze wondere wereld, zoals webontwikkelaars of junior front-end ontwikkelaars, basis front-end ontwikkeling. Je moet echter ergens beginnen voordat je je droombaan kunt vinden. Hier is een beginnersboek met kennis voor jou om antwoorden te krijgen: Is er een gratis cursus voor front-end ontwikkelaars? Hoe kun je zelf online leren, waar vind je lesmateriaal om HTML, CSS en JavaScript onder de knie te krijgen. Als je HTML en CSS kent, kun je al solliciteren naar de functie van webdesigner.
Wat zijn de grondbeginselen van front-end ontwikkeling?
Instappen in de wereld van webprogrammering kan moeilijk zijn voor kersverse mensen. Zoveel begrippen klinken vreemd en worden problematisch bij het schrijven. Hoe schrijf je: softwareontwikkelaar of front-end ontwikkelaar? Misschien front-end ontwikkelaar, of liever front-end software engineer? Het meest gebruikelijk is echter de vermelding met een streepje. Front-end developer-de persoon die verantwoordelijk is voor het visuele deel van de applicatie (wat wij zien, wij = gebruikers van de site).
Meestal werkt de front-end ontwikkelaar samen met een grafisch ontwerper (webdesigner) die het grafisch ontwerp verzorgt. Vaak kunnen front-end ontwikkelaars samenwerken met een UX-ontwerper die een prototype voorstelt en maakt van de interacties die op de websites zullen plaatsvinden. De rol van front-end ontwikkelaars is om het allemaal samen te voegen. In de volksmond wordt gezegd dat een front-end ontwikkelaar tot taak heeft een grafisch ontwerp in kleinere delen te knippen en te coderen (HTML en CSS) tot websites die de gebruikers uiteindelijk gebruiken.
Vervolgens worden met behulp van JavaScript de eerder genoemde interacties toegevoegd. Terwijl HTML en CSS3 ons in staat stellen vloeiende overgangen en basisanimaties te maken, introduceert JavaScript alle geavanceerde pagina-gebruikersinteracties. Met JavaScript voegen we een drop-down menu, een slider op de pagina, formuliervalidatie, overgangen tussen subpagina's of geavanceerde animaties, en 3D-spelletjes (bijvoorbeeld met Babylon-JavaScript) toe. Gegevens voor logica in JavaScript uit de back-end van de applicatie, vandaar de front-end samenwerking-back-end ontwikkelaar.
De functies van front-end ontwikkelaar zullen sterk variëren. Het werk van een front-end ontwikkelaar in een interactief en creatief bureau, een front-end ontwikkelaar in een bedrijf dat software ontwikkelt, zal er anders uitzien, en een andere baan voor iemand die werkt aan de front-end ontwikkeling van een start-up.
Een front-end ontwikkelaar van snijdende grafische projecten kan zich ontwikkelen tot een JavaScript-ontwikkelaar - een webprogrammeur die zich voornamelijk bezighoudt met het schrijven van applicatielogica en geavanceerde JavaScript-bewerkingen. Daarnaast moet een front-end ontwikkelaar vaak (net als een back-end ontwikkelaar) de JavaScript architectuur van de applicatie plannen en bewust frameworks en bibliotheken selecteren voor het project.
Is front-end ontwikkeling gemakkelijk?
- Je ziet het effect snel; in tegenstelling tot het leren van webontwikkeling/back-end ontwikkeling, geeft het creëren van stukjes code, zelfs in pure HTML, onmiddellijk visuele effecten, wat ons motiveert om verder te werken.
- Lage instapdrempel - er zijn relatief weinig front-end vaardigheden nodig om een professionele carrière te beginnen in een stage of junior positie aan het begin.
- Veel werkaanbiedingen voor juniors-vooral als de vakantie eraan komt en er veel zomerstages zijn.
- Onafhankelijkheid - we kunnen zelf websites maken en dan als freelancer opdrachten binnenhalen. Immers, in de basis zouden we eenvoudige websites van A tot Z moeten kunnen opzetten.
Wat hebben we nodig voor front-end ontwikkeling?
Hier is het recept voor succes. Om een website te maken, heb je nodig:
HTML + CSS
Dit zijn de basisingrediënten voor het bouwen van een website. HTML zorgt voor de structuur van websites - de beschreven elementen, en CSS vertelt de browser hoe deze elementen eruit moeten zien. Als je HTML en CSS eenmaal onder de knie hebt, kun je elk (grafisch) ontwerp namaken en er een website van maken.
JavaScript
Een front-end programmeertaal voor het maken van websites. Dankzij JavaScript voegt u interactiviteit toe aan uw website, d.w.z. u ontwikkelt websites die reageren op acties van gebruikers. U kunt zelfs spelletjes bouwen. Wij raden u aan ten minste de basiscode van JavaScript onder de knie te krijgen om te begrijpen hoe de taal werkt of de logica van de webprogrammeertaal. Daarna kun je naar jQuery.
jQuery
Technisch gezien is het geen taal maar een JavaScript-bibliotheek. Als een tussenpersoon waarmee je gemakkelijker en sneller JavaScript kunt schrijven. Jij voert de jQuery-code in; de bibliotheek bekommert zich om jou en speelt met de vertaler om de betekenis van het enigszins ingewikkelde JavaScript aan de browser door te geven. Hoewel jQuery tegenwoordig "een beetje oud" is, raden we aan het "op verzoek" te leren. Het maakt het gemakkelijker om webprogrammeringslogica en Bootstrap (gebruikt CSS-framework) te leren en verschijnt nog steeds in vacatures.
Kaders
Hun taak is het proces van het maken van websites en toepassingen te vereenvoudigen door kant-en-klare oplossingen te bieden voor de meest voorkomende problemen. Bovendien bieden ze een patroon van hoe je je code op een nette manier kunt ontwikkelen. Om te beginnen stellen wij voor één CSS-raamwerk te kiezen, bijvoorbeeld Bootstrap (andere opties zijn: Foundation, Pure, YAML CSS), en vervolgens een van de momenteel populaire JavaScript-raamwerken toe te voegen: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Dit is niet direct gerelateerd aan webcodering, waarvan we begrijpen dat het vaak tot het laatst wordt uitgesteld. Ten onrechte, hoe eerder je begint met het gebruik van Git, het versiebeheersysteem, hoe beter.Dit is de volgorde die we hebben voorgesteld. Natuurlijk kun je het helemaal anders doen: sla jQuery over en leer Bootstrap onmiddellijk na het beheersen van de basis van HTML en CSS; maar we raden je aan niet te ver te gaan in het vereenvoudigen en jezelf af te snijden van het zoeken naar met de hand geschreven oplossingen, en geen prefabs van een framework te gebruiken of JavaScript frameworks te leren met nauwelijks een regel in pure JavaScript.
Waar begin ik met front-end ontwikkeling?
Leer regelmatig, en probeer elke nieuwe vaardigheid in de praktijk toe te passen, zelfs in kleine stukjes code met maar één doel: laten zien wat je net onder de knie hebt. Deel ze op het web. Beperk je motiverende groepen op Facebook. Na slechts 3 uur lezen van motiverende verhalen ben je vaak niet 3 keer zo gemotiveerd. Je hebt meestal 3 uur minder voor je studie.
Let op de markt, en lees de eisen in vacatures. Ze veranderen! We schrijven dit bericht vandaag en zullen het waarschijnlijk over een jaar moeten bijwerken als de technologie verandert. Als je eenmaal de basis onder de knie hebt: HTML CSS JavaScript, zal er altijd wel weer iets nieuws in de mode komen. Ga zo snel mogelijk op zoek naar gratis workshops (om te leren van mentoren en tegelijkertijd interessante contacten te leggen) en een stage in de industrie. Het werk zal de beste leermeester blijken te zijn.
Wat is een voorbeeld van front-end ontwikkeling?
HTML + CSS
Drie zijn waarschijnlijk de bekendste sites met interactieve cursussen web front-end ontwikkeling. Gratis, goed georganiseerd, ze brengen de kennis heel gemakkelijk over op beginners. Ze houden interactieve cursussen in de browser. We hoeven thuis niets te installeren, we doen gewoon de cursus, en onze vooruitgang wordt onmiddellijk gemeten.
Khan Academy, Codecademy en Homeschool
Khan Academy heeft volledig gratis materiaal en heeft ook de mogelijkheid om andere webtalen te gebruiken. Dit is een educatief platform, niet alleen over webontwikkeling. Je kunt verschillende taken doorlopen, van basiselementen, waaronder HTML en CSS, tot meer geavanceerde JavaScript-scripts.
Codecademy heeft veel gratis spullen en interessante voorgebouwde front-end ontwikkelingstrajecten die alleen beschikbaar zijn voor professionele gebruikers.
Code School - naar onze mening de meest georganiseerde cursus. Ze bestaan uit video's + een interactief gedeelte met front-end ontwikkelingstaken. Het eerste niveau van elke cursus is gratis, maar helaas moet je voor de rest betalen. Maar zelfs de gratis delen (meestal ongeveer 1 uur) zijn het bekijken waard.
Hoe kies je een cursus om te volgen?
Bekijk alle drie de webplatforms. De onderwerpen overlappen elkaar, maar het is de moeite waard om enkele onderwerpen dubbel door te nemen. Ten eerste consolideert herhaling de kennis, en ten tweede heeft elk front-end platform een iets andere aanpak van lesgeven. De keuze is aan u. Zoveel mensen willen betalen voor een maandelijkse Bootcamp of cursus webontwikkeling, omdat ze alles gratis binnen handbereik hebben. Niets ongewoons.
Het ergste is dat we veel materiaal hebben en snel alles willen leren wat we nodig hebben, zonder te controleren of te selecteren - alles op de plank krijgen en een stap verder gaan dan het basismateriaal. Daarom begrijpen we dat als je geen tijd hebt voor alle front-end cursussen en besluitvorming niet je forte is, kijk dan eens naar Khan Academy: Inleiding tot HTML CSS-Web Development.
JavaScript
Wat zou onze cursus front-end ontwikkeling zijn zonder het gebruik van JavaScript? De interactieve sites hierboven zijn geweldig. Ze hebben JavaScript-cursussen voor ons - leuk, eenvoudig, helaas niet erg uitgebreid, maar goed om op te warmen. Als je de basis van HTML en CSS al onder de knie hebt, hoef je niet met de vorige suggesties te beginnen.
Aan de slag met 9 korte ontwikkeloefeningen in de inleiding: bij JavaScript kun je voortborduren op dezelfde onderwerpen in Udacity: JavaScript Intro, daarna (of meteen) overgaan op een grotere set opdrachten: HTML / JavaScript: Interactieve webpagina's maken.
jQuery
Nog een stap op onze front-end weg, maar uiterst optioneel. Momenteel kan een cursus front-end ontwikkeling zonder jQuery. Vooral omdat er tegenwoordig veel spannende nieuwe opties voor front-end ontwikkelaars zijn, hebben we naar vacatures gekeken, en het is nog steeds de moeite waard om het op voorraad te hebben.
Ja, Khan Academy en Codecademy hebben jQuery-cursussen. Echter, in dit geval zou ik willen aanbevelen - een uur durende en volledig gratis probeer jQuery Pluralsight (voorheen Code School) front-end ontwikkeling cursus.
Raamwerken leren
In dit stadium kunt u zelf front-end materiaal kiezen en beoordelen of het aansluit bij uw kennis. Bij het Bootstrap framework is het bouwen van een website gebaseerd op een 12-koloms grid, en deze kennis is fundamenteel om de rest in de praktijk te begrijpen. Met Bootstrap kunt u snel responsieve websites (RWD) maken, d.w.z. aangepast voor mobiele apparaten. Als u liever leert in de vorm van een tutorial: De bootstrap cursus is beschikbaar op Code academy, en met Daily Web maak je in 30 minuten je eerste bootstrap slider.
Kaders JavaScript
Momenteel moet een degelijke cursus front-end ontwikkeling zeker de momenteel gebruikte JavaScript-frameworks introduceren en er minstens één aanleren. Je kunt interactieve cursussen met frameworks vinden op Pluralsight (voorheen Code School), die 14 dagen gratis zijn. Op scotch.io vindt u een zeer rijke verzameling gratis materiaal. Aan de andere kant, uitschrijven waar je gratis front-end ontwikkeling cursussen vindt voor elk framework is een onderwerp voor een aparte post.
Er zijn er vele. De keuze is moeilijk, en ze allemaal leren kennen is onmogelijk. Wat je ook kiest om mee te beginnen, blijf er gewoon bij. Spring niet van bloem naar bloem omdat na een week webontwikkeling leren iemand je zal vertellen dat een andere beter is. Leer de eerste en schrijf er een eenvoudige webapplicatie op. Meestal worden toepassingen als planners, to-do lijsten en ranglijst nieuws aanbevolen om mee te beginnen. Alles wat je nodig hebt is de naam van het framework en de naam van de webapplicatie die je wilt maken.
Voorbeelden van gratis cursussen:
- AngularJS
- Angular 2+ (momenteel 6-maar 4/5 zijn gewoon een andere front-end ontwikkeling versie)
- ReactJS
- Vue.js
- Ember.js
Is dit het einde? Niet! Dit is een uitstekende start en een stevige basis voor de Junior Front-End Developer.
Wat volgt er na deze cursussen?
Begin met het werken aan je webprojecten. Zoals we in het begin al schreven: documenteer je werk vanaf de allereerste front-end ontwikkelingsstappen, en zet de code op GitHub, ook al is het verre van ideaal.
Wil je zelf testen?
De beste manier om te consolideren wat je hebt geleerd is door te oefenen. De front-end cursus doorlopen is één ding, maar alleen werken aan je webprojecten leert je coderen om zelf problemen op te lossen. Maak een formulier (landingspagina) waarmee je de auteur van de pagina kunt mailen.
Maak je visitekaartje website - portfolio - denk aan het gebruik van JavaScript om de tabel te vullen met een Fibonacci-reeks, je slider, of een eenvoudig spel vanuit het niets. Denk je dat je al codering vaardigheden hebt maar geen grafische vaardigheden, dus de ontwikkeling die je doet is "lelijk"? Je bent welkom! Kies een kant-en-klaar grafisch ontwerp, bijvoorbeeld van de Weekly Dev Challenge, en probeer het te maken.
Hoe lang duurt het om de basis te leren?
Dat hangt van jezelf af. Discipline is het belangrijkste. De meeste mensen vinden het moeilijker om een webprogrammeertaal te leren dan om de tijd te nemen om cursussen te volgen die niets kosten. Het beheersen van de basis om je eerste website op te zetten kan ongeveer 1-3 maanden duren, afhankelijk van hoe ambitieus je bent in de front-end ontwikkeling.
Om JavaScript onder de knie te krijgen, zou ik nog eens 3 maanden hard leren toevoegen. Ik neem aan dat je werkt, dus je zult ongeveer 5-10 uur per week besteden aan leren, dus minstens 1 uur per dag. Je wordt geen front-end specialist in zes maanden, maar dat is genoeg tijd om een basis te leggen voor verder leren.
Zoek online hulp
Meer dan eens zul je tijdens het leren problemen hebben: Hoe centreer je een element? Waarom werkt dit script niet? HTML en CSS zien er in Chrome anders uit dan in Firefox. Hoe word je een pro in front-end ontwikkeling?
Dit is normaal, maar wie vraagt vergist zich niet.
- Google-vraagoom Google, bij voorkeur in het Engels.
- Stack Overflow- zalwaarschijnlijk als eerste antwoorden opduiken van Stack Overflow. Het is een portaal voor webontwikkelaars waar gebruikers webprogrammeertaal-gerelateerde vragen posten, en anderen (meestal meer ervaren webprogrammeurs) proberen je een antwoord te geven over front-end ontwikkeling. De eerste beste oplossingen zijn punten, en de auteur van de vraag kan een commentaar markeren dat zijn probleem heeft opgelost. Soms zijn er meerdere of een dozijn oplossingen, dus het is de moeite waard om ze allemaal te lezen en ze bij jou te controleren. Als een van de oplossingen u heeft geholpen, stem dan - geef het een pijl omhoog.
- Facebook-front-endontwikkelingsgroepen op FB voor beginners kunnen je veel helpen, vooral als je niet weet hoe je over je probleem moet vragen. Upload een scherm en je code. Verwacht niet dat iemand het voor je schrijft, maar de commentaren zullen je zeker op het juiste pad brengen. Helaas zullen mensen bij triviaal eenvoudige vragen altijd iets onaangenaams schrijven - het is moeilijk, wees geduldig. Wij raden de webgroep-startondersteuning aan voor vragen over startende ondernemingen, en moderatoren zorgen ervoor dat er geen haat ontstaat.
- CanIUse-alsuw probleem te maken heeft met CSS die niet werkt op een van uw browsers, zorg er dan voor dat wat u gebruikt ondersteund wordt voor de versie die u controleert. Zo voorkomt u lange en vervelende zoektochten naar spookachtige front-end problemen.
Conclusie
Zo, in dit artikel heb je meer geleerd over de IT-wereld, en we zouden blij zijn als we je een beetje op weg kunnen helpen. De front-end wereld is enorm, en het kan gemakkelijk zijn voor een beginner om erin te verdwalen, maar wij richten ons op het helpen van mensen op het juiste pad. Maar merk ook op dat er naast de traditionele webtalen een no-code webprogrammeertaal bestaat. Totdat codevrije tools op grote schaal beschikbaar kwamen, werd de ontwikkeling van webapplicaties uitsluitend gedaan door webprogrammeurs.
Gelukkig begint de tijd te dringen, en nu kan elke student met kennis van zaken een webapplicatie of landingspagina maken. Na het leren van de basis, zelfs op het niveau van kennis, HTML en CSS, kunt u al uw droombaan vinden. Veel wetenschappers hebben opgemerkt dat webprogrammeertaal de menselijke vaardigheden verbetert en bijdraagt tot de ontwikkeling van zachte vaardigheden. Uiteindelijk is dit je financiële onafhankelijkheid. We kennen verschillende jongens uit de front-end wereld die hun start-ups lanceerden en het nodige deden voor het welzijn van onze planeet.
En natuurlijk heeft zo'n aanpak voordelen:
- Gebruiksgemak en grote kracht.
- Grote template bibliotheek.
- Ondersteuning voor het instellen van verschillende parameters.
No-code of visuele programmeertaal is een frisse aanpak waarbij je geen code vanaf nul hoeft te schrijven. Wij moedigen u aan om tools te gebruiken met een grafische interface, dat is de toekomst van webontwikkeling. Traditionele front-end webapplicaties zijn cool, maar wij denken dat u moet innoveren, dus ons product kan nuttig zijn voor u. Wij wensen oprecht de juiste weg te vinden om het beroep van programmeur onder de knie te krijgen. Dit pad is netelig, maar als je het beheerst, zal het je hele leven voldoening geven dat je in deze tijd hebt doorgebracht.
