Homepage

Problem to Solve

Build a simple homepage using HTML and CSS. Deploy the page to the web with GitHub Pages.

Getting Started

Up until now, you’ve been programming “in the cloud.” That is, you’ve been connecting to some server with tools for development already installed. For this problem, you’ll learn how to work “locally” on your own Mac or PC!

First, a few tools to install.

Install Visual Studio Code

Head on over to code.visualstudio.com. Click the big Download button and wait for Visual Studio Code to download. Follow the steps to install a program as you usually would on your Mac or PC.

Install the Python Interpreter

Though you don’t need to use Python for your website (only HTML and CSS), it’s good to have Python configured on your local computer!

Head on over to python.org/downloads. Choose the most prominent Download button and wait for the installer to download. Follow the steps to install a program as you usually would on your Mac or PC. Default settings are fine!

Create a “Repository” for Your Homepage

A repository is a storage location for software (in this case, your homepage!). To host your site with GitHub Pages, GitHub requires that you create a repository with GitHub and give the repository a special name. Head on over to pages.github.com and follow the first step (“Create a repository”) in the steps to create a “User or organization site.”

Download GitHub Desktop

GitHub Desktop is a tool that helps you do the following:

1. Download the latest version of your repository from GitHub, and
2. Sync, with GitHub, any changes you make to the repository on your local computer

Head on over to desktop.github.com. Choose the most prominent Download button and wait for the installer to download. Follow the steps to install a program as you usually would on your Mac or PC.

Download your Homepage Repository with GitHub Desktop

Next, you’ll download your homepage repository to your local computer.

First, navigate to your repository on GitHub. Likely, it’s available at https://github.com/USERNAME/USERNAME.github.io where USERNAME is your GitHub username. If this is your first time visiting your repository, choose Set up in Desktop. If prompted, choose “Open GitHub Desktop.”

If needed, you should authorize GitHub Desktop to connect with your GitHub account.

And if prompted to configure Git in GitHub Desktop, you’re welcome to stick with the default settings. Click Finish.

At this point, you might see GitHub Desktop look something like the below.

This prompt is asking you where you’d like to download your repository (Local Path). Notice that you’re downloading (“cloning”) the repository from your GitHub pages URL (Repository URL). You can leave the default setting, or select Choose… to give a custom location for the repository. Once you’re ready, click Clone.

Finally, you should see that GitHub Desktop looks something like the below. You’re all set for this step!

Open (and Edit) your Homepage Repository with VS Code

One last step (we promise!).

You can now open the downloaded version of your repository with Visual Studio Code, in order to add and edit files. GitHub Desktop may already give you a button to Open in Visual Studio Code. If not, not to worry! You can open Visual Studio Code and direct it to open the folder into which you cloned (downloaded) your homepage repository.

Sync your Repository

As you make changes to your code, you should periodically go to GitHub Desktop and sync your changes so that they’re stored in the cloud and live on your site. Give your change a name, optionally add a description, and choose Commit to main.

Then, upload (“push”) your changes to the online (“remote”) repository. If this is your first push, you can click Publish branch. On future pushes, you can click Push origin. Both accomplish the same goal.

That’s it! A few minutes after your first push, should be able to see your page at https://USERNAME.github.io.

Specification

Implement, in your homepage repository, a webpage that has the following elements:

• Contains at least one .html page, at least one of which is index.html (the main page of your website). It should be possible to get from any page on your website to any other page by following one or more hyperlinks.
• At least ten distinct HTML tags besides <html>, <head>, <body>, and <title>.

• Integrate one or more features from Bootstrap into your site. Bootstrap is a popular library (that comes with lots of CSS classes and more) via which you can beautify your site. See Bootstrap’s documentation to get started. In particular, you might find some of Bootstrap’s components of interest. To add Bootstrap to your site, it suffices to include

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  

  in your pages’ <head>.

• Apply styles of your own creation, which use at least five (5) different CSS selectors (e.g. tag (example), class (.example), or ID (#example)), and within which you use a total of at least five (5) different CSS properties, such as font-size, or margin.

Hints

For fairly comprehensive guides on the languages introduced in this problem, check out these tutorials:

• HTML
• CSS
• JavaScript