October 4, 2022: Going Online, CSS - Responding and Animating, Notes

Agenda

  • Discussion
  • Publishing on Github Pages
  • Transitions and Animations
  • Exercise: Screensaver

Reading Responses


Publishing on Github Pages

We’re going to publish our work on Github using its hosting service Github Pages.

In its basic form, a website is a set of files hosted on a computer that we call a server. That computer has an address, which the domain name redirects to. When you enter the domain name, your browser asks for the website’s files from the server, and the server serves those files.

You can set up your own computer as a server, but it has to be on all of the time, and a lot of people don’t want to do that. You can also pay a web hosting company like monthly or yearly to host your website’s files for you, or you can pay a company like DigitalOcean to set up a computer in the cloud. All of this is its own struggle, and if you want to do this eventually you can totally find resources to do that. For our purposes, Github has a feature called Github Pages, which hosts webpages for free, to incentivize people to use their platform. People often say about technology that when something is free, you are the product. I think this is true about Github: It is a collaboration platform, so other people’s working activity and the ability to see it is the product. But for most people this works out fine. I know many people who host their work on Github because it’s not only free, it’s easy to update.

  1. Log on to Github and make a New repository.








  1. Use this random word generator to generate 2 random words. Enter that as the name of your repository, and choose “Public” (You can only make a public website with a public repository). Scroll down and click Create repository. (→)
  1. The rest of the options are optional. 










  1. In Github Desktop, click File > Clone repository… and then search for your repository. You may have to hit the refresh button to find it. Once you find it, select the repository and click Clone. (→)

  1. In Finder, go to that repository’s folder, and add a starter index.html file. Put your two words in the index.html’s <title>.
  1. Back in Github Desktop, you’ll see your new file as changes. Next to your profile icon, you’ll see an automatically written Summary of the changes. This will help you maintain a record of what changes you made to your project, so you can look back at them later, and go back to a specific version. Click Commit to main. (→)