Whtneyas / BlokWeb

Dit is mijn website voor Front 0 end in BlokWeb

Home Page:https://whtneyas.github.io/BlokWeb/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Procesverslag

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Whitney Abrah

uitwerken voor kick-off werkgroep

Auteur:

Whitney Abrah

Je startniveau:

hier je startniveau (kies uit zwart, rood óf blauw) Rode piste

Je focus:

Ik wil me zich op surface plane focussen als ik meer tijd over heb ga ik ook responsiveness toevoegen aan mijn ontwerp

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

link naar de website die je gaat namaken óf de naam/omschrijving van je eigen ontwerp https://9292.nl/

Screenshot(s) van de eerste pagina (small screen):

image image

hier de naam van de pagina
9292 De missie van 9292 is om iedereen makkelijk en snel wegwijs te maken in het openbaar vervoer.

Screenshot(s) van de tweede pagina (small screen):

hier de naam van de pagina
image image image

Breakdownschets (week 1)

uitwerken na afloop 2e werkgroep

de hele pagina:

breakdown van de hele pagina

dynamisch deel (bijv menu):

breakdown van een dynamisch deel

wellicht nog een dynamisch deel (bijv filter):

breakdown van nog een dynamisch deel

Voortgang 1 (week 2)

uitwerken voor 1e voortgang

Stand van zaken

In week 1 heb ik samen met mijn klasgenoten voor de gesprek een meeting gehouden. Bij de meeting hebben we besproken wat we allemaal er over willen weten tijdens de gesprek met de docent. Bij het gesprek vertelde de docent wat tot nu toe voor de website moeten zoals de header, footer en wat content. Voor mijn website heb ik alleen de html code gegeschreven maar geen styling toegepast. Ik liet de docent mijn website zien. Ik was niet zo ver met mijn website omdat ik was meer gefocusd op de oefeningen die we voor de lessen moeten maken.Als ik de oefening niet snap kan ik niet verder met mijn website. Ik probeerde dus de oefening te maken zodat ik verder met mijn website kon. We hebben een tip van docent gekregen om de oefening gelijk in onze websites verwerken zodat we niet achterliepen. Als laastse concludeerde de docent door onze te vertellen wat we aan het einde van de dag /voor de volgende les af moet hebben.

Voortgang 2 (week 3)

uitwerken voor 2e voortgang

Stand van zaken

Ik zat in het begin in de verkeerde groep daardoor was ik laat maar ik over mijn website bespreken met de studentassiatanten. Ik had al Bo gevraagd om mij te helpen met een stukje code in mijn css maar volgens mij ws zij het vergeten dus zij heeft me tijdens de les daarmee geholpen. Ik was best wel ver met mijn website vergeleken met vorige week. Ik had de twee pagina gestijld met css. Ik moest alleen javascript en animatie in mijn website verwerken. Bo gaf mijn tips hoe ik op mijn website javascript en animatie toe kan passen. Wat ik merkte bij mijn klasgenoten was dat ik en stukje verder was met mijn website dan de rest. Ik dacht zelf dat ik achter liep omdat vorige week waren ze al begonnen met stijlen van hun website. Ik kreeg complimenten van de studentassistanten dat mijn website best wel leuk eruit ziet.

Toegankelijkheidstest (week 4)

Ik was niet aanwezig . ik zal een klasgenoot mijn website laten testen.

uitwerken na test in 8e voortgang

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen:

Titel eerste bevinding onleesbaar tekst

Contrast De tekst op de achtergrond was niet leesbaar dus ik heb de achtegrond (afbeelding) in photoshop bewerkt door de opacity aan te passen.

image

Hier een omschrijving van hoe het opgelost kan worden (met indien nodig een afbeelding)

Screenreader Ik heb de screen reader gebruikt op m ijn website en ik zag dat de ik de beschrijvingen van alle afbeeldingen mis. ik heb dus in mijn code de beschrijving van de afbeelding in de alt element gezet.

Slecht motoriek Ik heb elastiekjes om mijn wijs en middelvinger gedaan om te kijken hoe ik mijn website doorheen kan lopen. ik merkte dat ik kon niet snel typen met de elastiekjes om mijn vingers heen. image

Concentratie. Met de balloon in mijn linkerhand probeerde ik door mijn website heen te lopen. Ik kon wel focusen op mijn website maar ik denk als het om concentratie gaat, dan light het aan de gebruiker niet de website.

Voortgang 3 (week 4)

IK was best wel ver met mijn website.Ik heb een paar icoontjes toevoegd om de website mooier eruit te zien.

Eindgesprek (week 5)

uitwerken voor eindgesprek

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Deze week is de laatste week van frontend. Ik heb mijn code voor het laastse keer doorgenomen. Ik probeerde comments bij te voegen om mijn code duidelijker te maken voor mezelf en ook voor de docent tijdens de mondeling. Vervolgens heb ik onnodig ruimte in mijn code weggehaald om de code overzichtelijk te maken. Ik wou mijn website responsive maken als ik meer tijd over heb, maar helaas kon ik het niet doen. Ik was wel daarmee bezig maar ik wou eerst op de surface plane focusen, dan pas de responsiveness van de website.

Screenshot(s)

image

hier screenshot(s) van je eindresultaat Eerste pagina image image image image image image image

Tweede pagina image image image image image image

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).

  1. logo 9292:https://9292.nl/
  2. menu icoojntje : https://css.gg/app. ...
  3. afbeeldingen :appstore,playstore en appgallery:https://9292.nl/
  4. Voor het blokjes heb ik flex gebruikt:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  5. formulier:https://css-tricks.com/form-design/ 6.backgroundimage:https://www.w3schools.com/cssref/pr_background-image.asp

About

Dit is mijn website voor Front 0 end in BlokWeb

https://whtneyas.github.io/BlokWeb/


Languages

Language:HTML 74.7%Language:CSS 25.0%Language:JavaScript 0.3%