Doel van de opdracht:
Open Visual Studio Code of Dreamweaver.
Maak een nieuwe map op je computer voor al je webprojecten en noem deze bijvoorbeeld webprojecten.
Binnen deze webprojecten-map maak je een nieuwe map aan voor deze oefening en noem je deze kleurpsychologie-oefening.
Binnen de map kleurpsychologie-oefening maak je twee submappen aan:
styles: Hierin bewaar je al je CSS-bestanden.images: Hierin bewaar je eventuele afbeeldingen die je gebruikt in je project.Open je editor en maak een nieuw HTML-bestand aan. Sla dit bestand op in de map kleurpsychologie-oefening en geef het de naam index.html.
Voeg de volgende code toe aan dit bestand:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mijn Kleur en Ik</title>
<link rel="stylesheet" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Mijn Kleur en Ik</h1>
<p>Welkom op mijn eerste webpagina! Hieronder zie je mijn gekozen kleur en lees je waarom deze kleur bij mij past volgens de kleurenpsychologie van Carl Gustav Jung.</p>
</body>
</html>Voeg in de <body>-sectie een nieuwe sectie toe waarin je je gekozen kleur vermeldt en beschrijft waarom deze kleur bij jou past:
<h2>Mijn Gekozen Kleur</h2>
<p>Ik heb de kleur blauw gekozen. Blauw staat volgens Carl Gustav Jung voor rust, stabiliteit en betrouwbaarheid. Deze eigenschappen vind ik belangrijk omdat ik me vaak rustig en geconcentreerd voel wanneer ik creatief bezig ben.</p>Zoek op Pexels.com naar afbeeldingen waarin jouw gekozen kleur prominent aanwezig is. Download de afbeeldingen en sla ze op in de map images. Voeg de afbeeldingen toe aan je HTML-bestand:
<img src="images/jouw-kleur.jpg" alt="Beschrijving van de foto met jouw gekozen kleur">Open je editor en maak een nieuw CSS-bestand aan. Sla dit bestand op in de map styles en geef het de naam styles.css.
Voeg de volgende CSS-code toe om een ton sur ton of analoge kleurharmonie te creëren:
body {
background-color: #f0f4ff; /* Lichte tint blauw */
font-family: 'Roboto', sans-serif;
color: #003366; /* Diepe tint blauw voor de tekst */
text-align: center;
margin: 20px;
max-width: 1200px; /* Responsieve breedte */
padding: 20px;
}
h1 {
font-family: 'Lora', serif;
color: #002244; /* Diepe tint blauw */
font-size: 2.5rem;
margin-bottom: 10px;
}
h2 {
font-family: 'Lora', serif;
color: #004488; /* Harmonieus met de achtergrondkleur */
font-size: 2rem;
}
p {
font-size: 1.2rem;
line-height: 1.6;
color: #003366;
}
img {
max-width: 100%;
height: auto;
margin: 1rem;
}
/* Simpele media query voor kleinere schermen */
@media (max-width: 600px) {
h1, h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
}
/* Experiment: Wissel de kleuren bij het verkleinen van het scherm */
@media (max-width: 600px) {
body {
background-color: #003366; /* Donkere achtergrondkleur */
color: #f0f4ff; /* Lichtere tekstkleur */
}
h1, h2 {
color: #f0f4ff; /* Lichtere kleur voor koppen */
}
}Nu je de basisstructuur van je webpagina hebt gemaakt, is het tijd om te experimenteren met de opmaak en het ontwerp! CSS maakt het mogelijk om verschillende stijlen toe te passen afhankelijk van het schermformaat. Dit betekent dat je de look van je pagina kunt aanpassen voor kleinere schermen, zoals smartphones of tablets, en voor grotere schermen, zoals computers of laptops.
Opdracht: Experimenteer met het wisselen van de achtergrondkleur en tekstkleur wanneer het scherm kleiner wordt. Dit kun je doen door gebruik te maken van media queries. Media queries laten je CSS reageren op de breedte van het scherm, zodat de stijl van de pagina verandert naarmate het scherm kleiner of groter wordt.
Hier zijn enkele ideeën om te proberen:
<h1> en <h2>) aan zodat ze beter leesbaar zijn op een donkere achtergrond.Hier is een voorbeeld van een media query die je kunt toevoegen aan je CSS-bestand:
/* Media query voor schermen kleiner dan 600 pixels breed */
@media (max-width: 600px) {
body {
background-color: #003366; /* Donkere achtergrondkleur */
color: #f0f4ff; /* Lichtere tekstkleur */
}
h1, h2 {
color: #f0f4ff; /* Lichtere kleur voor koppen */
}
p {
font-size: 1rem; /* Kleiner lettertype voor mobiele schermen */
}
}In dit voorbeeld wordt de achtergrondkleur donkerblauw (#003366) wanneer het scherm smaller is dan 600 pixels, en de tekstkleur wordt lichter (#f0f4ff). Dit zorgt ervoor dat je webpagina goed leesbaar blijft op mobiele apparaten. Je kunt ook het lettertype kleiner maken, zoals in het voorbeeld voor de paragrafen (p).
Tip: Speel met de verschillende kleuropties en kijk wat het beste werkt voor jouw ontwerp! Websites zoals Color Codes kunnen je helpen bij het vinden van de juiste kleurencombinaties. Probeer verschillende combinaties uit en zie hoe ze je webpagina een andere uitstraling geven op verschillende schermformaten.
Vergeet niet om steeds je wijzigingen in de browser te testen! Bekijk hoe je pagina eruitziet op zowel grote als kleine schermen en optimaliseer waar nodig.
Schrijf onder je gekozen kleur een korte uitleg waarin je beschrijft waarom deze kleur bij jou past volgens de kleurenpsychologie van Carl Gustav Jung.
Zorg ervoor dat je alle bestanden correct opslaat en in de juiste mappen hebt geplaatst.
Als je klaar bent, lever je de hele map kleurpsychologie-oefening in door deze bijvoorbeeld te uploaden naar een gedeelde inlevermap.
Na het voltooien van de opdracht, denk na over het volgende:
Tip: Speel gerust met verschillende kleuren en CSS-regels om je pagina verder te personaliseren! Veel succes met het maken van je eerste webpagina!