From 0e7548a3d5e66c2595a1316d65bd5c5adfc79ff4 Mon Sep 17 00:00:00 2001 From: memcmahon Date: Fri, 27 Sep 2024 15:39:41 -0600 Subject: [PATCH] updates and activates litebrite --- popup-lite-brite/html/index.md | 33 ------- popup-lite-brite/index.md | 86 +++++++----------- .../{ => litebrite}/assets/breakdown.png | Bin .../{ => litebrite}/assets/css.png | Bin .../{ => litebrite}/assets/html.png | Bin .../{ => litebrite}/assets/js.png | Bin .../{ => litebrite}/assets/live-link.png | Bin popup-lite-brite/{ => litebrite}/css/index.md | 19 ++-- .../{ => litebrite}/extensions/index.md | 15 ++- popup-lite-brite/litebrite/html/index.md | 39 ++++++++ popup-lite-brite/litebrite/index.md | 66 ++++++++++++++ .../{ => litebrite}/js-1/index.md | 18 +++- .../{ => litebrite}/js-2/index.md | 21 +++-- popup-lite-brite/what-is-fe-be/index.md | 82 +++++++++++++++++ popup-lite-brite/wrap-up/index.md | 31 ++----- workshop-curriculum/index.html | 6 +- 16 files changed, 281 insertions(+), 135 deletions(-) delete mode 100644 popup-lite-brite/html/index.md rename popup-lite-brite/{ => litebrite}/assets/breakdown.png (100%) rename popup-lite-brite/{ => litebrite}/assets/css.png (100%) rename popup-lite-brite/{ => litebrite}/assets/html.png (100%) rename popup-lite-brite/{ => litebrite}/assets/js.png (100%) rename popup-lite-brite/{ => litebrite}/assets/live-link.png (100%) rename popup-lite-brite/{ => litebrite}/css/index.md (74%) rename popup-lite-brite/{ => litebrite}/extensions/index.md (86%) create mode 100644 popup-lite-brite/litebrite/html/index.md create mode 100644 popup-lite-brite/litebrite/index.md rename popup-lite-brite/{ => litebrite}/js-1/index.md (80%) rename popup-lite-brite/{ => litebrite}/js-2/index.md (74%) create mode 100644 popup-lite-brite/what-is-fe-be/index.md diff --git a/popup-lite-brite/html/index.md b/popup-lite-brite/html/index.md deleted file mode 100644 index afd830f..0000000 --- a/popup-lite-brite/html/index.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: lesson ---- - -Back to Setup Page - -# Modifying the Lite-Brite HTML - -## Tour the Existing Code - -- Elements that live inside of the `body` tags will be displayed on the page (lines 11-27) - -### Explore to Learn: - -- Look at the browser - how many Lite-Brite "dots" are being displayed? Can you identify the code that created those dots? -- While your cursor is on line 20, use the keyboard shortcut `cmd + /` (Mac) or `ctrl + /` (PC) to _comment out_ that line of code. Re-run the project. What changes do you see in the browser? What does that teach you about what line 20 does? (When finished exploring, _uncomment_ line 20 with the same shortcut.) -
-
- -
-

Modify the Existing Code

-

Now that we're getting to know HTML and this specific project a bit better, let's modify it!

-

Add 5-10 additional dots to your Lite-Brite board.

-

Your dots are giant, probably bigger than desired. We will learn how to change their size in the next section!

-
- -## HTML Summary - -- Elements that live inside of the `body` tags will be displayed on the page. -- The number of elements and the content inside of the elements in the HTML file usually have a one-to-one correlation with what we see in the browser. -- Every little character matters. The browser can't assume anything about what we want it to do. - -Next Section: CSS diff --git a/popup-lite-brite/index.md b/popup-lite-brite/index.md index 6517c41..1f6849e 100644 --- a/popup-lite-brite/index.md +++ b/popup-lite-brite/index.md @@ -2,77 +2,53 @@ layout: lesson --- -# Pop Up: Build a Virtual Lite-Brite +# Try Coding - Basics of Web Development (HTML, CSS + JavaScript) -[Thinking of a Lite-Brite](https://en.wikipedia.org/wiki/Lite-Brite) may make you nostalgic. But these days, they are covered in germs. In this live, instructor-led workshop, you will build and customize your very own _virtual_ Lite Brite that you can share with anyone around the world! +Please sign up for a free codepen.io account before beginning this workshop. -_This will be best experienced on a desktop or laptop computer._ +## Welcome -## Welcome! +- Open up codepen.io in a browser (preferably Chrome) and log into your account. +- Change your Zoom display name to your first name, last initial, and pronouns – Kaitlyn V. (she/her). To do that, hover over your image in the gallery view, click the three dots, and select Rename. +- Heads up! We will ask you to introduce yourself in a moment. -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. -1. Please change your zoom name to first name, last initial, pronouns like this: _Kaitlyn V. (she/her)_. To do this, hover over your image on zoom, click the three dots and select _Rename_ from the menu. -1. Heads up! We will ask you to briefly introduce yourself in a few minutes. -

+## What to Expect -## Goals +Over the course of the workshop, we will write code, practice the habits of successful developers, and learn a little more about Turing. We will ask you to introduce yourself, ask questions, and occasionally share answers to the technical work we do! By the end of today, you will build your very own “LiteBrite”. Below is our agenda for the day: -- Build and customize a virtual Lite-Brite -- Gain _exposure_ and familiarity with some HTML, CSS, and JavaScript -- Determine if coding is something you enjoy doing and want to pursue further +- Welcome & Introductions (30 minutes) +- Instruction (90 minutes) +- Wrap-Up (15 minutes) -Disclaimer: We won't become experts in these languages today. And you may leave with more questions than answers! -

+## Learning Norms -## Zoom Tools and Introductions -- Reactions - Have you ever written JavaScript code before? -- Chat - Would you rather have a professional chef or housekeeper? -- Unmute - Introduce yourself! Please share your name, pronouns, location, and why you are here! +- No question is too small and no question is a bad question. Ask them! +- We all benefit from each other's ideas! Push yourself to share at least one time today. +- Keep your camera on during the session (if you can). +- **Questions?** Type into the zoom chat, raise your hand, or come off of mute! Please avoid direct messages unless it is a specific issue only to yourself. +- **Disconnected?** Jump back on! +
-## Programming Languages We Will Use +## Zoom Practice -Building the user-facing part of a website or app is referred to as Front End Engineering. Building a Front End requires the writing code in three programming languages, and making the code in each language "talk to" the code in the others. +There are several ways to get my attention throughout the workshop today. Let’s practice using some of these tools now. -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. +- **Type in the chat to everyone.** What is your favorite genre of music? +- **Send the instructor a direct message.** What word describes how you are feeling today? +- **Raise your hand.** Find your zoom toolbar, click Reactions, then Raise Hand. +- **Introduce yourself!** Share your name, pronouns, and your location. Then, share why you’re here. -
-
-

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 -
+1. I’m looking for a career change and I’m trying coding for the first time. +2. I already know I want to attend Turing, but I want to learn more! +3. My friend or family member won’t stop bugging me about checking this out, so here I am! -
-

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.

- Drawing of human skeleton -
+### Up Next -
-

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 -
-
-

- -## Project Setup - -We will work off of a starter kit that has already been created. Click [this link to access the starter kit](https://replit.com/@turingschool/lite-brite-starter#index.html) in repl.it. Here's how to get set up: -1. Fork the project - this makes a copy on your account. -1. Once you are on the site, substitute your name in for the `NAME` placeholder on line 11 of the HTML file. -1. Click the green "Run" button at the top of the page, and you should see a mini Lite-Brite project on the right side of the page. - -

- -## Now, it gets even more fun: +- [What is Front End and Back End Engineering?](./what-is-fe-be) +- [Project Setup](./litebrite) - [HTML - Content](./html) - [CSS - Styles](./css) - [JavaScript- Explore](./js-1) - [JavaScript - Create](./js-2) - [Extensions](./extensions) -- [Wrap Up](./wrap-up) +- [Wrap-Up](./wrap-up) \ No newline at end of file diff --git a/popup-lite-brite/assets/breakdown.png b/popup-lite-brite/litebrite/assets/breakdown.png similarity index 100% rename from popup-lite-brite/assets/breakdown.png rename to popup-lite-brite/litebrite/assets/breakdown.png diff --git a/popup-lite-brite/assets/css.png b/popup-lite-brite/litebrite/assets/css.png similarity index 100% rename from popup-lite-brite/assets/css.png rename to popup-lite-brite/litebrite/assets/css.png diff --git a/popup-lite-brite/assets/html.png b/popup-lite-brite/litebrite/assets/html.png similarity index 100% rename from popup-lite-brite/assets/html.png rename to popup-lite-brite/litebrite/assets/html.png diff --git a/popup-lite-brite/assets/js.png b/popup-lite-brite/litebrite/assets/js.png similarity index 100% rename from popup-lite-brite/assets/js.png rename to popup-lite-brite/litebrite/assets/js.png diff --git a/popup-lite-brite/assets/live-link.png b/popup-lite-brite/litebrite/assets/live-link.png similarity index 100% rename from popup-lite-brite/assets/live-link.png rename to popup-lite-brite/litebrite/assets/live-link.png diff --git a/popup-lite-brite/css/index.md b/popup-lite-brite/litebrite/css/index.md similarity index 74% rename from popup-lite-brite/css/index.md rename to popup-lite-brite/litebrite/css/index.md index 557ba01..44e590c 100644 --- a/popup-lite-brite/css/index.md +++ b/popup-lite-brite/litebrite/css/index.md @@ -2,20 +2,18 @@ layout: lesson --- -Back to Setup Page - # Modifying the Lite-Brite CSS CSS allows us to "dress up" the content on our page. ## Tour the Existing Code -- CSS allows us to target types of elements (ex: `body`, `div`) and specific elements based on class name (ex: `dot-container`). +- CSS allows us to target types of elements (ex: `section`, `div`) and specific elements based on class name (ex: `dot-container`). - Once we've targeted an element, we can write rules for that element to follow. Rules can be things like _"the text of this element should be red"_ or, _"the background color should be grey"_. ### Explore to Learn: -After you complete each task that follows, re-run the program and observe the changes in the browser! +After you complete each task that follows, observe the changes in the browser! - On line 9 of the CSS file, change `black` to `magenta` - On line 10, change `lightgrey` to `orange` - On line 11, change `10px` to `50px` @@ -35,7 +33,7 @@ You may be wondering, "how does one know all these special keywords and commands
  • Optional: Tinker with the colors used throughout your app!

    • Play around with these sizes until you are satisfied with your board. This may be the time where you also decide to go back to the HTML file and add more dots!

    -

    You may notice that the layout of the dots in your dot container is responsive to the size of the window. This is because the dot container takes up as much space as it can horizontally, unless we tell it to do something different. If you want your dots to be in a fixed location, without considering the size of the window, set the width property on your dot container to be a fixed pixel value, like 500px. You may have to play around with the right number of dots, size of the dots, space around the dots, and width until you get it lined up perfectly.

    +

    You may notice that the layout of the dots in your dot container is responsive to the size of the window. This is because the dot container takes up as much space as it can horizontally, unless we tell it to do something different. If you want your dots to be in a fixed location, without considering the size of the window, set the width property on your `dot-container` to be a fixed pixel value, like 500px. You may have to play around with the right number of dots, size of the dots, space around the dots, and width until you get it lined up perfectly.

    ## CSS Summary @@ -44,4 +42,13 @@ You may be wondering, "how does one know all these special keywords and commands - Based on the type of rule, CSS will expect different values (ex: `magenta` for a color and `10px` for a measurement). - There are many types of rules we can write; with practice, we become familiar with more but don't need to memorize them all. -Next Section: Exploring JavaScript +### Up Next + +- [What is Front End and Back End Engineering?](../../what-is-fe-be) +- [Project Setup](../) +- [HTML - Content](../html) +- [CSS - Styles](../css) +- [JavaScript- Explore](../js-1) +- [JavaScript - Create](../js-2) +- [Extensions](../extensions) +- [Wrap-Up](../../wrap-up) diff --git a/popup-lite-brite/extensions/index.md b/popup-lite-brite/litebrite/extensions/index.md similarity index 86% rename from popup-lite-brite/extensions/index.md rename to popup-lite-brite/litebrite/extensions/index.md index 9d2bfb1..c57fd77 100644 --- a/popup-lite-brite/extensions/index.md +++ b/popup-lite-brite/litebrite/extensions/index.md @@ -2,8 +2,6 @@ layout: lesson --- -Back to Setup Page - # Lite-Brite Extensions If the class has extra time, or individuals want to continue building on their Lite-Brite after the workshop, here are some areas to explore! @@ -16,7 +14,7 @@ We can provide a "color picker" input to the user so that they can choose from, ### Step 1 -In your Lite-Brite replit, add this code to the HTML file, inside of the `controls` section: +In your Lite-Brite codepen, add this code to the HTML file, inside of the `controls` section: ```html @@ -66,4 +64,13 @@ The `.val()` method used in the previous snippet takes the value from an input. Run the program, and try this functionality out! -Wrap Up +### Up Next + +- [What is Front End and Back End Engineering?](../../what-is-fe-be) +- [Project Setup](../) +- [HTML - Content](../html) +- [CSS - Styles](../css) +- [JavaScript- Explore](../js-1) +- [JavaScript - Create](../js-2) +- [Extensions](../extensions) +- [Wrap-Up](../../wrap-up) diff --git a/popup-lite-brite/litebrite/html/index.md b/popup-lite-brite/litebrite/html/index.md new file mode 100644 index 0000000..aeb19a7 --- /dev/null +++ b/popup-lite-brite/litebrite/html/index.md @@ -0,0 +1,39 @@ +--- +layout: lesson +--- + +# Modifying the Lite-Brite HTML + +## Tour the Existing Code + +- Elements that live inside of the `HTML` file will be displayed on the page. + +### Explore to Learn: + +- Look at the browser section (the lower portion of the page) - how many Lite-Brite "dots" are being displayed? Can you identify the code that created those dots? +- While your cursor is on line 13, use the keyboard shortcut `cmd + /` (Mac) or `ctrl + /` (PC) to _comment out_ that line of code. What changes do you see in the browser? What does that teach you about what line 13 does? (When finished exploring, _uncomment_ line 13 with the same shortcut.) +
    +
    + +
    +

    Modify the Existing Code

    +

    Now that we're getting to know HTML and this specific project a bit better, let's modify it!

    +

    Add 5-10 additional dots to your Lite-Brite board.

    +
    + +## HTML Summary + +- Elements that live inside of the `html` body will be displayed on the page. +- The number of elements and the content inside of the elements in the HTML body usually have a one-to-one correlation with what we see in the browser. +- Every little character matters. The browser can't assume anything about what we want it to do. + +### Up Next + +- [What is Front End and Back End Engineering?](../../what-is-fe-be) +- [Project Setup](../) +- [HTML - Content](../html) +- [CSS - Styles](../css) +- [JavaScript- Explore](../js-1) +- [JavaScript - Create](../js-2) +- [Extensions](../extensions) +- [Wrap-Up](../../wrap-up) diff --git a/popup-lite-brite/litebrite/index.md b/popup-lite-brite/litebrite/index.md new file mode 100644 index 0000000..053f6ab --- /dev/null +++ b/popup-lite-brite/litebrite/index.md @@ -0,0 +1,66 @@ +--- +layout: lesson +--- + +# Build a Virtual Lite-Brite + +[Thinking of a Lite-Brite](https://en.wikipedia.org/wiki/Lite-Brite) may make you nostalgic. But these days, they are covered in germs. In this live, instructor-led workshop, you will build and customize your very own _virtual_ Lite Brite that you can share with anyone around the world! + +_This will be best experienced on a desktop or laptop computer._ + +## Goals + +- Build and customize a virtual Lite-Brite +- 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. Building a Front End requires the 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:

    + 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.

    + 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 +
    +
    +

    + +## Project Setup + +We will work off of a starter kit that has already been created. Click [this link to access the starter kit](https://codepen.io/turing-trycoding/pen/RwXPeNr) in codepen.io. Here's how we will use this code: +1. Fork the pen using the `Fork` button along the bottom of the page. This creates your own copy of the starter code so that you can make and keep changes to the code! +1. After forking, substitute your name for `NAME` on line 1 of the html file +1. Click `Save` or wait just a moment for codepen to autosave and update the result (the bottom portion of the page). + +

    +### Up Next +- [What is Front End and Back End Engineering?](./what-is-fe-be) +- [Project Setup](./litebrite) +- [HTML - Content](./html) +- [CSS - Styles](./css) +- [JavaScript- Explore](./js-1) +- [JavaScript - Create](./js-2) +- [Extensions](./extensions) +- [Wrap-Up](./wrap-up) diff --git a/popup-lite-brite/js-1/index.md b/popup-lite-brite/litebrite/js-1/index.md similarity index 80% rename from popup-lite-brite/js-1/index.md rename to popup-lite-brite/litebrite/js-1/index.md index 3f9d5c5..e10539c 100644 --- a/popup-lite-brite/js-1/index.md +++ b/popup-lite-brite/litebrite/js-1/index.md @@ -2,8 +2,6 @@ layout: lesson --- -Back to Setup Page - # Exploring Lite-Brite Functionality Back to our human metaphor: the JavaScript code is the brain and muscle of our webpage! Similar to how the neural and muscular systems are much more complex than the skeleton, the JavaScript work we do will be more complex that our work with HTML and CSS. Please remember: the goal is not for you to be a pro at the end of this, but to get a little bit of exposure! @@ -14,7 +12,7 @@ Click around your Lite-Brite; see if you can "color in" any of the dots. What ha ### Explore to Learn: -On line 2, change `black` to `red`. Re-run the program and click a dot. +On line 1 of the JS file, change `black` to `red`. Save the program and click a dot. ### Breakdown: @@ -31,7 +29,8 @@ Now, let's walk through each line of the existing JavaScript to understand what'

    That was a LOT of info! Sometimes it soaks in better when we have a chance to poke at the code.

    @@ -40,4 +39,13 @@ Now, let's walk through each line of the existing JavaScript to understand what' - Like HTML and CSS, JavaScript needs very specific directions. - Each piece of the puzzle has to be connected to the other. This is why spelling and capitalization can be really important! -Next Section: Planning & Implementing JavaScript +### Up Next + +- [What is Front End and Back End Engineering?](../../what-is-fe-be) +- [Project Setup](../) +- [HTML - Content](../html) +- [CSS - Styles](../css) +- [JavaScript- Explore](../js-1) +- [JavaScript - Create](../js-2) +- [Extensions](../extensions) +- [Wrap-Up](../../wrap-up) diff --git a/popup-lite-brite/js-2/index.md b/popup-lite-brite/litebrite/js-2/index.md similarity index 74% rename from popup-lite-brite/js-2/index.md rename to popup-lite-brite/litebrite/js-2/index.md index 86319cb..18b5e67 100644 --- a/popup-lite-brite/js-2/index.md +++ b/popup-lite-brite/litebrite/js-2/index.md @@ -2,8 +2,6 @@ layout: lesson --- -Back to Setup Page - # Building More Lite-Brite Functionality We have an _almost-working_ Lite-Brite and you can probably partly (or even fully) explain how it's working. This is huge! In this section, we will add one final piece of functionality. @@ -12,13 +10,13 @@ Reminder: We won't go deep with how each little thing in JavaScript works today. ## Planning for New Functionality -A lot of people have the misconception that coding is all about typing really fast, in a basement, usually alone, etc. That's not really the case. Most software developers say they spend at least 40% of their time planning and/or collaborating with other developers on how to design solutions in code. +A lot of people have the misconception that coding is all about typing really fast, drinking lots of coffee, usually alone, etc. That's not really the case. Most software developers say they spend at least 40% of their time planning and/or collaborating with other developers on how to design solutions in code.

    Planning a PB&J

    Before we worry about the code, let's engage in an important exercise.

    You are trying to program a robot to make you or your kids a peanut butter and jelly sandwich. Jot down the steps you would tell the robot to take.

    -

    Here's a video of a dad following the directions his kids gave him.

    +

    Here's a video of a dad following the directions his kids gave him.

    ### Planning Functionality @@ -36,7 +34,7 @@ Let's write the pseudo-code in the repl.it file. You can follow along or just wa Option 1: Code the solution (code-along). -Option 2: Copy and paste from the [final solution](https://replit.com/@turingschool/lite-brite-final#script.js). +Option 2: Copy and paste from the [final solution](https://codepen.io/turing-trycoding/pen/KKOpGJJ).
    @@ -47,6 +45,13 @@ Option 2: Copy and paste from the [final solution](https://replit.com/@turingsch - You likely have some gaps in fully understanding the final solution - again, that is OKAY - the goal of this was not to go deep, but spark some interest for what is possible!
    -Next Section: Extensions -
    -Wrap Up +### Up Next + +- [What is Front End and Back End Engineering?](../../what-is-fe-be) +- [Project Setup](../) +- [HTML - Content](../html) +- [CSS - Styles](../css) +- [JavaScript- Explore](../js-1) +- [JavaScript - Create](../js-2) +- [Extensions](../extensions) +- [Wrap-Up](../wrap-up) diff --git a/popup-lite-brite/what-is-fe-be/index.md b/popup-lite-brite/what-is-fe-be/index.md new file mode 100644 index 0000000..cd1fefe --- /dev/null +++ b/popup-lite-brite/what-is-fe-be/index.md @@ -0,0 +1,82 @@ +--- +layout: lesson +--- + +# What is Web Development? + +## How Does the Internet Even Work? + +When you visit a URL like https://www.vcahospitals.com/, what happens? + +Here is a simplified diagram of the client-server model: + +!["Simple client server model, client/computer is on left side , with an arrow labeled 'request' pointing to a server on the right right. The server has an arrow labeled 'response' pointing back to the client. The set of arrows is labeled with 'HTTP(S)'."](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data/client-server.png) +
    +Source: Mozilla.org +
    + +When a User enters in a website name (web address), a request is made to the Server for that company. That server stores all the data for that company and will return the data which was requested. The Client (browser), will then display that data and allow the user to view and interact with the requested data. + +## What is the Front End? + +The **Front End** is the part of the application that users see, touch, and interact with. + +When we're talking about web development, the Front End is the part of the code base that takes care of rendering the user interface in the web browser. + +The Front End will prompt users in various ways to collect information which can be used to customize the user's experience within an application. + +## What technologies are used on the Front End? + +The three main technologies used by Front End Engineers are: +- CSS (styling of the webpage) +- HTML +- JavaScript + +Other frameworks are build on top of JavaScript such as React, Vue, or Angular. + + +## What is the Back End? + +Back End engineering is concerned with managing and manipulating ​data​ (aka information). + +When we talk about Back End engineering, we're often thinking of the programming tasks involved in making this possible: + +- Storing data and accessing it later +- Verifying that data is accurate +- Manipulating, analyzing, and/or calculating data +- Making sure data can be retrieved quickly and easily + + +## What technologies are used on the Back End? + +There are numerous technologies that can be used by Back End Engineers. Here are a few of them: + +- **Languages and frameworks**: Ruby/Rails, Python/Django, Elixir/Phoenix, Java/Spring, and more. +- **Databases**: PostgreSQL, MySQL, Oracle Database, MongoDB, etc. + +## Both Front End and Back End work with a lot of data and logic. + +Most of the work you will do as a developer is data manipulation. + +- How will you get the data? +- What parts of it will you use? +- Do you need to reformat any of the data? +- How will you display the data to the user? +- What does this data mean? + +Both Front End and Back End deal with taking in data (input), and then giving back or *returning* new data based on that input. Today we're going to look at how we might work with some of this data in both Ruby, our Back End language, and JavaScript, our Front End language. + +### Interested in learning more about FE vs BE? + +:arrow_right: Come to a **What is Front End, Back End, and Full Stack Development? workshop**! You can see a list of upcoming events here! + +### Up Next + +- [What is Front End and Back End Engineering?](../what-is-fe-be) +- [Project Setup](../litebrite) +- [HTML - Content](../litebrite/html) +- [CSS - Styles](../litebrite/css) +- [JavaScript- Explore](../litebrite/js-1) +- [JavaScript - Create](../litebrite/js-2) +- [Extensions](../litebrite/extensions) +- [Wrap-Up](../wrap-up) diff --git a/popup-lite-brite/wrap-up/index.md b/popup-lite-brite/wrap-up/index.md index 3d9d338..c78232f 100644 --- a/popup-lite-brite/wrap-up/index.md +++ b/popup-lite-brite/wrap-up/index.md @@ -2,33 +2,22 @@ layout: lesson --- -Back to Setup Page +# Next Steps -# Wrap-Up +## Feedback -You did it! 🎉 Thank you so much for spending your weekend with us. I hope that thinking about on your reason for why you came, you feel like this time was well-spent and you gained some new knowledge, whether that's about code, Turing, or even yourself! +At Turing, we rely on constant feedback from our students to improve the Turing experience. Please take two minutes at this time to fill out this survey to give us feedback on this Try Coding session today. -Please share about your experience, and how we can best support you moving forward, by completing this survey. +## Attend Other Events -## Share It! -One final step... let's make sure everyone can find the link to share your Lite-Brite with the world. +We are always creating new, exciting events for prospective students. Check out our upcoming events here! -You can find the live URL above the "mini-browser". Copy and paste the link, or click the button in the far-right to open it in a new tab. Have fun 🎉 +## Talk to Us -![Screenshot of repl.it interface with box highlighting the URL to the live site page on far right/top](../assets/live-link.png) +We know everyone has different barriers or concerns as they start this process. Our team is here to help you find solutions to each barrier and ease your concerns from how to pay for Turing to what is the job support like. -Bonus points if you share on social media and tag Turing! -- Instagram -- Facebook -- Twitter +Reach out if you have any questions at all - from _Can I afford this?_ to _Is Software Engineering for me?_ to _What is a typical day like as a Turing student?_ - we're here for you! Email **admissions@turing.edu** with your questions and we'll schedule a one on one call with you! -## Next Steps -Are you in love with coding? Here are some next steps you may want to take: -- [Set up a time to meet with Launa](https://go.oncehub.com/LaunaGardner1) about what that could look like for you at Turing _or_ send her an email at **launa@turing.edu**. -- [Start your application](https://apply.turing.edu/) to join us as a full-time student. +## Apply! -Want to do a little more exploration before taking the next step toward a career change? Here are some great places to start: -- Attend another Try Coding workshop. -- Get more exposure and gain comfort with the syntax by working through one of [Codecademy's free tutorials](https://www.codecademy.com/). - -Back to Intro page +Let's do it! Start your application today at apply.turing.edu. diff --git a/workshop-curriculum/index.html b/workshop-curriculum/index.html index 965b2e6..dc74c27 100644 --- a/workshop-curriculum/index.html +++ b/workshop-curriculum/index.html @@ -16,9 +16,9 @@

    Information Sessions

    Front End Icon

    Try Coding

    These workshops will get you some hands-on experience with code. You'll get a glimpse at Front End and Back End code!

    - Coding Fundamentals (Ruby Focus) - Coding Fundamentals (JavaScript Focus) - Lite Brite (JavaScript, HTML, & CSS) + Basics of Programming (Ruby) + + Basics of Web Development (HTML/CSS + Javascript)