A couple of years ago, a previous course required students to post assignments to a personal blog, written in some HTML, but primarily reliant on Wordpress features. This gave the initial impression that HTML was an easy-to-use language, which it can be for small tasks. However, the past couple of experiences demonstrated how limited raw HTML can be, as well as how useful and powerful user interface (UI) frameworks can be. Recently, with using the Semantic UI framework with HTML and CSS code, it was possible to transform a plain, basic site, to a site that is very elaborate and visually appealing, yet still practical to, not only use, but to also implement.
The first experiment with HTML in this course exemplified the limitations of raw HTML and CSS. The most complex components were hyperlinks and navigation bars/menus, and even then their appearance was very basic. However, developing a site in raw HTML and CSS served as a good base for implementing other UI frameworks.
Once Semantic was introduced, the visual appeal of the following websites created improved dramatically. It was as if one went from using Skechers to Gucci mules overnight. The syntax of Semantic was also extremely easy to use as it utilizes natural language. For example, if one wanted to display three objects (i.e., columns of text) in a row, Semantic’s syntax will accept “three column” as an expression to create three columns containing whatever the user implements.
Overall, the implementation of Semantic transformed the, originally, daunting task of developing an elaborate website, into something that can be easily achieved. It also significantly helped with minimizing the length and complexity of the related CSS files for the websites created. One last hidden benefit was how much knowing more about HTML and UI frameworks helped to sift through all the elements when inspecting a site. This helped mostly when an image was needed to recreate a copy of the site, and had to use the inspector tool to find the needed content.