byvicari.ca: Building a Course Organizer
MDST-3610 Web Design course project, Lakehead University, Fall 2026
Result: A live WordPress site that puts my course pages and due dates in one place, with body text at a 14.11:1 contrast ratio and a menu that works on phones and by keyboard.
The Problem
As a student taking several courses, my course information and due dates were spread across different places. There was no single page where I could check what was due and when.
What I did
Next I planned the structure. I ran an open card sort of my site content and turned the groups into a sitemap. The sitemap became three main pages. Home, Due Dates, and Courses, with a page for each course (ENGL 3919 and MDST 3610) nested under Courses. I built these pages in WordPress and connected them to a main navigation menu.
Then I chose a theme. I committed to Blocksy because it works well with the block editor. In testing, the courses dropdown worked, the mobile menu was easy to use, and the menu could be navigated by keyboard.
After that I worked on legibility. I paired Lexend for headlings with Atkinson Hyperlegible for body text, on a 1.333 type scale. I reduced my palette to three colours. Because colour alone shouldn’t signal a link, I underlined body links with custom CSS.
The Result
Body text has a contrast ratio of 14.11:1, and links and buttons have 8.02:1, both well above the WCAG AA minimum of 4.5:1. The navigation works on a phone and with a keyboard. I now have one place to check my courses and deadlines. The biggest lesson from this project was that planning structure before styling made every later decision faster.