If you have ever used HTML and CSS to design a website, you know that it can take hours, or sometimes even days, to design a good-looking website, and it can be annoying to maintain the media queries when you do eventually end up finishing the website. Also, if you want to change something on your website, you may end up shifting through 1000+ lines of CSS to change a simple element. In my UH Groupings project, we had 3 separate CSS files and 1000+ lines of CSS. I remember early on in the project, I was tasked with redesigning some aspects of our website and shifted through unused CSS, CSS that had no effect on components, and confusing class names just to end up moving a button 5 px down. In my head, I thought, “Jesus Christ, I can’t believe this project has all this code just for this one page!!”. In addition to our 1000+ lines of CSS, our website isn’t even mobile compatible! Unfortunately for me, our project had not fully incorporated the power of UI frameworks, which would have drastically reduced the need for these simple stylings.
I have had previous experience building other websites using only HTML and CSS, and they looked presentable, but I never felt proud of the work that I produced because the page was pretty barebones and looked like something from the 2000’s. I also had trouble making the media queries, which control what the elements look like on different screen sizes, and some of these projects took me about two days to do. I will say, however, that struggling with HTML and CSS has allowed me to understand what is going on behind the scenes of these UI frameworks, and if I ever need to change or override the styling, I can do so comfortably. Also, I can say that learning HTML and CSS has allowed me to visualize in my head what the code might look like before even starting.
Semantic UI was the first UI framework that I learned, and it was pretty rough at first. Semantic UI boasts that it is simple to read, and compared to other UI frameworks that use a cryptic combination of numbers and letters, it makes Semantic UI look more attractive. However, initially it still made no sense to me, and I had trouble doing simple things like getting a button to change color or getting words to align correctly with my content. I am still years away from being an expert or even competent in Semantic UI, but I can say that I have designed a modern looking website with the assistance of the documentation. With my minimal knowledge of Semantic UI, I was able to replicate the Toyota Supra website with minimal CSS (about 100 lines) and HTML. I can now say goodbye to hours wasted trying to center a div because many of these UI frameworks have simple classes that already align divs for you! In the end, I was very proud of the website that I had created because it looked modern and was responsive. Although, if you ever need to create a custom size, say for your “ui container”, it can be annoying because you will have to create media queries to fit your needs and ultimately have to find code or create your own media queries.
Like changing a car tire, you need to follow some basic steps first. This is equivalent to learning HTML and CSS. You need to first park your car, turn on the brakes, loosen the bolts slightly, jack up the car, completely take off the bolts, and then put the tire and bolts back on using a vertical alignment (top, bottom, sides). Learning a UI framework is like being able to use a drill to take off and loosen the bolts. It makes taking off the tire a lot faster and easier, but you still need to understand and follow the basic steps in order to take off the tire.