How to - UI Framework
03 Oct 2023BootLeg
Throughout our time with the UI Frameworks module, on many occasions, I have felt like just wanting to curl up into a ball and sit in the corner of my room and cry. Don’t get me wrong, the final product is very satisfying, but was it worth it? On a serious note, learning HTML and CSS was like learning an entirely new language. As I was getting the hang of using the underscore functions in our previous module, we got slapped in the face with making websites.
Utilizing thebootstrap function was way too frustrating, and one could say, why not just stick with the simplicity of raw HTML and CSS? Navigating through Bootstrap, with its many classes and syntax, it almost felt like being blindfolded trying to journey through a labyrinth. It’s definitely not a cakewalk, especially for one with no experience in the world of web development. Once you do finally figure out that one tricky piece of syntax you were missing, you do feel a sense of accomplishment for what you’ve created.
On the other hand, coding with HTML and CSS was also pretty frustrating. During my initial journey through the freeCodeCamp trying to learn all the syntax of HTML and CSS, it triggered a deja vu moment within me. After hours of doing the minute and repetitive coding exercises, it was finally time to code some websites with the practice WODs and I had totally forgotten everything I learned. If there’s anything one should take away from this module or anything in general, it’s the importance of a patient, repetitive, and positive approach to overcoming such challenges.
Why it’s Better!
When you compare using Bootstrap to just sticking with raw HTML and CSS, Bootstrap can really speed up the website design process, as long as you’re comfortable with its many classes. But once you do get through all those classes and (kind of) understand it, Bootstrap makes your code more readable and simplifies the whole process. Without Bootstrap, making CSS styles can quickly become a big old mess, with lots of modifiers and maybe even repeating elements. This can make your code confusing to work with when you’re trying to debug, and make your code unreadable.
Figure 1: Bootstrap Example
Plus, Bootstrap’s standardized approach makes sure that your website’s styles stay consistent and look good on different devices. Keeping that consistency could prove to be a challenge with raw HTML and CSS, especially as the project becomes more complex.
Figure 2: HTML/CSS Example
For instance, in one of our previous WODs (Workout of The Day), we were tasked to code the front page of this food establishment using what we’ve learned with Bootstrap. Let me tell you, Bootstrap made it a lifetime easier trying to create a navbar, and the other website elements. If we were to make the same exact website using raw HTML and CSS I don’t think I could’ve produced the same results. Since the WODs are under a time crunch it’s crucial you use what’s most effective. In this case, Bootstrap was definitely the top choice.
Website(s) using Bootstrap VS raw HTML & CSS
Bootstrap can be easier for beginners due to its pre-made components, while raw HTML and CSS provide more control but can be more challenging, especially if you’re new to web development. The choice ultimately depends on your project’s complexity and your personal familiarity and comfort with the technologies involved. For simpler projects and those where speed is crucial, Bootstrap may be the easier option. For highly customized or complex projects, raw HTML and CSS can offer greater flexibility but require more expertise.