FREELessons: 10Length: 50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Development Workflow for GitHub Pages

Just to prove that you can do all of your normal CSS and JavaScript tricks, I'll write some basic code to make some changes to the site dynamically. Since we're actually writing code, this is a good time to start using a proper development workflow for Git and GitHub, including cloning a repository, adding and modifying files, committing, and pushing changes to GitHub.

2.5 Development Workflow for GitHub Pages

So now we have some styling. Now we have some references to JavaScript files. Now I'm gonna show you a little bit of a parlor trick. I'm typically not one for parlor tricks, but just to show you that things are actually up and running and working. Let's go ahead and do a little bit of messing around with JavaScript and jQuery and CSS. Just so that I can show you that you can truly create dynamic websites using HTML, CSS, and JavaScript on GitHub pages very, very quickly, very, very easily. So what I wanna do now is I'm going to head back over to Visual Studio Code. And let's just go ahead and make a couple slight modifications. So let's go ahead and say that I wanted to add a paragraph in here. So let's just add in a paragraph and let's give this an ID. And the ID for this guy is just gonna be para, or something like that, just so you can have a way to uniquely identify this particular paragraph. And then we're just going to say that this is the best page ever and we'll just say, or maybe it's just decent. Something like that, no big deal. All right, so now we have in here a paragraph that we can uniquely identify, and we've got references to our jQuery and to our JavaScript. So let's save changes here let's go over into our main.js file. So what are some things you typically do when you're doing JavaScript development using jQuery? Well, you wanna make sure that everything on the page, in the document, has successfully loaded before you try to do anything. So let's start to do that. Let's say document and we'll say .ready, and when it's ready we're gonna execute a function, just like this. And then within here we can start to do all of our normal jQuery stuff, so let's go ahead and target that paragraph. So we're gonna say that paragraph, we're gonna say maybe on click we want to execute a function. And then within here, what do we want this function to do? Let's just play around with the CSS a little bit. So let's just say this.css, and we want to set the color, which is gonna be the foreground color of the text that's found within this paragraph. Right now by default it's going to be something, so actually let's change that. Let's go ahead and come into main.css, let's say that maybe all of the paragraphs that are within here. Let's say all of them have a color by default of red, something simple like that. So now that that's going to be red, we can come back into our JavaScript. Let's say that when it is clicked on, let's go ahead and change that color back to black, just for that one paragraph though. So maybe we have multiple paragraphs, we only want this to happen for that particular one. Okay, and let's see something else, let's say the body. The body is already gray, which is pretty ugly. So let's say if we click on the body, we wanna change it to white, so let's see how we would do that. Let's come in here and let's say that we are going to want to go to the body. And we'll say once again, on click we'll execute a function, and this function is simply going to do something very basic, just like we did before. We'll say this.css, and then we'll say, in this case, we're gonna be dealing with background color, cuz we wanna change the background color property. And we're gonna change that to white, just like that. So like I said, nothing very interesting, nothing overly complicated, just kind of a little bit of a parlor trick. I can click on a couple of things, change some CSS, very basic jQuery, JavaScript, CSS style things. All right, so let's see we've got our changes in here, we have our main.css. We see that we've got background color as being gray, we have color of all paragraph tags are gonna be red. And then our JavaScript we're gonna wire up some things when the document is ready. And then this is all being referenced in here, and we have this paragraph tag. Okay, pretty simple stuff, let's go ahead and save all of that, let's go back into our terminal. And once again we'll see the status here, so we should see three chains, we modified three files. So let's just go ahead and add all of those and then we'll say commit -m. And we're just gonna say this is a parlor trick, nothing too interesting, but just to prove a point here. So we're gonna go ahead and push origin master, push all of our changes up to GitHub. And then we will switch over to our browser, once we're there and we can see that all of our changes have taken place in pages demo. And you can see here that these were all updated 16 seconds ago with the comment of Parlor trick, pretty interesting stuff. Okay, so let's come back over here to my GitHub pages demo, and let's go ahead and do a hard page refresh, empty cache. And so let's see what we've got here. We have a background gray and we have this text being red. All right, so everything seems to be there so far. So let's go ahead and click on this red text. I got both things to happen. So I'm kind of clicking in multiple places at the same time within body and on that text. So if I were to refresh this, if I were to click over to the right, I should see everything turn white. So I can see now that the gray background turned white. And then if I were to click on this text, it will go from red to black. So as you can see, like I mentioned before, with just a couple basic things, a couple basic skills and tools. That more than likely you already have some simple HTML, some simple JavaScript, some simple CSS. You can start to build pretty simple, interesting websites that are just informational purposes. Serving up some static content to show your end users kinda what you're all about. Maybe what your project is all about, maybe what your organization's all about. Whatever have you and you can do all of this stuff for free using GitHub and serving it up to the end world. That's pretty cool stuff. So like I said before, there are multiple ways to kind of present content. You can be repost specific, which is what we're doing here. But you can also be a little bit more generic and talk a little bit more about you or your organization. And in the next lesson I'm gonna show you what you need to do that's ever so slightly different to be a little bit more specific about you or your organization as opposed to your repo.

Back to the top