Project How-To Part 1

It’s time to stop and put some of this together. A language is only useful if you use it. Decide on something you’d like to teach someone else. This is going to be a how-to site. I’m going to do a recipe.

The first step in a project is to set it up. If you were cooking, it would be the “mise en place,” the putting everything in its place. It’s the preparation, the all-important organization so that the rest goes well.

We start by making a directory to hold our project. You can go into the folder and create a new folder titled for your project. Make sure it’s one word. And in that folder, you can create another folder called resources. Then inside that maybe one that says images and another css. You’ll then need an index.html file saved in the main directory and a style.css file saved in the css directory.

If you want to feel super snazzy, you’d do it like this. Open your Git Bash program and use command line to create the files and directories.

Use cd (change directory) to navigate into your documents folder/directory, wherever you are storing your projects and again to get into your projects directory. Then you will mkdir (make directory) and name it your project name. Then you will touch index.html to create the file. Then you can use cd to get into your resources directory. Then mkdir directories for resources, images, and css. Use cd to get into your css directory and touch style.css to create that file. And viola! It looks like this.

cd documents

cd projects

mkdir howTo

cd howTo

touch index.html

mkdir resources

cd resources

mkdir images

mkdir css

cd css

touch style.css

The key is to always make sure you are in the directory you want to create the new file or directory in. It will show you the file path in front of you. The last word in it is the current directory. You can always use LS to list what’s in a certain directory.

Now you can open Atom and add your project folder. Open your index file, type html, and hit TAB to get it set up. In the HEAD, link your style sheet like this.


Open your style file and add something like *{background-color: red} to check and make sure you’ve linked them together. Test it out.

Finally, open and create a new repository with the same name for the project. Use Git Bash to link the directories together. You’ll start with typing git init in the howTo project directory. Then use the lines given on GitHub to set up the connection to the “origin.” Type carefully!

Your project is ready to go!

Watch the lesson.