Bootcamp Day 1 Lesson Plan

Table of Contents

Discussion

Learning How to Use Pop!_OS

  1. Connect to WiFi by clicking the WiFi icon in the upper right corner
  2. Open Firefox
    • Use the Launcher:
      • Press the SUPER key, which is usually is the Windows or ⌘/Command/Cmd key (recommended method)
      • Click the launcher icon in the Dock
      • Select Applications in the upper left corner
  3. Visit willston.org/curriculum to follow along with the steps
    • You can find the link to this page by clicking “Bootcamp Objectives” and finding the link that says “Day 1”
  4. Open the Pop!_Shop
  5. Make sure Visual Studio Code is installed by clicking searching using the search icon in the upper right corner

Block A: Hello World Example

Demonstration: Files and Folders

Activity: Create Document Structure With Paper Tags

Demonstration: Hello World!

Activity: Students Do the Hello World Example

  1. Create a ~/Code directory
    1. Open the Files application
    2. Make sure Home is selected on the left
    3. Create a folder named Code. There are three ways to do this:
      • Shift+Ctrl+N (recommended method)
      • Right click > New Folder
      • Hamburger menu > folder icon with + in the middle
  2. Create a hello-world directory inside of the ~/Code directory
    1. Open the ~/Code directory by double clicking on Code
    2. Create a folder called hello-world
  3. Create an index.html file inside ~/Code/hello-world
    1. Open the Visual Studio Code application
    2. Close all open tabs by pressing Ctrl+W on the keyboard
    3. Open the ~/Code/hello-world directory using one of two methods:
      • Pressing Ctrl+K and then Ctrl+O right after (recommended method)
      • File > Open Folder
    4. Make sure Home is selected on the left
    5. Double click on Code
    6. Double click on hello-world
    7. Select Open
    8. Trust the authors of the files in this directory
      1. Select the checkbox next to the text: Trust the authors of all files in the parent folder 'Code'
      2. Select Yes, I trust the authors
    9. Create a new file by selecting the file icon with the + sign
    10. Copy and paste the following text into your index.html file:
      <html>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
    11. Save the file (Ctrl+S)
    12. Open the file
      1. Open the Files application
      2. Make sure Home is selected on the left
      3. Open the Code directory
      4. Open the hello-world directory
      5. Right click on index.html
      6. Select Open With Other Application
      7. Select View All Applications
      8. Scroll and select Firefox Web Browser
      9. Press Select

Block B: Getting Started with freeCodeCamp

Preparation

  1. Create a GitHub account using a personal email
  2. Sign in to freeCodeCamp with previously created GitHub account

Instruction

Learn HTML by Building a Cat Photo App: Steps 1-6

What are headers?

What is a paragraph?

What is a comment?

What is search engine optimization?

What is indentation?