Varendonck College is a school with over 2000 students in the south of The Netherlands. The school offers special certificates for extra-curricular activities to graduates.

To show the student’s accomplishments the school was interested in a dedicated website. But additional functionality was requested:

  • Management of the extra-curricular activities.
  • Management of the students who participate.
  • Printing of the certificates.

Designing the site

We suspected the front-end would be used mainly by students (vanity searches, etc.) & others who are interested in the students (prospective employers, universities, etc.). So the home page focuses on a list of students, filterable by name. The filter is lightning fast, see for yourself.

Varendonck certificaten home
The home page: a list of students filterable by name.

By clicking on a student’s name, a list of activities is displayed, each activity linked to an explanation. Hella minimalisticalous, fast & easy to use.

There’s also a statistics page with a few charts displaying the increase in participating students over the years.

Varendonck certificaten student page
Student page: a list of extra-curricular activities

Designing the admin section

Data entry is super-boring. Fact.

Every year the school’s secretaries need to add students, activities & connect these together. So the work-flow needed to be well thought out. A few features were added, such as filters, search, multiple edit & print, to make their life a bit easier.

Varendonck certiticaten - Admin home
The home page of the management section

For example, it is possible to print all certificates from a single school year in 3 clicks.

Building the application

The server-side code is built on top of CodeIgniter: a single model, a couple of views and a handful controllers. I integrated the TCPDF library to create the PDF certificates.

The front-end development process was a bit more exciting. To create the CSS, I used SASS/Compass with the Susy plugin to help set up the responsive layout.

Microdata is used to markup the students, their certificates and their relationship to the school.

Varendonck certificaten - chart
SVG Charts made with D3.js

The SVG charts are made with d3.js. Lots of fun! Modernizr is used for feature detection. The almost obligatory jQuery framework is used for a few AJAX calls and DOM manipulation, TinyMCE for the WYSIWYG in the back-end and require.js to glue everything together in the appropriate order & places.

Check the site