Behind the Screens
22 Feb 2024The Reality
Previously, I have used website building applications like RapidWeaver and Wordpress, where I simply clicked on icons to put together and publish websites without writing out a single line of code. I felt that website building was fun and easy then, but little did I know about the reality of what happens behind the screens. My perspective on website development took a 360 degree turn when I learned about the complexity and time consuming works of web development.
It was during this exploration that I discovered the use of User Interface (UI) in the digital world. UI is a creation of any visual element, such as what you are currently looking at, and probably everything you are seeing whilst scrolling on your phone, tablet, or laptop. Amongst UI, HTML and CSS are the foundation, but instead of that I have been utilizing a popular framework: Bootstrap 5.
Why use a framework instead of sticking with original, raw code?
Bootstrap is a well known framework containing of HTML, CSS and JavaScript-based design templates offering a comprehensive set of tools that streamline website development processes. Especially in larger projects, I believe it is crucial to implement this sort of framework with pre-built components allowing efficiency in user interface development. Though build in libraries sounds like less tying and efficient coding, this is similar to learning another new programming language so…the learning process does get a bit frustrating. However, as they say, “practice makes perfect,” and with much experience anyone can become a expert in Bootstrap.
Real Life Application of Behind the Screens
In my experience, I have worked on a few short projects to re-create simple website home pages. One example includes of my re-creation of the Kahala Mall website.
On the left is a image of the original website home page, on the right is a image of my re-creation.
The website looks pretty simple, but to obtain my re-creation that does not look too similar to the original website took me almost the entire day to complete and approximately 150 lines of code. When I reflect on the code though, it is rather short. Why? It’s because I utilized the Bootstrap.JS! To code from scratch, Bootstrap offered a robust framework with elements that supported me in detecting which elements work best to develop my interface.
Hence, Bootstrap has much enhanced productivity in my UI projects and it is great in the long run. Using their libraries shorten code you probably would repetitively write in CSS. As a web developer, I am excited to get used to integrating websites with different types of frameworks and seeing which one I can unlock behind the screens with!