Learning Front End Development using UI Frameworks
08 Oct 2024Learning Front End Development using UI Frameworks
What are UI frameworks? What is front end development?
A UI framework is a web development tool often used for front end development. Front end development is the creation of a user interface. Whenever we visit websites, these websites always have some sort of user interface where users can interact with whatever is on the website. All the little things you see on websites, such as buttons and search bars, are a part of front end development. The things we can visually see, as well as interact with, on websites are what we consider front end development because it’s all at the “front” where everyone can see.
How do these two relate to each other?
As mentioned previously, the things we see on a website, whether we can interact with it or not, is all front end development. However, because there will be people who will see and use the website, that means the website must be presentable and visually appealing to anyone visiting these websites. That’s where UI frameworks comes in. UI frameworks allows developers to create and give websites color and spice. The way I think of it is like cooking; when cooking dishes, you often need some sort of spice to add to it in order to really make flavors pop out. While it is possible to create a website without any “spices” or coloring to it, it’ll be boring for someone to look at a website that has a plain white background with words and things on it. UI frameworks allows developers to do a lot with websites and making it more appealing. For example, it allows developers to make changes in different word sizes, or even changing the fonts used for words. It also allows developers to add color and images to websites. Overall, UI frameworks helps developers to make websites visually appealing so users will want to use these websites.
My experience using Bootstrap
Recently in my ICS 314 class, we were introduced to Bootstrap 5, which is a UI framework. Bootstrap is a framework that allows developers to build websites much faster. In the beginning, I was quite confused on how it works, but after some practice, I started to get the hang of it. While I am familiar with building websites using just HTML and CSS and no frameworks, Bootstrap made things easier for me because using HTML and CSS meant I had to really look into every little detail and make sure it is perfect. When building websites, this really took a lot of time because I would be focusing on trying to get one thing perfect. For example, figuring out where a good place to center the website name was difficult because I would need to try different pixel amounts to see whether I need to move the name more left or right. With Bootstrap, it makes things easier by having functions that allow me to place things where I want them to be without having to waste much time fixing it with CSS.
My thoughts on using HTML and CSS vs using Bootstrap
Learning HTML and CSS was one of the first things I learned when starting out with coding. I thought it was fun because I thought it was cool that this is how it felt to be creating a website. While it was tedious trying to do things such as finding good font sizes for any words on my website, or trying to find a perfect size for an image that I input plus trying to place it in a proper spot, I still had fun regardless. However, after learning about Bootstrap, while it was a little weird seeing that all the work was being done on the HTML page rather than the CSS page, it helped me with building and setting up websites faster. Even while using Bootstrap, I did use some CSS to make changes to things such as headings, but other than that, most of the building was done with Bootstrap. With Bootstrap, I didn’t need to worry too much about using actual CSS because compared to when I first learned how to use CSS, my CSS pages had a lot of code in it because that’s how many things I wanted perfect on my websites. Now that I know how to use Bootstrap, I don’t really need to worry much on perfecting every little thing on my website and spending so much time trying to perfect everything.