Hoe leer je webontwikkeling? - De praktische benadering (2024)

Hoe leer je webontwikkeling? Ik begon al heel vroeg met programmeren voor het web. Dit betekent dat ik de hele evolutie heb doorlopen, van eenvoudige webpagina's met links en teksten tot moderne websites met veel interactiviteit. Voor mij betekende het leren van webontwikkeling dat opdrachten praktisch moesten zijn. Daarom wilde ik u met dit artikel dezelfde ervaring geven. Op deze manier, jijkrijg praktische voorbeelden van onderwerpen die u tijdens het leren moet behandelen vaardigheden voor webontwikkelaars.

1. HTML-basis
2. CSS-basisprincipes
3. JavaScript-basisprincipes
4. HTML, CSS diepgaand (CSS-klassen, styling, responsief ontwerp)
5. Foutopsporing - Inspecteren van elementen
6. JavaScript-programmering
7. Foutopsporing
8. JavaScript DOM-manipulatie
9. Koppel gegevens aan elementen op een webpagina
10. Toegang tot API's
11. Basisprincipes van grafisch ontwerp

Echte wereldkennis voor webontwikkelaars:

1. GIT/versiebeheer
2. Hosting
3. Analytics, SEO en website-optimalisatie
4. Bibliotheken en kaders

Leren Webontwikkeling - de eerste stap - tijd nemen om te leren

Om te leren webontwikkeling gaat het erom de tijd te nemen. Daarom deze stapde tijd nemen om te leren, is het belangrijkste. Aangezien u dit artikel leest, bent u op de goede weg. De meeste computers zijn uitgerust met alle software die u nodig hebt om webontwikkeling te leren. Maar je kunt het ook allemaal online doen, dus maak je nog geen zorgen over de tools, je hebt alleen tijd nodig.

Over hoeveel tijd hebben we het dan? Met een paar uurtjes per week kom je heel ver, zeggen we graag. Bovendien moet je dat begrijpenhet begin is erg moeilijk voor elke beginner, daarom moet je jezelf tempo geven.

Laten we aannemen dat de eerste stap achter de rug is, dat u geïnteresseerd bent in het onderwerp en bereid bent tijd op te offeren. Dus hoe moet ik webontwikkeling leren?

Test je vaardigheden en leer tegelijkertijd webontwikkeling - The Web Development Challenge

We hebben veel geschreven over devaardigheden die je als webontwikkelaar nodig hebt, maar dit artikel gaat meer over jezelf uitdagen en proberen een project op te bouwen met behulp van alle taken die we hebben voorbereid. We weten hoe belangrijk praktijkervaring is, dus je moet dit doen ineen praktische manier, en leer webontwikkeling met coderen.

Er worden hier veel uitdagingen genoemd en ik neem aan dat velen van jullie een paar maanden nodig hebben om alle kennis te verzamelen, alle code te schrijven en eigenlijk alles te voltooien om alle dingen van onze uitdaging te laten werken. Sterker nog, ik stel voor dat je het tempo bepaalt en stap voor stap gaat. Als je daar zin in hebt, staat het je vrij om enkele van de uitdagingen gemakkelijker te maken, maar bekijk ze later opnieuw om te zien of je verbeterd bent.

Vaardigheden die je nodig hebt om de uitdagingen te voltooien, worden met elke stap moeilijker, zodat je kuntbouw je kennis geleidelijk op.

We zijn erg blij met elke feedback,dus laat ons weten hoe je onze uitdagingen hebt opgelost(hey@codebrainer.com) of als je ideeën hebt om ze interessanter of eenvoudiger te maken. Om nog maar te zwijgen, je helpt ook collega's met elke vorm van feedback die je kunt geven.

Front-end webontwikkeling

Front-end ontwikkeling is debeste instapkennis in webontwikkeling. Waarom? Omdat je webdevelopment op een visuele manier leert, vandaar de naam front-end development. Bovendien is dit een interface voor de gebruikers die interactie hebben met uw webpagina.

Als je alle taken van het front-end development-gedeelte kunt voltooien, ben je datop een uitstekende manier om een ​​echte webontwikkelaar te worden.

We zouden heel graag willen zien wat je hebt gedaan, dus wees niet bang om ons foto's van je project te sturen als je klaar bent. Sommige van de projecten zullen in deze blog te zien zijn.

HTML Basics - Uw eerste webpagina

We hebben een geweldige blogpost geschreven over demeest voorkomende HTML-tagsdie u moet weten, en dit is een goed begin om webontwikkeling te leren. Dus,wat is HTML?HyperText-opmaaktaalof HTML is een taal die communiceert met onze webbrowser. Alle webpagina's die u hebt bezocht, gebruiken HTML om de visuele elementen op de pagina weer te geven.

Hoe moet je beginnen? De eenvoudigste manier is om uw eerste webpagina te bouwen. Alles wat je nodig hebt is een HTML-bestand. In de meeste besturingssystemen betekent dit het maken van een bestand in een teksteditor en het hernoemen naar iets anders zoals web_page.html.

Nu kunt u uw bestand al in een browser openen en heeft u uw eerste webpagina. Natuurlijk zullen we niet in details treden over hoe het te doen, maarwe zullen je een uitdaging gevenin plaats daarvan (je hebt een eenvoudig sjabloon in hetWat is HTMLblogpost). Het hele artikel is een lijst met uitdagingen als je ze allemaal kunt doen; je bent op dejuiste weg om webontwikkelaar te worden. Maar maak je geen zorgen, zelfs als je er een paar overslaat, je hebt de tijd en de middelen die je kunnen helpen daar te komen.

Uitdaging 1:

Maak een eenvoudige webpagina voor uwfavoriete muziekband. De webpagina moet beschikken over:

• een titel (het ding dat is geschreven in het tabblad van uw browser)
• Een kop toevoegen aan de pagina (h1)
• minstens één afbeelding van je band
• Een korte beschrijving van de groep
• Een lijst met albums of nummers
• Link naar hun YouTube-kanaal (link zou in een nieuw tabblad moeten openen)

Alle dingen die hier worden beschreven, kunnen worden gedaan in een eenvoudig HTML-bestand. In feite is dit een goed uitgangspunt voor toekomstige uitdagingen.

Het uiteindelijke resultaat zou er ongeveer zo uit moeten zien:

CSS toevoegen aan uw webpagina voor een beetje stijl

Cascading Style Sheets of CSSis een stijlbladtaal die wordt gebruikt om elementen in uw HTML er mooi uit te laten zien. Simpel gezegd, met CSS kunnen we ontwerpen voor moderne websites implementeren. Het is geweldig omdat hetscheidt lagen van de webpagina. En het kan worden gewijzigd om aan uw behoeften te voldoen, bijvoorbeeld een andere stijl voor een andere taal, een ander land, donkere/lichte modus…. Dit alles kan worden gedaan met kleine aanpassingen in de CSS-bron.

Maar wat heb je nodig om CSS te implementeren? Dat is vrij eenvoudig; u moet een nieuw bestand maken met de extensie .css. Voeg het toe in dezelfde map als uw HTML. Vervolgens moet u beide bestanden koppelen met behulp van de link-tag, hetzelfde als de onderstaande code (zorg ervoor dat u dezelfde naam gebruikt als uw bestandsnaam voor CSS).

En dit is het; je kunt aan je stijl gaan werken. Zoals we al zeiden, we zullen je uitdagen en hier is de volgende uitdaging, voor basis-CSS.

Uitdaging 2:

We blijven webontwikkeling leren door door te gaan met het bouwen van een webpagina voor je favoriete band. Deze keer maken we het stijlvoller. Met styling doen we het helemaalverander de manier waarop uw pagina er nu uitziet. Voor nu spelen we met basis CSS-kenmerken, maar je kunt er zelf een sprankje aan toevoegen.

Breng deze wijzigingen aan op uw webpagina:

• Verander de kleur van de bandnaam (de titel van de pagina) in blauw of een andere kleur. (wijzig de stijl voor de h1-tag)
• Voeg een logo toe voor de band en maak de logo-afbeelding in de vorm van een cirkel
• Zorg ervoor dat alle albums (vermeld op de pagina) als links werken. Koppel ze aan bronnen zoals youtube, wiki, iTunes of een andere webpagina of streamingdienst waarop hun albums staan ​​vermeld
• Verander de stijl van de links, verander het zodat de links niet onderstreept worden, maar als je met de muis over een link beweegt, is er een onderstreepte tekst

JavaScript-basisprincipes

wij bijCodeBrainerhou van programmeren, en voor ons is dit het leuke gedeelte, maar voor beginners kan het dat ook zijnmoeilijk te starten. We benadrukken altijd dat het moeilijk kan zijn, maargeef niet op, leer stap voor stap, en ik beloof je dat je het uiteindelijk zult begrijpen. Wij hebben er een mooie uitleg vanwat javascript is; daar vind je alle basisprincipes die je moet weten om deze uitdaging aan te gaan. Maar zorg ervoor dat u op internet zoekt naar nog meer voorbeelden

JavaScript is een geweldige aanvulling op webontwikkeling omdat het interactie met de gebruiker biedt. Bovendien kunt u met JavaScript waarden manipuleren ende look en feel van een website veranderen. Moderne webwinkels laten bijvoorbeeld het aankoopmandje animeren als je op de koopknop klikt. Dit alles wordt gestart in JavaScript. Ook wordt het hele aankoopproces gedaan met behulp van JavaScript. Samenvattend: het leren van JavaScript is voor een moderne programmeur een must, zelfs als u voor uw werk een andere taal gebruikt.

Net als bij CSS raden we u aan een nieuw bestand met de naam scripts.js toe te voegen en dit aan uw webpagina te koppelen. De link is eenvoudig met de scripttag.

Uitdaging 3:

Laten we het voorlopig bij eenvoudige JavaScript-functies houden en later terugkomen met meer uitdagende taken. We werken aan een website voor je favoriete band.

• Voeg een klikgebeurtenis toe aan het logo en voeg een waarschuwing toe (een functie die een berichtvenster op het scherm laat zien), die u laat weten dat u JavaScript en HTML met succes hebt gekoppeld
• Voeg een knop op de webpagina toe (u verwijdert deze later), het zal u helpen de JavaScript-functies uit te voeren, voor nu, later, koppelt u uw code aan enkele gebeurtenissen zoals het laden van inhoud, muisklik...
• Maak een globale variabele die een enkel album van je favoriete band vertegenwoordigt. Het album wordt een object, voeg er enkele eigenschappen aan toe, naam, genre, label, speelduur, uitgebracht (voor het jaar van uitgave)
• Om uw albumobject te testen, drukt u de naam van het album af (naar de console of gebruikt u opnieuw alert).
• Print de volledige beschrijving van het album uit (naam, jaar van uitgave, genre en label).

HTML, CSS in de diepte (CSS-klassen, styling, responsief ontwerp)

De webpagina van je favoriete band groeit. Bij het maken van een webpagina hebben we de basiskennis van webontwikkeling behandeld. Dit is het moment om een ​​kleine dip in ons pad te graven om webontwikkeling te leren. Nu weleer wat HTML en CSS zijn.

CSS-klassen zijn bedoeld om wat structuur aan het ontwerp van uw webpagina toe te voegen. Met klassen kunnen we eigenschappen op één plek wijzigen. Laten we bijvoorbeeld de naam van een album nemen. Als u een CSS-klasse albumTitle hebt, kunt u de kleur voor alle albums op één plek wijzigen.

Een ander geweldig kenmerk van CSS is dat je het kuntmobiele en desktopversies van webpagina's samenvoegen tot één HTMLen verander de styling met CSS volgens de grootte van een display.

Uitdaging 4:

