After completing this lesson, you will understand what GitHub is and how it fits into web development workflows. You will be able to create a GitHub account, understand the basic concepts of repositories, and create your first repository to store your HTML and CSS files. You will also understand the difference between Git and GitHub, and why version control matters for web development projects.
You should have completed HTML and CSS lessons and have created at least one HTML file with associated CSS that you'd like to store on GitHub. No prior experience with version control or GitHub is required.
GitHub is a web-based platform that provides hosting for software development projects using Git, which is a version control system. Version control tracks changes to files over time, allowing you to see the history of your project, revert to previous versions if needed, and collaborate with others without losing work. GitHub adds a web interface and collaboration features on top of Git, making it accessible and useful even for individual developers.
Understanding the relationship between Git and GitHub helps clarify their roles. Git is the version control software that runs on your computer and tracks changes to your files. Git is a command-line tool that developers use locally to manage their code history. GitHub is a website that hosts Git repositories online, providing a place to store your code in the cloud, share it with others, and access it from any computer. Think of Git as the engine that does version control work, and GitHub as the service that hosts and enhances Git repositories with web-based features.
GitHub matters for web development because it provides several important benefits. First, it serves as backup storage for your code. If your computer crashes or you lose files, your code remains safe on GitHub. Second, GitHub makes it easy to share your projects with others, whether for collaboration, portfolio purposes, or getting feedback. Third, GitHub provides free website hosting through GitHub Pages, allowing you to publish your HTML and CSS websites online without paying for web hosting. Fourth, using GitHub demonstrates professional development practices that employers value, showing you understand industry-standard tools.
For learning web development, GitHub serves as both a practical tool and a learning opportunity. Storing your projects on GitHub creates a portfolio you can share with potential employers or collaborators. The version history helps you see your progress over time. GitHub Pages provides free hosting for static websites, making it easy to publish your HTML and CSS projects and share them with others. Learning GitHub alongside HTML and CSS gives you a complete workflow for creating and sharing web projects.
Creating a GitHub account is straightforward and free. The process requires only an email address and takes just a few minutes. Once you have an account, you can create unlimited repositories for your projects, whether they're private for personal use or public to share with others.
Visit github.com in your web browser. On the homepage, you'll see a sign-up form asking for:
Choose your username carefully because it will be:
Many developers use their real name or a professional variation, while others create a unique handle. Your username can be changed later, but it's better to choose something you'll want to keep long-term since changing it can break links to your repositories.
Good username examples:
johndoe - Professional, simplejane-smith-dev - Professional with identifiermyusername - Personal, memorableUse an email address you check regularly, as GitHub will send important notifications about:
You can add additional email addresses to your account later if needed.
Choose a strong password following GitHub's requirements, which include:
Security tip: GitHub supports two-factor authentication (2FA) for additional security. You can set this up after creating your account. Learn more in the GitHub documentation on 2FA.
After entering your information, GitHub will send a verification email to confirm your email address. Click the verification link in the email to activate your account.
You may also be asked to verify you're human through a captcha. Once verified, you'll complete a brief setup process where GitHub asks about:
These questions help GitHub customize your experience, but your answers don't limit what you can do on the platform.
After account creation, take a moment to explore your profile page. This is where others will see your projects and contributions. You can:
While optional, these details help establish your professional presence on GitHub, especially if you plan to use GitHub as part of a portfolio for job applications.
For detailed guidance on setting up your profile, see GitHub's profile customization documentation.
A repository, often shortened to "repo," is a storage location for a project on GitHub. Each repository contains:
Understanding what repositories are and how they work is essential for using GitHub effectively.
Repositories can be either public or private:
For beginners learning web development, public repositories are common because they allow you to showcase your progress and build a portfolio.
Learn more about repository visibility in GitHub's repository settings documentation.
Each repository has its own unique URL on GitHub, following the pattern:
https://github.com/username/repository-name
This URL serves as both:
Repositories can contain any type of file, but for web development projects, you'll typically store:
.html files (webpage structure).css files (styling).js files (JavaScript functionality)Repositories track the complete history of your project. Every time you save changes to GitHub, Git creates a snapshot called a commit.
Each commit records:
This history allows you to:
For beginners, this history is valuable for understanding your development journey and fixing errors easily.
Repositories typically include a README file (usually README.md), which is a markdown document that describes the project. The README appears on the repository's main page and helps visitors understand:
While optional, adding a README to your repositories is good practice because it:
Learn how to create great README files in GitHub's README documentation.
Creating your first repository on GitHub is a simple process that involves a few steps in the GitHub web interface. This example walks through creating a repository to store an HTML and CSS website project, demonstrating each step and explaining why each choice matters.
After logging into your GitHub account, look for a plus icon (+) in the top right corner of the page. Clicking this icon opens a dropdown menu with several options.
Select "New repository" from this menu. This takes you to the repository creation page where you'll configure your new repository.
Alternative method: You can also visit github.com/new directly to create a new repository.
On the repository creation page, you'll see a form asking for several pieces of information. The first field is the repository name.
Choose a name that clearly describes your project. Good names are:
Good examples:
my-first-website ✓portfolio-site ✓html-css-tutorial ✓Avoid:
My Website ✗ (has spaces, mixed case)project1 ✗ (not descriptive)my_awesome_project!!! ✗ (special characters, too long)The repository name becomes part of the URL, so it should be web-friendly. GitHub will check if the name is available - if someone else has already used your chosen name, you'll need to pick a different one.
For detailed guidance, see GitHub's repository creation documentation.
The next section asks for a description, which is optional but helpful. A good description briefly explains what the project is.
Example descriptions:
"My first HTML and CSS website project""A responsive portfolio site built with HTML and CSS""Learning project: Tutorial website about web development"This description appears on your repository's main page and helps others understand the project at a glance.
You'll see options for making the repository public or private:
You can change this setting at any time after creating the repository. Learn more in GitHub's documentation on changing repository visibility.
GitHub offers to initialize the repository with:
For your first repository:
After filling in the repository name, optionally adding a description, choosing public or private, and deciding whether to initialize with a README, click the green "Create repository" button at the bottom of the page.
GitHub will create your repository and display a page with instructions for getting started. This page shows different options depending on whether you're creating a new project or adding an existing project to GitHub.
Since you likely have HTML and CSS files already created on your computer, you'll want to upload them to your new repository. The web interface method is simpler for beginners:
This allows you to add files without installing Git on your computer - perfect for getting started!
For more detailed instructions, see GitHub's guide on adding files to a repository.
Once your files are uploaded, they'll be stored in your GitHub repository. You can:
This repository now serves as both backup storage and a way to share your project with others. The repository URL can be shared with anyone, allowing them to view your code and download your files.
Congratulations! You've created your first GitHub repository and uploaded your files. You're now ready to start using GitHub for version control!
Familiarizing yourself with the GitHub interface helps you navigate and use the platform effectively. The main elements of a repository page provide access to files, history, settings, and other features you'll use regularly.
When you view a repository, you'll see several tabs near the top:
The Code tab is the default view when you open a repository. This is where you'll spend most of your time. Here you'll see:
GitHub automatically displays code files with syntax highlighting, making them easy to read. HTML and CSS files render nicely in this interface.
You can also:
The Issues tab allows you to track bugs, feature requests, and tasks related to your project. While more relevant for larger projects or collaboration, understanding issues helps you see how GitHub manages project planning.
Issues are useful for:
Learn more about using issues in GitHub's Issues documentation.
The Pull requests tab shows proposed changes to the repository. When working alone, you might not use pull requests often, but they're essential for:
We'll cover pull requests in detail in Lesson 07. For now, know that this tab exists and becomes more important as you work with branches.
The main branch (sometimes called "master" in older repositories), represents the primary version of your project. As you make changes and save them, these changes are reflected in the branch.
Branches allow you to work on different versions or features simultaneously. For example:
For simple projects starting out, you'll primarily work with the main branch. As projects grow, branches become more valuable for organizing work.
Learn more about branches in GitHub's branches documentation.
Understanding this interface helps you navigate GitHub confidently and take advantage of features like:
As you become more comfortable, these interface elements become second nature, allowing you to focus on your code rather than figuring out how to use the platform.
For a complete overview of the GitHub interface, see the GitHub Flow documentation.
Create a GitHub account if you haven't already, then create a new repository for one of your HTML and CSS projects. Choose an appropriate repository name and write a brief description. Make the repository public so you can share it. Upload your HTML and CSS files to the repository using GitHub's web interface. After uploading, view your files online and verify they display correctly. Explore the repository interface, click on files to view them, and notice how GitHub presents your code.
Once your files are uploaded, share the repository URL with someone else or open it in an incognito browser window to see how it appears to others. Notice how the repository serves as both storage and a way to share your work. Consider how having your code on GitHub provides backup and accessibility from any computer with internet access.
GitHub is a platform that hosts Git repositories online, providing version control and collaboration features for software projects. Creating a GitHub account is free and straightforward, requiring only an email address and a chosen username. Repositories are storage locations for projects that track complete file history and can be public or private. The GitHub web interface allows you to create repositories, upload files, view code, and manage projects without needing to install additional software.
Understanding GitHub matters because it provides backup storage for your code, enables sharing and collaboration, offers free website hosting through GitHub Pages, and demonstrates professional development practices. For beginners learning web development, GitHub serves as both a practical tool for storing projects and a portfolio platform for showcasing work. The skills you develop using GitHub translate directly to professional development workflows used throughout the software industry.
Now that you have a GitHub account and understand repositories, Lesson 07 covers the GitHub workflow in more detail. You'll learn about making commits, using branches, creating pull requests, and collaborating with others on GitHub projects.
GitHub. "Getting Started with GitHub." GitHub Guides. https://guides.github.com/
GitHub. "Creating a New Repository." GitHub Docs. https://docs.github.com/en/get-started/quickstart/create-a-repo
Pro Git Book. "Getting Started." Pro Git. https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control
The Odin Project. "Introduction to Git." The Odin Project Curriculum. https://www.theodinproject.com/paths/foundations/courses/foundations