FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.3 Setting Up the Workspace

In this course we want to keep things simple and focus on the elements. That means we’re not going to be using any Sass, LESS or any other preprocessor language, as we won’t be creating too many styles within our stylesheet. The workspace should be set up in a local Apache server environment with a clear directory structure.

1.3 Setting Up the Workspace

Hi guys, welcome to Getting Started with Semantic UI. And in this lesson I want to show you how to set up the work space. So the first thing you're gonna need to do is download an application that's available for free and for all operating systems, Windows, Linux, and Mac as well. And this just allows you to emulate the server environment because we're going to be using just a little bit of PHP. Because we're gonna be using the object-oriented design pattern where we have the header and footer being constantly reused on all of the subpages of our mini website. So the next thing we need to do is take a look at setting up the project directory. So first things first. When you have installed XAMPP, make sure you open up the XAMPP Control panel and then you want to start Apache. So we only want to start Apache, we don't want to start MySQL, cuz we're not doing anything fancy with databases, and we don't need FTP. You just need Apache rocking and rolling. Once you got that going, you need to find your htdocs directory. So on Windows, it's in the C drive, XAMPP/xamppfiles/htdocs. And on Mac you can see it's in the Applications directory, XAMPP/xamppfiles/htdocs. And also you can find documentation for Linux as well. And in the htdocs directory, you then want to create your own directory and I've called it semantic_ui. Now to make sure everything's working, you can open up any web browser and then you can go to localhost. And if you get a screen that looks similar to this, you know the Apache server is running. And then, of course, you can put in the backslash, and then whatever the directory name you created for your project in the htdocs directory. And you can see here that we have nothing inside of this directory, so the browser is just showing us an index of this directory which has nothing in. So now let's go ahead and start to create the files that are necessary for our project to get underway. So the plan is that the main files are gonna stay in the root of our project's directory. So for example, the Home page and the About page is gonna stay in this directory. But however, the files that are gonna be shared throughout the site, is going to be in a subdirectory. So let's right click and create a new folder, and call it Includes. So inside of the the Includes directory, we're going to have the header and the footer files that are gonna be used throughout the site. So let's go ahead and create those files now, and I'm going to use the Sublime Text editor, but you can use whatever text editor you'd like. So all we need to do is simply drop down the File menu and say Save. And we want to go into the Includes directory and just call this head.php. So this is the php file that's gonna be injected in between the head text. Then also we're gonna create a new file, save it, and call it header.php. So this is the header that the header can actually see when they visit your web page. And then we're going to create another new file, and we are going to save this and call it footer.php. So now we have all of our Include files, it's time to take a look at the main page files. So again, I'm gonna open up my text editor, save this out, we're gonna call this index.php. And we first need to define a DOCTYPE, then we want the html tags. Then inside of there, we're gonna have the head tags, and then we're also going to have the body tags as well. Now, in between the head tags, I want to put in the title tag, we're just gonna this Homee page. And then, what we want to do is include our head.php file. So, the way we do that is we put in the php tag, and we can also close that off just like so. And then in between those opening and closing php tags, I can say include. And then in the quotation marks we want to provide the paths, so we're gonna go into includes and then we're gonna take a look at the head.php. Then I'm gonna copy that and paste it twice in the body so we can include the header and the footer within the body. Then once I've done that, go ahead and save it and now we should be able to refresh, and instantly you can see it's opened up that page with no errors. Then I can duplicate the index page and rename them, so we have about, portfolio, and contact. And once I've done that, I'm gonna open up all of those three files that I copied. And then I'm just going to change the title within there to the title of the relevant page. And so now what we can do is go ahead and take a look at downloading the Semantic UI into this directory. So I've gone ahead and downloaded the Semantic UI. So I've downloaded it, extracted the Zip and I just get a semantic folder, then inside of there you have less and uncompressed and minified and so on and so forth. We're not interested in any of these directories though, we only want the packaged directory. So if we go inside of there you'll be able to see that we have everything we need to get up and running with Semantic. Now these directors I actually want in my project anyway. So what I'm going to do is just simply drag and drop. So now I have a css directory. So if I go inside of here I'm going to delete the semantic.css, just like so, and leave the minified version. There we have the fonts which I'm gonna leave alone. Then we have the images which is no problem, they're for like loaders and so forth. Then also we have the javascript directory which I'm going to rename to js to make things a little simpler. And then inside of there we have the uncompressed version and the compressed version. So I'm just going to trash the uncompressed version. And then we need to take a look at creating our own css file. So what we need to do is open up Sublime Text. Just going to create a new file. And then let's open up the css directory and I'll call this main.css. So there is our css file. Then the next thing I want to do is download jQuery into the js directory, which I've gone ahead and done. And then I all I need to do is take a look at the Includes directory, and then the head.php file. So inside of here we want to, first of all, put in the meta tag, and this is going to have the character set of utf-8. Then also we want to put in a link to our stylesheet. So the first one is going to be the main.css file and it's inside of the css directory. And then we're just going to end it like so, copy this, paste it down below. Then we have the Semantic.min.css file. Then we have the script files. So as Semantic has a dependency upon the jQuery library, what I want to do is first of all, load in jQuery. And then we can copy that, paste it down below, and then we have the semantic.min.js file. So go ahead and save it. Open up the browser and hit Refresh. And then all you need to do is just open up the console and make sure you have no errors. And there you're able to see in the head that we have the character set being defined, and the links to the css files and the JavaScript files. And nothing has errors. So everything is looking really good for us. So now we can move on and start to develop the header. So please join me in the next lesson where we'll get on with that.

Back to the top