As a beginner in web design, you are constantly asking yourself how I can make my website better. So, you decided to crank up the difficulty. You probably had a crazy idea of trying to mimic some of those fancy websites out there. You created the html without much problem and difficulty. And then as soon as you start implementing the CSS you run into problems. The positioning of an element is not correct, the image is not in the correct size or everything looks messed up. Then you spent hours trying to look up for tutorials or solutions. But firstly, why would you even need to create your own CSS when you could have Semantic UI. So, why go through that struggle when Semantic UI does all the hard work for you.
It is possible to create any website with just raw HTML and CSS. But do you really want to go through the whole process of creating your own styling for every element, classes, and ids of your website. Even a simple website can get complicated because you must figure out how to position each of the elements. Then figure out a style that would make your website pop. When I first started learning HTML and CSS, it was like a whole new experience. There is always that question of, how do I make this element position here side-by-side or why this element is behaving differently from my expectation. To get comfortable with HTML and CSS I had to do a lot of experimenting. As a result, I learned ways to organize my HTML by using class or id divs to make the styling a bit easier. For example, when I finally learned how to make a navigation bar, I learned about using a CSS style called flex box. With this I was able to make something that closely resembles any other navigation bars from other websites. But what if I wanted to add a dropdown feature with a dropdown icon. I would then have to spend time trying to create the script that would make the drop-down work. Then figure out the way to add dropdown image icons. I could do this by making my own CSS style or do the easy way, which is to use the Semantic UI.
When I first heard about Semantic UI, I was glad to hear about a style we could use that would do the hard work for us. I would say that using Semantic UI made most of my practice website responsive. This means that no matter what size my window was I can easily make the website reflect the user’s window screen. There is a CSS style of Semantic UI that would center the website easily just by using the ui-container. There is even that menu that creates the navigation bar for you. All this would take is just writing out the ui classes into your HTML divs and the styling is automatically done for you. It is even possible to customize the ui just by applying a class or id to the div then applying your changes with your own CSS file. So, if you are still not convinced, ask yourself this question, do you want to go through the struggle of creating your own CSS style or use a style that is already created.
Just like when I was learning underscore for the first time, the learning process of Semantic UI was overwhelming. In a sense it is just like learning any other programming language. It took me a while to grasp how to use each of Semantic UI’s CSS stylings. For example, the most confusing concept was the ui dropdown menu. From what I learned from this concept was, for a simple drop down, it requires a div with a class named “ui-dropdown”. I thought of this as the main container or the div that holds the dropdown. It was then followed by another div with a class called text, which just holds the name to display for the dropdown and an element ‘i’ that would display the dropdown icon. The last div is like the ui menu, this would display the items of the drop down. For the actual drop down to work, a script was needed and then you have a working dropdown. So, lets recap, for this dropdown to work it required a bunch of nested divs with their respected UI classes inside the main container called ui-dropdown and a script. This was why learning about the dropdown took me a while to understand because it used nested divs with their own UI classes. But once I understood what each div was for, learning the dropdown became easier. This is just like the underscore, when you want a function to do something complicated you have to either nest them or use multiple underscore functions. This is similar to underscore. So, if you want to learn Semantic UI be prepared to see nested divs and grasp how each divs behave. But once you do learn the basics and use of Semantic ui, you can replicate almost any website out there with ease.
When it comes to creating a simple website there are a lot of things that need to be addressed. We need to create the navigation bar of the website. Then the main body of the website and finally the footer. Sounds simple enough, but where should we start? To start off your website, you would first create an HTML file, which creates a bland framework of your website. And then the fun part, which is to create the style of the website to make it appealing. There is the hard way, which is to create all the styling for your website yourself. And then the easy way, which is to use a customizable styling that already exists, called Semantic UI.