demivdm / de-voorhoede-10-jaar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fdnd-task/the-startup-responsive-interactieve-website

1.0 0.0 0.0 72 KB

Een pagina om het 10-jarige bestaan van de Voorhoede te vieren

Home Page: https://demivdm.github.io/De-Voorhoede-10-jaar/

License: GNU General Public License v3.0

CSS 20.66% HTML 79.34%

de-voorhoede-10-jaar's Introduction

De Voorhoede 10 jaar

Dit project omvat een pagina om het 10-jarige bestaan van de Voorhoede te vieren.

Inhoudsopgave

Opdrachtgever

De Voorhoede maakt web apps, websites, prototypes, tools, integraties. Daarnaast onderzoeken en adviseren, helpen en sturen ze. En ze zijn bezig met bouwen, testen, evalueren, trainen, coachen, leiden.

Beschrijving

Op deze pagina kun je highlights van de Voorhoede van de afgelopen 10 jaar bekijken. Verder kun je met het form onder in de pagina een felicitatie typen. Daarnaast is er een interview en een paar artikelen die je kunt lezen.

Kenmerken

Dit project is gemaakt met HTML en CSS. Verder staat hieronder een korte lijst met gebruikte tools en middelen.

Tools

🖥️ Visual Studio Code

🔥 Figma

✍ Pen, papier en tekentablet

Gebruikte technieken

📟 HTML

⌚ CSS

Installatie

Clone of download deze respository.
Ga naar de root directory van het project.
Open het index.html bestand, hierdoor wordt de homepagina van de website geopend.

🎩 MoSCoW checklist

Must have

✅Mobiele versie

❌Desktop versie

✅Tijdlijn

✅Foto album

✅Felicitatie formulier

Should have

❌json file om data uit te halen

Could have

❌Ballonnen animatie als je op de felicitatie knop klikt

Won't have

🦸‍♀️Nothing is impossible

tip! check mijn issues om te kijken waar ik momenteel mee bezig ben.

Licentie

This work is licensed under GNU GPLv3.

de-voorhoede-10-jaar's People

Contributors

Stargazers

de-voorhoede-10-jaar's Issues

html lang

Stel je html in een taal om Google te helpen.

html lang="nl"

Felicitatie animatie

Een animatie met ballonnen die omhoog vliegen wanneer je een felicitatie via het formulier verstuurt.

div's

https://github.com/Demivdm/the-startup-responsive-interactieve-website/blob/main/index.html#L92-L96

Probeer zo veel mogelijk divs te vermijden

Custom properties

Het moment om custom properties aan te maken is nu.
Je kan beter gelijk aan het begin een aantal op stellen.
Denk maar aan color, maten voor margin & padding, seconden voor animatie etc.

Grid kan ook op body

https://github.com/Demivdm/the-startup-responsive-interactieve-website/blob/eb3f51784aa7bf3bb15d3dca1a5f93460f51e8d4/index.html#L14

daarmee kan je de

weggooien.

https://github.com/Demivdm/the-startup-responsive-interactieve-website/blob/eb3f51784aa7bf3bb15d3dca1a5f93460f51e8d4/index.html#L2

Favicon toevoegen

Favicon op de browser tabblad

Om je website herkenbaar te maken in de browser, maak in je head een link naar het favicon.

Doe je dat doet in html doe je alsvolgt:

<link rel="icon" type="image/png" href="[url naar de afbeelding]">

Design: img width op 100%

Sommige afbeeldingen zijn breder dan de pagina met de volgende code zorg je ervoor dat dat niet gebeurt:

img {
    width: 100%;
}

Ook kan je kijken naar verschillende resolutie afbeeldingen met src en sizeset: https://html.com/attributes/img-srcset/

<div class="Yellow-hiephiep">
        <h2>Hiep hiep hoer!</h2>
        <p>Je felicitatie sturen via ons formulier, dat kan!</p>
    </div>