Tutorials opdracht

Zoek jouw oplossing online

Inleverformulier

Webdesign en websites maken leer je het beste van het internet zelf. Online staat enorm veel informatie. Waarschijnlijk is alles wat jij bedenkt al eens gemaakt. Of iets dat er op lijkt. Er zijn veel tutorials online te vinden waar jij wat aan hebt.

Onderstaande opdracht bestaat uit 2 delen:

  • Opdracht 1: Doe met z’n tweeën een tutorial
  • Opdracht 2: Vertel aan een derde klasgenoot wat jij hebt geleerd en hoe je dat hebt gedaan.

Leerdoel:

  • Online zoeken en vinden van oplossingen
  • Zelfstudie
  • Delen van jouw kennis
  • Technisch vaardiger worden met webdesign

OPDRACHT 1:

Deze opdracht doe je met z’n tweeën. Probeer geen hulp van anderen te vragen.

  1. Zoek online een tutorial over een techniek of methode waar jullie meer over te weten willen komen. Inspiratie staat hieronder.
  2. Taakverdeling:
    • Eén student volgt de tutorial. Hij/zij programmeert de techniek. Het resultaat is een werkende pagina met jullie gekozen techniek.
    • De andere student maakt het verslag. Jullie slaan dit verslag allebei op op je eigen computer. Je hebt dit verslag volgende les nodig.
      Beschrijf…

      • wat jullie maken en waar de informatie vandaan komt. (de website dus)
      • waarom jullie deze techniek gekozen hebben
      • hoe jullie het hebben gemaakt
        • wat de techniek is
        • wat de genomen stappen zijn
        • wat lastig is en wat goed te doen

Beoordeling:

Het cijfer is afhankelijk van de mate van technische uitdaging die jullie jezelf hebben gegeven én in hoeverre jullie de techniek werkend hebben gekregen zonder hulp van andere studenten of de docent. Jullie krijgen beide hetzelfde cijfer.

  • Basis (6): Jullie volgen een eenvoudige tutorial. Op jullie pagina werkt de techniek die jullie hebben onderzocht.
  • Gevorderd (8): Jullie volgen een gecompliceerde tutorial. Op jullie pagina werkt de techniek die jullie hebben onderzocht.
  • Excellent (10): Het resultaat werkt technisch perfect en is ook nog mooi opgemaakt. Probeer je pagina op te maken met CSS (kleur/font/etc…)

Resultaat

  • Een werkende HTML pagina waar jullie techniek te zien is.
  • Een beschrijving van alle genomen stappen in een verslag.
  • Op de HTML pagina staan jullie beide namen (voor en achternaam) en een link naar de tutorial of website waar jullie je informatie hebben gevonden.
  • Zet deze pagina online op een van jullie hosts van het Ma. Vul jullie namen, de website van jullie tutorial en de link in in het inleverformulier.

OPDRACHT 2:

Presentatie klassikaal

Presenteer met jouw teamgenoot het resultaat van jullie tutorial. Jullie presentatie bestaat uit de volgende onderdelen:

  • Wat heb je gemaakt?
  • Waarom kozen jullie voor deze tutorial?
  • Was het makkelijk/moeilijk?
  • Wanneer pas je dit toe, wanneer gebruik je deze techniek?
  • Denk je dat je dit vaker gaat gebruiken?
  • Toon het proces: wat moest je doen/gebruiken om te maken wat je hebt gemaakt
  • Tijdens je presentatie toon je stukjes code (inspecteer element) en vertelt welke code er nodig. Welk stukje code is belangrijk voor wat jij hebt gemaakt.

Inspiratie

Denk bijvoorbeeld aan:

  • Dropdown menu met 2 of meer niveaus
  • Button met animatie bij een hover
  • SVG in CSS
  • Animaties in CSS
  • technieken om een site SEO te maken
  • Afbeelding dat vergroot nadat je er op klikt
  • Video als achtergrond
  • CSS Flexbox
  • etc..

Een aantal sites met tutorials: