Link Search Menu Expand Document
HTML&CSS

Welcome & Tools

Class Agenda

  1. Welcome & icebreaker (10min)
  2. Teacher Introduction (5min)
  3. Form our Working Alliance (40min)
  4. Introduce course structure and content (5min)
  5. Introduce tools we’ll use this semester (55min)

For #1 - 4, see the slides linked below (there’s additional info in the speaker notes as well). The information presented in the tools section can also be found below.

Tools

Zoom

Slack

  • Used for communicating between classes
  • Important updates from ReDI admins
  • Great place to ask questions!
  • Demo: navigating channels, posting, understanding DMs (direct messages), updating profile, phone vs. desktop
  • Exercise:
    • Post a message in the #23s_html_css channel
    • Update your name & profile pic
  • Download: https://slack.com/downloads

Kahoot

  • Used for in-class quizzes and participation
  • Demo/exercise: answer the questions on the screen!

CodePen

  • Used for writing HTML & CSS
  • Used for sharing with teachers & other students
  • Demo: understanding the CodePen interface
  • Exercise:
    • Visit https://codepen.io/
    • Sign up for a new account
    • Create a new CodePen
    • Hide CSS & JS areas as demonstrated
    • Rename your pen “Lesson 1 Homework”

Glossary & Terminology

  • < (Name: left arrow, less-than symbol, left angle bracket)
  • > (Name: right arrow, greater-than symbol, right angle bracket)
  • / (Name: forward slash, slash)
  • " (Name: quotation mark, double quote)
  • ' (Name: single quote, apostrophe)
  • : (Name: colon)
  • ; (Name: semicolon)
  • ! (Name: exclamation point, exclamation mark, bang)
  • { (Name: left bracket, left curly bracket)
  • } (Name: right bracket, right curly bracket)
  • ( (Name: left parenthesis, left paren)
  • ) (Name: right parenthesis, right paren)
  • - (Name: hyphen, dash)
  • . (Name: period, dot)
  • , (Name: comma)
  • # (Name: pound sign, hashtag)
  • % (Name: percent sign)
  • * (Name: asterisk, star)
  • ~ (Name: tilde, squiggly)
  • [ (Name: left square bracket)
  • ] (Name: right square bracket)
  • ? (Name: question mark)

Homework

  1. Type all of the characters from the glossary section into the CodePen you created during class (do NOT copy/paste - you need to be able to type these!)
  2. Add one or more tags with headings <h1>, <h2>, <h3> and paragraph <p> on Codepen, example
  3. Share your CodePen in the #s23_html_css channel in Slack

Due: Tuesday at the beginning of class.

Don’t Worry About Mistakes: If you encounter any issues, don’t stress! We will work together in class to resolve them.

Why It’s Important: Attempting the assignment will help us identify if you need further assistance. Your effort is key to your learning! :)

Resources

What should you do if you get stuck?

  1. Talk through the problem aloud
  2. Try to break the problem down into smaller steps
  3. Google! For this assignment: “How to type [name of character]” or something similar
  4. Ask in the #23s_html_css channel!

Slides