Videos
A playlist of selected exercises from the book.
Chapter 1
Section titled “Chapter 1”1.2.4 How to set up a new repo on Github.
1.2.5 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.
1.3.1 Edit HTML in GitHub’s Codespaces and preview your work with the live server extension.
1.3.2 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.
1.3.3 How to modify a page in your GitHub repo using Codespaces (see Github.com/codespaces), including enabling GitHub Pages, enabling the Live Server extension in Codespaces, staging and committing changes in Codespaces, pushing them to your repo and seeing the “live” results at your github.io live page.
Chapter 2
Section titled “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.
2.2.1 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.
2.2.4 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.
2.3.1 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
Section titled “Chapter 3”3.2.3 How to upload images to your Github repo through Codespaces and point to them in your HTML code.
3.2.4 How to inspect a div using Dev Tools in Chrome, or “Why didn’t my image show up?!” Well, at least this is one reason your image isn’t showing up…there are others not discussed here!
3.3.1 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.
Chapter 4
Section titled “Chapter 4”4.2.1 A demonstration of adding Bootstrap to a web page in Github Codespaces.
Chapter 5
Section titled “Chapter 5”5.3.1 A demonstration of updating a form in JS. Note: Make sure you start with the code finalized in Prompt 5.2 or get our code from the CWD repo!
Chapter 6
Section titled “Chapter 6”6.2.2 A demonstration of how to add a GIF file from your hard drive to your codespace then point to it in your CSS file using the background property. The properties background-repeat, background-position, and background-size are also shown.
6.3.2 Owen and I show you how to write JS in the Developer Tools (Dev Tools) Console that will “explode” any web page.
Chapter 7
Section titled “Chapter 7”7.3.2 A demonstration of Exercise 7.3.2 in Critical Web Design, using the A11Y checklist on a slightly modified version of the resultant file on the CWD Repo for 7-2: https://github.com/criticalwebdesign/book/tree/main/07-ethical-by-design/7-2
Chapter 8
Section titled “Chapter 8”8.2.2 xtine demonstrates exercise 8.2.2 while Owen talks us through the importance of helper functions and explains Math.random.