Week 2

September 6

Reading discussion

Let’s talk through our reading.

This will make more sense in coming weeks, but you can also peruse the code for this article page.

And now, HTML

We’ll break somewhere in here, possibly midway through my HTML spiel.

Let’s write some code!

We’re going to dive right in and make our first web pages, no big deal! We’ll do this all together.

  1. You’ll need to download Visual Studio Code, which we’ll use as our text editor for the course.

    You’ll hear me refer to this as an IDE, for Integrated Development Environment (if you remember our reading). Think of this as a fancy text editor with coding-specific features, like syntax highlighting and tabs. There are many of them! VS Code is probably the most popular, right now. (It is made by Microsoft. Developers! Developers! Developers!)

  2. Also download GitHub Desktop, which we’ll use to manage our code. Sign in there with your GitHub account (which you should have already created).

    You might also remember Ford mentioning Git, a version control software, which tracks changes and helps developers work together. GitHub is a widely-used, web-based host for Git projectsknown as repositories. You can do this all via the command line (and even right from VS Code), but I think we’ll use their Desktop app for now. (This is now also owned by Microsoft.)

  3. Create a repository for your Harmonic Collection entries. Think of this as your project folderyou will use one repo for the entire semester. For consistency, let’s name them all harmonic-collection.

  4. In VS Code, make an entry-1.html file in the directory of the repository. You can start with this HTML:

     <!DOCTYPE html>
         <title>Hello, world!</title>
         <h1>Hello, world!</h1>
         <p>This is my first web page.</p>
  5. Then commit this file and push your changes up to GitHub. Think of Git’s commits as tracked, commented, and reversible saves.

  6. Go to your repository on GitHub (the site) and then enable Pages, if it isn’t already. (I think it might default on.)

  7. You should be able to see your page (after a couple minutes) live, on the web:


I sadly forgot to resume our recording after break, so this stuff isn’t in our session video. I’ve pulled in a demo from last semester.

It isn’t exactly the same, but is pretty close to what we did. I’m hoping will helpful if you get stuck or need a visual! Apologies.

For next week

These should always be done before the start of the next class. Any links added after we begin each session will be considered late, and we don’t accept late work.

Session recording