Prior to this past week I have never really experienced the web design aspect of web development past plain pure HTML inputs and headers as I’ve always been more of a backend developer if I were to be involved with web apps. But in the short time I’ve had with Semantic UI, it’s easy for someone even as inexperienced as I to see the benefits of such a framework. Although learning to use Semantic UI might feel like trying to learn an entirely new programming language, it quickly becomes apparent how powerful and efficient a framework can be as you’re able to do so much with so little all while retaining a great amount of customization. With a framework like Semantic, even an ametur web designer can easily build a stunning retailer’s website.
In the previous module we refreshed ourselves on HTML and CSS in order to get into web development. We did a few assignments where we built pretty basic web pages and applied some styling to them with CSS. Things were going pretty smoothly up until that week’s practice WOD where my partner and I were tasked with recreating a more complex webpage. While we were building most of the webpage just fine, we found ourselves getting stuck making particular pieces look the way we wanted because of the necessity of using CSS heavily to style the page just right. What I came to realize was that CSS was a great supplement to HTML when building very basic web pages, but quickly falls apart when trying to recreate something more elaborate due to the amount of trial and error and time involved. This is where Semantic UI came in for me, and really extended my abilities as a web developer. With Semantic UI, every element is easy to implement due to their website full of great examples complete with source code, easily customized thanks to their adjective(s)-noun naming system as well as the fact that you’re still able to use css to customize an element even further, and just plain looks great to begin with. Having experienced the Semantic UI framework by recreating a few web pages for assignments, the difference is night and day, and I really can’t imagine why anyone wouldn’t use a framework for web development.
Of course, it still has its downsides, namely the steep learning curve. There are over 40 distinct Semantic UI classes to choose from each with many different types, content, states, and variations, it can be rather overwhelming to someone learning for the first time. Thankfully, their website is very helpful as it shows examples and explains the usage of each of the classes and their properties in addition to providing source code for easy copy and paste coding. Just be prepared to spend a good deal of time there studying as intuition only goes so far. Although not much of a downside, another peculiarity I’ve found is that Semantic UI doesn’t really integrate as well with pure HTMLas might be expected. For example, if I wanted to make a textbox for a user to type in, I wouldn’t use an “input” HTML tag, I would instead use a “div” tag and give it the class “ui input”. In fact, so far most things I’ve put on my web pages just use the generic “div” tag and its become an exercise in viewing the Semantic website to make sure I’m not using anything aside from a “div” tag. This may or may not affect someone who’s very comfortable in using the full set of HTML tags when building web pages, but either way I canʻt help feeling as though Semantic UI really could just cut out the middleman and be its own markup language.
Once you spent enough time and practice learning Semantic UI however, the advantages far outweigh the disadvantages. Furthermore, the time spent learning Semantic will easily be made up with the time you save simply by using it. Semantic UI is a very intuitive, powerful, and customizable framework that lets you build upon the CSS and HTML that you already know and accelerates your web development tremendously. If you’re seriously considering web development as a career, the question is no longer “should I use a framework”, but rather “which framework should I use” and Semantic UI is a great answer.