Web Courses Bangkok Directory
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
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.
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