Archief - Eerste website

Hey,

aangezien ik dit jaar aan mijn eerste jaar Toegepaste Informatica begonnen ben,
moest ik voor het vak WebDesign een statische website maken. Moest dus niets te ingewikkeld zijn,
aangezien we nog maar 'beginners' zijn ;-)

Hieronder is het resultaat hiervan,
graag had ik jullie mening gehad van wat er beter kan aan de site !
Zal proberen deze zo veel mogelijk aan te passen, aangezien ik er zeker van ben dat jullie dit beter kunnen als mij ;-)

r0457573.webontwerp.khleuven.be/website

Mvg

Thomas

Eventuele schrijffouten binnen de website worden later nog weggefilterd.

Niet slecht voor een beginner!

- Uw Google font wordt niet geladen hier in Chrome. Wordt opgelost door van uw import een https te maken.
- lettertype veel te groot. Probeer 14px
- Normaal wordt er om paragrafen te scheiden een margin gebruikt, geen padding zoals jij doet
- nav li:first-child {margin-top: 2em;} -> weg. Zet die margin op uw "nav" element
- Persoonlijk vind ik schuine box-shadows maar zelden mooi. Mooier vind ik bij jouw ontwerp bv deze: box-shadow: 0 0 5px rgba(166, 166, 166, 0.5);
- "Mobiel menu" is niet mooi vorm gegeven. Kan je meer mee doen
- je hebt ergens een div ".LINKS" staan. Niet in hoofdletters zetten, dat verwart je later alleen meer. Die links ook beter in een lijst zetten
- misschien wel het meest storende (naast het lettertype): "top of page" link. Ten eerste zet je die best in't NL, ten tweede staat die daar heel lelijk, ten derde zou ik die in een "aside" stoppen. Niet vereist, maar oogt semantisch mooier in je code

Ok,

commentaar wordt zeer gewaardeerd,
eerste puntje is al aangepast, tekstgrootte ben ik me van bewust,
maar mijn leraar heeft graag alles groot en duidelijk ;-)
Zal kijken hoe ver ik het lettertype naar beneden kan zetten zonder dat hij er last van heeft.

EDIT:
- Uw Google font wordt niet geladen hier in Chrome. Wordt opgelost door van uw import een https te maken. --> DONE
- lettertype veel te groot. Probeer 14px --> DONE
- Normaal wordt er om paragrafen te scheiden een margin gebruikt, geen padding zoals jij doet --> DONE
- nav li:first-child {margin-top: 2em;} -> weg. Zet die margin op uw "nav" element --> DONE
- Persoonlijk vind ik schuine box-shadows maar zelden mooi. Mooier vind ik bij jouw ontwerp bv deze: box-shadow: 0 0 5px rgba(166, 166, 166, 0.5); --> DONE
- misschien wel het meest storende (naast het lettertype): "top of page" link. Ten eerste zet je die best in't NL, ten tweede staat die daar heel lelijk, ten derde zou ik die in een "aside" stoppen. Niet vereist, maar oogt semantisch mooier in je code --> DONE

Zeker niet slecht voor een beginner. Heb zelf ook toegepaste gedaan en in het eerste jaar webdesign heb ik al veel erger gezien. Je houdt alles mooi en sober waardoor het ook niet te druk lijkt.

Je kan je links op de modificatie-pagina een hoverkleur geven en misschien een favicon aan de website toevoegen. Zijn misschien twee minieme zaken maar het kan veel doen.

Gorthe, beide toegepast,
update van de link volgt later op de avond ;-)

1. Je site mist een favicon
2. Je nav html is broken. Je sluit je <LI> elementen niet af
3. Voorzie een footer
4. Zorg naast je css pseudo hover ook een active

Over het esthetische:

<nav>:
Maak alle LI elementen allemaal even breed, dit oogt wat chaotisch

Ik vind je mobile view best wel ok, maar mist wat afwerking

1. Left-padding (!!)
2. Top en Bottom padding op de LI
3. Left en Right border width en style op de A binnen de LI

Op zich wel duidelijk.

1. Je site mist een favicon --> Was al gedaan, maar nog niet geupdate

2. Je nav html is broken. Je sluit je <LI> elementen niet af --> is dit nodig? Heb site laten valideren bij W3C zonder fouten ( of is het omdat het met afsluiten mooier is ofzo? Had gelezen dat je op die manier toch hier en daar een paar kb kunt besparen?

3. Voorzie een footer --> Wat zou daar dan zoal in moeten komen?

4. Zorg naast je css pseudo hover ook een active --> Eventueel een voorbeeldje van wat je bedoelt? ;-)


Mobiel:

1. Left-padding (!!) --> DONE, moet dat veel zijn, of gewoon zodat het niet echt tegen de rand staat? Heb nu 8px genomen
2. Top en Bottom padding op de LI --> DONE (of is 8px te veel? ;-) )

3. Left en Right border width en style op de A binnen de LI --> Eventueel een voorbeeld van wat je bedoelt?

Hoi, sorry, zit nu in Griekenland op vakantie. Internet hier is niet wat het moet zijn dus kan niet altijd op 9lives.

Over het niet afsluiten van LI elementen. Ik ben zelf meer een back-end als front-end developer dus van zoiets krijg ik echt kippevel. Ik zou het zeker netjes afsluiten. Ik zou alles netjes afsluiten tenzij je een HELE goeie reden hebt om het niet te doen.

Ik zou in de footer vooral detail informatie plaatsen, bv logo van de site, verwijzingen naar belangrijke websites (Officiele site WoT bv), About me informatie.

Over de active, dat is wat je ziet als je effectief de knop ook hebt ingedrukt, meestal is het effect zeer klein, maar ik vind het belangrijk om de gebruikers altijd feedback te geven zodat hij weet dat hij iets gedaan heeft.

Wat ik meegeef voor die borders en paddings op de LI / A is om duidelijk te maken dat je een knop hebt maar de borders niet op elkaar te laten aansluiten (Een beetje ruimte tussen de borders). Het is maar een tip die ik meegeef hoor, zo zou ik het doen, maa zal iedereen een andere mening over hebben.

2. Je nav html is broken. Je sluit je <LI> elementen niet af --> DONE
4. Zorg naast je css pseudo hover ook een active --> DONE
3. Voorzie een footer --> DONE