Baby Steps

A GitHub repository is a folder that stores your website’s code and other assets (like images, fonts, etc.). There are two methods for creating new repositories: either from the GitHub Desktop app, or from github.com. I’ll explain both methods.

Method 1 Creating a repository using GitHub Desktop

Did you forget to uncheck the Keep this code private box when creating your repository? To fix this, first log into github.com. Open up your repository on github.com (Step 2.6 explains how to get here). Click Settings at the top of your repository’s page. Scroll to the bottom of the page, and click Change visibility. Change your repository’s visibility to public and click through all of the (suprisingly scary) screens that GitHub uses to warn you not to do this.

Method 2 Creating a repository using github.com

If you’ve already followed the previous steps, feel free to skip this. These steps show another way of creating a repository from github.com as opposed to GitHub Desktop.

And you’re done! No matter the method you picked, you’ll end up with a repository that’s both live on github.com and downloaded to your computer.

The smallest website contains a single HTML file. This is a plaintext file with the extension .html. Let’s make one!

And you’re done! You’ve just finished coding the first page of your new website!

You HAVE to call your file index.html. Why? When you visit a website, all you’re really doing is downloading and viewing some files from another computer (usually located in a server farm). For example, here is the folder with all the files for babysteps.gdwithgd.com. By going to babysteps.gdwithgd.com, you’re actually accessing this folder. Your computer then knows to look for the index.html file in that folder, which it opens automatically. If you named the file something else, like homepage.html for example, you would get a 404 error visiting babysteps.gdwithgd.com. Instead, you’d have to go to babysteps.gdwithgd.com/​homepage.html. You can learn more about folder structure and file paths in Step 7.

Your website doesn’t need to be live on the Internet to view it. In this step, we’ll learn how to preview your site before publishing it online.

A (worse) method: You can also drag any .html file into a web browser to preview it, but this won’t always provide an accurate preview of how your site will look once it goes live. Always try to test your sites using Live Server before launching them to get the most accurate preview!

GitHub Pages is a free service for launching basic websites. You’ll get a unique URL in the format of [your-github-username].github.io/[your-repository-name]. If you want to purchase a custom URL in the future, you can use that too!

You should now be on your repository’s page on github.com. On this page, you can see the file(s) you just pushed via GitHub Desktop. Up next, we’re going to launch your site!

A website is just a series of files that you can view in your web browser. What we just did is ask GitHub to load our files when a specific URL is accessed. Now, when you go to your URL, one of GitHub’s computers sends you the right files. This is called static web hosting (because a visitor can’t change any of the files — they can only view them).

If you’ve followed Steps 1–5, then your site is a single page with one line of text: “Hello world!” From this point on, your site can become anything you want it to be.

So far, you’ve written code using the programming language HTML. There are three programming languages that websites use:

• HTML (Hypertext Markup Language) for organizing content, like text and media files (images, videos, sound, etc.). This is the only programming language that websites require.
• CSS (Cascading Style Sheet) for designing that content. Basically every website uses CSS in some capacity, otherwise it’ll look like this.
• JS (JavaScript) for adding deeper functionality to that content. This is the most advanced of the languages and is not necessary for most basic websites. (But it can be super fun!)

I’d recommend learning these languages in order, starting with HTML and CSS and then only proceeding to JavaScript once you feel confident in the first two. If you don’t know where to start, head over to Cheatsheet for a big list of things worth learning (at your own pace)!

Whenever you make changes to your code on your computer, you’ll need to push your updates to the live site using GitHub Desktop again. Let’s learn how to do that!

Did you get an error? Sometimes, you might encounter the following error when pushing your repository: The remote disconnected. Check your Internet connection and try again. To fix this error, do the following: i. Open the Terminal application, which should already be installed on your computer (Mac users / Windows users) ii. Type git --version and press enter to make sure you have Git installed. If it isn’t installed, you’ll be prompted to install it. If you aren’t given the option, you can install Git from here. iii. Once Git is installed, type git config --global http.postBuffer 157286400 in your Terminal and press enter. And that’s it! You should be able to push your repository now using GitHub Desktop.

That’s it! There’s no other setup required since you already launched your site on GitHub Pages. Every time you push your code, your site will automatically update after a minute or so. The bigger the files on your site, the longer it’ll take to update.

This section is a little harder to explain, so I’ve split up into two parts:

• Creating new pages
• Adding links to navigate between each page

I’ve also created another website, Pathfinder, to help demonstrate how a website’s folder structure and links work! Pathfinder also contains a template you can download for a multi-page website.

