UI Framework, More like UI Painwork
22 Feb 2024Personal Experience (aka copium)
UI Framework is certainly a whole new thing because despite my experience with HTML and CSS, utilizing Bootstrap 5 with it really made it more harder than it should have. Trying to utilize the two together made it somehow more complicated for me and I was really lost when I tried messing with the preset designs from Bootstrap. I thought I could easily play with these preset designs to help better output what I’m working on, but it unfortunately did not. I thought I had put a lot of practice as I was trying to complete the Island Snow and the Murphy’s Bar websites and closely, 1 for 1, replicate/clone the pages. I was pretty successful in doing so and so when I approached the following WOD that utilized our knowledge and practice for BootStrap 5, I felt like I ran into a random fence that really tripped me hard.
I almost completed the WOD, but I could not for the life of me figure out how exactly to properly play with the properties of the navbar and that really irritated me. This mistake was entirely on me and to be honest, I wish the website for Bootstrap provided a little more of a guide with playing with properties overall. I could be wrong and I probably haven’t look into the website more, so if anything, it’s more on me finding an excuse because I am really mad with myself. Although, playing with Bootstrap certainly did make setting the formatting for the websites much easier compared to pure CSS. Had I continued to practice and really researched more of Bootstrap, I would have been more comfortable for sure. I will try my best to practice more with Bootstrap in my free time for sure now.
Overall
UI Framework in general is a great thing for programmers. Bootstrap in particular really makes HTML and CSS so much more convenient because you don’t know need to go into the CSS file and individually coding and playing with each class you create. Bootstrap with it’s preset containers and other classes really helps not only give a good guide/template of the website, but it also makes the code easier to read and see where goes where exactly. For example, the navbar class itself is self-explanatory and provides a navigation bar for the coder to build off of. It’s really useful and again, really convenient. It’s definitely a really good skill/experience to have as knowing how to work with UI Frameworks can really elevate and speed up the process of creating websites under a timely manner. It’s rather efficient and as long as you know your CSS, you can combine the two and really create an visually appealing and organized website. Looking forward to working and learning more UI Frameworks in the future.
Comparing CSS and Bootstrap
Bootstrap 
CSS
These images were taken from this website, W3 Schools. An immediate difference is that Bootstrap comes with a preset font family whileas CSS is the basic Arial/Times New Roman font. Another big difference is how these websites are formated. CSS uses the center text align while Bootstrap just creates a preset of margins and padding within a container class. It also comes with its own predefined colors with their own names such as text-muted, text-primary, etc. It’s really unique and does help simplify coding within the HTML file. It also lessens the amount you need to code within the CSS file thanks to its preset conditions. (i love bootstrap so much that i really wish i could redo the wod and happily pass without dnf-ing :D)