It's UI Love

05 Oct 2017

One of the first modules on FreeCodeCamp.org is the HTML5 and CSS module. This module, along with other basic HTML and CSS tutorials out there, served as my initial introduction to HTML and CSS. These tutorials are objectively great, however most of them do not give you motivation, or a close and achievable goal for you to reach towards. You just kind of think as beginner, “How do I go from this button to a beautiful site that works on desktops and mobile?”. So, hearing about the CSS framework Bootstrap and the magic it can do for you, I decided to give it a try!

My first impressions of Bootstrap were good. The first thing I tried to build was a navigation bar, because what is a website without a bar or menu or links and dropdowns at the top of the home page? Bootstrap let me move from building an ugly and unstyled bar out of ul and li’s to building a working and modern-styled navigation bar with functioning buttons! Thank the lord for CSS frameworks. One of the things about Bootstrap that I found difficult was remembering all the classes. I’m sure that some of the classes have quite standard names, but because I am so new to this I found it hard to remember them.

Now on to Semantic UI! I think Semantic UI may be one of my favorite frameworks of all time (not that that is saying much right now). I absolutely love how the classes are built to allow such natural expressions. I spend less time attempting to memorize, and more time thinking of how to describe a webpage. Once I have that description, it has so far been a simple matter to translate to Semantic UI classes. I do have some issues with it however, although I think a couple of them just have to do with my understanding of CSS syntax and not with Semantic UI itself. One issue for me is that overriding Semantic UI default class properties does not always work as expected. I resort to using !important to force a specific property. I believe that to define custom styles, I would need to set up a project to be more “Semantic UI-ish”. My next issue is that SUI is missing some useful components found in other frameworks (Bootstrap) such as content sliders. Semantic UI has won my love and I think that it will remain my goto CSS framework for a while.

CSS frameworks are great. I think that learning a framework is the preferable experience vs learning raw CSS for building websites. Learning Semantic UI will definitely get frustrating, but the frustration will be 5x less than learning raw CSS. Now is it even worth learning about HTML & CSS as a software engineering major? YES YES AND YES! Exposure to any technology is always good in my mind, and personally, I have always wanted to learn about web development. I think I see some web development work in my future.