Ontwerp en maak een responsive website voor een startup.

De instructies voor deze opdracht staan in: INSTRUCTIONS.md

Titel

De careerpage van Drukwerkdeal heeft een redesign nodig in hun nieuwe huisstijl.

Beschrijving

Responsive

De website is responsive. Ik heb voor de vacatures grid gebruikt, die bij 900px en 1200px een extra kolom vacatures toevoegen.

Ontwerpkeuzes

Als interactie op de pagina heb ik een knop gemaakt die alle vacatures togglet van zichtbaar naar onzichtbaar en weer zichtbaar. Hierdoor kan je gemakkelijker de rest van de pagina bekijken. Als feedforward heb ik gezorgd dat de knop donkerder wordt als je er op hovert.

Ik heb ook een slider gemaakt die automatisch door alle bedrijfsfoto's scrollt. Als je met je muis hovert over een van deze afbeeldingen, pauzeert het scrollen en wordt er ingezoomd op de desbetreffende afbeelding. Zo staat de pagina niet vol met losse foto's.

Ik heb een formulier toegevoegd voor de job alert.

Zie de link naar de website bij 'About'.

Kenmerken

De HTML is semantisch en is gecheckt met een HTML validator.

Met CSS heb ik een stylesheet gebruikt, vooral voor kleuren en fonts. Ik heb over het algemeen de styleguide van Drukwerkdeal gebruikt, maar hier en daar ook aanpassingen gemaakt met bijvoorbeeld headings.

Met Javascript heb ik een toggle gemaakt die informatie laat verschijnen en verdwijnen. Deze wordt aangeroepen door te klikken op de button: Toon / verberg vacatures.

Code conventies

Ademruimte en inspringen

Voor inspringen gebruik ik altijd tabs (4 spaties). Inline-level elementen staan naast elkaar en block-level elementen onder elkaar.

Volgorde en nesten van CSS selectors

CSS Selectors staan ongeveer op dezelfde volgorde als de HTML, en over het algemeen zijn de CSS selectors genest.

Nesten van media queries

Alle media queries zijn genest, zodat de CSS code overzichtelijker is. Voorbeelden van hoe ik deze media queries heb gebruikt zijn: Extra grid kolom voor vacatures bij minimaal 900px, grotere font sizes.

Naamgeving

Ik heb over het algemeen consequente naamgeving aangehouden door middel van kebab-casing aan te houden en meestal in het nederlands te formuleren.

Bronnen

Licentie

This project is licensed under the terms of the MIT license.