This is one of the earliest websites I designed and developed for real-world use back in 2018.
To develop this website, I chose to use the front-end framework Bootstrap.
In this blog post, I’ll walk you through a few key website features and sections.
Towards the end, you will find a URL link to view the website in your browser and a link to my GitHub repository for the code.
Feel free to drop a comment, ask questions, or share suggestions. Enjoy the read!
About us Section
This section is composed of two sections. Looking at it now (2024), it would have made more sense to combine them into one.
But hey, we’ve all made development mistakes in the past that we would do differently now.
The upper section features four information boxes, each containing a title, an image, and additional information revealed upon clicking the title.
To accomplish this, I combined Bootstrap’s card and accordion components.
Our Classes Section
This section features six images, each accompanied by a title and a button with a blue border. You may have noticed that anything clickable containing information on this website has a blue border, enhancing the user experience.
When you click on a button with a question, a box appears on the screen with the corresponding answer.
To accomplish a pop up, I used Bootstrap’s modal component.
Class Timetable Section
In this section, you’ll find a class timetable for each day of the week.
Classes for a specific day can be viewed by clicking on one of the seven tabs, each representing a day of the week.
To accomplish this, I used the navs & tabs component along with the compiled bootstrap.js file, extending navigational tabs and pills to create tabbable panes of local content.
