Kabl(ui)

Kabl(ui)

By beginning the UI Frameworks coursework without Semantic UI, it only made me appreciate it more once we dug into it. The introductory online course by Nate Taylor through PluralSight was incredibly beneficial, and Nate Taylor’s CodePens and Semantic UI’s examples helped me along the way as we built images of designated websites. I found Semantic UI’s biggest benefit to be how sharp everything looks coming right out of the box. It has prebuilt components that can be called that would have taken several lines of code to accomplish had you built them on your own.

Mind Blown

Semantic UI does take some time to learn, and when being new to HTML and CSS, it is a lot to take in. It is like having to learn a new language along with its slang at the same time, while being held to the language’s proper standards. When creating a webpage made on the study of the history of internet browsers, the instructions were divided over three sections. We combined a raw HTML page with a linked CSS stylesheet and learned how to orientate objects around the page and create easy to use links for navigation purposes. It only took one assignment to make our webpage look far more beautiful on the eyes. It gifted the page with a wow factor that I would not have been able to achieve without Semantic UI.

We can see the difference in the language of raw HTML below…

<div id="navbar"><ul>
  <li><a href="#Introduction">Introduction</a> </li>
  <li><a href="#IE">IE</a> </li>
  <li><a href="#Firefox">Firefox</a> </li>
  <li><a href="#Chrome">Chrome</a> </li>
</ul></div>

with the more user friendly and natural language of Semantic UI shown below.

<div class="ui fixed top inverted four item menu" id="navbar">
  <a class="item" href="#Introduction">Introduction</a>
  <a class="item" href="#IE">IE</a>
  <a class="item" href="#Firefox">Firefox</a>
  <a class="item" href="#Chrome">Chrome</a>
</div>

Conclusion

Overall, I found Semantic UI to be a wonderful tool that has peaked my interest in webpage building. I have yet to master Semantic UI’s vernacular, but am very interested in playing around with its functionality even further. One of my biggest challenges in coding is my lack of efficiency in looking up what I need in order to say what I want to say, and I found Semantic UI’s Elements and Modules page to be easier to navigate.