diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..bf43b46f --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +juulsdomein.nl \ No newline at end of file diff --git a/IMG_3798.JPG b/IMG_3798.JPG new file mode 100644 index 00000000..9a842c52 Binary files /dev/null and b/IMG_3798.JPG differ diff --git a/README.md b/README.md index 0bb57685..d6a09892 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,294 @@ + # Model Het staat model voor digitale tuintjes welke bij 'Het web is voor iedereen' door studenten worden gemaakt. ## Learning Log -### [...] +### 16 september +Mijn website nu: + +Scherm­afbeelding 2026-09-16 om 14 16 38 +Scherm­afbeelding 2026-09-16 om 14 16 59 +Scherm­afbeelding 2026-09-16 om 14 16 43 + + +checkout: + +3 gestalt principes: +- contrast: Je kan met contrast laten zien dat elementen verschillend zijn. Ook kan je met contrast text leesbaarder maken. +- balans: Er is een eerlijke verdeling in visuele signalen. +- hierarchy: Het belangrijkste is en grootste weergegeven. Het is het eerste waar je naar zou moeten kijken als je op de website komt. + +Een grid bied meer mogelijkheden voor een opzet van je lay-out. Een grid is eigenlijk een column die altijd in en bepaalde volgorde staat.Ik neem het principe Hierarchy mee als een iteratie in mijn ontwerp, omdat het belangrijk is voor de duidelijkheid van mijn pagina. + +### 14 september +checkout: + + +- Een website is lelijk als hij niet meer responsive is en onduidelijk is opgesteld. +- Een goeie grid toevoegen met de juiste css. +- Ja, ik weet veel van de Webby aspecten op te noemen. + +De basis van mijn website opzet in Figma: + +Scherm­afbeelding 2026-09-14 om 19 07 30 + + + + + + + +Scherm­afbeelding 2026-09-14 om 13 14 31 +Scherm­afbeelding 2026-09-14 om 13 14 39 + + + +### 10 & 11 september + +Gradients: +Deze opdrachten heb ik al eerder gedaan, maar was het vergeten op mijn Readme te zetten. + + +Scherm­afbeelding 2026-09-14 om 13 07 54 +Scherm­afbeelding 2026-09-14 om 13 07 43 +Scherm­afbeelding 2026-09-14 om 13 07 31 +Scherm­afbeelding 2026-09-14 om 11 13 46 + + +Voortgangsgesprek feedback: +Feedback Julia +Je bent goed aan het oriënteren en begrijpen. +Je bent ook goed aan het verbeelden. Je verzamelt afbeeldingen en je bent goed aan het schetsen. +Het doen van de deepdives is essentieel voor dit blok. Dat doe je ook goed. +Je evalueert door kritisch te kijken naar bijvoorbeeld je schetsen en crazy eights. +Je bent professioneel en gestructureerd bezig. +Blijf kijken of je website Webby is, je kan dit altijd vragen bij feedback momenten. +
+ +FDND les gevolgd van Justus: +- Digital gardening is een oplossing tegen eentonigheid. Het moet ruw en niet perfect zijn. alles in je digital garden hangt samen. +- Het web voelt anders. Mensen vullen het web door formulieren en zitten niet meer zelf met hun handen aan de technologie. +- De stream is verslavend. Op deze manier kunnen bedrijven veel geld met jouw verdienen. +- Een leuk idee voor mijn website is glitters toevoegen aan de achtergrond die harden en zachter schijnen. +- Hoe maak je je website bekend? Je website posten op andere platformen. + + + +Deep Dive Grid: +[Grid generator](https://cssgridgenerator.com) + +Mijn oefeningen in Codepen: + + +Scherm­afbeelding 2026-09-11 om 16 09 06 +Scherm­afbeelding 2026-09-11 om 16 07 48 +Scherm­afbeelding 2026-09-11 om 15 29 00 +Scherm­afbeelding 2026-09-11 om 15 14 39 +Scherm­afbeelding 2026-09-11 om 14 59 15 +Scherm­afbeelding 2026-09-11 om 14 41 34 +Scherm­afbeelding 2026-09-11 om 14 39 48 +Scherm­afbeelding 2026-09-11 om 14 32 59 +Scherm­afbeelding 2026-09-11 om 14 29 41 +Scherm­afbeelding 2026-09-11 om 14 27 13 + + + +5 Mobile-first schetsen: + +Scherm­afbeelding 2026-09-11 om 12 10 10 +Scherm­afbeelding 2026-09-11 om 12 09 17 +Scherm­afbeelding 2026-09-11 om 12 09 24 +Scherm­afbeelding 2026-09-11 om 12 09 11 +Scherm­afbeelding 2026-09-11 om 12 09 00 + + + + +### 9 september +Visual Research. Ik voel mij: geïmponeerd + +Scherm­afbeelding 2026-09-09 om 15 07 47 +Wat ik heb opgemerkt:  Lelies zijn heel populair in wit, roze en de combinatie hiervan. Hun uitstraling is chic en sfeervol. Er zijn veel vloeiende patronen en lettertypes. Het gevoel liefde, plezier, respect en bewondering komt bij mij het meest naar boven. Lelies zijn vaak ook een gebaar van waardering en genegenheid. Opvallend materiaal is glas, dit had ik in de eerste instantie niet verwacht. Lelies staan wel vaak in een glazen vaas, omdat die stevig een hoog genoeg zijn om lelies in te zetten. Ik zie ook veel het gebruik van warm licht. Warm licht zorgt vaak voor veel sfeer. + +Het sfeerwoord dat bij geïmponeerd past is voor mij: levendig, chic, sfeervol, waardering, bewondering, respect en liefde. Ik herken warmtelicht, transparant materiaal, dunne lijnen, golvende bewegingen. + +Scherm­afbeelding 2026-09-09 om 15 34 50 + +Scherm­afbeelding 2026-09-09 om 15 49 22 +Scherm­afbeelding 2026-09-09 om 15 49 16 +Scherm­afbeelding 2026-09-09 om 15 49 03 +Scherm­afbeelding 2026-09-09 om 15 43 43 + +crazy 8 & beoordeling + +Scherm­afbeelding 2026-09-09 om 15 57 14 +Scherm­afbeelding 2026-09-09 om 17 19 35 +Scherm­afbeelding 2026-09-09 om 17 19 29 +Scherm­afbeelding 2026-09-09 om 17 19 21 +Scherm­afbeelding 2026-09-09 om 17 19 14 + + +Checkout: +1. Visual research in 3 stappen: +- Directe visuele beelden +- abstract visuele vertaling +- uitgangspunten opschrijven + +Ik heb nu uitgangspunten die ik vooraf niet had kunnen verzinnen. Met die uitgangspunten gingen we diverse ideeën schetsen met gebruik van crazy 8. Hierna heb ik mijn crazy 8 beoordeeld. Je werkt naar de eerste ideeën voor een opzet van je website toe. + +2. Mijn garden gaat over verschillende soorten en ontwikkelingen van lelies. Dit ga ik doen aan de hand van elegante, maar kleurrijke text, opvallende Visuals, dark/light mode, hover effecten, login/registratie. Opties zijn nog video met sound en een review mogelijkheid. + +3. Ik wil graag makkelijke klik functies toevoegen. Ook wil ik dat wat ik aan text heb kort maar krachtig maken zodat de gebruiker de aandacht er bij kan houden. Korte stukken tekst inplaats van alles bij elkaar. Als het lukt een carrousel maken. + + +### 8 september +De HTML presentatie + +Scherm­afbeelding 2026-09-09 om 13 45 36 +Scherm­afbeelding 2026-09-09 om 13 46 12 +Scherm­afbeelding 2026-09-09 om 13 46 18 +Scherm­afbeelding 2026-09-09 om 14 00 34 +Scherm­afbeelding 2026-09-09 om 13 46 38 +Scherm­afbeelding 2026-09-11 om 09 21 22 +Scherm­afbeelding 2026-09-09 om 13 47 04 + + +Deep Dive Light & Dark: + +Groot scherm + +Scherm­afbeelding 2026-09-10 om 13 30 27 +Scherm­afbeelding 2026-09-10 om 13 30 16 + +Klein scherm + +Scherm­afbeelding 2026-09-10 om 13 30 38 +Scherm­afbeelding 2026-09-10 om 13 30 52 + +Cupcake + +Scherm­afbeelding 2026-09-10 om 12 13 59 +Scherm­afbeelding 2026-09-10 om 12 13 51 + + + +Eenhoorns + +Scherm­afbeelding 2026-09-10 om 12 05 25 +Scherm­afbeelding 2026-09-10 om 12 05 13 +Scherm­afbeelding 2026-09-10 om 12 03 18 +Scherm­afbeelding 2026-09-10 om 12 03 03 + + +Oefening 1 + +Scherm­afbeelding 2026-09-09 om 22 05 21 +Scherm­afbeelding 2026-09-09 om 22 05 11 + + +Zonsondergang + +Scherm­afbeelding 2026-09-10 om 11 51 39 +Scherm­afbeelding 2026-09-10 om 11 51 55 + + +iPhone + +Scherm­afbeelding 2026-09-10 om 11 41 40 +Scherm­afbeelding 2026-09-10 om 11 42 02 + + +Hover state & focus state +Scherm­afbeelding 2026-09-10 om 14 24 26 + + + +hele website + +Scherm­afbeelding 2026-09-10 om 11 05 42 +Scherm­afbeelding 2026-09-10 om 11 03 18 + + +### 7 september +De garden and the stream & twee websites analyseren: +Scherm­afbeelding 2026-09-11 om 12 06 29 + +Scherm­afbeelding 2026-09-11 om 12 04 09 + + +1. Het is nooit af. Het is iets persoonlijker dan een reguliere website. Je maakt het niet om viraal te gaan. Een reguliere website heeft vaak een doel en regels, een digital garden hoeft dat niet te hebben. Toegangelijk zijn. + +2. De digital garden moet duidelijk zijn. Het moet een duidelijke hiërarchie hebben en er moet duidelijk staan waar je natte kan wat er in de website staat. Je moet kunnen zien dat het persoonlijk is voor iemand. De website die mij het meeste inspireerde was [ annaecook.com +](https://annaecook.com), De visuals trekt veel aandacht wat ervoor zorgt dat ik alles wilde lezen. + +3. Ik wil aan de slag gaan met het kleurthema die ik wil gebruiken tijdens mijn website, welke informatie ik er in wil zetten en hoe ik dat ga doen. + +### 4 september +Deep dive 3 Praktische css. +Mijn lelijke website: +Scherm­afbeelding 2026-09-04 om 09 17 40 + +Na de deep dive: + +Scherm­afbeelding 2026-09-04 om 11 05 20 + +Scherm­afbeelding 2026-09-04 om 11 29 59 + +Scherm­afbeelding 2026-09-04 om 11 30 11 + + + + +Ik heb mijn website hier op dark mode staan. Ik heb geleerd tijdens de les hoe ik dark mode moest instellen. De uitstraling van de website is beter geworden. +[Utopia +](https://utopia.fyi/type/calculator/?c=360,16,1.2,1440,22,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12) +[Met deze site kan je makkelijk codes samenstellen op basis van je webpagina.] + +Deep dive 4 css: fonts met kleuren en effecten. +De volgende afbeeldingen heb ik in deze deep dive geleerd te maken. +Scherm­afbeelding 2026-09-05 om 13 01 22 +Scherm­afbeelding 2026-09-05 om 12 15 33 + +Hover butto gemaakt: +Scherm­afbeelding 2026-09-05 om 13 24 25 +Scherm­afbeelding 2026-09-05 om 13 24 31 + + + + + +### 2 sept - [Workshop] +Deep dive 1 HTML & CSS Basics + +HTML is echt voor de inhoud van een website. CSS is voor de opmaak. + +Mijn vragen na het lezen van de introductie, basis webpagina' s en hallo CSS op [ internetingishard.nl ](https://internetingishard.netlify.app/html-and-css/): +Wat is het verschil tussen de color en background color? +Wat veranderd er precies van kleur? + +Color veranderd de kleur van de tekst en background-color veranderd de kleur van de achtergrond. + + +Is er een goed overzicht waar je alle HTML en CSS elementen kan zien? +De site[ HTML5 Doctor ](https://html5doctor.com/) geeft een overzicht van HTML elementen want fijn is als je nog niet alle elementen uit je hoofd weet. + + +Een Zaak die mij verwondert uit[ MDN ](https://developer.mozilla.org/en-US/): + +Je kan best wel makkelijk video's in je website toevoegen. Als eerste verwachting dacht ik dat dit heel lang zou gaan duren. Ook kan je MDN goed gebruiken om meer over CSS,HTML & Javascript te weten te komen. + + +Deep dive 2 MMD, micro-interacties, forms -[...] +We hebben hier herhaling gehad van onderdelen uit jaar 1. De affordance, feedforward, feedbackward, cue & prompt herhaalt. We hebben het gehad over micro interacties, zoals de trigger, rules, feedback & loop. Als laatst kregen we de opdracht om een papieren menu kaart online duidelijker te maken. -### 3 sept - [Workshop] +Scherm­afbeelding 2026-09-02 om 16 30 24 -[...] -### 31 aug - Kickoff +### 31 aug - kickoff -Een fork van de model repository gemaakt en gepubliceerd via mijn eigen Github omgeving. +Als eerste had ik een fork van de model repository gemaakt en gepubliceerd via mijn eigen GitHub omgeving. +Een source hosting platform is een online omgeving waar je de code van een website kan beheren, bewaren en delen. Als hosting platform heb ik gekozen voor GitHub. Je kan met GitHub Pages een website uit je repository op het web zetten. +De door mij gekozen domeinnaam is juulsdomein.nl. Ik heb deze gekoppeld aan mijn website door de DNS-instellingen aan te passen. Ik heb bijvoorbeeld de TransIP-instellingen uitgezet. Daarna kon ik mijn domeinnaam in Github Pages instellen. Mijn custos domain heb ik opgeslagen en Enforce HTTPS aan gezet. Als laatste heb ik VSCodium en Github aan elkaar gekoppeld. diff --git a/assets/style/normal.css b/assets/style/normal.css index f1b4e4ba..e5954f23 100644 --- a/assets/style/normal.css +++ b/assets/style/normal.css @@ -1,14 +1,154 @@ /* HIER KOMT JOUW CSS */ @font-face { - font-family: "Comic Relief"; - src: url(../type/ComicRelief-Regular.woff2); + font-family: "CormorantGaramond-Light"; + src: url(assets/type/CormorantGaramond-Light.ttf); font-weight: 400; font-style: normal; } +html { + color-scheme: light dark; + --color: light-dark(black, white); + --background: light-dark(white, black); + --header: light-dark(#D3ECA6, #355E3B); + --header-h1: light-dark(black, white); + --header-label: light-dark(#b6ce88, #2b4f31); + --left-column: light-dark(#D3ECA6, #355E3B); + --right-column: light-dark(#fcd5ff, #b884a7); + --main-button: light-dark(#e26d67, #eb8a85); + --webright: light-dark(#D3ECA6, #355E3B); +} + +html:has([value="light"]:checked) { + color-scheme: light; +} + +html:has([value="dark"]:checked) { + color-scheme: dark; +} + body { - font-family: "Comic Relief", system-ui; - background-color: Canvas; + font-family: "ComorantGarmond-Light", system-ui; color: CanvasText; - color-scheme: light dark; + background: var(--background); + color: var(--color); + min-height: 100vh; +} +main { + display:grid; + grid-template-columns: 6fr 1fr 1fr 15fr; + min-height: 100vh; + } + +main p { + font-size: 0.80em; +} + +article:first-child { + background-color: var(--left-column); + padding: 1em 7em 1em 2em; + display: grid; + flex-direction: column; + justify-content: left; + grid-column: 1 / 3; + grid-row: 1 / 4; + align-content: flex-start; +} + +article:first-child h2:last-of-type { + margin-top: auto; +} + +main>button { + background-color: var(--main-button); + grid-column: 2 / 4; + grid-row: 1 / 4; + width: 200px; + height: 200px; + border-radius: 9em; + position: relative; + justify-self: center; + align-self: center; +} + +article:nth-of-type(2) { + background-color: var(--right-column); + padding: 2.5em 2em; + display: grid; + flex-direction: column; + justify-content: right; + grid-column: 3 / 5; + grid-row: 1/ 4; +} + + + +header { +background: var( --header); +} + +header h1 { +color: var( --header-h1); +} + +header label:has(:checked) { +background: var( --header-label); +border-radius: 1em; +} + +header { + position:sticky; + top:0; + z-index:100; + padding:.2em .40em; + + display:flex; + justify-content:space-between; + align-items:center; + flex-wrap:wrap; + } + +header h1 { + margin:0; + } + +header form { + margin:0; + padding:0; + + display:flex; + flex-wrap:wrap; + gap:.5em; + + border:none; + } + + /* OPTIONS */ +header label { + padding:.5em; + display:flex; + place-items:center; + gap:.5em; + cursor:pointer; + } + +header input { + margin:0; + cursor:pointer; + } + +label { +display: grid; +margin-block-end: var( --whitespace-xs); +} + +label:has(input[type="checkbox"]) { +display: flex; +gap: .2em; +align-items: baseline; +} + +footer { + background: var(--webright); +} \ No newline at end of file diff --git a/assets/type/CormorantGaramond-Light.ttf b/assets/type/CormorantGaramond-Light.ttf new file mode 100644 index 00000000..ab90b42e Binary files /dev/null and b/assets/type/CormorantGaramond-Light.ttf differ diff --git a/assets/type/CormorantGaramond-Regular.ttf b/assets/type/CormorantGaramond-Regular.ttf new file mode 100644 index 00000000..65393982 Binary files /dev/null and b/assets/type/CormorantGaramond-Regular.ttf differ diff --git a/contact.html b/contact.html new file mode 100644 index 00000000..a0d8eddf --- /dev/null +++ b/contact.html @@ -0,0 +1,70 @@ + + + + + + + + + [Digitaal Tuintje van Julia Mak] + + + + + + +
+

Julia's digital garden

+ +
+ + + +
+ + +
+ +
+

Neem contact met mij op

+ Vrouw-met-blond-haar +
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 4d55a5dd..9b38f473 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ - + - [Digitaal Tuintje van ...] + [Digitaal Tuintje van Julia Mak] @@ -18,20 +18,39 @@
-

[Digitaal Tuintje van ...]

+

Julia's digital garden

-

- [Dit is de model repository, - fork deze repository op GitHub. -

+
+ + + +
@@ -39,16 +58,39 @@

[Digitaal Tuintje van ...]

-

[Voorbeeld artikel]

-

[Dit is een voorbeeld artikel tekst...]

+

Over mij

+

+ Mijn familie heeft bijna 60 jaar ervaring in de veredeling & ontwikkeling van hybride lelies. Ik weet er weinig + van en wil me hierin verdiepen. +

+ + +

De lelie

+

+ De lelie is een van de meest diverse bloem die er bestaat. Al deze + lelies zijn te verdelen in verschillende typen, zoals: Aziaat, + Oriental, Trompet en Longiflorum. Wanneer is iets een echte lelie? Een echte lelie is onderdeel van het geslacht Lilium. Hij groeit uit een bol die is opgebouwd uit overlappende schubben en produceert één of meer rechtopstaande, bebladerde stengels. De bladeren zitten verspreid langs de stengel. Een lelie heeft zes opvallende bloemblaaderen, + verdeeld over twee groepen van drie de kelkbladen en de kroonbladen. Deze lijken zo sterk op elkaar dat ze visueel meestal als één geheel worden gezien. +

+

Ontdek de mooiste lelie soorten

+ + + + +
-

31 augustus

-

Vandaag behandelden we ....

+ + + +
+
+ diff --git a/log.html b/log.html new file mode 100644 index 00000000..613408db --- /dev/null +++ b/log.html @@ -0,0 +1,87 @@ + + + + + + + + + [Digitaal Tuintje van Julia Mak] + + + + + + +
+

Julia's digital garden

+ +
+ + + +
+ + +
+ +
+
+
+ Jouw gegevens + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/oefeningen/presentatie/index.html b/oefeningen/presentatie/index.html index 2e306b4f..f8199cd9 100644 --- a/oefeningen/presentatie/index.html +++ b/oefeningen/presentatie/index.html @@ -1,96 +1,100 @@ - + + HTML presentatie - Inspiratie voor mijn digital garden - + diff --git a/oefeningen/presentatie/leliesachtergrond.svg b/oefeningen/presentatie/leliesachtergrond.svg new file mode 100644 index 00000000..7ab3b360 --- /dev/null +++ b/oefeningen/presentatie/leliesachtergrond.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/oefeningen/presentatie/leliesschuin.svg b/oefeningen/presentatie/leliesschuin.svg new file mode 100644 index 00000000..7b616a37 --- /dev/null +++ b/oefeningen/presentatie/leliesschuin.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/reviews.html b/reviews.html new file mode 100644 index 00000000..9a792557 --- /dev/null +++ b/reviews.html @@ -0,0 +1,72 @@ + + + + + + + + + [Digitaal Tuintje van Julia Mak] + + + + + + +
+

Julia's digital garden

+ +
+ + + +
+ + +
+ +
+
+

Review van Julia Mak

+

Deze website is top!! +

+
+
+ + + + + \ No newline at end of file