Try Coding for Newbies: JavaScript

In this live, instructor-led workshop, you will build an interactive webpage with interactive buttons that hide and reveal information.

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

Welcome!

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

Open up repl.it in a browser (preferably Chrome) and log in to your account.
Please change your zoom name to first, last initial, and pronouns, like this: Brandi G. (she/her). Not sure how to do that? Hover over your image in the zoom gallery, click the three dots, and select Rename.
Heads up! We will ask you to briefly introduce yourself in a minute.

Goals

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

Online Learning Norms

Ask your questions and share your code!
Mute your microphone unless you’re the main speaker.
Keep your camera on during class (if possible).
Disconnected? Jump back on!

Zoom Tools

Want to get my attention during the workshop? Raise your hand, type your question in the chat, or come off mute and ask!

Raise Hand - Find the reactions button in your zoom toolbar and raise your hand.
Zoom Chat - Are you a night owl or an early bird?
Unmute - Introduce yourself! Please share your name, pronouns, location, and why you’re here!

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:

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:

Be Nice to Yourself

This might be your very first day working with code. Learning is often uncomfortable and things are bound to break. When this happens, there are few things you can check first:

Did you spell everything correctly? Capitalization matters!
Do you have closing symbols for every opening symbol? Every opening bracket needs a matching closing bracket.
Do the colors follow a predictable pattern? If the colors are consistent and then all of the sudden change, it could be a clue that something isn’t quite right.

Project Setup

We will work off of a starter kit that has already been created.

Click this link to access the starter kit in replit.
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.