Web Class: Intro to Semantic UI

Web Class: Intro to Semantic UI

Transcript Part 1

What is up, everyone? And welcome to our course on an Intro to Semantic UI. My name is Nimesh, and I’ll be guiding you through these tutorials, in which we’ll learn about the popular framework Semantic UI, and how to use it to create beautiful, and appealing websites with ease.

So, in this course we’re going to first go into an Intro into Semantic UI itself, discussing what is it, and how we use it. And then we’ll explore the Semantic UI website. Using the website to copy and paste elements is a massive part of Semantic UI and especially in this course. So, it’s good that we get to learn how to use the website properly. Then we’ll move to installing Semantic UI. Then we’ll learn about how to properly structure our pages with the Semantic UI grid. For those of you who have use bootstrap before you’ll see Semantic UI is similar to that, especially when it comes to the grid layout system. After this we’ll go into some individual Semantic UI widgets and components. We’ll show you how to examine them, select the options you want, choose them, and then copy and paste them into your code, and customize them further. And then we’ll wrap this section up with the final project. And I think that final project is going to take the majority of the time. And we’ll put everything that we’ve learned in these intro sections to the test.

Now for starters, what is Semantic UI? Well, Semantic UI is simply a Front-end framework very similar to bootstrap. If you guys have ever used bootstrap before, this course should be a breeze. And I personally found Semantic UI even more enjoyable to work with than bootstrap. For those of you who’ve never used bootstrap before don’t worry about it, bootstrap is not necessarily a requirement here. We’ll show you how to do things without it. Semantic UI is powered by LESS and jQuery. And this means that it’s a free, open source copy-and-paste framework. That means that everything on the website is open source. You can literally copy and paste the code and you’re not gonna face any repercussions, in fact, it’s almost encouraged that you do so. And we can use Semantic UI to create web apps, and websites with ease.

So, I mentioned that this is a Front-End Framework, this applies to most of you who’ve never used bootstrap before. A Front-End Framework is simply a library that contains templates for HTML elements with CSS styling. So, that means that, let’s say we were to select a button, where we don’t just get that boring unformatted HTML button. That means the button that we select, with a Front-End Framework like Semantic UI will automatically have a bunch of styling already applied to it. This way the items we choose already look really good, before we personally do anything to add any CSS. Now we use these Front-End Frameworks to very quickly and easily develop appealing interfaces. They generally contain intuitive and easy to understand syntax, especially Semantic UI and sometimes they even provide some basic behavior as well. So, why use Semantic UI in particular?

Well, Semantic UI makes developing web apps, and websites easier, and faster than if you had to do it from scratch. In fact, it can cut down the time by half, if not more. There’s easy to understand syntax, and it’s lightweight, yet, very, very flexible. This means there are lots of different widgets, and customizations to choose from. And you end up with these beautiful and modern-design looking webpages. Again, the main emphasis on this is the fact that it makes things really, really fast and easy. We’ll see that we can build up a really good looking webpage in probably less than an hour, maybe like 40 minutes or so. Finally, how do we use Semantic UI? Well, I mentioned that it’s a copy-and-paste framework. So, this means we essentially search through the website util we find the elements we want. We can then choose from a variety of different element themes.

The documentation is very clear, and provides you a bunch of different options for each of the widgets and elements. We can then copy and paste the element with the themes we want into our code, and we can customize a bit further with CSS. Okay, so that is it for our intro. What we’ll do is we’ll launch right into exploring the website. As like I said, a lot of this is gonna be copy and paste, and examining the elements we want. So, let’s get to know how to use our website properly, and that’s gonna be crucial for the rest of the course. So, I really hope you guys enjoy this. I really enjoyed making this course, and I love working with Semantic UI.

It’s a fantastic framework that, like I said, has made building web apps and websites so, so much easier. Okay, cool! Well, thanks for signing up, we’ll see you guys in the next tutorial.

