Table of Contents
Introduction
-
Introduction
Jen Kramer welcomes students and then reviews the resources and assets for the Bootcamp. -
VS Code Setup
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
Jen creates a folder on the desktop and opens it within VS Code to set up a simple work environment.
HTML Basics
-
Creating Your First HTML Page
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
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
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
Students are instructed to create an ordered list of steps to construct a peanut butter and jelly sandwich. -
Ordered List Solution
Jen displays an example of a solution to the exercise and covers some common mistakes that students make.
HTML Links, Headings & Images
-
Creating a Link
Jen demonstrates how to add links to the page using an anchor tag and discusses what attributes are. -
Creating & Linking to Another Page
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
Jen explains heading tags in the context of the webpage. -
Review
Jen reviews what was covered so far using the course website. -
Images
Jen gives instruction on how to insert images into a web page. -
Images Q&A
Jen takes questions from students about images in a web page, discussing broken links, tooltips, and image formats. -
Downloading & Adding an Image
Jen demonstrates how to add images from a local source.
HTML Extras
-
Blockquote, Strong, & Emphasize Tags
Jen demonstrates usage of the blockquote tag, the strong tag, and the em tag for designating various kinds of emphasized text. -
HTML Validator
Jen introduces HTML validators that check for coding mistakes within a web page. -
Image Resize Q&A
Students ask questions about images on a web page and Jen discusses options for image resizing.
HTML Practice
-
Book Markup Exercise
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
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.