Exploring the Semantic UI Website

ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd

TRANSCRIPT

Hello guys, and welcome back. We've got a really easy tutorial here for you, all we'll be doing is exploring the Semantic UI Website. It's important that we get familiar with he website structure, as a lot of the next tutorials are gonna be kind of copy and paste from that website into our web pages. So, what are we going to do here? Well, we're simply going to head on over to semantic-ui.com. We're going to explore the website layout, get to know where to find the things that we need. We'll then examine just a couple of elements really quickly, so that you can get the idea of what the source code might look like and how to grab it and put it in our pages. And then we'll examine some finished page examples by inspecting the source code there. So, let's head on over to the browser. I've got this one open, this is just Chrome. Opening a new tab, and I'm just gonna search for Semantic UI. So let's just do a quick Google search, or something. We'll head to this first link, semantic-ui.com. Okay, so this is the home page. As you can see, it tells you a little bit about Semantic UI, gives you some code examples. What we're gonna do is actually jump right in to get started. And don't worry about the installation, we'll actually cover that in the next section. I just want to get us used to the website itself. So, if you see on the left-hand side, there may actually just be like a little menu open button. So, if that's the case, go ahead and click that until you see this menu bar on the left-hand side. So, this gives us access to all of the different components of Semantic UI. First some Introduction, we've got some basic examples under Usage, some global stuff under Globals. We've got various Elements that we can use here, so you can see Button, Icon, Image, et cetera. We've got some Collections. These will be used to group together different elements. We've got various Views. These provide some pre-formatted templates for containing, well, kind of putting a few different views together into one. So we've got stuff like Feeds, Card, which we'll be exploring later on. We've got some other Modules.

Free Tutorials:

• Unity: https://gamedevacademy.org
• Phaser: https://phasertutorials.com
• Machine Learning: https://pythonmachinelearning.pro
• Web Dev: https://html5hive.org
• Android: https://androidkennel.org
• Swift: https://swiftludus.org
• VR: https://vrgamedevelopment.pro ... https://www.youtube.com/watch?v=BuNKA2PZvKQ