Front End Wordpress Developer

In de opleiding Front End Wordpress Developer leer je hoe je een website from scratch opbouwt. Je begint met HTML en CSS, de twee webtalen waarmee je de opmaak van je website bepaalt. Met JavaScript begint het echte coderen; daarmee maak je je website interactief en dynamisch. Zoals je misschien weet, is WordPress wereldwijd het meest gebruikte platform voor websites. Met je nieuwe kennis van HTML, CSS en JavaScript kun je jouw WordPress-website helemaal naar je hand zetten.

Zo is de opleiding opgebouwd

De opleiding Front End Developer Expert bestaat uit twaalf trainingsdagen en zes trainingen die op elkaar aansluiten:

• HTML5 en CSS3 basis
• JavaScript basis
• HTML5 en CSS3 gevorderd
• WordPress basis
• WordPress gevorderd
• WordPress Code
• WordPress Bouw je eigen Thema of WordPress Breakdance (gaat jouw voorkeur uit naar WordPress Breakdance? Laat het bij je boeking weten in het opmerkingenveld, dan maken wij je inschrijving in orde!)

Programma van de opleiding Front End Wordpress Developer

HTML5 en CSS3 Basis

Dag 1

College 1

• Pagina's structuren met semantische HTML
• Teksten structureren
• Metadata gebruiken om browsers en zoekmachines informatie over de content op de pagina te geven

College 2

• Media insluiten
• Hyperlinks
• Tabellen opstellen
• Introductie Formulieren

Dag 2

College 1

• Prioriteer je geschreven styling met CSS Cascade
• Voeg CSS toe aan HTML met CSS Selectors
• CSS Box Model: HTML element layout
• CSS Display

College 2

• Introductie CSS Grid
• Introductie CSS Flex
• Introductie AI in Javascript

JavaScript Basis

Dag 1 College 1

• De taal leren kennen: wat is JavaScript en wat kan het doen?
• Variabelen en datatypen
• Arrays, Objecten
• Operators (Logical en Comparison)
• Conditional statements (if else)
• Loops (for, while)
• Functies en methoden

College 2

• Inleiding Document Object Model (DOM)
• Werken met DOM
• HTML pagina's tot leven brengen

Dag 2 College 3

• Verder met DOM-scripting
• Events en eventlisteners maken
• Animaties maken en effecten creëren

College 4

• Introductie AJAX-technologie
• JSON-dataformaat leren gebruiken
• De mogelijkheden van AI binnen Javascript

HTML5 en CSS3 Gevorderd

Dag 1

College 1

• Werken met Formulieren
• Metadata nesten in HTML: Microdata

College 2

• Werken met Web API's
• HTMLMediaElement
• Elementen tekenen op de pagina met HTML Canvas
• Elementen Drag and Drop
• SessionStorage en localStorage om informatie te bewaren
• GeoLocation gebruiken om positie te bepalen

Dag 2

College 1

• Leer elementen animeren en bewegen met:
  • CSS Transitions 
  • CSS Transformations
  • CSS Animations

College 2

• Maak responsieve webpaginas met Responsive Web Design - mobile first
• Introductie SASS (CSS met super powers!)
• AI inzetten om efficiënter te werken

WordPress Basis

Dag 1  Ochtend 

• Wat is WordPress, en waarin onderscheidt het zich ten opzichte van andere systemen?
• WordPress verkennen: dashboard, scherminstellingen, admin-bar, navigatiemenu, front- en backend
• De belangrijkste stappen die bij elke nieuwe site van belang zijn: website titel, slogan, taal, tijdzone en permalinks
• De verschillende Post Types: de keuzes en publicatiemogelijkheden
• Het plaatsen en ordenen van berichten

  Middag

• Werken met blokken en patronen (bijv. media toevoegen)
• Menu’s aanmaken voor interne en externe pagina’s
• Widgets gebruiken en beheren

Dag 2  Ochtend

• Thema’s kiezen: gratis vs. premium
• Aanpassingen doen via de Customizer
• Contactpagina maken met formulier
• Bezoekersgedrag meten via statistieken-plugins

Middag

• Gebruikersbeheer: meerdere mensen aan de site laten werken
• Privacy-instellingen: cookiemelding en privacyverklaring
• Content exporteren en importeren
• Een website planmatig opbouwen en optimaliseren

WordPress gevorderd

Ochtend

• Verschil in de rol van content beheerder versus website beheerder
• Domeinnaamregistratie: waar moet je op letten?
• Het filesystem en het belang van de database en het bestand wp-config.php
• Wat is FTP en waar heb je het voor nodig?
• Het installeren en verplaatsen van een website
• De beveiliging van je website
• Back-ups maken en terugzetten
• Hoe pas je de styling van je thema aan, waarom moet je altijd een ‘child theme’ gebruiken en hoe pas je HTML en CSS aan via de editor?

Middag

• Hoe installeer en configureer je WordPress plugins en waar moet je op letten?
• Welke mogelijkheden zijn er om AI te integreren, welke plugins zijn er?
• Waarom is 'onder water' kijken belangrijk en welke functie heeft de browser Inspector?
• Eenvoudige CSS aanpassingen doen via de Extra CSS in de Customizer
• Een Child thema maken en het hoofdthema aanpassen
• De mogelijkheden van de nieuwe generatie Block thema's

WordPress Code

Ochtend

• LocalWP is dé perfecte ontwikkeltool om WordPress sites te clonen, exporteren naar zip, blueprints te maken, we bespreken de ins & outs
• Wat is de syntax van PHP en welke functie vervult het in WordPress
• Hoe zit het filesystem in elkaar, de mapstructuur en de functie van het bestand wp-config.php
• De database editor van LocalWP heet Adminer, op je hosting gebruik je vaak Phpmyadmin

Middag

• Leer de basis van de webtalen HTML, CSS en JS door onder water te kijken met de Inspector
• Met een plugin gaan we hooks plaatsen in WordPress, zodat we minder plugins nodig hebben
• Ontdek de kracht van snippets waarmee je aanpassingen kunt doen in WordPress zonder dat je dit in templatebestanden hoeft te doen
• Thema aanpassingen uitvoeren, child theming en AI code snippets laten schrijven

WordPress Bouw je eigen Thema

Dag 1 Ochtend

• Introductie tot Breakdance en vergelijking met Elementor
• Installatie & configuratie via LocalWP
• Werken met Design Sets: import en toepassingen
• Inzicht in Global Settings en hoe je die slim inzet

Middag

• Fonts instellen via Presets (Heading & Body)
• Header & Footer analyseren en aanpassen
• Vrije opdracht met alternatieve Design Set

Dag 2  Ochtend

• Werken met Popups
• Verkennen van Basis elementen (bouwstenen van Breakdance)
• Verdieping in Block-, Site-, Advanced- en Form-elementen

Middag

• Eigen site bouwen vanaf een blanco canvas
• Alles toepassen: Headers, Footers, Templates, Global instellingen
• Maintenance modus en performance verbeteren
• Je ontwerp omzetten naar een Design Set om te hergebruiken
• Werken met codefragmenten (Header/Footer) en belangrijke tools
• UI aanpassen via Preferences & lokaal lettertypes installeren (.woff/.woff2)