moonlightlizaa / lifely-artificial-intelligence

Ontwerp en maak een responsive website voor een startup.

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

Lifely: Getting Started with Artificial Intelligence

Getting Started with Artificial Intelligence

Lifely heeft een nieuwe web page nodig voor de website waarmee de “AI Design Sprint” wordt uitgelegd. Hiervoor hebben zij content aangeleverd, zoals tekst, afbeeldingen, illustraties, lettertypes, een huisstijl gids en natuurlijk verschillende versies van het logo.

Je mag de opdracht meer zien als het maken van een landingspage. De titel van de pagina is “Getting Started with Artificial Intelligence”. Op de pagina kan je ook een afspraak inplannen met een afspraak kalender (Het is niet verplicht om deze te maken, maar het zijn wel bonuspunten als het je lukt).

Inhoudsopgave 🌷

• De opdrachtgever: Lifely
• Kenmerken website
• Creatief Process

De opdrachtgever: Lifely

Lifely werkt aan verschillende soorten projecten. Zo heeft Lifely bijvoorbeeld een app gemaakt voor het ministerie van defensie waarmee de boekhouding van onderhoud voor verschillende voertuigen simpel kan worden bijgehouden. Ook heeft Lifely een app gemaakt voor de HVA. Het gaat hierbij om een app om makkelijk info over jouw opleiding te vinden zoals roosters of beoordelingen.

Lifely's doelgroep zijn voornamelijk bedrijven die behoeftig zijn in innovatie, mensen die iets willen bereiken voor de samenleving en organisaties die verstand hebben van technologie.

Kenmerken website

Er is voor dit project gebruik gemaakt van HTML, CSS en JavaScript. De website is responsive, dus je zou het ook kunnen gebruiken op de telefoon, tablet of andere apparaten.

Gebruikte Tools

• Visual Studio Code
• Polypane
• Figma
• GoodNotes
• Adobe Photoshop

Creatief Process

Geïnteresseerd in het process van het maken van deze webpagina? Bekijk hier mijn wiki!

Licentie

This work is licensed under GNU GPLv3.

lifely-artificial-intelligence's Issues

Zijn dit links of buttons? :)

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/index.html#L44-L45

Je pagina is niet Engels, doe nl

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/84514288fa71cd82310194b9a62968a97b97ec43/index.html#L2

Center text

Center deze tekst in je css

Dry

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/styles/style.css#L21

Ik zie dat je 2x dezelfde font-family gebruikt, maak gebruik custom properties, zodat je jezelf niet hoeft te herhalen.

Fallback font

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/styles/style.css#L31

Maak gebruik van een fallback font als je een font-family selecteert om mogelijke problemen te voorkomen als je primaire font-family niet ingeladen kan worden. https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

<h2> gebruik

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/index.html#L38

Als je gebruik maakt van h1-h6 is het beter om deze exclusief voor headings te gebruiken. Als je tekst te lang ( denk meer dan 1 zin, meer dan 12 woorden, voel dit zelf aan) wordt is het beter om gebruik te maken van een andere tag zoals een

.

// Cases

Ik heb nog niet de cases toegevoegd

Deze kan in de head, omdat je "defer" gebruikt.

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/index.html#L50

geen alt tekst

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/84514288fa71cd82310194b9a62968a97b97ec43/index.html#L36

Gebruik bij img geen px maar em of rem

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/styles/style.css#L71-L72

Global CSS

Ik zie bijvoorbeeld dat je Font-family en color text vaker hernoemt in de css. Maar als een kopje maakt met
" * { font-family:.. & Color:.... } " dan wordt het gelijk in de hele pagina aangepast. Ook wel Global.CSS. (Te vinden in je CSS folder. Regels 31, 85).

zet custom properties

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/84514288fa71cd82310194b9a62968a97b97ec43/styles/style.css#L21

// Kalender werkt nog niet

Je kan geen afspraak maken.

// Footer is nog niet compleet

gebruik betere namen

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/84514288fa71cd82310194b9a62968a97b97ec43/styles/style.css#L3-L11

Let op de taal van je document :)

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/index.html#L2

Dry

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/styles/style.css#L58

De line-height gebruik je ook meerdere malen, deze kun je plaatsen in je root:

BR weg, gebruik CSS.

https://github.com/moonlightlizaa/the-startup-responsive-interactieve-website/blob/659525be517d47f91c6698d1af8b4e6986d1c871/index.html#L22

// Read more is er nog niet