Git is an essential tool for developers that you'll want to become proficient with. It tracks and manages just about everything you code, making it really easy to review the history of your app, and to collaborate with team mates. GitHub is also very important, as it pretty much is your resume for employment, so as you move forward, you'll want to build on this to showcase your coding skills.
Prerequisites
- You're able to work with the command line. Check out Part1 to get some basic knowledge.
- You'll need some basic knowledge of html. Try freeCodeCamp or Udemy to learn more.
Git'ting Started ?
Open up your terminal and let's install git!
For Mac:
You can install git using brew by entering:
$ brew install git
For Linux or Ubuntu
You can install git using apt by entering:
$ sudo apt install git-all
Let's Use Git To Make A Webpage
From your desktop, create a new directory, and move into your new folder:
mkdir webpage
cd webpage
Next we'll initiate this new folder as a git repository by entering:
git init
Congrats! Now you have your first app repository. Now let's create your first webpage using nano:
nano index.html
By the way, index.html is the default page that a server looks for on a directory, and is generally the name of your homepage for websites.
We will make a super basic website by entering the following:
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>Hi World</h1>
</body>
</html>
The above is a simple html file, with the standard head and body components. The head is for metadata, such as a title that can be shown in tabs or for search results. The body is where all the visuals on your page go. In our case we added the headline "Hi World."
Now save your work by pressing cntr o .
You should be able to see your new webpage file from the "webpage" directory on your computer. Congrats, you have your first webpage! Go ahead and open it.
Once you're done admiring your work, press cntr x to exit out of nano.
Committing To Git
Git is a version control system that will save snapshots of your app as you go. These are called commits. To start your first commit type the following to gather all your changes:
git add --all
Now you're ready to commit your changes. Each commit should have a descriptive message for what has changed (or in our case, what is created):
git commit -m "Created the index.html file"
The above command commits the change. Your message goes in quotations after the -m. Now you've created a snapshot in time for your app, as it is now, should you ever need to go back.
Git'ting Started With GitHub! ?
GitHub is not git, and is instead a 'hub' for your git... If that makes sense.
One of the best ways to store your code is not on your computer, and instead on a remote server. That is exactly what GitHub does, while also making everything look really nice, and providing various features to collaborate with other developers. It can also host static websites for you, for free!
Head on over to GitHub to create your account.
Once created, click "Start A Project", and name your repository "website."
GitHub then gives you some nifty terminal instructions. In our case, we have an existing repository, so scroll to the instructions for that section (shown below). Note: In the image below, your git url will be different than mine, so be sure to copy from GitHub.
The above commands first adds your GitHub account to your local folder, and next copies (or pushes) your code to the GitHub server. From your website directory, type your GitHub commands into your terminal.
You may be asked to log in with your GitHub username and password. Note: For security purposes, your password will not show when you type it, so just type away and hit enter when done.
Now that you've pushed, you should be able to refresh your GitHub account, and find your code there:
You can also see your webpage hosted and can even route this to your own personal domain. Follow these steps to find your hosted domain:
Go to settings:
Next select scroll to GitHub Pages and select master branch
Scroll again to GitHub Pages to find your url
This may take a few browser refreshes to load, but after a few minutes, you should have a hosted site.
Making Updates
Finally, let's explore making a change to your app. Open your index file with nano:
nano index.html
Now let's change our message from "Hi World" to "Hi Universe"!
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>Hi Universe</h1>
</body>
</html>
Save and exit nano by entering cntl o and cntl x.
Now commit and push to the server:
git add --all
git commit -m "deciding to say hello to the universe"
git push origin master
Note: You will use the above three commands quite often as a developer.
Finally, mosey on back to GitHub to see your changes. You can now view your app's history by clicking the commits:
Building Your GitHub Portfolio
One other important aspect of GitHub is that it's basically become your resume. If your goal is to get employed, at some point you'll want to learn how to make your account look nice. However, no worries for now as you're just starting out. Like all great things, coding takes time and patients.
Hooray, now you know the basics of git!
Next, we'll explore hacking your browser console. ?
This article is part of an ongoing series. Subscribe below if this content helps you!
Disqus Recommendations
We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.
❮
- 3 years ago
After a month of coding on my new Pixelbook, I'm ready to share how this …
- 3 years ago
A tutorial for getting started with OpenAI's API, based on their quickstart guide, but …
- 3 years ago
My UX/UI thoughts on selecting the right navbar icon (hamburger vs dots …
- 2 years ago
A hackers introductory guide to using chrome developer tools to inspect, …
- 10 months ago
A hackers introductory guide to using chrome developer tools to inspect, …
- 3 years ago
A deep dive into Mongoose populate, to help avoid some pitfalls that you may …
- 3 years ago
An example for how to create custom theme color pallets in Bootstrap 5 …
- 3 years ago
A simple example setup of Vue3 using Vite, with ExpressJS and NodeJS on …
❯
Disqus Comments
We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.
G
Start the discussion…
Comment
Log in with
or sign up with Disqus or pick a name
Disqus is a discussion network
- Don't be a jerk or do anything illegal. Everything is easier that way.
Read full terms and conditions
This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:
- Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
- Contact me or enable others to contact me by email with offers for goods or services
- Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information
Acknowledge I am 18 or older
Discussion Favorited!
Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!
Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Be the first to comment.
live.rezync.com
live.rezync.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
pippio.com
pippio.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
Initial Apps](/content/site-root.html)
—
Teach Yourself To Code Part 2 - Getting Started With Git
Share this