naddybs / look-and-feel-living-styleguide Goto Github PK

Hey girls and guy!

Jullie hebben een mooi begin gemaakt! Mooi gedaan! ik heb wat feedback voor jullie!

• Vermijdt het gebruiken van Divs, gebruik sections of articles!

• Code snippets uitlijnen met de tekst . Misschien de code gewoon laten zien inplaats van in een summary tag! 😃

• Wit maken en ook uitlijnen met de tekst of gewoon uit de summary tag halen. Voor de zekerheid even een kleurcontrast check (test) doen.

• Veranderen naar custom properties! 😃

• Consistent in jullie ontwerp. colors heeft boven padding (margin) icons niet.

• Responsive maken.

Verder hebben jullie het goed gedaan! code ziet er verder ook clean uit!😃

Zorg dat een zin niet meer dan 10 a 12 woorden heeft per regel

max-width: 30 em;

Je kan ook per regel instellen dat er 45 a 75 character per regel wordt.

Ik snap wat er gebeurd in de code maar het is handig om uitleg te geven als iemand aan jou site gaat werken wat het is

De website is niet responsief

Issue die ik vond

Bij dit voorbeeld is het niet super duidelijk wat de kleuren zijn. Hiervoor kan je dit beter laten zien door het volgende te doen

Hoe je het beste kan laten zien:

:root {
    --primary-color: #fff;
    --secondary-color: #fff;
    --tertiary-color: #fff;

    --active: #fff;
    ---disabled: #fff;

    --action-color-1: #fff;
    --action-color-2: #fff;
    --action-color-3: #fff;
    --action-color-4: #fff;
}

voor meer informatie over :root bekijk hier

PS: dit kan je in een code tag plaatsen zodat je dit op de pagina ziet

padding mist bij het uitklap van de code

Test je site op toegankelijkheid , en prestaties, hoe snel laadt je site

Zorg dat de site goede fallback fonts bevat

`font-family: "jou-font", arial, sans-serif;

Laat je eindresultaat testen door mensen in je omgeving om te onderzoeken hoe bruikbaar het is

Houdt rekening met de eindgebruiker en dat toegankelijk en makkelijk te gebruiken is voor iedeereen. Gestructureerde duidelijke navigatie, gebruik labels (wireflow)

Tips:

• Meer witruimte tussen tekst en elementen (zie foto 1)
• Tekst misschien wat groter (zie foto 2)

Tops:

• Ziet er mooi uit!
• Goed toegepast op de website
• Goed gebruik van de huisstijl kleuren

Foto 1:

Foto 2:

Clean code, gestructureerde code, niet in herhaling vallen gebruik conventies

Website ziet er prima uit alleen zijn er sommige headers die ik slecht kan zien omdat de kleur wit is en de achtergrond is light grijs achtig. Probeer hier een goeie contrast te adden.