Create your first HTML page, commit it to GitHub and publish it on GH Pages!
- HTML
- CSS
- Javascript
- Tags
- GitHub, Git
- Fork, Clone, Commit, Push, Branch, GH Pages
Why does everyone want to learn to code? Does anyone have specific goals that we should incorporate into the class?
- For every lesson we’re going to start in github. Let’s begin by copying this project into your github account so you can work on it. We call this “forking a repository”.
- Github is a site that allows you to store and share code. It uses a technology called “git” that was created to help developers efficiently save, share, and distribute code. We’ll be using it to store and distribute all of the projects for this group.
- Open the Github Desktop client, and use it to save the repository to your computer so you can work on the code. We call this “cloning a repository”.
- Finally open your code editor Atom, and open the project file you just cloned to your computer. Double click the index.html file to open.
- YOU’RE READY TO CODE!
- There are three main components of web pages that we’ll be learning about - HTML, CSS, and Javascript.
- HTML: A markup language that structures the data on a website
- CSS: A markup language that styles and creates the layout for the data on a website
- Javascript: A programming language that we can use to add interactivity on a website
- For this first group, we’re just focusing on creating our first HTML page.
- Foundation of an HTML page:
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="Demo project">
<title>Coderbabez</title>
</head>
<body>
</body>
</html>- Note the words inside angle brackets! These are called tags. MOST tags in html will have an open and a closing tag like this .
- Tags give structure to our page. They also give clues & instruction to the browser (and tools like Google) about how to treat the data inside our site .
- Important Content Tags for today:
<header>,<section>,<h1>,<p>,<a>
Work through the todos in the HTML comments!
When we save our code it’s called committing It’s important to commit often!!
- To commit your code, go to Github Desktop
- Select all of the files you want to save
- Put a message describing the changes you made into the summary box.
- Hit commit
- Now hit “Push origin” in order to send this commit message and the file changes to github. Your repository has been updated!
Github gives us an awesome way to publish our code as a website immediately. It’s called gh-pages.
- To do this, we need to create a new "branch" of our repository called gh-pages.
- In GitHub desktop, go to File > New Branch. Name the new branch “gh-pages” NOTE: spelling is important!!
- Click “Publish this branch to GitHub”
- Your site is live! To see it, go to this url: https://[YOUR-GITHUB-USERNAME].github.io/coderbabez/
Amazing! You made your first website!
HTML is the foundation of every site on the internet. Next week we’ll take a look at CSS and see if we can add some style to our pages.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent