Day 1

  • Introductions
  • Computer Basics
  • Web Basics
  • Daily Challenge
  • Intro to HTML
    • Syntax
    • Elements
    • Attributes
    • Comments
  • Final Project Overview
  • Take Home Challenge
  1. Create a file in Visual Studio Code called index.html
  2. Copy this challenge into your Visual Studio Code file
  3.               <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Keyboard Shortcuts</title>
  </head>

  <body>
    <h1>Keyboard Shortcuts</h1>

    <p>Use a search engine to find and
    fill out the following "Keyboard Shortcuts":</p>

    <ul>
      <!--   EXAMPLE -->
      <li>Save File: ⌘cmd + s | ctrl + s</li>
      <!--   END EXAMPLE -->
      <li>Cut: ______</li>
      <li>Copy: ______</li>
      <li>Paste: ______</li>
      <li>Undo: ______</li>
      <li>Find Text: ______</li>
      <li>Select all text: ______</li>
    </ul>
  </body>
</html>
  4. Fill out the shortcuts for each action
  5. Save your work
  6. Right click your code > "Open with Live Server" to view your work in the browser!

Tag Usage Example

<element>CONTENT</element>

CONTENT can be nothing, text, or more tags.

Basic Page Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <header>
      <h1>Heading 1</h1>
    </header>
    <div>
      <p>Paragraph Tag</p>
    </div>
  </body>
</html>
<!-- end page example -->
<h1>Hello World!</h1> (Heading Level 1)
    • <!DOCTYPE html>
    • <html></html>
    • <head></head>
    • <title></title>
    • <body></body>
    • <p></p>
  • More Elements

Attribute Syntax

          attribute-name="attribute-value"

Attribute Usage Example

          <p title="I'm a tooltip!">Content</p>
  • Why use comments?
          <!-- COMMENT -->
  1. Complete this Crossword Puzzle
Next