• Met deze uitdaging gaan we over naar een meer volwassen webpagina. Voeg id-attributen en CSS-klassen toe aan alle belangrijke elementen op een webpagina, zodat u ze kunt stylen vanuit het CSS-bestand. Hierdoor kun je aan de slag met styling. Voeg bijvoorbeeld albumTitel toe aan alle albumnamen.
• Maak een achtergrondafbeelding van de band bovenaan de pagina. (Omslagafbeelding voor een webpagina.)
• Voeg voor elk album een ​​afbeelding toe. Verander de pagina zodat je de albums in een paar kolommen presenteert (minstens 2). We willen uiteindelijk een raster van albums maken. We doen dit zodat wanneer je een nieuw album toevoegt, het niet zoveel ruimte in beslag neemt.
• Probeer tijdens het maken van een rasterpresentatie voor de albums elk album als een object te beschouwen. Wat voor gegevens ga je bijvoorbeeld op het scherm zetten (titel, nummers,...). Bovendien zal dit u later helpen wanneer u gegevens voor de albums leest uit een gegevensbron, lokaal ofREST-API.
• Maak een responsive design voor je webpagina. Lettertypen moeten op een kleiner apparaat worden aangepast, zorg ervoor dat de afbeeldingen op de pagina blijven staan ​​(wat betekent dat de hele afbeelding zichtbaar is, zelfs op kleine schermen). Probeer mediaquery's te gebruiken om speciale wijzigingen aan de mobiele pagina aan te brengen. Wijzig bijvoorbeeld het aantal kolommen op uw mobiele ontwerp.
• Tip: De meeste browsers hebben de mogelijkheid om de webpagina in de vorm van een mobiele telefoon te bekijken. Controleer daar je ontwerp.
• Maak een donkere modus voor uw pagina. Alle klassennamen blijven hetzelfde; alles wat je nodig hebt is om nog een CSS-bestand toe te voegen en de link in het HTML-bestand te wijzigen. In eerste instantie zult u het handmatig wijzigen, later zullen we JavaScript gebruiken om het te wijzigen.

Het uiteindelijke resultaat zou er ongeveer zo uit moeten zien (bron:spotify.com):

Foutopsporing - Inspecteren van elementen

Het debuggen en inspecteren van websites wordt een groot deel van u als u een webontwikkelaar wordt. Bovendien is dit een essentieel onderdeel van webontwikkeling, omdat het u inzicht geeft in hoe uw webpagina werkt. Bovendien is het een geweldige manier omeen webpagina inspecteren en de opmaak ervan bekijken.

Uitdaging 5:

• Controleer de grootte van een albumafbeelding wanneer deze op uw webpagina wordt weergegeven. Wijzig de grootte van het venster en controleer of het verandert.
• Controleer met de inspecteur wat voor lettertype wordt gebruikt voor de titel van het album. Controleer de lettergrootte van links.
• Controleer of uw pagina een beschrijvende metatag heeft
• Leer overschakelen naar het consolevenster en controleer de uitvoer van uw JavaScript-code (de code die zou moeten werken als u op de knop drukt). Als je eerder alert hebt gebruikt, gebruik dan nu console.log om de afdruk te zien.

Diepgaande JavaScript-programmering

JavaScript-programmering is waarschijnlijk het belangrijkste onderdeel voor een webontwikkelaar, omdat het de meeste tijd kost om het onder de knie te krijgen. Voor de meeste programmeurs is dit ook het meest interessante onderdeel, aangezien al zijn/haar creativiteit aan bod komt.

Het is moeilijk uit te leggen, maar het is heel duidelijk wanneer je de eerste fase van kennisbarrières voor programmeren overschrijdt. Wanneer je begint met het leren van webontwikkeling, ben je meestal ongeveer een jaar bezig, maar houd er rekening mee dat je in die tijd al heel wat dingen zult weten te ontwikkelen. Daarna kan je gewoonvoel de code uit je komen, kunt u creatiever programmeren. Nogmaals, doe het stap voor stap en geef niet op. Het plezier is net om de hoek.

Er zijn veel frameworks die u helpen bij het ontwikkelen met behulp van JavaScript, maar ik zou u aanraden het te proberenpuur JavaScript of Vanilla JavaScript. Op deze manier verwerf je kernkennis over programmeren en leer je waarde enFrameworks beter begrijpen als u weet hoe ze zijn opgebouwden hoe ze werken.

