Opleiding Front end webdeveloper Expert

In deze 11-daagse opleiding leer je hoe je een website from scratch op kunt bouwen. Je begint met het visuele ontwerp in het programma Adobe XD, vervolgens leer je hoe je met HTML tekst kunt verwerken en met CSS de lay out kunt bewerken. Met Javascript begint het echte coderen, daarmee maak je je website responsief. Zoals je misschien weet, is Wordpress het meest gebruikte platform voor websites. Als je kennis hebt van HTML, CSS en Javascript kun je jouw Wordpress-website helemaal naar je eigen hand zetten.

Programma van de opleiding Front end webdeveloper Expert

Visual Design met Adobe XD

College 1  

  • Introductie programma
  • Lagen
  • Gereedschap
  • Tekengebieden instellen
  • De indeling aanpassen voor tablets en mobiele telefoons
  • Foto's importeren en bijsnijden
  • Afbeelding maskeren
  • Vectorafbeeldingen importeren en wijzigen
  • Lagen uitlijnen en distribueren
  • Hoeken afronden
  • Een slagschaduw toevoegen
  • Iconen maken in Adobe XD

College 2

  • Kleuren opnieuw gebruiken
  • Tekststijlen maken
  • Herhaalelementen maken
  • Symbolen (herbruikbare elementen)
  • Gebruik maken van de gratis iconen en bestanden van Adobe
  • Bestanden exporteren voor internet
  • Losse elementen exporteren
  • Tekengebieden exporteren
  • Praktijkopdracht

College 3  

  •  Korte herhaling dag 1
  • Een ontwerp veranderen in een klikbaar prototype
  • Verbindingen maken tussen tekengebieden
  • Een opname maken van een prototype
  • XD-bestanden delen
  • Een opmerking plaatsen

College 4

  • Werken aan de praktijkopdracht
  • Presenteren van je klikbare app of website

HTML5 en CSS3 Level I

College 1

  • Werking en werkwijze van HyperText Markup Language (HTML)
  • Valide document structuur, het neerzetten van een valide HTML skelet
  • Teksten structureren en  opsommingen gebruiken
  • Werken met lijsten
  • Werken met afbeeldingen
  • Werken met hyperlinks

College 2

  • Werken met tabellen
  • Clickable Imagemaps
  • Meta informatie (metatags, link, script en style)
  • Werken met formulieren
  • iFrames en het publiceren van pagina's met FTP

College 3

  • Beginnen met Cascading Style Sheets
  • CSS aan HTML koppelen
  • Werking Cascade, Inheritance, Precedence en Specificity
  • CSS terminologie en syntax
  • Selectors
  • Text, Font & List Properties

College 4

  • CSS Box Model
  • Werken met Floats
  • Positionering van elementen
  • Display en Visibility
  • Print en andere media

Javascript voor het Web

College 1

  • Inleiding
  • In JavaScript externe bestanden noteren en aanroepen
  • De taal leren kennen, aan de slag met variabelen en datatypen
  • Controlestructuren
  • Code organiseren door zelf functies te schrijven
  • Arrays
  • Objecten

College 2

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

College 3

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

College 4

  • Introductie AJAX technologie
  • JSON dataformaat leren gebruiken

HTML5 en CSS3 Level II

College 1

  • Inleiding en geschiedenis van HTML5
  • HTML5 Semantics, documenten beter structureren
  • MicroData, documenten beter doorzoekbaar maken voor zoekmachines
  • HTML5 Forms en elementen gebruiken
  • HTML5 Forms validatie gebruiken

College 2

  • Canvas, via JavaScript tekst en afbeeldingen dynamisch tonen
  • Multimedia met Audio en Video elementen
  • Positie gebruikers bepalen met GeoLocation
  • Data Storage: Client-side data bewaren
  • Offline Caching
  • Modernizr en PolyFills

College 3

  • Inleiding in CSS3, Browser Support en Vendor Prefixes
  • Nieuwe Selectors
  • Text Effects & Web Fonts
  • Nieuwe Box Model Features
  • Multiple Background Images
  • Opacity, Gradients & Patterns

College 4

  • Transitions, CSS properties gradueel veranderen in een bepaalde tijdspanne
  • Transformations, Effecten waardoor een element van vorm, grootte en positie kan veranderen
  • Animations, maak animaties van HTML elementen zonder JavaScript!
  • Media Queries en Responsive Images (Responsive WebDesign)
  • Introductie Bootstrap 4 Framework

