Bootcamp Day 2 Lesson Plan This page was last updated June 14, 2022

Table of Contents

Instruction

Show how https://willston.org is the same as https://willston.org/index.html
Who has gotten stuck on a lesson thus far?
How did you get help and move forward?
Open source and free software licensing
Sources of information:
- Stack Overflow
- Blogs: YouTube embed example Search for youtube embed aspect ratio
- Documentation
- Forum or GitHub issue
- Videos

Block A: Learn HTML by Building a Cat Photo App Steps 7-10

How do I add images in HTML?

Demonstration:

Paper example pulling in an image to demonstrate the src attribute
Words describing the image behind to demonstration the alt attribute
What is a screen reader?
What is an HTML attribute?

<!DOCTYPE html>
<html>
  <body>
    <main>
      <img src="http://www.superchickenfallschurch.com/wp-content/uploads/2014/12/logo.png" alt="Super Chicken Falls Church logo">
      <img src="https://order.subway.com/en-us/-/media/Project/Remote-Order/Images/Logo/subway-logo.png" alt="Subway logo">
    </main>
  </body>
</html>

Practice: steps 7-9

Block B: Steps 10-13

How do I add a link in HTML?

Demonstration: add links to places to eat example

<!DOCTYPE html>
<html>
  <body>
    <main>
      <img src="http://www.superchickenfallschurch.com/wp-content/uploads/2014/12/logo.png" alt="Super Chicken Falls Church logo">
      <a href="http://www.superchickenfallschurch.com">Super Chicken</a>
      <img src="https://order.subway.com/en-us/-/media/Project/Remote-Order/Images/Logo/subway-logo.png" alt="Subway logo">
      <a href="https://subway.com">Subway</a>
    </main>
  </body>
</html>

Practice: steps 10-13