Uitdaging 6:

• In JavaScript werken we veel met objecten. En de eerste uitdaging is om de hele pagina om te zetten in objecten. Dat wil zeggen, maak een object voor de band, een object voor een album. Band en album moeten alle gegevens bevatten die zichtbaar zijn op de pagina. Maar voeg voor het album ook een array voor nummers toe. Op deze manier kun je een lijst met nummers toevoegen die de band heeft.
• Maak een lus van welke soort dan ook die door alle albums gaat en alle nummers telt.
• Voeg een functie toe die het laatste album van je band retourneert op basis van releasedatums.
• Voeg een functie toe die de naam van het album met de minste nummers retourneert
• Maak een teller die bijhoudt hoe vaak er op dat album is geklikt

Uw JavaScript-code debuggen

De meeste JavaScript-foutopsporing wordt gedaan in de browser. Het is dus een must om de ontwikkelaarstools in uw browser te leren kennen.

Zorg ervoor dat u weet:

• Hoe een breekpunt in de debugger in te stellen
• Hoe u uw code pauzeert en hoe u overstapt, in functies stapt
• Leer alle bronnen van een webpagina te vinden. Waar bestanden zich bevinden, wat is de grootte van gedownloade bestanden,... Het belangrijkste is om alle JavaScript-bestanden voor de huidige webpagina te vinden.
• Leer breekpunten te manipuleren (verwijderen, uitschakelen)
• Hoe lees/test je waarden van je code (Console.log, inspecteer waarden, horloges)
• Code testen met behulp van de console en inline JavaScript-code

JavaScript DOM-manipulatie

DOM-manipulatie geeft JavaScript zijn kracht omwebapplicaties interactief en dynamisch makende manier waarop ze eruit zien voor moderne webpagina's. DOM is een Document Object Model en het is een interface voor ons om HTML-elementen op webpagina's te manipuleren. Hiermee kunt u nieuwe afbeeldingen toevoegen wanneer een gebruiker op een knop klikt of een artikel toevoegt aan het winkelmandje in de webshop,...

Uitdaging 7:

• In dit stadium zou je alle kennis moeten hebben om een ​​leuke interactieve site te maken. Voeg de mogelijkheid toe om op de albumafbeelding te klikken. En als de gebruiker erop klikt, verschijnen alle nummers. Maak bovendien een soort lijst onder het album. Je kunt hier helemaal los gaan en ook een pop-up maken.
• Veel moderne sites bieden de mogelijkheid om te schakelen tussen donkere en lichte modus. Dit is goed voor de praktijk, aangezien je dit kunt oplossen met twee CSS-stijlbestanden en daartussen JavaScript kunt schakelen, waardoor veel kennis in een korte code wordt getoond.
• Voeg de mogelijkheid toe om voor een album op 'Vind ik leuk' te klikken. Maak een knop in de vorm van een ster voor een album en sla favorieten op in een cookie of lokale opslag, zodat je de favoriete albums kunt laten zien wanneer gebruikers terugkeren naar de site. Waarde wordt lokaal opgeslagen, maar is zichtbaar in de lijst met albums.
• Maak een nep-afspeelknop voor de nummers. En wanneer een gebruiker erop drukt, start u de timer en stopt u de tijd wanneer u op pauze drukt. Zoals bij het afspelen van een nummer.

Toegang tot API's

Het hebben van een externe databron is een must voor alle moderne webapplicaties/pagina's en noodzakelijke kennis voor webontwikkelaars. Als u weet hoe u gegevens in JavaScript moet structureren, bent u al meer dan halverwege, aangezien de meeste moderne webservices of (REST) ​​API's JSON als waarde retourneren.

