Sign in Subscribe
By Rohan Patel in learn-to-code —

Building and Deploying Your First Website With Github Pages

Objectives:

  1. Understand the Basics of HTML and CSS: Learn the foundations of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). HTML provides the structure of a web page, while CSS controls the visual appearance.
  2. Create a Multi-Page Website: Apply the HTML and CSS knowledge to create a simple multi-page website. Learn how to properly structure a website and link between different pages.
  3. Learn About Version Control with Git and GitHub: Understand the concept of version control and how it can be beneficial in a development project. Use Git for tracking changes in the code during development and GitHub for hosting the code online.
  4. Deploy a Website Using GitHub Pages: Learn about website deployment and how to make the website publicly accessible on the internet using GitHub Pages.

By the end of this project, students will have a working knowledge of basic web development concepts and techniques, including HTML and CSS coding, version control with Git and GitHub, and website deployment. They will create their own website and host it online, showcasing their new skills.

Step-by-step instructions:

Part One: Learning HTML and CSS

The first part of creating a website is learning about the two primary technologies that are used to create web pages: HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

Objectives:

  • Learn the basics of HTML.
  • Learn the basics of CSS.

Materials Needed:

  • A computer with an internet connection.
  • An online learning resource or platform (like Khan Academy, Codecademy, or W3Schools).
  • A text editor (like Visual Studio Code) for writing and editing code.

Instructions:

Introduction to HTML:

HTML is the structure or skeleton of a website. It’s what gives the website its basic shape.

  • Learn about HTML elements and tags. HTML elements are the building blocks of HTML pages. They’re defined by tags, which are written in angle brackets. For example, <h1> is a tag that defines a first-level heading.
  • Learn about the HTML document structure. Every HTML document starts with a <!DOCTYPE html> declaration, which is followed by the <html> tag. The <html> tag contains two parts: <head> and <body>. The <head> contains meta-information about the document, while the <body> contains the content of the page that’s visible to the user.
  • Learn about different types of HTML elements such as headings (<h1> to <h6>), paragraphs (<p>), links (<a>), images (<img>), and lists (<ul>, <ol>, <li>).

Creating a Basic HTML Page:

Now that you’ve learned some basic HTML elements, it’s time to create your first HTML page.

  • Open your text editor and create a new file. Name it “index.html”.
  • Write a simple HTML page. Here’s a basic example:
<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>Welcome to my first web page.</p>
    </body>
</html>
  • Save the file and open it in your web browser. You should see a webpage with a heading saying “Hello, world!” and a paragraph saying “Welcome to my first web page.”
  1. Introduction to CSS:

CSS is used to style HTML elements. It can change the color, size, position, and more of HTML elements.

  • Learn about CSS syntax. A CSS rule consists of a selector and a declaration block. The selector is the HTML element you want to style, and the declaration block contains one or more declarations (property-value pairs). For example, h1 {color: red;} will make all first-level headings red.
  • Learn about different CSS properties. For example, color changes the text color, background-color changes the background color, font-size changes the text size, margin changes the outside spacing, and padding changes the inside spacing.
  1. Adding CSS to Your HTML Page:

Now that you’ve learned some basic CSS, it’s time to style your HTML page.

  • Create a new file in your text editor. Name it “styles.css”.
  • Write some simple CSS rules. Here’s a basic example:
body {
    background-color: lightblue;
}

h1 {
    color: navy;
}
  • Save your “styles.css” file.
  • Go back to your “index.html” file in your text editor. Add a link to the “styles.css” file in the <head> section of your HTML document. It should look like this:
<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>Welcome to my first web page.</p>
    </body>
</html>
  • Save your “index.html” file and open it in your web browser. You should see the changes you made with CSS. The background color of the page should be light blue, and the color of the first-level heading should be navy.

This wraps up the first part of the project. Through these steps, you should now have a basic understanding of HTML and CSS, and have created your first simple web page. In the next part of the project, you’ll learn how to use GitHub and GitHub Pages to publish your website on the internet.

Part 2: Creating Your Website

Objectives:

  • Use HTML to structure your website.
  • Use CSS to style your website.

Materials Needed:

  • A computer with an internet connection.
  • The text editor you’ve been using (like Sublime Text, Atom, or Visual Studio Code).

Instructions:

  1. Planning Your Website:

Before you start coding, it’s a good idea to make a plan for your website. This could be as simple as a sketch on a piece of paper. Consider what you want to include on your website. It could be about your favorite hobby, a personal blog, or anything else you’re interested in. Remember to keep it simple as this is your first website.

  1. Structuring Your Website with HTML:

For each page, create a new HTML file. For example, you might create “index.html” for your Home page, “about.html” for your About page, and “contact.html” for your Contact page.