Transcript Part 2

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. These are just gonna be more interactive elements, like above. Okay, and finally, we’ve got some Behaviors such as Form Validation, Visibility, et cetera.

Okay. So, we can basically just pick and choose what we want to look at in this web page. You don’t look at it all, we’ll be exploring different components as we go. I would recommend that after this tutorial you take a few minutes to get to familiarize yourselves with the website. Otherwise, let’s just take a quick look at some of these Elements. Maybe we’ll go with the Button. That’s a pretty classic one. We’ll need lots of buttons in the tutorials to come. Okay, so most of the web pages are kind of laid out in this format. We’ll have the Element name, or the feed name, et cetera. And then just a bit of a description. This is just a general button, it’s a possible user action. We’ve all seen buttons before, no doubt you’ve used buttons to get here in the first place. And so here we have the kind of basic description. In this case, it’s just a basic button here. We’ve got an example of what it will actually look like. And if we open up these brackets here, we get the source code that generates that. So it has the example and then the actual source code.

So, no doubt at some point we have all added buttons to some kind of an HTML page. You can use a button tag, just like before. Here you can provide a custom class and then use some CSS to style it, but no doubt, unless you’ve used a framework, like Bootstrap or Semantic UI, it doesn’t look like this right off the bat. Typically, to be honest, it’s kind of ugly right off the bat. We have to do a bit of CSS styling to format it. This is the benefit of using stuff like Semantic UI, is that we can actually just use the pre-built-in classes. A lot of the Semantic UI classes do begin with ui, and then something, in this case ui button is the class name. And it automatically applies all the styling attached to this class into this button. So, this button might not look like much but there’s actually quite a lot already done for us. For example, we get a nice gray background, we have these rounded edges, a better font than before.

We get this nice on-hover behavior, okay. And we can click it, it says Follow or Following. That’s actually a bit of JavaScript behavior. All right, so if we want to copy and paste the code, we can simply select it here, or we can just do copy code. It will copy it to the clipboard. And again, this is this whole theme of this course is gonna be this kind of copying and pasting items that we want, into our web pages and then a bit of further customizing them. Let’s say we wanted to customize this button further. You could actually customize the entire ui button class, or you could maybe attach an ID to it and customize things that way. So that’s a very basic button. There’s lots of different variations on buttons that you can see as you scroll up or down. We’re not gonna cover them in great detail here, as we’ll be kind of going into the greater details later on. It’s just that any of the source codes are, I think, hidden by default. So you just need to open and close them by doing that, and then you can kind of see all the different behaviors.

Moving to a different item, maybe let’s check out a Card or something. This is a pre-built view. A card will look something like this. This is the default card, okay. And a card just displays some site content in a manner similar to, let’s say, like a playing card. So we’ve got the picture. We’ve got maybe the name of something, a bit of information about them. Maybe there’ll be like a button, or something that has some extra behaviors. If we want to examine this source code, again we simply open it up. Okay, and as you can see, there’s this collection with a bunch of different stuff within it. So this is a ui card. Like I said, we’ll be taking a look at these in greater detail later, but as you can see, it’s got a /div, that’s an image. It’s got some content. It’s got some extra content here. And this is just gonna be the stuff down at the bottom.

Okay, so as you can see from the source code, we’re still building up our pages, websites, web apps, whatever, with the HTML source code, but instead of having to type this all out by hand and having to think about exactly what components go where, how it’s all gonna come together and how it’s gonna look, we can simply take a look at this, say okay, this is what I want. We’re gonna copy and paste this code in here, using the Semantic UI classes, such as card or content, et cetera, to add that pre-formatting in. Okay, and then we’re basically just good to go. Now, the last thing I want to take a really quick look at before we move to the final examples, is gonna be way down at the bottom into Behaviors. So, let’s take a quick look at Form Validation, because we’re definitely gonna use Forms later on, so it’s a good idea to get somewhat familiar right now. But I’m sure most of you, if not at least some of you, have used forms at some point. Well, all of us will have used forms, but some of you will have created them yourselves. It’s basically just a way to enter some input and validate that input.