WordPress website maken

College 1 

  • De noodzaak van een contentmanagementsysteem en de rol van WordPress
  • Verkenning van WordPress ‘out of the box’
  • Praktische bespreking van de functie van het Dashboard, de scherminstellingen, de Wordpress admin-bar, het navigatiemenu, de Frontend en Backend
  • Berichten (met categorieën, tags) en pagina’s, gebruik van de teksteditor, de attributen zoals Publiceren
  • Importeren van content
  • Werken met menu’s

College 2

  • Media toevoegen en beheren, waar moeten media aan voldoen
  • Widgets gebruiken in widget-area’s
  • Het thema aanpassen met de customizer
  • Instellingen toepassen
  • De status ‘Under Construction’

College 3

  • Wat zijn je opties bij de weergave van je WordPress website
  • Wat zijn ‘goede’ thema’s?
  • Het verschil tussen ‘freemium & premium’
  • Een thema kopen en dan?

College 4

  • Functies toevoegen met plugins zoals een contactformulier, een slider, webstatistieken enz.
  • Bespreking van een shortlist waar plugins aan moeten voldoen
  • Installatie van een aantal freemium plugins
  • De extra mogelijkheden

WordPress Beheer

College1

  • Hoe maak en hou je Wordpress veilig, wat doe je met bestanden op webservers en hoe houd je anderen buiten de deur?
  • Hoe installeer en configureer je Wordpress Plugins, welke zijn de belangrijkste en het meest populaire op dit moment, welke zijn okay en welke zeker niet?
  • Hoe installeer, configureer en update je door middel van thema's (ofwel Themes) de vormgeving van je Wordpress site?
  • Hoe wijzig je de styling van je thema, waarom moet je altijd een "Child theme" gebruiken, hoe pas je HTML & CSS aan via de editor, wat is de rol van FTP hier?
  • Hoe gebruik je media uit de mediatheek en wat doe je met media gallerijen?

College 2

  • hoe optimaliseer je eenvoudig zoekmachines (SEO) met voor de hand liggende Wordpress functies?
  • Hoe ontsluit je met menu's (header, footer of side) de content van een Wordpress website en hoe pas je de juiste Interaction Design toe?
  • Hoe kun je zogenaamde widgets in een side bar (panelen aan de zijkant) het beste gebruiken, inrichten en uitbreiden?
  • Wat zijn sliders (mooie beelden die voorbij sliden) als eye catchers? Een korte introductie
  • Hoe maak je elke nacht de noodzakelijke back-up maken van je bestanden en je database?
  • Hoe verhuis je een Wordpress website? Een korte uitleg

Op de hoogte blijven van aanbiedingen en vaknieuws?

Schrijf je in voor onze nieuwsbrief!

Bedankt!

Je bent nu ingeschreven op onze nieuwsbrief.

Waarom Competence Factory?

Inspirerende, centraal gelegen locaties

Trainingslocaties van Competence Factory liggen altijd lekker centraal; in hartje Amsterdam en pal naast station Utrecht Centraal. De ruimtes stimuleren concentratie, creativiteit en samenwerking. We willen ook graag dat je je thuis voelt, en hebben ze daarom kleurrijk ingericht en mooi verlicht. In onze ruimtes vind je bovendien grote white walls voor brainstorms.

Trainingen voor ieder budget

We willen dat iederéén goede trainingen kan volgen. Niet alleen de marketeer bij een grote corporate met een flink opleidingsbudget, maar ook de freelance ontwerper, de zelfstandig adviseur, de ondernemer en de non-profit professional. Daarom hanteren we dynamische prijzen. Wanneer je slim (heel vroeg, of juist last minute) boekt, betaal je voor onze trainingen de laagste prijs in de markt.

Bekijk onze aanbiedingen

CF community

Wanneer je een training bijwoont, ben je automatisch lid van de CF community. We organiseren mooie evenementen voor onze leden, waaronder gratis inspiratiesessies en een jaarlijkse reis naar het Google hoofdkantoor. Ook krijgen CF communityleden 50% korting op de 'In a Day' events, waaronder Growth Hacking in a day en Design Thinking in a day.

Ga naar de events