Start by creating the HTML structure for each page. Each page might have a basic structure like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <header>
            <nav>
                <!-- Navigation links will go here -->
            </nav>
        </header>
        <main>
            <!-- Main content will go here -->
        </main>
        <footer>
            <!-- Footer content will go here -->
        </footer>
    </body>
</html>
  1. Creating Navigation Links:

One important part of your website is the navigation, which allows users to navigate between different pages. This typically goes in the <nav> element.

Here’s an example of what the navigation in your “index.html” file might look like:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

The <a> element creates a link, and the href attribute specifies the URL of the page the link goes to. Here, it’s linking to the other HTML files you created. You’ll want to include this navigation in all of your HTML files, so users can navigate between them.

  1. Adding Content to Your Pages:

Now, you can start adding content to your pages. This content will go in the <main> element. For example, your “index.html” file might look like this:

<main>
    <h1>Welcome to My Website!</h1>
    <p>This is a website all about me, Your Name!</p>
    <!-- Add more content here -->
</main>

And your “about.html” file might look like this:

<main>
    <h1>About Me</h1>
    <p>Hi, I'm Your Name! I love coding and creating websites. In my free time, I also enjoy reading, biking, and painting.</p>
    <!-- Add more content here -->
</main>
  1. Adding a Footer:

Finally, you can add a footer to your website. The footer usually contains information like copyright notices, links to privacy policies, etc. This will go in the <footer> element. Here’s an example:

<footer>
    <p>Copyright &copy; 2023 Your Name</p>
</footer>

Include this footer in all of your HTML files.

Remember to save your files regularly, and you can always preview your progress by opening your HTML files in a web browser.

  1. Styling Your Website with CSS:

Creating a new file named “styles.css” in the same directory as your HTML files will provide a place to write CSS code that will be applied to your entire site.

Here’s a more detailed breakdown of styling your website:

  1. Adding a Universal Style:

We can begin by adding a style that will apply to the entire website. This can be done using the universal (*) selector.

For example, if we wanted all the text on our website to use the font Arial, and have a bit of space between each line, we could write:

