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.
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: Kaitlyn V. (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.
- Build and customize an interactive website
- Determine if coding is something you enjoy doing and want to pursue further
What to Expect
- Welcome and Setup (30 minutes)
- Instruction (2 hours)
- Turing Info Session (45 minutes)
- Alumni Panel (30 minutes)
- Wrap-Up (15 minutes)
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!
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 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 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.
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.
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
Runbutton 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.