Part 1 Creating new pages

Every page on your site is an HTML (i.e. .html) file. If you’ve followed Steps 1–6, you should have a single HTML file called index.html, which is your site’s homepage.

We can visualize this using a file tree diagram. This shows the structure of folders and files within your repository. Let’s assume your GitHub username is kiki and your repository name is bouba, so that your site’s live URL is kiki.github.io/bouba/. Here is the current file tree for your single-page website:

📁 bouba/
│
└── 📄 index.html

The general rule is that every page on your site requires its own HTML file. If we wanted to add more pages, your file tree might look like this:

📁 bouba/
│
├── 📄 index.html
│
├── 📄 about.html
│
├── 📄 projects.html
│
├── 📄 branding.html
│
├── 📄 motion.html
│
└── 📄 websites.html

While this will technically work, it isn’t great. Organizing your site’s files this way will result in the following URLs:

• kiki.github.io/bouba/ (the homepage, which uses your index.html file)
• kiki.github.io/bouba/about.html
• kiki.github.io/bouba/projects.html
• kiki.github.io/bouba/branding.html
• kiki.github.io/bouba/motion.html
• kiki.github.io/bouba/websites.html

First of all, these URLs are ugly! The average person doesn’t know what an HTML file is, so why do the names have .html in them? And what is the structure of this website? Is the “motion” page a subpage of the “projects” page, or is it a standalone page?

Instead, we’d rather have the following URLs for our site:

• kiki.github.io/bouba/
• kiki.github.io/bouba/about/
• kiki.github.io/bouba/projects/
• kiki.github.io/bouba/projects/branding/
• kiki.github.io/bouba/projects/motion/
• kiki.github.io/bouba/projects/websites/

Much better! Now, someone visiting your site won’t get confused about the .html portion of the URL, and they can easily tell where they are on the site based on the URL’s structure. To achieve this URL structure, we’ll need to update our file tree:

📁 bouba/
│
├── 📄 index.html
│
├── 📁 about/
│   │
│   └── 📄 index.html
│
└── 📁 projects/
    │
    ├── 📁 branding/
    │   │
    │   └── 📄 index.html
    │
    ├── 📁 motion/
    │   │
    │   └── 📄 index.html
    │
    └── 📁 websites/
        │
        └── 📄 index.html

Instead of giving our HTML files unique names, we create several folders in our repository with unique names. Then, we create an index.html file within each folder. The good news is that when you have multiple files with the same name open in Visual Studio Code, it will label which folder they’re in. That way, you can make sure you’re editing the correct file!

Feeling confused? Check out Pathfinder to see a more in-depth example of how this folder structure works on a live website!

Here’s how to add folders and additional index.html files to your repository:

And you’re done! As a reminder, your file tree should look something like this:

📁 bouba/
│
├── 📄 index.html
│
├── 📁 about/
│   │
│   └── 📄 index.html
│
└── 📁 projects/
    │
    ├── 📁 branding/
    │   │
    │   └── 📄 index.html
    │
    ├── 📁 motion/
    │   │
    │   └── 📄 index.html
    │
    └── 📁 websites/
        │
        └── 📄 index.html

Part 2 Adding links to navigate between each page

HTML code uses things called elements to break up the content of your website. A common HTML element is the link element, which looks like this:

<a href="example.com">Click me!</a>

I color-coded the element so that we can break down it’s structure:

• Pink: the opening tag, which marks the start of the element and contains additional information about it.
• Green: an attribute, which in this case is the URL you want your link to go to.
• Blue: the actual URL itself, inside of the attribute.
• Yellow: the element’s visible text when you preview your site.
• Purple: the closing tag, which marks the end of the element.

Link elements let us adds links between the pages on our site. In this example, the link goes to example.com. What if we want the link to go to another page on the site we’re testing, which isn’t live yet?

To do that, we’ll use the relative file path from your current page to the next page. Let’s take a look at our site’s file tree again:

📁 bouba/
│
├── 📄 index.html
│
├── 📁 about/
│   │
│   └── 📄 index.html
│
└── 📁 projects/
    │
    ├── 📁 branding/
    │   │
    │   └── 📄 index.html
    │
    ├── 📁 motion/
    │   │
    │   └── 📄 index.html
    │
    └── 📁 websites/
        │
        └── 📄 index.html

We want to link to the folder that represents the page we want to go to, not the index.html file. Let’s see all the file paths for each page of our site if we start from the homepage.

📁 ./ this indicates your current folder
│
├── 📁 about/
│
└── 📁 projects/
    │
    ├── 📁 projects/branding/
    │
    ├── 📁 projects/motion/
    │
    └── 📁 projects/websites/

