Videos

A playlist of selected exercises from the book.

Chapter 1

How to set up a new repo on Github.

Enable Github Pages so you can see your work live in the web browser. Remember to view your work at the URL including github.io and view your code in your repo at the URL including github.com.

Edit HTML in GitHub’s Codespaces and preview your work with the live server extension.

After editing your files, you will need to stage and commit them so your changes are saved on your GitHub repository. This video shows you how to use the Source Control tool to stage and commit your edits.

Chapter 2

This video highlights ideas presented in the Context portion of Chapter 2 View Source, originally made for students enrolled in Internet Studio 1 at UTD.

This video demonstrates a workflow for creating a new repo on Github, editing in Codespaces, formatting code with the Prettier extension, previewing the work with Live Server, staging and committing changes back to the repo, and viewing the work published on GitHub pages.

This video demonstrates using a span tag to apply styles to elements in the HTML page. We apply the display property set to inline block to keep our letters in one line, and then use CSS to rotate each letter. We also use negative margins to tighten up the negative space in our layout.

This video demonstrates how to test JS expressions in the DevTools Console. I opened the Console by pressing Command+Option+J on my Mac. You can also get there from the Google Chrome Browser’s View Menu, then Developer, then JavaScript Console.

Chapter 3

Google hosts fonts you can use in your web projects and using them is as easy as copy and pasting a small amount of code. This video demonstrates editing a page to include the Google web font Jost.