Pop Up: Introduction to JavaScript

In this live, instructor-led workshop, you will build a Frequently Asked Questions page with interactive buttons that hide and reveal the answers.

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 repl.it in a browser (preferably Chrome) and log in to your account
  2. Please change your zoom name to first, last initial, pronouns (ex: Amy H. (she/her))
  3. Please sign-in with this link: http://bit.ly/3949emq

Intros and Set Up

  • Intros - name, pronouns, location, why you are here!
  • Repl.it is our tool to write and run code
  • Zoom is our classroom

Goals

  • Build and customize an interactive FAQ website
  • Gain exposure and familiarity with some HTML, CSS, and JavaScript
  • Determine if coding is something you enjoy doing and want to pursue further

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 Front-End Engineering. Writing code to build a Front-End requires using three programming languages, and making the code in each language “talk to” the code in the others.

It can feel like a lot, but let’s start by understanding the role of each language in the context of our application. We will make some comparisons to the human body as a frame of reference.

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

CSS

CSS defines the look and feel of a webpage - it can change the size or layout of items on a page, change colors, fonts, and more!

We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.

Various accessories including a hat, dress, shoes, and hair

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 a human brain and arm muscle



Project Setup

We will work off of a starter kit that has already been created. Click this link to access the starter kit in repl.it. Here’s how to get set up:

  1. Once you are on the site, substitute your name in for the NAME placeholder on line 14 of the HTML file.
  2. Click the green “Run” button at the top of the page, and you should see a simple version of your website on the right side of the page.

In the next part of the lesson, we will explore the HTML file to understand the “bones” of this app.



Now, it gets even more fun: