Front End Workshop: Build a Number Guesser

This will be best experienced on a desktop or laptop computer.

Welcome!

We are so glad you are here! To get set up…

  1. Open up CodePen in a browser (preferably Chrome) and log in to your account
  2. Please change your zoom name to first, last initial, pronouns, like this: Amy H. (she/her). To do this, hover over your image on zoom, click the three dots and select “Rename” from the menu.
  3. Heads up! We will ask you to briefly introduce yourself in a few minutes.

What to Expect

Over the course of the day, we will write code, explore the mindsets that successful developers have, and learn a little more about Turing. We will ask you to introduce yourself, ask questions, and occasionally share out answers to the technical work we do! Below is our agenda for the day:

  • Welcome, Intros, Setup (30 minutes)
  • Instruction (2 hours)
  • Turing Info Session (45 minutes)
  • Alumni Panel (45 minutes)
  • Wrap Up and Questions (5 minutes)

Introductions & Zoom Tools

We’d love to give everyone a chance to say hi, as well as do a mic check. Please share:

  • Your name and pronouns
  • Your location
  • What inspired you to join this workshop today!

We’ll also have the zoom chat available as a tool today. To make sure we are all comfortable using it:

  1. Zoom chat — waterfall practice: Prepare your answer by typing it in the chat box but DO NOT press enter until the instructor tells everyone to “Send” - are you a morning person/early bird or night person/night owl?
  2. Zoom chat — direct message practice: Send me a direct message with the one word that describes how you are feeling right now.
  3. Zoom tools — raise your hand: Raise your hand using the reactions button.

Learning Norms

  • No question is too small. No question is a bad question. Ask them!
  • We all benefit from each others ideas! Push yourself to share out and make sure you aren’t sharing so much that others don’t have the space to do so.
  • Please mute your microphone unless you’re the main speaker.
  • Have your camera on during class if possible!
  • Questions? Type into the group chat box or wait until end of section when we open it up for questions.

Goals

  • Build and customize a virtual Number Guesser Game similar to this
  • Gain exposure and familiarity with some HTML and JavaScript
  • Determine if coding is something you enjoy doing and want to pursue further, and get a feel for what Turing is all about

Disclaimer: We won’t become experts in these languages today. And you may leave with more questions than answers!

Programming Languages We Will Use

Building the user-facing part of a website or app is referred to as End Engineering. Building a Front End requires the writing code in three programming languages (HTML, CSS, and JavaScript), and making the code in each language “talk to” the code in the others. We will spend time writing code in only two of those languages today.

It can feel like a lot, but let’s start by building an understanding of what each language is responsible for. We will make some comparisons to the human body to create context.

HTML

HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.

We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:

Drawing of human skeleton

JavaScript

JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.

We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:

Drawing of human skeleton



Now, it gets even more fun: