Screenshot of The Hoxton homepage

Hoxton

The Hoxton website came very soon after the build of the Gleneagles theme, so we were able to take a lot of the same methodologies and learnings with us to have a more smooth development phase.

We kept everything modular by using Advanced Custom Fields, SCSS and BEM. We used Swiper.js for the carousels and we used Waypoints to handle the on scroll animations.

Screenshot of The Hoxton homepage 2

Just like Gleneagles, The Hoxton has lots of interesting modules and carousels. Since we used Swiper.js again though, it was a breeze coding them.

Screenshot of The Hoxton homepage

Both websites had to go through intensive an QA process which placed a high priority on accessibility. So on these two projects, I learned lots of valuable experience to do with making sure your code is very accessible which I believe is hugely important for a Front End Developer.

The main things we tested were:

  • The colours have enough contrast.
  • The website is mobile responsive and looks great at every breakpoint.
  • The site can be zoomed in or out without breaking.
  • The site can be navigated by keyboard throughout.
  • The site can be navigated using voice over.

They’re the main points that I can remember having to focus on. The QA was very intensive, to say the least, but it is crucial to producing quality code.

JS

Waypoints

SCSS

ACF