* {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

This CSS rule will apply to every element on our website because of the * selector.

  1. Styling Specific Elements:

If you want to style specific HTML elements, you simply use the element’s name as the selector. For example, to change all first-level headings (<h1> elements) to have a blue color, you would write:

h1 {
    color: blue;
}
  1. Adding Styles to Classes and IDs:

Classes and IDs allow you to style specific elements or groups of elements. If you want a style to apply to a group of elements, you can give them all the same class and then style that class in your CSS.

For example, if you wanted all elements with the class “highlight” to have a yellow background color, you would first add the class to the elements in your HTML:

<p class="highlight">This is a highlighted paragraph.</p>

Then, in your CSS file, you would add:

.highlight {
    background-color: yellow;
}

IDs work similarly, but they’re meant to be unique to a single element. They can be useful for styles that should only apply to one element on your page.

  1. Styling the Navigation:

You might want your navigation links to look different from other links on your website. For example, you could make them uppercase and without the underline that links usually have. If your navigation links are all within a <nav> element, you could style them like this:

nav a {
    text-decoration: none;
    text-transform: uppercase;
}
  1. Adding Layout Styles:

CSS can also be used to change the layout of your website. For example, you can center text, add space around elements, and even change the display properties of elements.

To center all text within the <main> element, you could add this to your CSS file:

main {
    text-align: center;
}

To add some space around your main content, you could use the padding property:

main {
    text-align: center;
    padding: 20px;
}

Remember, this is just a start. The possibilities with CSS are almost endless, so don’t be afraid to experiment and try things out. Save your “styles.css” file regularly, and you can always preview your progress by refreshing your HTML files in a web browser.

  1. Reviewing Your Website:

Save your HTML and CSS files, then open one of your HTML files in your web browser. Review each page and make sure everything looks as you expect it to.

This is the end of Part 2. You should now have a simple persona website! In Part 3, you’ll learn how to use GitHub and GitHub Pages to put your website on the internet.

Part 3: Using GitHub and GitHub Pages

Objectives:

  • Learn basic Git commands.
  • Create a GitHub account.
  • Create a new repository on GitHub.
  • Learn to use GitHub for version control.

Materials Needed:

  • A computer with an internet connection.
  • Git installed on your computer. (You can download Git from here).

Instructions:

  1. Introduction to Git and GitHub:
  • Git is a version control system that lets you track changes to your files over time. This is incredibly useful when coding, as it allows you to see previous versions of your code and even revert to them if necessary.
  • GitHub is a web-based hosting service for Git repositories. In other words, it’s a place to store your code online so you can access it from anywhere. It also makes it easy to collaborate with others on coding projects.
  1. Setting Up Git:
  • After installing Git, you should configure it with your name and email address. This information is used to track who made each change in the history of your project.
  • Open your computer’s command prompt or terminal.
  • Type the following commands, replacing “Your Name” and “youremail@example.com” with your actual name and email address:
git config --global user.name "Your Name"git config --global user.email "youremail@example.com"
  1. Creating a GitHub Account:
  • Go to the GitHub website and sign up for a new account if you don’t already have one.
  • Remember your username and password, as you’ll need them to log in to GitHub in the future.
  1. Creating a New Repository on GitHub:
  • Log in to GitHub.
  • Click the “+” icon in the top right corner and select “New repository”.
  • Name your repository. You could name it something like “my-first-website”.
  • Select “Public” so that anyone can see your repository.
  • Click “Create repository”.
  1. Initializing Your Project with Git:
  • Go back to your command prompt or terminal.
  • Navigate to the folder where you stored your website files using the cd command (which stands for “change directory”). For example, if your website files are in a folder named “my-first-website” on your Desktop, you would type:
cd Desktop/my-first-website
  • Once you’re in your project’s folder, type the following command to initialize a new Git repository:
git init
  1. Connecting Your Local Repository to GitHub:
  • In your GitHub repository, you’ll see a section labeled “…or push an existing repository from the command line”. Copy the commands shown there.
  • Go back to your command prompt or terminal and paste those commands. They should look something like this:
git remote add origin <https://github.com/yourusername/my-first-website.git>
  1. Committing and Pushing Your Changes:
  • First, you need to add your files to the staging area with the following command:
git add .
  • Then, commit your changes with a message describing what you did. For example:
git commit -m "Initial commit"
  • Finally, push your changes to GitHub with the following command:
git push -u origin master
  • Refresh your GitHub page, and you should see your files listed there. This means that your local project is now connected to your GitHub repository.

This wraps up Part 3. You have now set up your project on your local computer using Git and have successfully pushed your first commit to your GitHub repository. This is a basic introduction to version control, and these skills will be invaluable as you continue your coding journey. In the next part, you’ll learn how to use GitHub Pages to make your website accessible to anyone on the internet.

Part 4: Deploying Your Website

Objectives:

  • Understand what website deployment means.
  • Use GitHub Pages to deploy your website.

Materials Needed:

  • A computer with an internet connection.
  • Your GitHub account and repository.

Instructions:

  1. Understanding Deployment:
  • Deployment is the term used for making a website available to the public on the internet. When you deploy a website, you’re putting it on a web server so that other people can access it by typing in your web address (URL).
  1. Preparing for Deployment:
  • Before we deploy, there’s one important detail to address. GitHub Pages requires that the HTML file for your homepage is named “index.html”. If your homepage file has a different name, please change it to “index.html”.
  1. Deploying with GitHub Pages:
  • Log in to GitHub and navigate to your repository.
  • Click the “Settings” tab.
  • Scroll down to the “GitHub Pages” section.
  • In the “Source” section, select the “main” or “master” branch from the dropdown menu and save.
  • Your website is now deployed! GitHub will provide a URL where your site is hosted. It should look something like this: https://yourusername.github.io/repositoryname/
  • It might take a few minutes for your site to be accessible, so don’t worry if it’s not immediate.
  • Once it’s ready, you can click on the link to view your website. Share the link with others, and they’ll be able to view your site, too!

Congrats on deploying your first website! This is a huge accomplishment. You’ve not only created your own website from scratch, but you’ve also learned about version control and deployment. These are important skills in the world of web development. Keep practicing, keep building, and keep learning!

Wrap up:

Congratulations! You’ve just built and deployed your own website. This is a significant accomplishment, and you should be proud of your hard work. Let’s review what you’ve learned:

  1. HTML and CSS: You learned about HTML, the language that gives structure to web pages, and CSS, the language that styles web pages. You used HTML elements to create different parts of your web page like headings, paragraphs, images, and links. You then used CSS to style these elements, changing things like colors, sizes, and positions.
  2. Website Development: You took your knowledge of HTML and CSS and used it to create a multi-page website. You learned how to create a navigation menu to link between different pages, and you got practice writing HTML and CSS code.
  3. Version Control with Git and GitHub: You learned about the concept of version control and how it can be useful when developing a project. You used Git to track changes to your code and GitHub as a place to store and share your code online.
  4. Website Deployment: Finally, you took your website live by deploying it with GitHub Pages. This made your website accessible to anyone with the URL, allowing you to share your work with others.

Now, you can continue to expand on your website or start a brand new project. The skills you’ve learned in this project are foundational for web development, and there’s so much more to explore. You might consider learning more about web design principles, other programming languages like JavaScript, or even how to add interactivity to your websites.

But for now, take a moment to celebrate your achievement. Building and deploying a website is no small feat, especially for your first project. Keep up the good work and keep on coding!

Subscribe to rohp

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe