I Can Never Look at Websites the Same Again
24 Feb 2022
Two weeks ago, if you told me I’d be able to make a website that looks like the one above in less than an hour, I’d say you’re crazy. I’ve always had the image in my head that UI design was an arduous process. I imagined it took hours and hours of staring at a screen and working hard on the back-end to make any site. So, I’m seriously amazed at how using a UI framework gives you the power to do so much you never thought you could. It was an uphill battle to get to the point where I could understand the basics of using a UI framework, but it was very much worth it.
Running Into a Wall
When my ICS 314 (software engineering class) professor first introduced the UI design module to us, he said it was the easiest module we’d go over this semester. I thought to myself: ”Oh, that’s good! I guess I’ll be able to pick up on it right away!”. I went home, excited to start, and began doing the assignments in the module. What I felt moments later can best be described as skipping down a road, carefree and airy, and then running smack dab into a wall you didn’t see coming.
HTML and CSS took a while for me to wrap my head around. It required a different way of thinking compared to the other languages I’ve learned: Java, C, and Javascript. You’re not declaring variables and making functions, you’re making an item in a navigation bar that links to an external website with 20px weight and a centered orientation. These ideas carried over into learning Semantic UI, which is a design framework that defines a structure that users can use to define their own user interfaces. Basically, it was an easy way to get nice-looking websites using basic HTML. What gave me the most difficulty when learning Semantic UI was understanding the syntax. The syntax was vastly different depending on if you wanted a button or a search bar, and I just wasn’t used to all those angled brackets (these things: <>). Adding a single word to a class tag could improve or destroy your website’s structure. Using a keyword from Semantic UI leads to work done behind the scenes that you would only fully understand if you read thorough documentation. To top it all off, I was also pretty embarrassed. This module that my teacher said was the easiest we’d go over in the entire semester was giving me more trouble than learning Javascript for the first time or using Underscore functions. Also, my friends in the class seemed to pick it up with no problem. I was discouraged, but I kept at it.
Climbing the Wall
After running into that wall, I dusted myself off and began to climb up the wall. As I spent more time using the HTML and CSS syntax as well as that of Semantic UI, I grew more accustomed to the syntax and it got to the point where I could understand every line of code and keyword in a class tag. When everything finally clicked, I was over the moon! I found I was able to make websites like the one at the top of the essay and reached a level of understanding I never thought was possible. It was as if I had climbed the wall I had previously run into and reached the top. It was a strenuous climb but once I made my way to the top, I saw a world of possibilities in front of me.
Semantic UI: The Friends We Made Along the Way
Semantic UI allows you to make nice-looking websites easily and quite quickly. To me, that was the best part of learning to use it. So far, when I’ve used other languages like Java or C, I was only able to make functions and small programs for small tasks. The output was nothing special, and I never had anything to really show off. However, it felt so rewarding to have a framework that allowed me to make something I could show for myself right away. It’s taken two weeks to learn the basics of Semantic UI and I can already make simple, appealing websites. I also appreciate that when using Semantic UI, it’s okay to copy and paste code. You can use roughly the same code for every navigation bar you’ll ever use and Semantic UI makes it simple to make small tweaks. Compare this to a for loop in Java or C. Even if you know how a for loop works, you can’t just copy and paste the code for one and it’ll work for every instance you.
I never thought I could learn to make a website like the one at the top so quickly and it’s all thanks to Semantic UI. Thanks to this experience, I can’t look at websites the same ever again. Now when I look at a website, I can’t help but wonder what went into it. I wonder how HTML was used to make it, what UI framework it used, if I could make it myself. This experience has made me excited to learn more about what goes into web design!