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: Adobe XD in vogelvlucht
  • Lagen
  • Gereedschap
  • Tekengebieden instellen
  • De indeling aanpassen voor tablets en mobiele telefoons
  • Foto's importeren en bijsnijden
  • Een 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)
  • De gratis iconen en bestanden van Adobe gebruiken
  • 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
  • Voice prototyping
  • XD-bestanden delen
  • Een opmerking plaatsen

College 4

  • Werken aan je praktijkopdracht
  • Je klikbare app of website presenteren

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?

Praktijkgerichte trainingen

Je leert het snelst door te doen. Daarom geven we geen hoorcolleges, maar zetten we je aan het werk. Aan de hand van prikkelende opdrachten en praktijkcases doe je inzichten op die je direct kunt toepassen. Ook krijg je de ruimte om je eigen vragen te stellen. Zo ga je gegarandeerd naar huis met kennis waar je echt iets aan hebt.

Inspirerende locatie

Uit welke richting je ook komt, onze trainingslocatie is makkelijk te bereiken. We zitten pal naast Utrecht Centraal, met om de hoek een parkeergarage. De trainingsruimtes zijn licht, kleurrijk en voorzien van handige faciliteiten - zoals whitewalls voor een brainstorm. Zo stimuleren we concentratie, creativiteit en samenwerking.

Voor elk budget

We willen dat iedereen goede trainingen kan volgen. Niet alleen de marketeer bij een grote corporatie, maar ook freelancers, ondernemers en non-profit professionals. Daarom hanteren we dynamische prijzen. Boek je slim (heel vroeg, of juist last minute), dan betaal je voor onze trainingen de laagste prijs in de markt.

CF-community

Volg je een training, dan ben je automatisch lid van de CF-community. Daarmee krijg je toegang tot mooie evenementen, zoals gratis inspiratiesessies en een jaarlijkse trip naar het Google-hoofdkantoor in Dublin. Ook krijg je 50% korting op alle In a Day-events, zoals Growth hacking in a day en Design thinking in a day.