If we wan to link to the “About” page, we could then create a link element with the following URL:

<a href="about/">Click me!</a>

Let’s revisit our file tree. This time, we’ll assume we’re starting from the “About” page:

📁 ../
│
├── 📁 ./ you are here
│
└── 📁 ../projects/
    │
    ├── 📁 ../projects/branding/
    │
    ├── 📁 ../projects/motion/
    │
    └── 📁 ../projects/websites/

Our file paths are a little more complicated now because we’re starting from inside a subfolder. We need to go up one level to the parent folder using the notation ../ and then we can head back down into other subfolders. For example, if we wanted to go to the “Websites” page, our link would look like this:

<a href="../projects/websites/">Click me!</a>

Let’s revisit our file tree one more time, this time assuming we’re starting from the “Websites” page:

📁 ../../
│
├── 📁 ../../about
│
└── 📁 ../projects/
    │
    ├── 📁 ../branding/
    │
    ├── 📁 ../motion/
    │
    └── 📁 ./ you are here

Now, some pages are two folders up from where we are. So, we have to write ../ twice. If we want to go back to the homepage from here, our link will look like this:

<a href="../../">Click me!</a>

Feeling confused? Check out Pathfinder to see a more in-depth example of how these file paths work on a live website!

To summarize, here’s how you add links between pages on your site:

And you’re done! You’ve learned how to add more pages to your site, as well as how to link between the pages on your site. Once you’re ready, follow Step 6 again to update your live site.

If you’re ever confused, you can always check out Pathfinder to see a more in-depth example of how folder structure and file paths work on a live website! Plus, you can download a template to get a head start on making your own multi-page website.

OK, I lied a little bit in this section. Even though it’s ugly, you’re likely to encounter situations in the real world where organizations have multiple .html files in one folder. Here’s an example from The New York Times, which we can tell uses the folder structure 2024/08/27/arts/music/ from the URL structure.

Are you tired of your long, GitHub-branded URL? Good news — custom URLs are cheap, and it’s easy to connect one to your GitHub repository! They’re also totally optional, so feel free to skip this step if you’d like.

Part 1 Purchasing a URL

First, you should understanding that there are two sides to launching a site:

• You site’s files have to be hosted on a server somewhere. This is literally a computer that stores your code, media, etc. If you’re launching your site using GitHub, that means that one of GitHub’s servers has your site’s files.
• Your site also needs a domain name (a.k.a. URL) that people can use to access your site’s files. GitHub provides URLs for free in the format [your-github-username].github.io/[repository-name]. If you want something more unique, you’ll have to pay a registrar a subscription fee to use a URL of your choosing.

So, we need to pay a registrar some money then! There are dozens of registrars out there, many of which offer good prices and service. I personally use Namecheap for most of my URLs, and I’ve heard good things about Porkbun and Cloudflare. Whatever service you go with, I do NOT recommend GoDaddy because they charge more and have stinky products (personal biased opinion). Also, you’re able to buy a URL from one registrar and switch to another later for a fee.

Domains are subscriptions that typically cost less than $20 per year per domain. Sometimes, if a domain is a short phrase and someone already owns it, they’ll resell it for a high cost, after which the subscription will still be under $20 per year. Domains can go up to tens of thousands of dollars!

There’s also the matter of the top-level domain (TLD). This is the part that comes after the period, like .com or .org. Some TLDs are reserved for things like governmental use only, but most of them are actually owned and sold by specific countries. For example, the .io TLD is owned by the British Indian Ocean Territory! It doesn’t matter who owns the TLD — most of them are fair game when purchasing a URL and you don’t have to worry about the name not working in the future. There are even still TLDs out there for countries that no longer exist. For a full list of TLDs, check out this page.

Part 2 Setting up a custom URL

Here are instructions for connecting a domain purchased from Namecheap to a site hosted on GitHub:

And now your site uses a custom URL!

Part 3 Setting up a subdomain

You can also add as many subdomains to your site as you want. For example, this site’s URL is babysteps.gdwithgd.com, so the subdomain is babysteps (anything that comes before the main URL, separated by a period).

Here’s how to add a subdomain to your URL:

And now, just like me, you can have as many websites as you want while only paying for one URL!

There are three languages that websites use:

