Thus far in my journey to becoming a Computer Engineer, I have always wanted to try my hand at front-end development. When I heard that we would be building a full-stack website for the final project in this class, I was eager to dive into the tasks and learn more about aspects like the user interface (UI). Recently, we started working with HTML and CSS, and just as I imagined, it was incredibly rewarding to see changes implemented in real time.
As we became more familiar with HTML and CSS, we began using a UI framework, Bootstrap 5. To clarify, a UI framework provides pre-built collections of ready-made UI elements like buttons, navbars, dropdowns, and more. These frameworks make it easier to customize elements, ensure consistent formatting, and significantly speed up the process of building a user interface.
When I first started learning about Bootstrap 5, I was honestly a little confused about what it was and how it was used. However, as I worked through it, I began to understand its purpose and could clearly see its usefulness, along with the benefits of other UI frameworks. Going through the different WOD (Workout of the Day) assignments—homework, practice, and actual WODs—I saw firsthand how using prebuilt collections of components helped streamline website design, especially for elements like navbars.
While it’s possible to format navbars and other components using plain HTML and CSS, the prebuilt collections in Bootstrap helped maintain a consistent format and design. Throughout the WODs, we frequently created navbars, which are essential for most websites. Components like navbar-collapse (which turns the menu into a dropdown on smaller screens), navbar-toggler (the button for the collapsed menu), and navbar-nav (a container for navigation links) were incredibly helpful. These are just a few of the base components used when building a navbar.
This applies to many other collections, such as containers, which help organize and format layouts. However, I found there was a steep learning curve in remembering all the different collections and understanding what each specific component does, as well as the possibilities they offer for design. Personally, I struggled with aligning items in the taskbar, moving them to the left or right, and implementing background images on the website. Despite these challenges, I found that UI frameworks like Bootstrap are incredibly useful for designing websites because of their predictability, consistency, and ability to simplify complex tasks.
Overall, while I find UI frameworks somewhat tedious to understand at first, I believe they are incredibly useful tools once you grasp how each part works. For example, I was able to reuse a similar format for each navbar across different websites, making only small adjustments to alignment and content. This significantly streamlined the design process compared to using raw HTML and CSS. UI frameworks are invaluable for achieving consistent formatting, improving time efficiency, and enabling customization when building user interfaces. I plan to continue developing my skills and becoming more comfortable with Bootstrap 5 to enhance my UI design capabilities.