Weekend Workshop: Build a MASH App
Day 1: Build an Almost-MASH App
Remember MASH? That silly game we played as kids that would predict your future? In this live, instructor-led workshop, you will build your very own modern MASH web application to share with friends and family! Let go of all your planning to be a better version of yourself in 2022 and let MASH decide your future for you. Don’t know what I’m talking about? Watch this short video to see how the game of MASH is played.
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, pronouns (ex: Amy H. (she/her)). To do this, hover over your image on zoom, click the three dots and select “Rename” from the menu.
- Heads up! We will ask you to briefly introduce yourself in a few minutes.
Goals
- Build and customize a digital MASH application
- Gain exposure and familiarity with 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!
What to Expect
Over the course of two days, we will write code, practice the habits of successful developers, and learn a little more about Turing. Challenge yourself over the next two days to ask questions and get the most out of this experience.
- Welcome and Setup (45 minutes)
- Instruction (1 hour and 15 minutes)
- Turing Info Session (1 hour)
- Instruction and Wrap-Up (2 hours)
Zoom Tools and Introductions
- Reactions - Raise your hand if a friend or family member recommended Turing to you!
- Chat - Would you rather have a professional chef or housekeeper?
- Intros - name, pronouns, location, why you are here!
Want to get my attention during the workshop? Raise your hand, type your question in the chat, or just come off mute and ask!
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.
- Disconnected? Jump back on! The host or TA will resume the session shortly.
What is Front End Engineering?
Building the user-facing part of a website or app is referred to as Front End Engineering. Building the Front End of a web page requires writing code in 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 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:
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.
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:
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. Below, you’ll see an image outlining the different tools available in the replit interface.
Here’s how to get set up:
- Click the blue
Fork replbutton in the top right corner to make a copy of the starter kit for yourself. - Change the description of the game on line 12 to something different.
- Click the green
Runbutton at the top of the page and you should see that description appear!
In the next part of the lesson, we will explore the HTML file to understand the “bones” of this app.