Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

Opdracht gever

Beschrijving

Gebruik

kenmerken

checklist

De opdracht gever voor ons project van sprint 6 is Jesse de Vries (Lead Developer bij Lifely)

Lifely is een innovatiebureau. We helpen organisaties de juiste technologische stappen te zetten in met onze experts op diverse gebieden. Binnen die propositie willen we machine learning lanceren

Lifely heeft een webpagina nodig waar uitleg Staat over hun AI sprint. Hierbij willen ze ook dat je op deze pagina als gebruiker een afspraak met ze kan maken.

Als student front-ender werk ik met de Development life cycle wanneer ik bezig ben met een nieuw project.
De development life cycle zorgt ervoor dat wij studenten overzichtelijk werken en een goed eind resultaat opleveren.

Bij analyse hebben we een debriefing met bijvoorbeeld de uitleg over de opdracht
https://github.com/J3SS3HVA/the-startup-responsive-interactieve-website/wiki/1.-Analyse,

een ontwerp fase waar alle schetsen komen (breakdown/ wireflow schetsen)
https://github.com/J3SS3HVA/the-startup-responsive-interactieve-website/wiki/2.-ontwerp,

in de bouw fase word uitgelegd hoe mijn code eruit ziet en wat ik daarvoor gebruikt hebt
https://github.com/J3SS3HVA/the-startup-responsive-interactieve-website/wiki/3.-bouwen

Bij intergreren vertel ik hoe ik mijn werk online zet en beschrijf ik wat ik in de commit schrijf
https://github.com/J3SS3HVA/the-startup-responsive-interactieve-website/wiki/4.-intergreren

Als laatst bij het test pagina waar je bijvoorbeeld de user test vind. daarin word beschreven wat de interacties zijn en hoe een gebruiker die moet uitvoeren
https://github.com/J3SS3HVA/the-startup-responsive-interactieve-website/wiki/5.-testen

De website die ik uiteindelijk heb gemaakt begint met een introductie waar staat wat je in deze pagina kan verwachten. Daarna Vind je korte uitleg over wat een Ai sprint eigelijk is. Vervolgens vind je een korte stappen lijst waarin je alles vind over het samen werken met lifely. Daarna vind je nog 2 secties over hun cases en een sectie waar je meer informatie kan halen over AI.

Voor deze pagina zijn er ook 2 interacties gemaakt

in de introductie Sectie vind je een animated button die vervolgens een sectie opent met daarin een calender waar je uiteindelijk een afspraak met lifely kan maken. In de Calender kan je kiezen op welke dag en hoelaat. als laatst voer je je contact gegevens in om uiteindelijk een afspraak te maken met lifely.

De navigatie balk heeft een menu button die de Nav menu opent en sluit. in de Nav Menu vind je linkes naar alle andere pagina's van hun website

De structuur in mijn html is over het algemeen hetzelfde als elk ander project. Het is een simpele code die nit altever inspringt en per sectie een klein beetje aandem ruimte heeft (enter), De css daarintegen is ook iets anders gedaan dan normaal. Ik heb dit keer heel wijnig met classes en id's gewerkt en gebruikte in plaats daarvan paths naar het element zoals dit main section:nth-child(5) div:last-child. Als laatst is de JavaScript vrij klein omdat ik voor dit project 2 simpele ineracties heb gebruikt (button die de schdule section opent / menu button die de menu opent). Beide interacties bestaan dus uit buttons die een class geven aan de menu en schedule section die weer weg gaan als je nog een keer op de buttons klikt.

Voor dit project zijn alle belangrijke dingen verwerkt in mijn project

✅ . Volledige mobile first pagina . Responsive voor alle formaten . styling . Belangrijke interacties (menu, schedule)

Helaas is niet alles wat ik wil in dit project af, gellukig zijn het onderdelen die niet een must of should have zijn

❌ . main line wel in webpagina maar niet 100% responsive . 1 interactie die ik wilde maken waarbij de 2 case section in een mini carousel komen

This project is licensed under the terms of the MIT license.