Fun with Web Dev and UIs

08 Oct 2020

My first ever webpage, made with plain HTML and CSS sheets, reminded me of the web pages I used to visit when I first used a computer. It was definitely nostalgic but also nothing like any modern webpage. I had no idea how one would create a site from just HTML and CSS, I assumed it would take pages of code and expert-level know how to even make an amateur blog. Thankfully, I began to learn Semantic UI just a week later.

The tutorial experience with PluralSight was interesting. A three hour lecture of more or less the same thing being told multiple ways. It could be that Semantic seems so intuitive that an in-depth tutorial is not really necessary. So long as one learns the basic elements and has the documentation, navigating the tools of Semantic UI is pleasantly simple. As it touts, Semantic makes use of natural language, making customization intuitive. If you want a tight fitted cluster of items, class=”fitted items” or if you want an icon of different sizes. “mini, tiny, small, medium, large icon” are all different options for a pre-determined range of icon sizes that most would be satisfied with. Indeed, Semantic UI out-of-the-box would be sufficient for many looking to build a simple website and through some class exercises I can see that many websites can be replicated through Semantic UI. With enough time and effort, most web pages from blogs to major retailers can be duplicated with Semantic Ui without even glancing at the source code or CSS. The experience has actually made me a lot more suspicious of asking for credit card or other sensitive information (people duplicating government sites to extract private information is a notorious scam).

With that being said, I am excited for the possibilities. This has been my first experience with front end design work. I would really like to learn how to bridge a webpage UI with things like a database or other highly useful tools. Being able to develop a webpage is a hirable skill in and of itself so I already feel like I have considerably increased my value is a programmer. With some free time, I intend to practice replicating other webpages and learning other skills such as slideshow images, interactive elements, etc. After learning of all the preset elements of Semantic UI, I wonder how it was made. My understanding of HTML and CSS is still too shallow to know how Semantic UI itself makes containers, grids, etc. Of course the most of the same work could be done with plain HTML but it would require tedious customization and detail. I am grateful to be learning these skills with tools such as Semantic UI existing.