Semantic UI has helped me a lot to make sure my website actually looks good. Even though it is definitely not simple, in the beginning, to use Semantic UI, the results are more than worth it. The differents components of Semantic UI transformed me from a very basic-looking-website-builder into someone who can actually build an aesthetically pleasing-looking website. It has been difficult to grasp all the different concepts in the short amount of time I have known about Semantic UI, but, it is definitely worth it to invest your time into learning semantic UI. Here’s why.
When I first was introduced to HTML and CSS, I thought it was very cool to see that I could build something. It wasn’t very pretty, but it was something. I was wondering how the “real websites” were so pretty when my sites build with HTML and CSS were very basic. When I learned about Semantic UI, it all made more sense! There are quite a few frameworks that are of big help to make your product look good. There are many cool components in Semantic UI that will help you create a beautiful product. For example, while it might have been a struggle to create a well-spaced, fixed, borderless menu in just raw HTML, using Semantic UI, it is quite easy to implement. Semantic UI will also help you space your pictures correctly, create columns, buttons, labels, and all the other good stuff that you need to give your product a ‘professional feel’.
It may be overwhelming learning about Semantic UI in the beginnning, because there are so many different components and options for you to use. However, the developers of Semantic UI seem to have wanted us to have a good time learning Semantic UI, because they use mostly ‘natural language’, which makes it easier for us to understand it when we first read it. I followed a tutorial of Semantic UI on PluralSight, and even though it was a lot of new information, it was fairly easy for me to comprehend what was going because of the use ‘natural language’. For example, you can create buttons with Semantic UI. To create a button, you put the following code in your .html file:
<button class="ui button">Some Text</button>
This will create a default gray button. If you want your button to be black, simply put the word ‘black’ in front of button in the class description, and this will make your button black:
<button class="ui black button">Some Text</button>
Instead of having to do work in your .css file, you can very easily change the color by just putting it in the class name. The button was just an example, there are many other cool things we can change by just putting a word in front of the class. There are a lot of variations available in Semantic UI that are all designed to make your product look good.
As I mentioned before, Semantic UI has many components. You can implement a menu, which has different sub-sections such as a top-menu, a side-menu, a fixed menu, and a lot of other interesting sections. Everything you need to build a website is available for you if you use Semantic UI. You can use containers, equal width columns to evenly space out your columns, place images in a certain portion of the screen, and there are many more things. When you look closely at any website, you can see the different components of that site. I think you can rebuild a lot of sites using Semantic UI. For my software engineering class, we had the exercise to rebuild any website on the internet. Everyone from our class chose a different one and everyone was able to rebuild the website. There was a total of about 30 mock-websites that all looked really similar to the original one. This proves my point that a lot of websites can be rebuild using Semantic UI, because it has so many different parts to it. For any part of a website you find online, I think you can find a Semantic UI component or element that will help you rebuild that part of the website.
As you have probably picked up on by now, I really am a fan of Semantic UI. It is so worth it to invest some time into learning Semantic UI. The many different components of Semantic UI really are very helpful to create a beautiful and functional webpage. Using Semantic UI this past week has really opened my eyes to what I can do. I can build products that are so much more beautiful than my products I made by just using raw HTML, while I don’t really do that much more work. Just by using Semantic UI, I have grown from a very basic-looking-website-builder into someone who can actually build an aesthetically pleasing-looking website, and I can’t wait to see what I’ll be able to build when I am more familiar with using Semantic UI!