1 -GitHub, GitHub Pages, and Your First HTML Page — Topics & Learning Outcomes

Module Topics

Introduction to GitHub

• What is GitHub? — GitHub is a web-based platform that allows developers to store, manage, and share their code online.
• Why GitHub is Used — GitHub serves as both a storage hub for code and a collaboration tool for developers working individually or in teams.
• Creating a GitHub Account — To get started with GitHub, you first need to create a free personal account on the GitHub website.
• Choosing a Username — Your GitHub username is a permanent part of your public identity on the platform and will appear in links to your projects and website.
• Configuring Your GitHub Profile — After creating your account, you can configure your profile to add basic information that helps others identify you and your work.

Creating Your First Repository

• Navigating to the New Repository Page — Creating a repository begins by locating the correct option inside your GitHub account.
• Naming Your Repository — Choosing a clear, descriptive repository name is an important first step that identifies your project on GitHub.
• Setting Repository Visibility — GitHub allows you to control who can see your repository through visibility settings selected at creation time.
• Initializing the Repository — GitHub offers optional initialization files that give your repository useful starting content and structure right away.
• Confirming Repository Creation — Once all options are configured, submitting the form finalizes the creation of your new repository.

Deploying with GitHub Pages

• What is GitHub Pages? — GitHub Pages is a free hosting service built into GitHub that automatically publishes files from your repository as a live website accessible to anyone on the internet.
• Enabling GitHub Pages on Your Repository — You activate GitHub Pages through your repository's Settings tab, selecting the branch and folder GitHub should use as the source for your published site.
• Understanding the Automatic Publishing Process — Once GitHub Pages is enabled, GitHub automatically detects changes pushed to your selected branch and rebuilds and republishes your site without any manual steps.
• Your Live Public URL — GitHub Pages assigns your site a unique public URL based on your GitHub username and repository name, making your site immediately shareable.
• Verifying Your Deployment — After enabling GitHub Pages, you should confirm that your site is live and displaying the correct content by visiting the published URL in a browser.

Writing Your First HTML Document

• What is an HTML Document? — An HTML document is a plain text file that a web browser reads and renders as a web page. It uses a set of tags to define the structure and content of the page.
• The DOCTYPE Declaration — Every HTML document begins with a DOCTYPE declaration that tells the browser which version of HTML is being used. For modern web development, the declaration is simply <!DOCTYPE html>.
• The Root <html> Element — The <html> element is the root element that wraps all content in the document. Everything else in the file sits inside the opening <html> and closing </html> tags.
• The <head> Element — The <head> element contains metadata about the document — information that is not displayed directly on the page but is important for the browser and search engines.
• The <body> Element — The <body> element contains all the visible content of the web page — everything the user sees in the browser window. It follows the closing </head> tag.
• Writing 'Hello, World' — The classic first program in any language, 'Hello, World,' is achieved in HTML by placing a simple text element inside the body. A heading tag such as <h1> is a clear and common choice.
• Putting It All Together: The Complete Basic Structure — A minimal, valid HTML document combines the DOCTYPE, the <html> root, the <head> with a title, and the <body> with visible content — all nested in the correct order.

Publishing and Verifying Your Live Page

• Staging and Committing Your HTML File — Before your file can be published, you must stage it and create a commit that records the change in your repository's history.
• Pushing Your Commit to GitHub — Pushing sends your local commit to the remote GitHub repository, making the file available online for GitHub Pages to serve.
• Understanding GitHub Pages Build Delay — After pushing, GitHub Pages requires a brief processing period before your changes appear at the live URL.
• Navigating to Your GitHub Pages URL — Every GitHub Pages site is assigned a public URL based on your GitHub username and repository name.
• Verifying the Page Renders Correctly — Confirming that your HTML page displays as expected is the final step in the publishing workflow and validates your entire setup.
• The Commit–Push–Verify Workflow — The sequence of committing, pushing, and verifying forms the core development loop you will repeat throughout the course whenever you update your site.

Understanding the Development Workflow

• The Three Stages of the Local-to-Live Pipeline — The core development workflow moves code through three distinct stages: editing locally, saving changes to GitHub, and viewing the result on a live site.
• Editing Code Locally — Local editing means writing and modifying your HTML files on your own computer using a code editor before any changes go online.
• Committing Changes to GitHub — A commit is a saved snapshot of your changes, and pushing that commit sends it from your local machine to your GitHub repository.
• Seeing Updates on the Live Site — After a commit is pushed, GitHub Pages rebuilds the site automatically and the updates become visible at your public URL within moments.
• Why This Workflow Is Used Throughout the Course — This edit-commit-publish cycle is the repeating pattern that every future module will follow, so understanding it now builds the foundation for all subsequent work.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)

No course outcomes have been defined.