How to Organize the Course Files and Create a GitHub Repository
In this guide, we're going to walk through how we can organize all the files that we're going to be using throughout this flexbox course and how we can also place them on github.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

And part of the reason why we'll be doing that is because we're going to be working with a number of different projects and different tools as we go through this specific flexbox course and some of them even involve getting your flexbox site up on the Web.

And so it gives us a really neat tool for being able to do that. So if you're wanting to follow along and see how I'm doing it then I thought it would be helpful for us to have the same setup. So right here I have visual studio code open inside of my virtual box and I'm going to simply click on open folder click here

large

Inside of my usernames directory, I have a code directory and here I am simply going to create a new folder there called flexbox-course and that is going to be the one that I want to use.

Now I don't have anything inside of it yet. So we'll add a new file here and it's just going to be called hello-flexbox.html so I'm going to just put something very basic inside of this one and this is just going to be for us to have something that we can actually see on GitHub, so now that we have that we can create our git repository.

The way we can start is by typing control Tilda(~) which is going to be that little key right above your tab. And that is going to open up your terminal right here and now you can type git init and then it tells us that we've initialized an empty git repository and then we can say git add . which will add that file.

large

After this we want to type 'git commit -m "Initial Commit"' to commit our new file to our git repository. Now, if we type git status, it's going to show that we have that new file that's going to be committed.

large

Now if you have not gone through my git and GitHub course then I'm not going to go into a lot of detail on how it works because you're going to go through everything that you are going to need to know in regards to version control, how do use git, how to use GitHub and so don't worry about that.

If you followed along in the system setup then you already have git and GitHub already configured on your system. And so you can just follow along with these commands and then later on when you go through the GitHub course it'll make sense on what we're doing.

So now that we have added that, now we can commit and I'll say git commit -m and this is just going to create a version and give us a benchmark in time for our project. So I'll say git commit -m "Initial commit".

large

And so now what we can do is go and create a project on the GitHub site. So I'm going to open this up, I have my GitHub already logged in, I can click on new repository here

large

I'll type flexbox-course and that is something that I can use because I have a little green checkmark here, it's going to be public and I'm just going to click Create repository.

large

and then copy that to the clipboard

large

then I can come back here and then paste this directly into the terminal and then this is going to be pushed up and it looks like everything works.

large

So as long as you didn't get any errors and you have your git already set up then you should be able to come back here open up the repo. And then there are our hello-flexbox.html files so everything there is set up, everything is working and we're going to be able to use it.

large

And so now if you come back here this is going to be the directory that we're going to be using throughout this entire course so we're going to create other subdirectories so any time we have a category or some project that we're going to build out I will create a new one here on the left-hand side and then we can add it to GitHub so that you can keep those all in one place.

And one thing that I've personally discovered especially when it comes to working with flexbox is there are a number of different kind of components that I use but I don't always remember every single detail that I need to type out and so whenever you can keep all of your code related to a specific topic like flexbox in a single spot it makes it really easy to reference.

So any time that you want to, for example, align-items right in the center of the page and use flexbox to do it you don't even have to have memorized all of those different commands you can simply go to your repo and go see the lesson where you did that, copy that code, and then add it to your new project. So it's nice and helpful to have that.