Door een eenvoudige REST API te bouwen, krijgt u een idee van wat back-endontwikkeling inhoudt. In feite stelt het de centrale database meestal beschikbaar voor alle consumenten (gebruikers, klanten zoals webpagina's, applicaties voor mobiele telefoons...)

Uitdaging 8:

• Maak een mockup van een REST API met behulp vanhttps://www.mockapi.io(ziet eruit als een mooie interface voor beginners, laat het ons weten als je een betere nep-API-provider kent). Zet alle data van je webpagina naar die API, zodat je zal moeten linken naar externe bronnen om de data te tonen.
• De levenscyclus van een webpagina wordt belangrijker wanneer u gaat ontwikkelen met behulp van externe gegevensbronnen. Maak een laadindicator zodra de webpagina klaar is met laden en schakel deze uit wanneer u alle gegevens ontvangt.
• Nu je een externe database hebt, kun je meer bands, meer albums toevoegen. Bouw je website om om meer bands te kunnen laten zien.

Real-world kennis van een webontwikkelaar

Theoretische kennis en webontwikkeling, terwijl leren één ding is,een project toegankelijk maken voor het publiek, is weer een geweldige stap op je pad om webontwikkeling te leren.

Als je eenmaal aan een webontwikkelingsproject begint, heb je ook wat vaardigheden nodig om met een team of beter gezegd binnen een team te kunnen werken. Bijvoorbeeld vaardigheden zoals versiebeheer en GIT, chats, TODO-applicaties...

Vaardigheden die u moet beheersen om aan een webontwikkelingsproject te kunnen werken:

• GIT/versiebeheer
• Hosting
• Bibliotheken en kaders
• SEO en website optimalisatie

GIT, versiebeheer en samenwerking aan een webontwikkelingsproject

Meestal ben je niet de enige ontwikkelaar van een project, enje hebt samenwerkingsvaardigheden nodig om vooruitgang te boeken in het project. Allereerst moet u communiceren met uw partners en meestal met een projectmanager of klant. Dit betekent dat u moet weten hoe u documenten moet voorbereiden over de software die u hebt ontwikkeld. U moet e-mails uitwisselen en veel situaties uitleggen die zich voordoen, van bugs tot functies waarvan u denkt dat ze de webpagina een boost zouden geven.

Uitdaging 9:

• Maak een document dat alle functies van de website in uw woorden beschrijft. Maak een lijst met bestanden die de hele website maken en voeg een korte beschrijving toe. Geef commentaar op alle functies in uw code. Aangezien de documentatie afhankelijk is van het bedrijf waarin u werkt, krijgt u hun instructies over het schrijven van documentatie. Dit is bedoeld als uw eerste poging om dergelijke documentatie te maken, en u kunt het op uw eigen manier doen.
• We zeiden dat we uitdagingen voor je hebben, en we hebben ook een uitdaging voor versiebeheer. Zoek een goede host voor GIT zoals BitBucket of GitHub en start daar een project. Dien al uw code in (beslis of u deze openbaar of privé wilt maken, het is aan u)
• Maak uw eerste commit aan uw GIT-project
• Maak een paar aanpassingen (wijzig de code) en commit nogmaals (als je nog niet aan onze uitdagingen bent begonnen, overweeg dan om elke uitdaging als een aparte commit te hebben, om je voortgang te volgen)
• Ga een paar commits terug en lees je beschrijving, denk je dat je voldoende inzicht hebt in wat er is gedaan. Het hebben van een goede commit-beschrijving is een vaardigheid die je in de loop der jaren zult oefenen, maar het is leuk om zo snel mogelijk te beginnen, zorg ervoor dat je toekomstige zelf niet terugkomt en je schopt voor de slechte beschrijvingen:D
• Maak een tak voor ten minste één uitdaging. Als je geen uitdagingen meer hebt, hebben we er nog een voor je. Maak een tak en voeg ingesloten YouTube-video's toe voor elk nummer. Met vestigingen kun je in een oogwenk schakelen tussen verschillende varianten van projecten.
• De best practice op GIT wordt gedaan met een partner, zoek een programmeermaatje en start een project (als je alleen bent, maak dan een andere gebruiker aan, om inzicht te krijgen in hoe andere teamgenoten je code zien). Verdeel je werk met je buddy en combineer de code met behulp van GIT.
• Zoek een open-sourceproject op GitHub, probeer commits te lezen en verzoeken op te halen om te zien hoe commit-beschrijvingen eruit zien

Het hosten van uw website

Er zijn veel plaatsen waar u uw webprojecten kunt hosten.Azuurblauw,Digitale oceaan,Amazon (AWS),... De meeste zijn te betalen, maar sommige zijn gratis.GitHubbiedt een manier om het gratis te doen, maar controleer ook anderen, want ze bieden allemaal gratis bronnen aan.

Uitdaging 10:

• Zoek hosting voor de webpagina die u hebt gemaakt en publiceer deze
• Optioneel: koop een domein en koppel het aan je hosting
• Tip: het hosten van een door jou gebouwde website is een geweldige manier om je kennis te laten zien aan toekomstige werkgevers, en het is net zo eenvoudig als het geven van een link

Bibliotheken en kaders

Nu je al het werk helemaal opnieuw hebt gedaan met vanilla JavaScript, is het tijd om het te doenkrijg wat hulp. Probeer een aantal frameworks die er zijn, zoalsBootstrap,JQuery,Hoekig,Reageer,...

Uitdaging 11:

• Wanneer je je kader hebt gekozen (maak je geen zorgen, je kunt van gedachten veranderen en later een nieuwe leren), ga dan naar het begin van onze uitdagingen. Bekijk alle uitdagingen opnieuw, maar gebruik deze keer framework, plug-ins, alle hulp die u kunt krijgen van open bronnen en andere plaatsen.
• Probeer een aantal betaalbare bronnen te gebruiken (bijv. Wix, Shopify, WordPress, Google Sites,...) om ook uw pagina opnieuw op te bouwen, gewoon om te zien wat ze bieden en hoe snel u dezelfde pagina daar kunt bouwen. De meeste hebben een proefversie periodes, dus in de meeste gevallen gratis.

Analytics, SEO en Website optimalisatie

Dit is op zichzelf al een enorm kennisgebied, maar we willen u gewoon laten weten dat het bestaat.SEO is een manier om zoekmachines zoals Google bewust te maken van de inhoud op uw pagina. Het gaat erom dat gebruikers zich meer welkom voelen en het tegelijkertijd aantrekkelijk maken voor robots van zoekmachines.

Optimalisatie heeft alles te maken met het sneller laden van uw pagina. Bijvoorbeeld optimaliseren wanneer afbeeldingen worden geladen, hoe groot afbeeldingen zijn. Hoeveel pagina's uw webpagina heeft, hoeveel externe bronnen verbruikt u….

Uitdaging 12:

• Voeg een metatag toe voor de beschrijving van de pagina
• Zoek een titeloptimizer en optimaliseer de titel voor uw webpagina
• Een van de belangrijkste dingen bij optimalisatie is het observeren van verkeer naar uw website. Voeg wat analyse toe zoalsGoogle Analyticsen zie in realtime hoe bezoeken aan uw website worden weergegeven.
• Optimaliseer afbeeldingen en ontdek wat er gebeurt als je veel compressie gebruikt voor jpg, hoe ziet de afbeelding eruit?
• Als je een soort framework gebruikt, zorg er dan voor dat je de grootte ervan ziet, heeft het een geminimaliseerde versie. Controleer of u de CDN-versie voor dat framework kunt gebruiken.

Conclusie

Dit is onze lijst met uitdagingen om webontwikkeling te leren. Het is een behoorlijk lange lijst, dus neem de tijd en probeer er zoveel mogelijk af te werken. Ik beloof je dat het voltooien van alle uitdagingen in ieder geval een voet tussen de deur zal zetten voor je volgende sollicitatiegesprek.

Laat het ons weten als je ideeën hebt voor de volgende uitdaging, hoe je de huidige kunt verbeteren, hoe de test was... Met jouw feedback kunnen we onze uitdagingen nog verder ontwikkelen.

Deel dit artikel met je collega's, om ook hen uit te dagen.