In the upcoming labs, we will be working through the creation of a full website, introducing various HTML concepts and components while applying them to our site. Each lesson builds off of the work completed in the last, so in this lesson, we will be going through the process of setting up your own GitHub repository to code along in. In addition to this, in the event that you get stuck or your personal repository isn't working as intended, you will have access to a repository with starter code to follow along with from each lesson.
NOTE: Videos are provided in these lessons, but contain some instructions and steps that have changed, especially if you are using the in-browser Learn IDE. For this reason, the Readme content of these lessons will differ slightly from video instructions, and will include up-to-date steps for navigating the Learn IDE and completing these lessons entirely within your browser Learn environment (instead of Sublime, the text editor used in the video). You do not need specific applications such as Sublime or iTerm.
While using the in-browser Sandbox, if you leave the page or refresh, any work completed will be lost unless it is pushed up to a remote repository, which we will be discussing in this lesson. Make sure, though, to always open a new browser tab or window when navigating away from Learn.
Let's start by creating some initial folders and files before creating a remote git repository online.
mkdir exceptional-realty. Then, to navigate into that folder, type
touch README.mdto create an empty README file. The file will appear in the folder tree beside the text editor in the Learn IDE, within the
.gitignorefile, which is essential in preventing private and/or sensitive files from being shared publicly when your repository is online. First, type
touch .gitignoreto create the file. For now, we can use a list of common
.gitignoreconfigurations to populate this file, provided via GitHub. Navigate to https://gist.github.com/octocat/9257657, copy the contents of the
.gitignorefile provided there, and paste them into your newly created file.
Now that we've got some files in our project, let's initialize a new git repository locally, then create a remote repo and connect them.
git init. You should see a line in your terminal that displays where your git file has been created:
Initialized empty Git repository in /home/.../exceptional-realty/.git/
git statusin your terminal, you should see the files we just created listed as 'Untracked files'. Since these files are untracked, any changes made to them won't be recognized by our git repository yet.
git add .. Then, we want to record, a.k.a 'commit', these changes to our git repo by typing
git commit -m 'first commit'. The
-mis short for
--message=, which we'll use to state what we're doing during this particular commit.
git statusnow, you'll see that our files are no longer listed, and that there is 'nothing to commit, the working directory is clean', meaning there are no new changes since the last commit.
We've got our local work ready to go, so now we need to set up a new remote repository to store this in.
+button and choose New repository
git remote add origin https://github.com/<your_username_here>/exceptional-realty.git...
git push -u origin master
origin, using our local repository's
-uis necessary for the first time we do this, as it also tells git to set up tracking between our local and remote
masterbranches. You may need to enter your GitHub credentials in the terminal to complete this step. If successful, your terminal will display that it is counting and writing objects to your remote repository, and that
Branch master set up to track remote branch master from origin.
git clone https://github.com/<your_username_here>/exceptional-realty
This will download a copy to your Learn IDE based on whatever you last committed and pushed up to GitHub. Always push up any work you want to keep and access again! If you run into any issues while following along in these lessons, or are unable to set up your own repository, remember that you will still be able to use a demonstration repository in each of the following lessons to code along.
git branch. This command will show you all the existing branches that are stored locally on your computer, and currently, we only have one,
master. As a general best practice, the
masterbranch should always be kept in a fully functional state; any new features or additions made on a repo should be done on a separate branch, allowing one or more developers to work on isolated parts of a project without interfering with the
masterversion until the branch code is fully ready.
git checkout -b main-pages
Your terminal should now display that you are on a new branch,
Create Newbutton in your Learn IDE and choosing
File, or by using your terminal and the command
touch, followed by the name of the file. Go ahead and create our first file,
index.html, all lowercase, which will be our homepage on the website. Now, let's create the rest of our web pages:
touch index.html touch contact.html touch market-report.html touch new-properties.html touch real-estate-listings.html
Create Newbutton, and name it
wget. First, though, we need an image. Since we're building a real estate website, let's use the image found at http://ironboard-curriculum-content.s3.amazonaws.com/front-end/lab-assets/intro-pic.jpg:
cd) into your
imagesfolder, and type the following:
intro-pic.jpgshould appear in your images folder. You may not be able to view this image in the Learn IDE, but that is fine; we can still use it in our site.
In the upcoming videos, whenever an image or video is downloaded from the
internet, the written instructions will use
wget instead to retrieve those
While we build our website and add content, we need to be actively checking to see what the
actual site looks like. In the Learn IDE, we can use a tool that is already
cd .., so you are in your main
Your server is running at ..., following by a string of numbers, with periods and a colon. Copy that string, open a new tab, and paste.
wgetand placed in our
imagesfolder should appear.
httpserver, make sure your terminal is in focus and press
We will use
httpserver throughout these lessons in place of opening files via
Finder, the method mentioned in the videos.
We now have a remote repository set up with a good foundation of necessary
files. Before moving on, make sure you have added, committed and pushed your
local work up to your remote repository. But wait! If you've been following
along, you're currently on a new branch,
main-pages! Our new features
aren't complete, so we want to make sure this branch is stored separately from
master branch in our remote repository. Entering the following commands
will push up this new branch without interfering with
git add . git commit -m 'added html pages and an image' git push -u origin main-pages
This adds any changes you've made, creates a commit record of them, and tells
git to push the
main-pages branch to your
origin, the remote repository,
setting up tracking between your local and remote
main-pages branches. If
you check out your repository on GitHub, you'll see that you now have 2
Always make sure to push up any new work before continuing to the next lesson.
This way, at the beginning of your next lesson, you can clone down a copy of
your remote repository, switch over to the
main-pages branch and continue
working. The following instructions will be in each lesson, but
for reference, here are the steps:
git clone https://github.com/<your_username_here>/exceptional-realty cd exceptional-realty git fetch --all git checkout main-pages
git fetch --all is necessary, as just cloning down a repository will
only pull the
master branch to your local computer. We use
fetch --all to
retrieve all remote branches, then
checkout to switch over to one.
View Setting up a New Site on Learn.co and start learning to code for free.