Introduction to HTML

Table of Contents

• 

  Introduction

  00:00:00 - 00:03:42 View Transcript

  Jen Kramer welcomes students and then reviews the resources and assets for the Bootcamp.
• 

  VS Code Setup

  00:03:43 - 00:06:42 View Transcript

  Jen walks students though the setup of VS Code, including adding the Open in Browser VS Code extension to allow for viewing HTML code in the browser.
• 

  Creating a Folder

  00:06:43 - 00:07:40 View Transcript

  Jen creates a folder on the desktop and opens it within VS Code to set up a simple work environment.

• 

  Creating Your First HTML Page

  00:07:41 - 00:18:18 View Transcript

  Jen begins creating a web page by instructing students how to open a file inside of the VS Code editor and generate basic HTML tags.
• 

  Creating Content

  00:18:19 - 00:23:02 View Transcript

  Jen explains what each line of the HTML scaffolding does and demonstrates how to open a web page in the browser.
• 

  Adding Paragraph & List Markup

  00:23:03 - 00:30:05 View Transcript

  Jen introduces the paragraph tag and two types of list tags, and explains how HTML tags work both inside the code editor as well as within the browser.
• 

  Ordered List Exercise

  00:30:06 - 00:31:13 View Transcript

  Students are instructed to create an ordered list of steps to construct a peanut butter and jelly sandwich.
• 

  Ordered List Solution

  00:31:14 - 00:32:41 View Transcript

  Jen displays an example of a solution to the exercise and covers some common mistakes that students make.

• 

  Creating a Link

  00:32:42 - 00:39:34 View Transcript

  Jen demonstrates how to add links to the page using an anchor tag and discusses what attributes are.
• 

  Creating & Linking to Another Page

  00:39:35 - 00:47:43 View Transcript

  Jen demonstrates how to create another web page and then link to it. There is also a helpful hint about how to wrap words inside of the VSCode editor.
• 

  Headings Q&A

  00:47:44 - 00:52:06 View Transcript

  Jen explains heading tags in the context of the webpage.
• 

  Review

  00:52:07 - 00:56:07 View Transcript

  Jen reviews what was covered so far using the course website.
• 

  Images

  00:56:08 - 01:02:34 View Transcript

  Jen gives instruction on how to insert images into a web page.
• 

  Images Q&A

  01:02:35 - 01:09:47 View Transcript

  Jen takes questions from students about images in a web page, discussing broken links, tooltips, and image formats.
• 

  Downloading & Adding an Image

  01:09:48 - 01:16:21 View Transcript

  Jen demonstrates how to add images from a local source.

• 

  Blockquote, Strong, & Emphasize Tags

  01:16:22 - 01:20:46 View Transcript

  Jen demonstrates usage of the blockquote tag, the strong tag, and the em tag for designating various kinds of emphasized text.
• 

  HTML Validator

  01:20:47 - 01:23:14 View Transcript

  Jen introduces HTML validators that check for coding mistakes within a web page.
• 

  Image Resize Q&A

  01:23:15 - 01:26:25 View Transcript

  Students ask questions about images on a web page and Jen discusses options for image resizing.

• 

  Book Markup Exercise

  01:26:26 - 01:35:00 View Transcript

  Students are instructed to mark up a simple book chapter using the HTML principles learned in the previous videos, and Jen reviews external references for students to extend their knowledge.
• 

  Book Markup Solution

  01:35:01 - 01:48:01 View Transcript

  Jen goes over the solution for the project, which was to mark up a sample book chapter. For students looking for more, there is additional HTML practice and adding more details to the existing pages created in the previous sections.