• HTML (Hypertext Markup Language) for organizing content, like text and media files (images, videos, sound, etc.). This is the only programming language that websites require.
• CSS (Cascading Style Sheet) for designing that content. Basically every website uses CSS in some capacity, otherwise it’ll look like this.
• JS (JavaScript) for adding deeper functionality to that content. This is the most advanced of the languages and is not necessary for most basic websites. (But it can be super fun!)

This section will go over the basics of how HTML, CSS, and JavaScript work together. I won’t go too far in-depth, so if you want to learn more then I recommend you check out Cheatsheet!

Hypertext Markup Language HTML

If followed this tutorial so far, then you’ve coded in HTML! At a minimum, a live website requires an index.html file. The file extension .html indicates that your file contains HTML code.

When we made links in Step 7, we learned that HTML code uses things called elements to organize content. Here’s an example of a paragraph in HTML:

<p>I’m a paragraph!</p>

I color-coded the element so that we can break down it’s structure:

• Pink: the opening tag, which marks the start of the element. This part of the element will be invisible on the live site. The opening tag also indicates which kind of element we’re creating, which we know is a paragraph because of the letter p
• Green: the visible content of your element.
• Blue: the closing tag, which copies the opening tag with an additional / symbol.

For a list of possible HTML elements, check out Cheatsheet!

When you make a new HTML file in Visual Studio Code, you can type ! and press enter to generate an HTML template. This file contains two major sections you should know about:

• The <head></head> section, which contains invisible metadata about your site, like what title to display in the tab bar.
• The <body></body> section, which contains your page’s visible content.

Cascading Style Sheets CSS

If you want your site to look prettier, you’ll need to start coding using CSS. By itself, CSS does very little. But when you attach CSS to HTML, you can make a website look like the one you’re currently on (which I think is pretty)! In fact, click this if you want to see what this website looks like without CSS. (You’ll probably have to refresh the page to get back to this section!)

There are three ways to add CSS to an HTML document:

• Inline CSS, which goes inside of HTML elements directly.
• Internal CSS, which goes at the top of the HTML file.
• External CSS, which has its own file using the extension .css

Here’s an example of a paragraph element with inline CSS:

<p style="color: red; font-size: 24px;">Hello!</p>

And here’s how that breaks down:

• Pink: the style attribute, which goes inside of the opening tag of the element. The code inside the quotes " " will be interpreted as CSS.
• Green: a CSS property, which indicates what aspect of the element’s design we want to change. This is always followed by a colon :
• Blue: a value to set each property to. This is always followed by a semicolon ;

For a list of possible CSS properties and values, check out Cheatsheet!

Internal CSS uses its own HTML element, which we indicate using the <style></style> tags. This lets us organize CSS into classes so that we can apply the same styles to multiple elements without repeating our code over and over. For an example of internal CSS and classes, check out this demo. Note that internal CSS should be added right before the </head> tag in your HTML file.

External CSS is stored in an entirely separate file from your HTML code. This file is typically called something like style.css and contains the same formatting as internal CSS. The advantage of external CSS is that you can reference the same classes across multiple pages on your site.

To add external CSS to your website, you’ll need the following element somewhere in your <head></head> section:

<link rel="stylesheet" href="[path-to-css-file]">

The path could be something like assets/code/style.css depending on your folder structure. Also, note that this particular HTML element does NOT have a closing tag.

Check out Pathfinder to see an example of an external CSS file! You can also try downloading a site template to experiment with external CSS yourself.

JavaScript JS

This language is not to be confused with Java, which is an entirely different programming language that websites DON’T use!

JavaScript is a more typical programming language when compared to HTML and CSS. If you learn how to code in JavaScript, then you’ll be able to transfer that knowledge to most other programming languages. Meanwhile, HTML and CSS are more specific to the web.

JavaScript lets you do all sorts of things! You can even dynamically change HTML and CSS code using JavaScript, like on the GD with GD Generator.

There are two main ways of adding JavaScript to your file that are very similar to adding CSS:

• Internal JavaScript, which goes at the bottom of the HTML file.
• External JavaScript, which lives in its own file using the extension .js

I’m not going to talk at all about how to write JavaScript, because it’s much harder to sum up than HTML and CSS. Instead, I’ll just tell you where to put it in your code.

To add internal JavaScript, add a <script></script> right before the </body> tag.

To add external JavaScript, you’ll also want to add a a <script></script> right before the </body> tag. In this case, the new element will look something like the following:

<script src="[path-to-js-file]"></script>

The path could be something like assets/code/script.js depending on your folder structure.

Check out Pathfinder to see an example of an external JS file! You can also try downloading a site template to experiment with external JS yourself.

If you’re interested in learning how to code in JavaScript, check out Cheatsheet!