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

• Media toevoegen en beheren: waar moet je op letten?
• Met menu’s werken
• Widgets gebruiken
• Het maximale uit patronen blokken halen
• Instellingen toepassen

Dag 2  Ochtend

• Thema's gebruiken en customizen
• Welke thema's kun je allemaal gebruiken en waar haal je ze vandaan?
• Functies toevoegen met handige plugins, zoals een contactformulier en webstatistieken

Middag

• Hoe werkt gebruikersmanagement?
• WordPress & privacy
• Content exporteren naar een andere WordPress website
• Hoe kun je AI gebruiken om content te ontwikkelen?
• Het meest logische stappenplan voor de ontwikkeling van een website

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

• Een WordPress website installeren via LocalWP en de mogelijkheden hiervan (PHP, MySQL versie, clonen, exporteren naar zip, blueprints)
• Server informatie en server environment
• Meer over de database editor (PHPMyAdmin of Adminer)
• Inzoomen op queries, templates en structurele stacking om per weergave de vormgeving te kunnen tweaken

Middag

• Werken met de inspector om met CSS te tweaken
• Tweaken met HTML en PHP
• Ingrijpen in de WordPress loop met een filter of action
• Code snippets gebruiken om specifieke functies toe te voegen
• Advanced Custom Fields
• Zelf aan de slag met het aanpassen van een plugin
• Een plugin ontwikkelen met AI
• Meer over het bestand theme.json

WordPress Bouw je eigen Thema

Dag 1 Ochtend

• WordPress installeren met LocalWP
• Wat kun je allemaal met Oxygenbuilder?
• De plugin installeren en configureren
• Oxygenbuilder verkennen: ontdek de meest effectieve workflow
• Een website installeren via de Oxygen Design Library
• De structuur van Design Set

Middag

• Een Design Set of thema ontwikkelen: zo pak je het aan
• Views bouwen voor een pagina: bericht of archief
• Over-erving (inherit design from): het type content waar een view op van toepassing is

Dag 2  Ochtend

• Views bouwen voor de homepage, 404 en zoekresultaat-pagina
• De kracht van Global styles
• Meer mogelijkheden van Design Sets

Middag

• Custom Post Type gebruiken en een eigen, specifiek detailvenster ontwikkelen met Advanced Custom Fields
• Een site bouwen met een maatwerk thema
• Reusable Parts voor eenheid in je design
• AI toepassen om content te ontwikkelen
• Praktijkopdracht: je eigen site ontwikkelen

JavaScript Gevorderd

Dag 1 College 1

• Scope & Closures
• Moderne JS Syntax (destructuring, arrow functions, spread- & rest operators)

College 2

• Asynchronous JavaScript
• Scheduling, Callbacks
• APIs & HTTP requests
• Promises
• Error handling

Dag 2 College 1

• JavaScript-modules
• Package management
• Werken met Objects (gevorderd)
• De mogelijkheden van AI om je werk te versnellen

College 2

• Object Orientated Programming
• Functional Programming