Semantic UI and Intuitive Web Development

Designing a Website is Hard

Web design has always been something I have been interested in. In fact, my introduction to HTML and CSS came early when I was trying to make my Xanga and Myspace look cooler than my friend’s. I did not understand much of the code, but I enjoyed the aesthetics and how changing a line could result in an immediate, visual change. As an adult now, I appreciate the artistic complexity often found in web development, but have realized that designing a website with raw HTML and CSS can be quite difficult. Luckily, UI Frameworks such as Semantic UI exist.

Make Your Life Easier with Semantic UI

Semantic UI has been a game changer for me. The first thing I noticed about it was its user friendly HTML. The class names are closer to english than other frameworks such as Bootstrap, which makes designing with Semantic feel more intuitive and natural. In addition, Semantic is responsively designed and it was immediately noticable when working with images. Creating a background that resizes correctly and smoothly when a browser window is expanded or reduced was a challenge that I initially faced when working with HTML and CSS. While I eventually found multiple solutions, they were all relatively complicated. Semantic, on the other hand, allowed me to accomplish this with the following code:

<img class=”ui fluid image” src=”...”>

This was my first “lightbulb” moment since I started working with the framework. The learning process was also eased due to excellent documentation that provided common examples along with source code. I went from not having a clue where to start to being able to visually replicate professionally developed websites in a short amount of time. While I know that it will be awhile longer until I can design fully functional websites, Semantic UI has given me a place to start, the confidence to continue learning, and has rekindled my interest in web design.