Web Courses Bangkok Directory

– Bootstrap
– JavaScript


A web design school needed a showcase directory site for their students.

The site has three areas: one providing templates to demo sites, another where students can access the sites they’ve created and uploaded, and last, a list of links to useful tools and resources.

The site’s three main areas


The site already had a UI design created on Adobe XD, so it was my job was to build it.

As the site was quite simple and needed to load quickly, it was decided I would hand code it using Bootstrap 4

Beautiful Bootstrap

The first section of the site, Project Sites, was relatively straight forward to build.

It consisted simply of a grid with previews and links to a number of template sites students would be building for themselves.

The design called for an overlay containing a button linking to the site to slide over the top of each preview. This was something I hadn’t attempted in Bootstrap before and proved to be a excellent introduction to using animations.

You can see the hover overlay effect bottom left

The next section, Student Sites, proved to be a lot more complicated.

As part of an exercise, students are given the task of uploading a simple site they’ve created to a server folder via FTP.

This section displays the folders they’ve created with their names in alphabetical order. In order to achieve this, i had to use some custom PHP.

I also added a JavaScript pagination control at the bottom to make it easier for students to scroll through and find their folder.

Alphabetical order and with pagination

The final section of the site, Resources, was relatively simple to build.

I used a Bootstrap accordion, customised with CSS that provided links to useful tools and resources grouped together under relevant headings

Bootstrap accordion — a phrase that only makes sense to web designers


Bootstrap proved to be a valuable tool for this project.

The simplicity of the design leant itself to hand coding the site and making it as optimised as possible.

The final result is fast-loading and intuitive to use.

Simple and direct