So we use forms for things like logins, for example, maybe if you were creating an account, we’ll use a form. If you’re creating an order, like you’re maybe ordering something off of Amazon, they’ll be using probably some kind of a form. And so, there needs to be some behavior attached to the form, as well as some kind of validation. Well, Semantic UI has actually provided more than just the front-end, it’s provided a bit of actual behavior here. So, by using Semantic UI’s form JavaScript here, we can actually provide some real validation. For example, let’s say within our form we have, let’s see if there’s the actual example here. And yes, so the actual example looks a bit like this. We have a First and a Last Name, or First Name and a Username, a Gender, Password and a Skills set, we have this agree, and a Submit. So, there’s gonna be a few rules.

Likely we’ll need none of these to be empty. Perhaps our Password has to be a certain length, or something, and we need a certain number of skills. Well, we can use Semantic UI’s Form Validation to do so. So, we have a type of rule, which is make sure it’s not empty. We need at least two skills. Again, gender, it can’t be empty. Username can’t be empty. Password has to be at least six characters. And we need to make sure that this is checked. Okay? So this is just to quickly demonstrate that Semantic UI goes beyond just providing style themes, it actually provides a bit of behavior, as well. However, we will be taking a look at this in greater detail later. I just wanted to quickly introduce it to you. The last thing we’ll do here is take a look at the Usage.

We’re gonna take a look at some of these Layouts. Okay, and I’m actually gonna leave this rest of the part up to you guys. So, there’s some Pages, for example, a Homepage, Fixed Menu. There’s actually a pre-built login form. There’s some items up here. And these are all just ways to demonstrate some of the Semantic UI widgets, as well as some of the layouts. So for example, let’s say we want to take a really quick look at this Login Form. We can open it up. And if we want to see the Semantic UI code that generates this, we can do two things: we can do the View Page Source that actually opens up the entire source code on the next page, in another tab. I simply right clicked, by the way, View Page Source; or we can do Inspect, in which case we can actually examine the source code right in the same tab here. Okay. So I’ll leave the rest of that up to you.

Again, these are, actually, I’ll just get rid of that. These are all found under our Usage tab. If you go to Layouts, then there’s a few examples. I encourage you to look at a couple of those examples, view some of the source code to get an idea, explore the web page a bit more.

And once you’re done, head on over to the next tutorial, in which we’ll be actually setting our files up to use Semantic UI. So, thanks for watching. We’ll see you guys in the next one.

Transcript Part 3

What’s up, everyone? Welcome back. Here we’ve got a fairly straightforward tutorial.

We’re just going to install Semantic UI and we’re gonna get our project set up and ready for us to use, because in the next section we want to jump right into exploring some individual components. So our steps here are going to be to first install Node.js. If you’ve already installed that, that’s great, you can basically skip a step there. After this we’re going to install gulp, that’s only gonna take a minute or so, and then we’ll start a new npm project, we’ll run that npm in it to get ourselves set up and once we have that project ready to go, we’ll install Semantic UI into that project.

We may as well start up an indexed html file and install the necessary headers as well, just so that next section we can launch right into the actual development. So let’s head on over to the Semantic UI website, again this is just semanticui.com, and I’ve clicked on Getting Started, that’s gonna be this link at the top left here. So this actually gives you most of the installation instructions, it doesn’t actually say anything about starting an npm project, so I’ll guide you through the entire process. You can follow this or follow along with me. So that first step again is gonna be getting your hands on Node.js. If you don’t have Node.js then you can search for it under download Node.js or something like this, and go to that Downloads page and just download the correct installer, Windows or Mac, 32 or 64 bit, depends on which system you’re using.

Once that installer comes up then simply open up the package, install Node.js, and when you’re ready to move on we’ll go to the next part of this, which is going to be installing gulp. So let’s get Terminal up and running. For you Windows users this will be Command Prompt. You want to make sure that you’re running Command Prompt as an administrator or some of these commands may not work. For those of you who are using Macs, just type in sudo before any command to give those administrator privileges. So we’ll install gulp, we’ll do sudo npm install -g gulp, so make sure you have the dash and gulp. Windows users, just enter your password, Windows users, you can do this command without, or npm install without sudo, okay?

So if you’re using Windows, you’re running this on an administrator Command Prompt, don’t include the sudo portion. Okay, so it’s updated one package, that’s good. If you’ve never installed it before it will say success, installation success, or something like that. Assuming that you have no problems there, let’s move to the next portion. So at this stage you do need to have npm ready to use. So we’ll now start up a new project folder. You can do so in the Command Prompt. I find it a little easier to do so in Finder, especially easier for you guys to see. So I have this Semantic UI project that’s just under Desktop, Zenva, Bootstrap Semantic UI. Just find a good place for your project, we’re gonna create a new folder, I’m just gonna call this something like practice. Ah, maybe that’s, yeah, we’ll do it like practice_project, something like that is fine. All right, and then we’re gonna need to navigate to that practice_project in our Terminal now.

So just take a second to do that. Just going to navigate to where that is now. Okay, and ls we’re gonna to go to, we’re gonna go right into that practice_project folder, or whatever you’ve called yours. There shouldn’t be anything in there right now. We’re going to initialize npm, so I’m gonna do npm init right here, okay? And we can have this package named practice_project, that’s fine, version I don’t care about, or description, entry point is fine, test command doesn’t matter, git repo doesn’t matter, keywords and author, they also don’t matter, license, that’s fine. Is this OK? We’ll just go with yes. This is just modifying our JSON file, by the way, so if you do wanna specify stuff in there, like a specific author, specific description, please feel free to go ahead and do so, but for me this is just practice, so I’m not gonna bother filling it in. So if we do an ls we should now see this package.json file, so we’re on the right track. Now what we’ll do is we’ll actually install the Semantic UI into this project, so we’re gonna go, actually I’ll make sure we’re doing sudo.

For those of you who are Windows users, don’t bother with sudo, we’ll do sudo npm install semantic-ui –save, like so. All right, and now this is gonna take a few seconds and then it’s going to prompt us to kinda do a similar thing to up here, so it’s going to ask us to use either a custom installation, an express installation, or the default automatic installation, okay? So whichever one is more convenient, which is probably gonna be the automatic one, unless you really know what you’re doing. You can do the custom one if you’d like, but I’d recommend just going automatic for now. So you see it pops up this, there’s a few options to choose from, you can scroll through them with the arrow keys and then press Enter to select. So I’ll just go with automatic, that’s fine. So yep, you’re using npm, is this your project folder? So do make sure that that project folder is correct. This should be the path to wherever we just created that practice_project, okay? So we’re going to go ahead and select yes if that’s right, or no let me specify and then parse in that complete project path. So semantic should be in semantic/, that’s fine, yes, okay and we’re just gonna go ahead and let that happen.

Okay, so as long as there aren’t many warnings here, this is fine. What we’re gonna do next is install gulp, or rather build gulp, and that will download all of the necessary packages. So if we do an ls now we should see that we’ll have a directory semantic, we’re gonna cd to that directory and we should see this gulp file .js, so now we’ll just do gulp build, okay? And this is just going to download and install all the components, so as you can see it’s downloading stuff like site, form, checkbox, dimmer et cetera and this is basically just installing all of these guys that you’ll see on the left hand side, so it’s giving us access to all of the different components there. So it should just take a few seconds, maybe 15 to 20 or so, and once that’s done then we basically have everything set up and ready to go. Okay, good stuff. Cool, so let’s do an ls again, actually we’ll do, we’ll null navigate up, so in our project directory we should have node_modules, we should have package-lock, package.json, semantic and then semantic.json here.

So we can go ahead and clear this and we’re actually done with the Terminal stuff for now. All right, so what we’ll do next is head on over to a text editor of our choice, I’m gonna use Sublime Text, I just really like how it works, how it’s laid out, but it really comes down to personal preference, so feel free to use whichever text editor you want. What we’re gonna do is we’re gonna start a new file, okay, this one is gonna be simply index.js, so let’s go ahead and save that as, or not index.js, this is gonna be index.html rather, okay? And I’m gonna make sure that it’s in my practice_project root directory. This is, again, that project I just created. So you go into Semantic UI, practice_project, gonna make sure it’s in there. Okay, this will automatically make it an html file. Again, it doesn’t really matter too much which kind of file you’re using or which kind of text editor you’re using, as long as you have one available.

All right, just gonna do a little bit of basic html page setup, so we’re gonna do the DOCTYPE html, like so, and actually I think that’s a bit small, so let me make that font a bit bigger, okay, I’ll start with html here and we’ll start with the head. And not loving that four-tab space, we’ll just do two tabs, okay? Good stuff, okay. So we’ve got html, now we’ll need head and body tags, so we’ll do head, okay, and we’ll need the body tags as well, good stuff. So in our head file we’ll just do the classic, little bit of classic setup, we’ll do meta charset=”utf-8″ is good. We’ll do meta name, so we’ll change charset to name and we’re gonna do viewport, okay, content is going to be width=device-width, like so, and why don’t we go ahead and give this guy a title, whoops, not time, we want title, like so, and this is just gonna be our practice, Semantic UI Practice.

All right, so this isn’t gonna be our final project, we can actually create a different project and really get set up there, but for now this is just gonna be a way to practice using Semantic UI. So the next step is gonna be to copy and paste some of the get started code in here, as kinda typing it out by hand’s a bit of a pain. So we’re gonna go back to Chrome, or whichever browser we have this guy open in, and we’re gonna scroll all the way down to Include in Your HTML, okay? We’re going to just take this, gonna copy it and we’re gonna put it in the file’s header. So let’s go back to our editor, okay? And we’ll just paste it right in there. Just gonna fix the indentation. Let’s give this guy a save and if we wanna make sure that we are actually using Semantic UI properly and we do have access to everything, let’s just grab one single element and then we’ll include it in that page, so back to Chrome. I’m just gonna grab, let’s say, like a button or something.

Okay, so this Follow button should look a little bit like this, just gonna grab that. Let’s copy it and we’re just gonna paste it into body. Okay, we’ll give this a save, head on over to where it is in our Finder, okay? Just gonna double click on that, open it up, and as long as you see that nicely formatted button then you’re good to go. Okay, so I know I went through those last few steps a bit quickly, so every time you are, every time you make changes and you want to see them displayed, you do need to save it. I’m just doing the Command + S, that’s the hotkeys for save, okay. If we want to run an html file at least to see what it looks like and how it will behave, this isn’t doing any, like, backend tasks or anything like that, then you can simply find it and you can go ahead and open with some browser of your choice, Safari’s fine as well if you wanna use that. Google Chrome is the one that I use, so generally when I open it, it defaults to opening in Chrome here. And like I said, we’ll have this nicely formatted Follow button. If you do not see a button like this, if you see something a little bit more like this, let’s go back, then you do not have the Semantic UI properly installed, because this is just an unformatted html button.

So hopefully you can already start to see the difference and start to see the value in using Semantic UI. So if things are not looking like this just make sure everything is installed correctly, make sure your directories are all set up. Again, this practice_project should have your index.html, should have node_modules, package-lock.json, package.json and then semantic and semantic.json. Also make sure that you did do that gulp build and have actually got access to all of the items. When you’re ready to move on we’re gonna wrap this section up and then we’ll start talking a little bit about containers and how to structure our page. So, if you haven’t already, do check out some of those examples on the Semantic UI page, it’s gonna be under Layouts and check some of them out.

And when you’re ready to move on let’s learn about proper layout techniques. All right, so thanks for watching. We’ll see you guys soon.

Tutorials on game, web and mobile app development