From 3f61666240259c4922088ef78ee45aafcfa8209f Mon Sep 17 00:00:00 2001 From: Krijn Hoetmer Date: Sun, 6 Oct 2024 22:14:43 +0200 Subject: [PATCH] Write examples for code conventions --- docs/code-conventies.md | 75 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 69 insertions(+), 6 deletions(-) diff --git a/docs/code-conventies.md b/docs/code-conventies.md index e2ab9874..c8d88a55 100644 --- a/docs/code-conventies.md +++ b/docs/code-conventies.md @@ -20,29 +20,92 @@ houdt op je werk. In teams worden deze vaak vastgelegd, en wordt er van teamleden verwacht dat ze deze ook naleven. Sommige bedrijven leggen code conventies voor alle projecten binnen het hele bedrijf vast. -Bij FDND houden we ook een aantal _code conventies_ aan: +Bij FDND houden we ook een aantal _code conventies_ aan. Om te beginnen deze +vier: ### Ademruimte in HTML Zorg dat je je HTML netjes en consequent _inspringt_, bijvoorbeeld altijd met -4 spaties, of tabs. Je HTML heeft dus ook witruimte nodig. - -### CSS dezelfde volgorde als de HTML +4 spaties, of tabs. Je HTML heeft dus ook witruimte nodig. Als je je code +consequent schrijft, zul je merken dat je sneller gaat coderen, en makkelijker +aanpassingen kunt maken. + +#### Doe dit niet ⛔️ + +``` + + +

Eerste kop

+

Welkom op deze website.

+ + +``` + +#### Doe dit wel ✅ + +``` + + + +

Eerste kop

+

Welkom op deze website.

+ + + +``` + +### CSS selectors in dezelfde volgorde als de HTML ... +#### Doe dit niet ⛔️ + + +#### Doe dit wel ✅ + + ### CSS selectors van generiek naar specifiek ... -### Nest je media queries +#### Doe dit niet ⛔️ + + +#### Doe dit wel ✅ + +### Media Queries genest ... Ben je al wat verder, kijk dan ook eens hoe je _Container Queries_ in kunt zetten op deze manier. -### Opdracht +#### Doe dit niet ⛔️ + + +#### Doe dit wel ✅ + + + +### Opdracht met je tafel + + + +### Individuele opdracht Herschrijf (_refactor_) je eigen code aan de hand van bovenstaande code conventies. Begin met je HTML \ No newline at end of file