What if instead of directing random strangers on the internet to your boring personal website, you could direct them to an entire OS (where through exploring, they get to know you)


30-45 minutes, intermediate difficulty

![Capybara OS demo](https://cloud-ir4w2s05f-hack-club-bot.vercel.app/0screenrecording.gif)

*(p.s. this is a sample of what your OS might look like, except HA NO it's going to be about you and fit your vibe so not look/feel like this at all)*

 
The OS will be entirely web-based (using HTML, CSS, and JS). You'll be the designer and developer of your OS (so you'll have complete creative freedom). You'll decide the content, style, features, etc. If your website looks totally different from mine by the end of the batch jam, then you've done the Jam well. If it looks the same, go back to the drawing board.

**Today you'll be creating an awesome welcome screen for your personalOS. It will be plenty of fun and you'll have an awesome-looking one-of-a-kind product that you'll build upon in subsequent Jams.**

[Live Demo ](https://step8.thomasstubblef2.repl.co/)
[Sample Code](https://replit.com/@ThomasStubblef2/Step8#index.html)

There are six steps/headings in this Jam! Go through each and begin building your personalOS.

**Outline:**
1. **Enter The Code Editor** *(start coding in your browser)*
2. **Build with Elements** *(create elements for your welcome screen)*
3. **Personalize Your Content** *(make the content personally relevant to you)*
4. **Style Your Elements** *(make your elements fit your aesthetic)*
5. **Additional Optional Style Challenges**
6. **Next Time on Building Your Personal OS**

## Enter the Code Editor
Hey there Hacker! Let's get you setup

## Create an Account
Head over to the [Replit Website](https://replit.com/languages/html) and create an account

<Dropdown title="What is Replit?">
Replit is a web-based independent development environment (IDE). Basically Replit allows you to write code in your browser and instantly deploy your site to the entire world. I suppose you could say its *magical*. 
</Dropdown>



<Dropdown title="If you're unable to use Replit or would rather not use Replit">
If for whatever reason you have difficulty accessing Replit, visit <a href="https://firewalledreplit.com/">Firewalled Replit</a>.
I also recommend checking out GitHub code spaces or running a local development environment in VS Code.
All the code is the same regardless of the code editor you use.😉
</Dropdown>



### 2. Create a new Repl/Project
Welcome to your Replit Dashboard! Once inside, tap create a Repl and then select **HTML, CSS, and Javascript** as your template. 

Replit will kindly start you off with some boilerplate code (starter code). 

![Replit-Signup](https://cloud-c6z75ah46-hack-club-bot.vercel.app/0export_jun_15_2023_0159_pm.gif)


## Build with Elements

### What are elements?
Every site you've ever visited has elements. Try right clicking this site and tapping Inspect, you'll see a bunch of elements. HTML is the file format for these elements.

#### What makes an element?
Elements consist of three parts. 

Elements consist of an opening tag, the content in the middle, and a closing tag. So for example `<p>Sample Content</p>` creates paragraph text because there is an opening tag (`<p>`), with content in the middle (`Sample Content`), and a closing tag (`</p>`) indicating where the content ends 

![bagel](https://cloud-rd8lvcrjx-hack-club-bot.vercel.app/0video.gif)
*(bagels are a lot like tags or I suppose you could say tags are a lot like bagels... depending on your perspective)*

### Where can I place them?
Replit gave you some starter code, but it has some unnecessary elements. Orpheus the Dinosaur *(don't ask who [Orpheus](https://workshops.hackclub.com/orpheus/) is)* asks that you please copy and paste the code below into your project

```
<!DOCTYPE html>
<html>

	<body>
  
	</body>

</html>
```

The body of your site is contained inside of an opening tag (`<body>`) and a closing tag (`</body>`). The content of your site goes inside the body.  **Inside your body is where you'll place your elements.**

It's sort of like how cream cheese goes inside of a bagel. A bagel has a top and bottom and all of the tasty cream cheese in the middle.

Let's fill your body tag sandwich with some tasty content! 🥯

### How can I make elements for my welcome screen?
Inside of your body tags, let's write some code

```
<body>
  <p>Hello world!</p>
</body>
```

You've created your first element & it's a `<p>` element (p stands for paragraph)! Congratulations!

Let's try making a heading! Simply create a new element with h1 tags.
```
<body>
  <h1>Welcome to my OS</h1>
  <p>Hello world!</p>
</body>
```

Awesome. We can also make smaller headings. `h1` is the largest heading, but you can also create an `h2`, `h3`, `h4`, & so on. 

```
<body>
  <h1>Welcome to my OS</h1>
  <h2>Introduction</h2>
  <p>Hello world!</p>
</body>
```

Text is neat, but let's add an image:
First we need to drag an image into Replit file manager.

![Drag & Drop](https://cloud-id4r1tr7g-hack-club-bot.vercel.app/0drag_drop.gif)

```
<body>
  <h1>Welcome to my OS</h1>
  <h2>Introduction</h2>
  <p>Hello world!</p>
  <img src="./nameOfImage.jpeg" />
</body>
```

You can also do a direct link to the image (has .png, .jpeg, etc at the end of the url), so for example here's code for placing an image of a Capybara 

`<img src="./imageOfMe.png" />`

The image tag has a property of `src` which stands for source. You can pass in the direct link to the image or import an image and set the src as `"./imageName.png"`.

![Website with text on top and a Capybara image](https://cloud-33eico6lp-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_11.54.32_am.png)

### Let's link to another page
HTML (HyperText Markup Language) was built for scientists to be able to share research documents (& is now used on every website on the internet). If you know anything about scientists, then you know they LOVE to reference other pages. 

For this reason, HTML makes it easy for you to hyper-link to other pages.

```
<body>
  (rest of your content)
  <a href="https://example.com/">label</a>
</body>
```

Replace label with the label of the button (so for example [Instagram](https://www.instagram.com/starthackclub/)) and link with the url (like https://www.instagram.com/starthackclub/).

You can use this to link to a personal social media, a GitHub, a random website about your favorite creature, or just not make an a tag at the moment. It's totally up to you. 

## Personalize Your Content
Soo... surprise, you didn't realize but you just started your onboarding screen for you operating system.

**Go ahead and fill it up with your own content.** 

Don't know what to add? Perhaps try:
* Linking to your favorite playlist
* Adding a picture of a pet
* Writing a bit about your favorite hobbies
* etc

### Customize the text content and image
Make the text content whatever you would like users to see when they first land on your site. Be creative and have fun with it! 

Select an image for your site that represents you (either literally like a selfie or metaphorically like your favorite creature) by changing the src of the image to a URL or path to your image. 

### Content Complete
Okay, so you should now have the content for your "Welcome to My OS" screen and it should feel totally unique to you (i.e. if a friend saw your welcome screen, they would immediately know it was your OS).

Your content most likely looks rather bland and uninteresting which leads us into our next topic... styling our content!

![content styling in progress](https://cloud-9jc9u3xyy-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_3.51.07_pm.png)

## Style Your Elements
### What's a style?
A style is a property-value pair that changes the way an element looks.

Styles can exist within an html file when written in-line, but can also be in a separate file (styles.css). For now, we're going to write the styles inside of our HTML file (inside of opening tags)

To apply a style, it's as simple as:
`<tag style="property: value"> content </tag>`

**Every style has a property and a value.** 
For example a style may be color with the value of red (to turn the text red)

### Styling Color 🎨
To change the color text you would simply write
`<p style="color: red">This text is red</p>`

You can also add a background color: 
```
<body style="background-color: #c9ffcf">
	// your content//
</body>
```

Easy, right? 

*p.s. you'll notice I used hex (#c9ffcf) instead of the name of a color (red) for the second example. Hex is a format for representing color. You can use either the name of a color or the hex value. To find hex values, try googling "hex color picker"

### Styling Shape
Images can have styles too!

Your image is probably very large. Let's change the size & shape.

Simply go to the image and apply a style property that sets the width and height: 

`<img style="width: 64px; height: 64px" src="https://cloud-pc8imajxj-hack-club-bot.vercel.app/1img_1181.jpg" />`

I chose to make the width and height 64px, but you don't have to! Pick your own size, play with it, and have fun!

*Note: Semicolons are used to separate css properties*

##### *\*Crunch*\*
Your image might be a bit crunched up. Try to Google how to fix this (maybe even ask GPT). Even a very basic search term such as What is the CSS Property for making an image not crunch, would probably work.

![crunched image](https://cloud-4cdvjzqmo-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_12.43.50_pm.png)

<Dropdown title="Solution">
  Upon scrubbing through the results, I found the `object-fit: cover` property. Let's try applying that to our image. Ah lovely, and just like that our image is uncrunched. Whenever you run into something that looks ugly and you want to make it look beautiful, just google it and Google will help you out.
</Dropdown>


##### *\*Rounddddd*\*
Optionally, you can round your corners. Try googling this! (maybe you can even turn your image into a circle shape if you'd like)

<Dropdown title="Solution">
You probably found a nifty little CSS property called border radius. 
simply write style="border-radius: 16px; object-fit: cover" on your image tag.
Note: Semicolons are used to separate css properties
</Dropdown>


![rounded image](https://cloud-b43epg4q2-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_3.59.41_pm.png)

### Styling Font
Adding a font in CSS is easy!

The easiest way to add a font is to visit the [W3 Library of browser-built-in](https://www.w3.org/Style/Examples/007/fonts.en.html) fonts and select one that fits the vibe of your site! 

Once you pick out your favorite font(s), go to the body and put a style property of font-family on the opening tag.

`<body style="font-family: Helvetica, Noto Sans, sans-serif">`

*Note: If you want cooler fonts, checkout [Google Fonts](https://fonts.google.com/) and [this document for learning how to integrate a google font into your project](https://developers.google.com/fonts/docs/getting_started).*  *You'll need to put a link inside `head` tags (which includes content that is not visible on the site, but that the browser uses to configure the site)*

*Additional Note: not all computers have access to the same fonts, so if a computer does not have access to a font, it will go to the next one in the list. For this reason, I suggest putting selecting your favorite three fonts and putting them in order from most-liked to least-liked.*

*Final Note: you can use the font-size property and font-weight property to further change the visual appearance of a text element*  

### Styling Space ✨
Space is created by a combination of Margin (not margarine, MARGIN) and padding (fluff).

Margin is your space between your picture frames on your wall. 

Padding is the gap between the photo and the frame. If you had a box with an item in the middle, the space between the object in the center and the walls of the box is padding. 

Also... here's a comedy skit by Shubham at Epoch Bay Area to learn about Margin and Padding

<video src="https://cloud-2jto14u7d-hack-club-bot.vercel.app/0vid_20221230_184903086.mp4" controls="controls" style={{maxWidth: "480px"}}>
</video>

We'll get more into this later, but right now I would just like to bring our items closer together. 

![spaced out](https://cloud-5txt6wpqn-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.12.11_pm.png)

So if we open the inspect window...

![Margin is the problem](https://cloud-p8iio5lh4-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.19.38_pm.png)

We can see that the default margin on the h1 is quite large and it's making the site look a bit awkward. Let's correct that. 

Let's reduce the margin on the h1 tag

` <h1 style="margin: 4px;">thomasOS</h1>`

*Note: px stands for pixels, so we now have a 4px space on all sides for the header text element*

If you wanted to add some space within your heading, you could add padding, so perhaps make it
` <h1 style="padding: 4px; margin: 4px; background-color: #000; color: #fff">thomasOS</h1>`
(you can see the padding added a gap between the walls of the element and the content itself)

*Note: with both padding and margin, you can change the spacing in a specific direction by appending -top, -bottom, -right, or -left. For example you could add margin-top: 4px; or padding-left: 16px;*

Alright, lovely! Here's my finished site for this episode of the batch. I hope your site looks nothing like this! Please take the opportunity to have fun with this site and do something wild!

![Finished Site](https://cloud-423oznftn-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.27.35_pm.png)

*Note: You'll notice I added some unique looking tags inside the paragraph text, YOU CAN DO THAT TOO BY CHECKING OUT THE SOMEWHAT OPTIONAL ADDITIONAL CHALLENGE BELOW.*

## Additional Challenge (optional-ish)
Discover some unique tags on the [W3 Tags Site](https://www.w3schools.com/TAGS/default.asp). There are 100+  tags for you to experiment with. Go dive into the W3 Tags Directory and find some random tags and experiment with them on your site. Have fun :) 

here are some ones we really like:
* `<s>Strike Through</s>`
* `<p>break the </br> line like this</p>`
* `<p>use strong to <strong>bold text</strong></p>`


## Next time on building your own PersonalOS...
In the next episode we will build the foundation of our OS by:
* Adding a wallpaper
* Creating Your Window
* Creating the top bar
* Tracking time with JS


In this Jam, you'll be creating an awesome welcome screen for your personalOS. It will be plenty of fun and you'll have an awesome-looking one-of-a-kind product that you'll build upon in subsequent Jams.


Wielding the Elemental Magic of the Web (not evil)


30-45 minutes, intermediate difficulty

![Capybara OS demo](https://cloud-ir4w2s05f-hack-club-bot.vercel.app/0screenrecording.gif)

*(p.s. this is a sample of what your OS might look like, except HA NO it's going to be about you and fit your vibe so not look/feel like this at all)*

 
The OS will be entirely web-based (using HTML, CSS, and JS). You'll be the designer and developer of your OS (so you'll have complete creative freedom). You'll decide the content, style, features, etc. If your website looks totally different from mine by the end of the batch jam, then you've done the Jam well. If it looks the same, go back to the drawing board.

**Today you'll be creating an awesome welcome screen for your personalOS. It will be plenty of fun and you'll have an awesome-looking one-of-a-kind product that you'll build upon in subsequent Jams.**

[Live Demo ](https://step8.thomasstubblef2.repl.co/)
[Sample Code](https://replit.com/@ThomasStubblef2/Step8#index.html)

There are six steps/headings in this Jam! Go through each and begin building your personalOS.

**Outline:**
1. **Enter The Code Editor** *(start coding in your browser)*
2. **Build with Elements** *(create elements for your welcome screen)*
3. **Personalize Your Content** *(make the content personally relevant to you)*
4. **Style Your Elements** *(make your elements fit your aesthetic)*
5. **Additional Optional Style Challenges**
6. **Next Time on Building Your Personal OS**

## Enter the Code Editor 
Hey there Hacker! Let's get you setup

## Create an Account
Head over to the [Replit Website](https://replit.com/languages/html) and create an account

<Dropdown title="What is Replit?">
Replit is a web-based independent development environment (IDE). Basically Replit allows you to write code in your browser and instantly deploy your site to the entire world. I suppose you could say its *magical*. 
</Dropdown>



<Dropdown title="If you're unable to use Replit or would rather not use Replit">
If for whatever reason you have difficulty accessing Replit, visit <a href="https://firewalledreplit.com/">Firewalled Replit</a>.
I also recommend checking out GitHub code spaces or running a local development environment in VS Code.
All the code is the same regardless of the code editor you use.😉
</Dropdown>



### 2. Create a new Repl/Project 
Welcome to your Replit Dashboard! Once inside, tap create a Repl and then select **HTML, CSS, and Javascript** as your template. 

Replit will kindly start you off with some boilerplate code (starter code). 

![Replit-Signup](https://cloud-c6z75ah46-hack-club-bot.vercel.app/0export_jun_15_2023_0159_pm.gif)


## Build with Elements

### What are elements?
Every site you've ever visited has elements. Try right clicking this site and tapping Inspect, you'll see a bunch of elements. HTML is the file format for these elements.

#### What makes an element?
Elements consist of three parts. 

Elements consist of an opening tag, the content in the middle, and a closing tag. So for example `<p>Sample Content</p>` creates paragraph text because there is an opening tag (`<p>`), with content in the middle (`Sample Content`), and a closing tag (`</p>`) indicating where the content ends 

![bagel](https://cloud-rd8lvcrjx-hack-club-bot.vercel.app/0video.gif)
*(bagels are a lot like tags or I suppose you could say tags are a lot like bagels... depending on your perspective)*

### Where can I place them?
Replit gave you some starter code, but it has some unnecessary elements. Orpheus the Dinosaur *(don't ask who [Orpheus](https://workshops.hackclub.com/orpheus/) is)* asks that you please copy and paste the code below into your project

```
<!DOCTYPE html>
<html>

	<body>
  
	</body>

</html>
```

The body of your site is contained inside of an opening tag (`<body>`) and a closing tag (`</body>`). The content of your site goes inside the body.  **Inside your body is where you'll place your elements.**

It's sort of like how cream cheese goes inside of a bagel. A bagel has a top and bottom and all of the tasty cream cheese in the middle.

Let's fill your body tag sandwich with some tasty content! 🥯

### How can I make elements for my welcome screen?
Inside of your body tags, let's write some code

```
<body>
  <p>Hello world!</p>
</body>
```

You've created your first element & it's a `<p>` element (p stands for paragraph)! Congratulations!

Let's try making a heading! Simply create a new element with h1 tags.
```
<body>
  <h1>Welcome to my OS</h1>
  <p>Hello world!</p>
</body>
```

Awesome. We can also make smaller headings. `h1` is the largest heading, but you can also create an `h2`, `h3`, `h4`, & so on. 

```
<body>
  <h1>Welcome to my OS</h1>
  <h2>Introduction</h2>
  <p>Hello world!</p>
</body>
```

Text is neat, but let's add an image:
First we need to drag an image into Replit file manager.

![Drag & Drop](https://cloud-id4r1tr7g-hack-club-bot.vercel.app/0drag_drop.gif)

```
<body>
  <h1>Welcome to my OS</h1>
  <h2>Introduction</h2>
  <p>Hello world!</p>
  <img src="./nameOfImage.jpeg" />
</body>
```

You can also do a direct link to the image (has .png, .jpeg, etc at the end of the url), so for example here's code for placing an image of a Capybara 

`<img src="./imageOfMe.png" />`

The image tag has a property of `src` which stands for source. You can pass in the direct link to the image or import an image and set the src as `"./imageName.png"`.

![Website with text on top and a Capybara image](https://cloud-33eico6lp-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_11.54.32_am.png)

### Let's link to another page
HTML (HyperText Markup Language) was built for scientists to be able to share research documents (& is now used on every website on the internet). If you know anything about scientists, then you know they LOVE to reference other pages. 

For this reason, HTML makes it easy for you to hyper-link to other pages.

```
<body>
  (rest of your content)
  <a href="https://example.com/">label</a>
</body>
```

Replace label with the label of the button (so for example [Instagram](https://www.instagram.com/starthackclub/)) and link with the url (like https://www.instagram.com/starthackclub/).

You can use this to link to a personal social media, a GitHub, a random website about your favorite creature, or just not make an a tag at the moment. It's totally up to you. 

## Personalize Your Content
Soo... surprise, you didn't realize but you just started your onboarding screen for you operating system.

**Go ahead and fill it up with your own content.** 

Don't know what to add? Perhaps try:
* Linking to your favorite playlist
* Adding a picture of a pet
* Writing a bit about your favorite hobbies
* etc

### Customize the text content and image
Make the text content whatever you would like users to see when they first land on your site. Be creative and have fun with it! 

Select an image for your site that represents you (either literally like a selfie or metaphorically like your favorite creature) by changing the src of the image to a URL or path to your image. 

### Content Complete
Okay, so you should now have the content for your "Welcome to My OS" screen and it should feel totally unique to you (i.e. if a friend saw your welcome screen, they would immediately know it was your OS).

Your content most likely looks rather bland and uninteresting which leads us into our next topic... styling our content!

![content styling in progress](https://cloud-9jc9u3xyy-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_3.51.07_pm.png)

## Style Your Elements 
### What's a style?
A style is a property-value pair that changes the way an element looks.

Styles can exist within an html file when written in-line, but can also be in a separate file (styles.css). For now, we're going to write the styles inside of our HTML file (inside of opening tags)

To apply a style, it's as simple as:
`<tag style="property: value"> content </tag>`

**Every style has a property and a value.** 
For example a style may be color with the value of red (to turn the text red)

### Styling Color 🎨
To change the color text you would simply write
`<p style="color: red">This text is red</p>`

You can also add a background color: 
```
<body style="background-color: #c9ffcf">
	// your content//
</body>
```

Easy, right? 

*p.s. you'll notice I used hex (#c9ffcf) instead of the name of a color (red) for the second example. Hex is a format for representing color. You can use either the name of a color or the hex value. To find hex values, try googling "hex color picker"

### Styling Shape
Images can have styles too!

Your image is probably very large. Let's change the size & shape.

Simply go to the image and apply a style property that sets the width and height: 

`<img style="width: 64px; height: 64px" src="https://cloud-pc8imajxj-hack-club-bot.vercel.app/1img_1181.jpg" />`

I chose to make the width and height 64px, but you don't have to! Pick your own size, play with it, and have fun!

*Note: Semicolons are used to separate css properties*

##### *\*Crunch*\*
Your image might be a bit crunched up. Try to Google how to fix this (maybe even ask GPT). Even a very basic search term such as What is the CSS Property for making an image not crunch, would probably work.

![crunched image](https://cloud-4cdvjzqmo-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_12.43.50_pm.png)

<Dropdown title="Solution">
  Upon scrubbing through the results, I found the `object-fit: cover` property. Let's try applying that to our image. Ah lovely, and just like that our image is uncrunched. Whenever you run into something that looks ugly and you want to make it look beautiful, just google it and Google will help you out.
</Dropdown>


##### *\*Rounddddd*\*
Optionally, you can round your corners. Try googling this! (maybe you can even turn your image into a circle shape if you'd like)

<Dropdown title="Solution">
You probably found a nifty little CSS property called border radius. 
simply write style="border-radius: 16px; object-fit: cover" on your image tag.
Note: Semicolons are used to separate css properties
</Dropdown>


![rounded image](https://cloud-b43epg4q2-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_3.59.41_pm.png)

### Styling Font
Adding a font in CSS is easy!

The easiest way to add a font is to visit the [W3 Library of browser-built-in](https://www.w3.org/Style/Examples/007/fonts.en.html) fonts and select one that fits the vibe of your site! 

Once you pick out your favorite font(s), go to the body and put a style property of font-family on the opening tag.

`<body style="font-family: Helvetica, Noto Sans, sans-serif">`

*Note: If you want cooler fonts, checkout [Google Fonts](https://fonts.google.com/) and [this document for learning how to integrate a google font into your project](https://developers.google.com/fonts/docs/getting_started).*  *You'll need to put a link inside `head` tags (which includes content that is not visible on the site, but that the browser uses to configure the site)*

*Additional Note: not all computers have access to the same fonts, so if a computer does not have access to a font, it will go to the next one in the list. For this reason, I suggest putting selecting your favorite three fonts and putting them in order from most-liked to least-liked.*

*Final Note: you can use the font-size property and font-weight property to further change the visual appearance of a text element*  

### Styling Space ✨
Space is created by a combination of Margin (not margarine, MARGIN) and padding (fluff).

Margin is your space between your picture frames on your wall. 

Padding is the gap between the photo and the frame. If you had a box with an item in the middle, the space between the object in the center and the walls of the box is padding. 

Also... here's a comedy skit by Shubham at Epoch Bay Area to learn about Margin and Padding

<video src="https://cloud-2jto14u7d-hack-club-bot.vercel.app/0vid_20221230_184903086.mp4" controls="controls" style={{maxWidth: "480px"}}>
</video>

We'll get more into this later, but right now I would just like to bring our items closer together. 

![spaced out](https://cloud-5txt6wpqn-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.12.11_pm.png)

So if we open the inspect window...

![Margin is the problem](https://cloud-p8iio5lh4-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.19.38_pm.png)

We can see that the default margin on the h1 is quite large and it's making the site look a bit awkward. Let's correct that. 

Let's reduce the margin on the h1 tag

` <h1 style="margin: 4px;">thomasOS</h1>`

*Note: px stands for pixels, so we now have a 4px space on all sides for the header text element*

If you wanted to add some space within your heading, you could add padding, so perhaps make it
` <h1 style="padding: 4px; margin: 4px; background-color: #000; color: #fff">thomasOS</h1>`
(you can see the padding added a gap between the walls of the element and the content itself)

*Note: with both padding and margin, you can change the spacing in a specific direction by appending -top, -bottom, -right, or -left. For example you could add margin-top: 4px; or padding-left: 16px;*

Alright, lovely! Here's my finished site for this episode of the batch. I hope your site looks nothing like this! Please take the opportunity to have fun with this site and do something wild!

![Finished Site](https://cloud-423oznftn-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_4.27.35_pm.png)

*Note: You'll notice I added some unique looking tags inside the paragraph text, YOU CAN DO THAT TOO BY CHECKING OUT THE SOMEWHAT OPTIONAL ADDITIONAL CHALLENGE BELOW.*

## Additional Challenge (optional-ish)
Discover some unique tags on the [W3 Tags Site](https://www.w3schools.com/TAGS/default.asp). There are 100+  tags for you to experiment with. Go dive into the W3 Tags Directory and find some random tags and experiment with them on your site. Have fun :) 

here are some ones we really like:
* `<s>Strike Through</s>`
* `<p>break the </br> line like this</p>`
* `<p>use strong to <strong>bold text</strong></p>`


## Next time on building your own PersonalOS...
In the next episode we will build the foundation of our OS by:
* Adding a wallpaper
* Creating Your Window
* Creating the top bar
* Tracking time with JS


p.2 Wielding the Elemental Magic of the Web (not evil)

p.3 Wielding the Elemental Magic of the Web (not evil)

p.4 Wielding the Elemental Magic of the Web (not evil)

p.5 Wielding the Elemental Magic of the Web (not evil)

Creating Your Personal Web-based Operating System (w/ Apps included)

This Jam will teach you how to use ChatGPT and AI to create a trip itinerary planner. It is extremely customizable and gives a foundation for you to expand upon with your own ideas!


Wield the Power of AI wizards to Plan Your Travels

# Building social media apps

_1 hour • Intermediate_
At the end of this jam, we'll create a social media app that handles users and posts.
We'll be using [Firebase](https://firebase.google.com) SDKs to help us with user authentication and data storage.

Here's a demo of something you could build:
![Demo](image.png)

#### Pre-requisites

Ideally, you have a basic understanding of HTML, CSS, and JavaScript, but if this is your first jam, feel free to ask for help!

## Brainstorming

<details>
<summary>
Brain Fact!
</summary>
The human brain weighs 3 pounds
</details>
The foundation of any social media app is creating and loading some sort of post. Think of any popular social media (Instagram, Reddit, YouTube, or even a recipe app)

## Setting up

Please fork/clone [this Repl.it boilerplate](https://replit.com/@JadenHou1/JAM) to get started! We'll go over each file in a sec.

```
index.html
create.html
login.html
```

These are the three pages we'll be using for our app. `index.html` is the home page where we'll load all the posts, `create.html` is the page where users can create posts, and `login.html` is the page where users can log in.

On each page, we have a basic HTML boilerplate with script and style tags. Conventionally, you'd have these in other files and link them to the HTML file, but for simplicity, we'll just keep them in the same file.

### Creating a Firebase account

Head over to [Firebase Console](https://console.firebase.google.com/u/0/) and log in with Google. Once you're in, create a new project and name it whatever you want.

Then, click and enable `Authentication` and `Firestore Database`.
![Console](image-1.png)

**Authentication**

1. Click `Get Started`
2. Click `Sign-in method` and enable `Google`
3. Enable and save

**Firestore**

<details>
<summary>
Shark Fact!
</summary>
Sharks...do not have bones
</details>

1. Click `Start in test mode`
2. Click `Next` and choose `nam5` as the location

### Creating an app in Firebase

![Console](image-3.png)

1. Click the `</>` icon
2. Name your app anything
3. Click `Use a <script> tag`
4. Keep this code snippet on hand, we'll need it later

Here is what the code snippet looks like and what each line does:

```html
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js"; // imports the initializeApp function from the Firebase SDK
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    }; // specific details unique to your web app. this lets Firebase know that you want to access your services and not someone else's
    const app = initializeApp(firebaseConfig); // load the Firebase app
</script>
```

> Use your own code snippet! This code snippet won't work for you.

## Logging in

![Logs](image-4.png)
Head over to `login.html`. Firebase makes it super easy to add user authentication to your app. We'll be using Google Sign-In, but you can use any of the other methods Firebase provides.

First, create a button with `Sign in with Google`. We'll use the id `login` to add an event listener.

```html
<button id="login">Sign in with Google</button>
```

Firebase gives us a really useful `signInWithPopup` and `GoogleAuthProvider` to handle user authentication.

First, add your **Firebase code snippet** from before to the script tag.

Then, import these Firebase functions. This lets us use pre-written functions in our code. Specifically, we want to use `getAuth` to load the authentication, `signInWithPopup` to prompt the user with a popup to log in, and `GoogleAuthProvider` to tell Firebase that we want to use Google.

```js
import {
    getAuth,
    signInWithPopup,
    GoogleAuthProvider,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
```

Initialize `getAuth` and the `GoogleAuthProvider`.

```js
const auth = getAuth();
const provider = new GoogleAuthProvider();
```

Now, we can add an event listener to the `login` button. When the user clicks the button, we'll call `signInWithPopup` and pass in the `auth` and `provider` we just created.

```js
document.getElementById("login").addEventListener("click", () => {
    signInWithPopup(auth, provider).then(() => {
        window.location.replace("/"); // redirect to home page after logged in
    });
});
```

Your HTML Body should look like this when finished.

```html
<button id="login">Sign in with Google</button>
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
    import {
        getAuth,
        signInWithPopup,
        GoogleAuthProvider,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();
    const provider = new GoogleAuthProvider();

    const login = document.getElementById("login");
    login.addEventListener("click", () => {
        signInWithPopup(auth, provider).then(() =>
            window.location.replace("/")
        );
    });
</script>
```

![Login button](image-5.png)
Test it out! You should receive a prompt to login. <small>[Need help?](https://firebase.google.com/docs/auth/web/google-signin)</small>

## Creating a post

![Alt text](image-7.png)

<details>
<summary>
Whale Fact!
</summary>
Whales can get SUNBURNS
</details>

Head over to `create.html`. This is where we'll let users create posts. I'll have to leave these fields up to you, but I'll give you a starting point. Please add fields that are relevant to your idea!

**From now on, your code will depend on the idea you came up with.** For me, I'm going with a dog personality-sharing app.

First, create a form for users to enter their information.

```html
<form id="form">
    <input id="name" type="text" placeholder="Name" />
    <input id="description" type="text" placeholder="Description" />
    <button type="submit">Submit</button>
</form>
```

> The fields `name` and `description` can be anything you want. Add fields that make sense for your app! For example, a recipe app may have an estimated time to make, and a club directory app may have meeting times.

This is just a basic form with 2 inputs and a submit button. Adding IDs to each input allows us to access the values on submit. Adding an ID to the form allows us to add an event listener to it.

To add these fields to the database, we have to import some new packages! First, add the **Firebase code snippet** from before to the `<script>`. Then, import both the **authentication functions from before** and the `getFirestore`, `setDoc`, and `doc` functions from **Firestore** as following.

```js
import {
    getAuth,
    signInWithPopup,
    GoogleAuthProvider,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
import {
    getFirestore,
    addDoc,
    doc,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
```

Importing `getFirestore`, `addDoc`, and `doc` allows us to load Firestore, add documents to the database, and reference a document in the database, respectively.

Load each package.

```js
const auth = getAuth();
const db = getFirestore();
```

Then, access the form element, and add an event listener to listen for form submissions.

```js
form.addEventListener("submit", (e) => {
    e.preventDefault();
});
```

By default, forms will refresh the page on submit. We don't want this because we won't be able to execute code if the page is refreshing, so we'll add `e.preventDefault()` to prevent the page from refreshing.

We don't want just anyone to add posts, just users! So, we'll add a check to see if the user is logged in. If they are, we'll add the post to the database. If not, we'll alert them to log in.

Add the following after the `e.preventDefault()`.

```js
const currentUser = auth.currentUser;
if (!currentUser) {
    alert("Please login first");
    return;
}
```

`auth.currentUser` lets us access the current user. If there is no current user, the variable will be `null`, so we can alert the user and not add anything. `return` will stop the function from executing any more code.

Then, create a collection in Firestore. A collection holds all your documents. It's like a bucket for all your data.
![Alt text](image-8.png)
![Alt text](image-9.png)

> Choose a collection name that makes sense for your app! It doesn't have to be posts if that doesn't make sense. Maybe something like `recipes` or `clubs` would make more sense for your idea

When you're prompted to create the first document, add sample data for the fields you've already created above. You can just click auto-ID for the document ID.
_For example, in my case I'll add `name` and `description`._
![Alt text](image-10.png)

Now, we can access the values of each input and add them to the database. We'll use `addDoc` to add a document to the database. `addDoc` takes in 2 parameters: the reference to the collection and the data to add. We'll use `collection` to reference the collection we want to add to, `name.value` to get the value of the first input, and `description.value` to get the value of the second input. We can also use `currentUser.displayName` to grab the name of the author to display.

```js
const form = document.getElementById("form");
const name = document.getElementById("name");
const description = document.getElementById("description");
addDoc(collection(db, "posts"), {
    name: name.value,
    description: description.value,
    author: currentUser.displayName,
});
```

> Your `name` and `description` variables will vary based on the fields you set. Be sure to change them to match this format: `const <field> = document.getElementById("<field>")`. Also, the key/values in the data we're adding will vary.

Finally, we'll let the user know that they've successfully submitted a post.

```js
alert("Successfully submitted post!");
```

Your HTML Body should look something like this when finished.

```html
<form id="form">
    <input id="name" type="text" placeholder="Name" />
    <input id="description" type="text" placeholder="Description" />
    <button type="submit">Submit</button>
</form>
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
    import {
        getAuth,
        signInWithPopup,
        GoogleAuthProvider,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
    import {
        getFirestore,
        addDoc,
        collection,
    } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
    const firebaseConfig = {
        apiKey: "AIzaSyBdD6AmLOxx0b7MPc9FggPMYpttLq-XEE4",
        authDomain: "jammer-7b6da.firebaseapp.com",
        projectId: "jammer-7b6da",
        storageBucket: "jammer-7b6da.appspot.com",
        messagingSenderId: "789182152948",
        appId: "1:789182152948:web:380ac8c7beb26882569ea1",
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();
    const db = getFirestore();
    const form = document.getElementById("form");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        const currentUser = auth.currentUser;
        if (!currentUser) {
            alert("Please login first");
            return;
        }
        const name = document.getElementById("name").value;
        const idea = document.getElementById("idea").value;
        addDoc(collection(db, "posts"), {
            name: name,
            idea: idea,
            author: currentUser.displayName,
        });
        alert("Successfully submitted post!");
    });
</script>
```

## Loading posts

This is where it gets good. We'll be loading posts from the database and displaying them on the home page. Head over to `index.html`.

> I'll leave this implementation up to you, but I'll give you some steps to get started.

First, add the **Firebase code snippet**, and import and initialize the Firestore functions from before.

```js
import {
    getFirestore,
    getDocs,
    collection,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-firestore.js";
const db = getFirestore();
```

To create an element for each post, we'll need to get each post and run a function for each. We'll need `getDocs`. `getDocs` returns a [Promise](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises#async_and_await), and we can use `await` to turn that into a value, but we won't get into that in this jam (think of it as a black box).

Here's an example of how to use `getDocs` to get all the posts.
```js
const posts = await getDocs(collection(db, "posts"));
```
Now, we can use [`.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) to [create elements](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement).

*draft*

At the end of this jam, you'll create your very own social media app that handles users and posts.


Building Your Own Social Media w/ 🔥 Firebase 🏰



**Before you start.**: This guide takes about 30 minutes to complete. Easy Difficulty, Good start for any newbies.

What you will end up with:

![Demo](https://cloud-rcnqjs0ni-hack-club-bot.vercel.app/0image.png)

### Why should you even care?

* Well, imagine a reward you made that you can share withothers.
* Like a sign of gratitude or thanks. Or anything you want! This token can be like a cashback, a reward, a sign  , of thanks, a form of currency between your friends
* and well you get to learn something new
* Understanding blockchain concepts can significantly impact your future prospects, especially in the field of blockchain development.
* Learning about current trends can help you keep up and learn something new!
   
### Learning Objectives

* To learn and understand the Ethereum platform
* To create a crypto token
* Understand the basics of Solidity language

### Prerequisite knowledge required

* None! This course covers everything you need to know and get started with!
  
### Outline of the course

* Create accounts and an endpoint
* Code in solidity
* Deploy and receive the tokens.

### What to keep ready?

* install the metamask extension to your browser (a place to store your coins)
* open and keep quicknode.com ready (a place to interact with the ethereum platform)
* open and keep remix.ethereum.org ready (a place to code and deploy in solidity)

### Key Points & Terms
* MetaMask - Think of it like a bank! Metamask is a virtual wallet where you will be storing tokens through this Jam.
* Quicknode - We use this as a method to connect your metamask to the ethereum (or any) blockchain. This helps metamask or any service communicate with the network (blockchain network)
* Endpoint - This is like a connection point between any service and a blockchain network (Quicknode makes one for you making our task easier)
* Solidity - An object-oriented programming language for implementing smart contracts on various blockchain platforms, such as Ethereum.
* ERC-20 - Short for Ethereum Request for Comment 20, It helps guide the creation of new tokens in the ethereum blockchain
* Testnet - The opposite of Mainnet, Coins in the mainnet have monetary value and the value can change but in a testnet all coins are just virtual copies/duplicates without a realworld value. But dont let that get to you as these coins are indeed shareable!

### WARNING: THE COINS YOU MAKE ARE IN THE TESTNET AND HAVE NO MONETARY VALUE! DONT EXPECT TO MAKE MONEY OUT OF THIS lol 
### DOUBLE WARNING (AND TIP): WHEN MAKING YOUR METAMASK ACCOUNT, MAKE SURE TO SAVE THE 12 PHRASES AS THEY ARE LIKE A PASSWORD TO YOUR ACCOUNT, STORE THEM ANYWHERE SAFE LIKE YOUR NOTEPAD, DIARY, ANYWHERE SAFE. ONCE LOST, YOUR ACCOUNT IS GONE BYE-BYE FOREVER. (also dont trust anyone and show them your phrases)

## The guide! (dont be overwhelmed by the number of steps, Its easy!)

1. Navigate to quicknode.com and create an account

2. Click "Endpoints"

3. Click "Create Endpoint"

4. Click "Continue"

5. Click on "Ethereum"

6. Click on "Sepolia"

7. Choose the free version

8. Wait for the process to complete

9. Copy the HTTP link provided at the top

10. Create a MetaMask account (if you don't have one already)

11. **WARNING**: Keep the secret phrases safe and save them in a secure location

12. Open MetaMask and click on the profile button

13. Click "Add Network"

14. Scroll to the bottom and click "Add a Network Manually"

![Ss](https://cloud-es32hz2zz-hack-club-bot.vercel.app/0screenshot__74_.png)

16. Fill out the form as follows:
    - Network Name: Ethereum Sepolia
    - New RPC URL: [Paste the copied HTTP link]
    - Chain ID: 11155111
    - Currency Symbol: ETH
    - Block Explorer URL: https://sepolia.etherscan.io

17. Click "Save" or "Add" to add the network

18. Press the text showing "Account 1" to copy the MetaMask address

19. Go to sepoliafaucet.com in your web browser (You're just a few clicks away from being a crypto millionaire! Well, at least in Sepolia. Time to collect those shiny tokens!)

     ![ss](https://cloud-noik0omfz-hack-club-bot.vercel.app/0screenshot__77_.png)

21. Paste the copied MetaMask address into the provided field on the Sepolia Faucet website

22. Follow the instructions on the website to claim the free tokens

23. Go to remix.ethereum.org in your web browser (Now you're a real crypto artist! Grab your virtual paintbrush and start creating your masterpiece.)

24. Create a new file called `MyToken.sol` and add the following code:

```
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MyToken is ERC20 {

    constructor () ERC20("Your Coin Name", "Your coin symbol (3-4 letters only)") {
        _mint(msg.sender, 1000000 * 10 ** decimals());
    }
}

```

![ss](https://cloud-37tpft686-hack-club-bot.vercel.app/0screenshot__80_.png)

```
Code explaination:

the first line is a comment which states the license of the code

the second line specifies the version of solidity the code is compatible with

the third line imports code from an open source library called openzeppelin

the forth line defines a new contract called MyToken from the ERC20 contract

the next few lines defines the personality of the coin like its name, symbol, amount and decimal points. psss.. BTW dont remove the " " from around your token name and symbol.

Quick FAQ:

* Why use openzeppelin?: OpenZeppelin is like a prebuilt library with most of the important things already made by the community, think of it like a library used in your fav. programming language. Openzeppelin makes things easy so that we dont have to stress about the backend!
* What is _mint for and why only that much?: _mint is used to set and create an amount of tokens in the blockchain, you can increase 1000000 to any number but keep in mind that the more bigger the amount is the much less value something has. What I mean is, if everyone in the world has an Iphone, the value or the pride of having one is way low as Iphone/apple products are a way to flex but if everyone has one, you arent much unique (Dont take this example to heart as this applies to anything)

```

23. Click on the third icon in the sidebar to access the Solidity compiler

24. Click on "Compile MyToken.sol" and wait for the compilation to finish

25. Click on the fourth icon in the sidebar to access the Deploy tool (Deploy, deploy, and away! It's like sending your token into the crypto universe. Ready for takeoff!)

26. Click on the environment dropdown and choose "Injected provider - Metamask" (You may need to refresh the page and the name may not specifically mention MetaMask)

27. Click on "Deploy" (Waiting for confirmation? Don't worry, it's not like waiting for a pizza delivery, It wont take long!)

28. Wait for the MetaMask popup to appear and accept any prompts that show up (Buckle up, folks! You're about to embark on a digital transaction journey. Fasten your seatbelts and prepare for takeoff!)

    ![ss](https://cloud-qsv7014dp-hack-club-bot.vercel.app/0screenshot__81_.png)

30. Wait for a message or confirmation from MetaMask indicating the successful deployment

31. Scroll down in the Deploy and Run Transactions tool to find the "Deployed Contracts" section

32. Click on the copy icon to copy the deployed contract's address

33. Go to sepolia.etherscan.io in your web browser

34. Paste the copied contract address into the search bar on Etherscan and verify its existence (Let's play detective! Paste the contract address and see if our virtual creation has left its digital footprint on the blockchain.)

    ![ss](https://cloud-jje5y5mxt-hack-club-bot.vercel.app/0screenshot__82_.png)
    ![ss](https://cloud-jje5y5mxt-hack-club-bot.vercel.app/1screenshot__83_.png)

36. Go back to MetaMask (Time to check on your tokens like a dragon guarding its treasure!)

37. Click on "Import Tokens" at the bottom of the page

38. Paste the deployed contract's address (same one used in sepolia.etherscan.io) and wait for the form to auto-complete

    ![ss](https://cloud-67bytcbnd-hack-club-bot.vercel.app/0screenshot__85_.png)

40. Continue and wait for the token to be imported

41. You will receive your coins in MetaMask (Cha-ching! It's raining digital coins in your MetaMask wallet. Time to celebrate!)

    ![ss](https://cloud-67bytcbnd-hack-club-bot.vercel.app/1screenshot__86_.png)

## Personalizing options

* Try experimenting and testing different blockchains like matic!
* Try making more coins for different occasions (maybe one for thanks and one for sorry?)
* Try messing around the settings! It wont hurt to try new things!

## And your reward for sticking around (How to share tokens)

* remember steps 13-17? just redo it on your reciever's (the person you want to send the tokens to) metamask
* IMPORTANT STEP - You can rename the Network name to your coins name and ** ADD YOUR (THE PERSON SENDING THE TOKEN) Quicknode http link (step 9) and paste it in the reciever's NEW RPC URL field.
* then go back your dashboard, click on your coin, click on send, paste the recievers address (step 18) to send it to him! Its that easy!!!!

## A couple of things as tips or bonus
* Make sure to give all your addresses right as messing up addresses can ruin literally everything
* Play around with code or settings to find out how things work! (You can never go wrong in a testnet)
* Before trying out a new Blockchain, do infact read and understand about it.

## Additional Resources & Guides
* Check out metaschool.so (where i learnt all of this) for many many for courses where you get to explore the wonders of Web 3.0
* Learn more about ethereum and its blockchain at ethereum.org/en/
* Make a blockchain with python ![link](https://hackernoon.com/learn-blockchains-by-building-one-117428612f46) ![and this](http://ecomunsing.com/build-your-own-blockchain)
  
## Stuck? Facing issues? Your last braincell stopped working?

* Feel free to contact me on slack! The name's @Briyan Dyju




In this Jam, you'll be creating an awesome cryptocurrency which you will be able to personilize and share with others!


Create Your Own Crypto Currency with Solidity

## Some mdx text, with a component

<Dropdown title="Dropdown Preview">
           Content inside of the Dropdown

           ![rounded image](https://cloud-b43epg4q2-hack-club-bot.vercel.app/0screenshot_2023-06-16_at_3.59.41_pm.png)
           
           <Dropdown title="Dropdown Drop Inside">
                    Drop inside of Drop
          </Dropdown>
</Dropdown>

## Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis elementum tellus nec condimentum. Nam auctor arcu a urna elementum, vitae dapibus est interdum. Sed maximus congue ante, id aliquam dolor. Donec in dui hendrerit, blandit purus in, eleifend metus. Phasellus quis tempor est, non tincidunt nunc. Sed sit amet nisi fermentum, aliquam elit ut, faucibus urna.

## Section 2

Duis sed leo eu lorem efficitur faucibus vel in turpis. Nulla consequat tincidunt turpis, non egestas elit aliquet vel. Fusce non ante ac nunc consectetur placerat eu nec urna. Pellentesque nec convallis metus. Nam quis feugiat erat. Ut condimentum auctor ex. Fusce dignissim lorem ac lorem semper, in consequat sem congue.

### Subsection 2.1

Phasellus euismod leo nec turpis congue, et congue elit tristique. Quisque id nisi vel erat semper posuere. Aenean efficitur mi non luctus luctus. Donec nec faucibus magna. Mauris eget orci non sem placerat dignissim. Nunc auctor eleifend tellus vitae congue. Donec id ultricies ipsum. Nam eu orci sit amet augue tincidunt congue in a felis.

### Subsection 2.2

Vestibulum pellentesque tincidunt malesuada. Sed ac tellus in ante sollicitudin tincidunt. Phasellus eget pharetra mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur lobortis commodo dui ut eleifend. Proin sagittis tortor sed nunc posuere, eget interdum felis vestibulum. Aliquam in erat eu ipsum dignissim pretium non a purus.

## Section 3

Aenean vestibulum semper nisi, at auctor risus aliquam non. Praesent sit amet eleifend odio. Integer tempor vehicula dui nec venenatis. Cras venenatis ante sit amet sem euismod, nec egestas neque volutpat. Proin nec risus finibus, venenatis dolor vel, auctor enim. Vivamus sed leo et est pulvinar suscipit a vitae lectus. Nam condimentum malesuada tellus id scelerisque.

Example

In this jam, you'll learn about the Mandelbrot set, and how to render it in realtime using ShaderToy.


Create INFINITE art with math (and code)


# Make your own PCB Hacker Card

[TODO: intro]

## Schematic

The first step is creating a schematic for your PCB design. A schematic shows the components that will be used in the circuit, as well as how each of these components connect to each other.

For our card, we'll be using

- A [NT3H2111W0FHKH](https://jlcpcb.com/partdetail/NxpSemicon-NT3H2111W0FHKH/C710403) NFC Chip: this will be the main component of our card -- it handles the NFC functionality as well as harvesting energy from the phone to light up the LED
- An ~2V LED. I'm using [C2296](https://jlcpcb.com/partdetail/Hubei_KentoElec-17_21SUYCTR8/C2296), but feel free to pick a different color (note: this part may also be called 17-21SUYC/TR8)
- A [47Ω resistor](https://jlcpcb.com/partdetail/23909-0603WAF470JT5E/C23182)
- A [220nF capacitor](https://jlcpcb.com/partdetail/21832-CL10B224KA8NNNC/C21120)

First, let's open up [EasyEDA](https://easyeda.com). This is a browser based PCB designer, so all you need is an account.

Once you've logged in, select `File` > `New` > `Project` to create a new project.
![](/photos/new-project.png)

This will open up the schematic editor. Some important parts:

- `Library` on the left toolbar: This is where we will search for components and import them.
- `Wiring Tools` panel: We'll be using the wire tool to connect the components together.

![](/photos/schematic-unannotated.png)

## Adding components to the schematic

Click the `Library` button to open the parts picker. Search for a part (the part number works best), and make sure `JLCPCB Assembled` is selected. This will make sure we're choosing parts from JLCPCB's parts library, so that JLCPCB can assemble the boards when we order them.

![](/photos/searching-for-parts-unannotated.png)

Select the part, then hit the `Place` button to add it to your schematic. Repeat for all 4 of the parts listed above.

![](/photos/parts-on-schematic-unannotated.png)

### Adding the antenna

The NFC chip needs an antenna to work. We'll be using a PCB trace as the antenna, so we'll need to add that to our schematic.

Note: this is not an actual part, so it doesn't need to be assembled onto the board -- it's formed by the copper traces on the PCB.

To add the antenna, search for `25X48MM_NFC_ANTENNA` in the Library, and instead of `JLCPCB Assembled`, select `User Contributed`. Select one of the options (check the preview to make sure it looks similar to the one I used here, but most of them should work), and place it on your schematic.

![](/photos/selecting-antenna-unannotated.png)

## Wiring up the components

Now that all of our components are placed, let's connect them together! We'll use the `Wire` tool to indicated an electrical connection between the different parts -- this is similar to how you would connect wires on a breadboard. On the actual PCB, copper traces will go where we added wires, to form those electrical connections.

We'll reference the NFC Chip's Datasheet, specifically [this explanation](https://www.nxp.com/docs/en/data-sheet/NT3H2111_2211.pdf#page=38) for creating an energy harvesting circuit.

The datasheet says

> A complete total connected capacitor in the range of typically 150 nF up to 220 nF
> maximum shall be connected between VOUT and GND

So we'll connect the capacitor between `VOUT` and GND (the `VSS` pin).

https://github.com/maggie-j-liu/hacker-card-jam/assets/63619830/d65ff889-cf6c-44e8-90d4-0d61e032274d

- The pins `LA` and `LB` are for the antenna, so we'll wire up the antenna between those two pins.
- > If NTAG I2C also powers the I2C bus, then VCC must be connected to VOUT

  Since the NFC chip's energy harvesting _will_ be powering the chip itself, we'll connect `VCC` to `VOUT`.

- Finally, to complete the circuit and light up the LED, we'll connect the LED and resistor between `VOUT` and GND (the `VSS` pin).

Here's what your schematic should look like when completed!

![](/photos/completed-schematic.png)

# Designing the PCB

Now that the schematic is complete, we can start designing the PCB. In this step, we'll place the components onto the board, in the exact shape and configuration that the final board will be. The schematic will help guide us in connecting the the components together.

## Converting the schematic to a PCB

To convert the schematic into a PCB design file, click `Design` > `Convert Schematic to PCB`. You may get a warning about unfinished nets -- this is fine, just click "No, Keep Going."

![](/photos/convert-schematic-to-pcb.png)

This will open up the PCB editor, as well as a popup window to specify the board's dimensions. (If the popup window doesn't show up for any reason, you can find it through `Tools` > `Set Board Outline`.)

Here are the dimensions I'll be using, but feel free to make your business card a different size! Bonus: try making your business card a custom shape (not circular or rectangular). You should have the tools to do that by the end of the jam.

- Board Outline: Round Rectangular
- Width: 88.9mm
- Height: 50.8mm
- Radius: 4mm

![](/photos/set-board-outline.png)

## Functionality: Making a working PCB card

Once you set the board outline, you should see something like the image below. There's the outline of the board in pink, a bunch of components in red, and some thin blue lines connecting the components. Let's talk about what these are, and what the colors mean!

![](/photos/pcb-editor-unannotated.png)

### Layers

A PCB like a sandwich -- it's made up of many different layers. We're designing a 2-layer PCB, which has the following layers:

- The **substrate** is in the middle. This makes up the foundation of the PCB, and is usually made of FR-4 (fiberglass).
- On either side of the substrate are **copper layers** (since this is a 2-layer PCB, there are 2 copper layers: one on top and one on the bottom). In our PCB designer, these are indicated by the `TopLayer` (red) and `BottomLayer` (blue) layers. The copper layers are where electrical connections happen! You should place **traces** (lines that form electrical connections between components) on the `TopLayer` and `BottomLayer`.
- On top of the copper layers are **soldermask** layers. This is what gives PCBs their color -- common soldermask colors are green or black, but white, purple, blue, red, yellow, and more are also possible. Soldermask is added to the entire surface of the board (both the top and the bottom) by default. If you want to **remove** the soldermask (which will reveal the copper underneath), use the `TopSolderMaskLayer` or `BottomSolderMaskLayer` (for the top and bottom of the board, respectively).
- On top of the soldermask layers are **silkscreen** layers. Silkscreen is usually white, and is generally used to label and identify components, but we'll be using it for ✨ PCB art ✨. We can use this to add contact info, a QR code, or even some illustrations to our business card. In EasyEDA, silkscreen is added on the `TopSilkLayer` and `BottomSilkLayer`.

[TODO: insert illustration of PCB layers]

### Components

You'll notice that the PCB designer already has your components populated on the board. By converting the schematic to a PCB design, EasyEDA automatically places the **footprints** of the components on the board. Try dragging these around! You're able to place them anywhere, but keep in mind that they must be placed within the pink board outline. This is exactly how the components will be placed on the final board.

Some helpful tips:

- You can hit the `R` key to rotate a component 90 degrees.
- The thin blue lines indicate where electrical connections need to be made; so try to rotate components so that the lines do not cross
- Don't worry if the yellow marks cross (that's just silkscreen), but the red parts should not be touching! (That's the copper layer, and if they touch, it will cause a short circuit.)

Drag the components around until you're happy with the placement. Here's what mine looks like, but don't copy it directly; almost anything will work!

![](/photos/components-placed.png)

### Routing traces

Now, we have a bunch of components on the card. If we were to have the card manufactured right now, it wouldn't work -- the components are not connected to each other! We need to add **traces** to connect the components together.

It's best practice to manually route your traces, using the first button in the PCB tools panel: the `Track` tool.

[TODO: insert image of PCB tools menu]

However, to speed up the jam a bit, we'll be using EasyEDA's auto-router. Select `Route` > `Auto Route...` and click `Run` to watch the magic happen...

![](/photos/auto-router.png)

...Except, it seems like the magical autorouter 🪄 wasn't 100% successful :(. We'll finish up the last bit with some manual routing.

![](/photos/autorouter-results.png)

The autorouter was able to connect most of the components, but there's still one thin blue line (representing an unrouted connection). Can you find it?

Zoooming in, we see that it's between the antenna loop and pin #8 on the NFC chip. Here's how to route it:

1. Click the `Track` tool in the PCB Tools panel
2. On the right sidebar, set `Routing Conflict` to `Ignore`. This step is generally not needed (for normal manual routing), but there's a small issue with the footprints that makes it necessary here.
3. Click between the two pads that need to be connected. The thin blue line should disappear, and a red trace should connect the two pads.

[TODO: insert manual-routing.mov video]

Now, your PCB card is functional. Woooo! 🎉

We can check out a preview by clicking the `3D` button in the top toolbar. Hmmm... doesn't look like a business card yet. Let's fix that!

![](/photos/card-preview.png)

## Aesthetics: Personalizing your card

We'll mostly be using the silkscreen layer to add our information and designs. Select the `TopSilkLayer` by clicking the yellow rectangle in the Layers and Objects panel. This will make sure that you're on the silkscreen layer.

### Adding text

In the PCB Tools panel, select the `Text` tool. If you want to make it a business card, you can add your name and contact info -- or add any other text you want. Select the text object you just placed, and change the font, line width, and size in the right sidebar.

![](/photos/text-properties.png)

Drag the text to where you want it on your board. Here, I've added my name, website, and GitHub. If you need ideas: you can add your email, phone number, or other social media handles.

![](/photos/text-added.png)

### Adding a QR Code

EasyEDA also supports importing images! I'll use this to add a QR Code that links to my website. I used [QRCode Monkey](https://www.qrcode-monkey.com) to generate a QR Code, then use the `File` > `Import` > `Image` option to import it.

Just like Text objects, you can select the image to modify the properties (width, height, etc.) on the right sidebar.

![](/photos/import-image.png)

Note: we've been placing everything on the yellow `TopSilkLayer`. This means that they will all appear on the top side of our board. If you want to add anything to the bottom, use the green `BottomSilkLayer`! Keep in mind that the bottom layers of the board are a top-down, see through view, which is essentially flipped -- use the 3D viewer to check that all your text and images are oriented correctly.

### Bonus: Textures and other effects

Thus far, we've only used silkscreen to add designs and text to our board. The silkscreen will show up white on the manufactured board, but it's also possible to achieve a variety of other effects by combining different layers!

Here are some examples -- try incorporating these techniques into your board.

- **White silkscreen**: this is what we've been using. Add things to the `TopSilkLayer` or `BottomSilkLayer` to achieve this effect.
- **Shiny silver or gold** (depends on the finish selected when ordering): add your object to both the `TopLayer` and `TopSolderMaskLayer` (for the top of the board), or to both `BottomLayer` and `BottomSolderMaskLayer` (for the bottom of the board), and superimpose these layers on top of each other. The `TopLayer` or `BottomLayer` will put the shiny copper on your object, while the `TopSolderMaskLayer` or `BottomSolderMaskLayer` will **remove** the soldermask on the object, revealing the shiny copper underneath.
- **Textured, or with slight color variation**: add your object to only the `TopLayer` or `BottomLayer`. Without removing the soldermask, the copper will still be covered by the soldermask, but it may slightly lighten the soldermask color and will create a textured feel.
- **Translucent yellow** (color of the FR-4 material): add our object to only the `TopSolderMaskLayer` or `BottomSolderMaskLayer`. This will remove the soldermask on the object, revealing the yellow FR-4 material underneath. This technique is useful for allowing LEDs to shine from one side of the board to the other, or just for adding another color to your design.

[TODO: conclusion / onboard / links to other projects to try out]

Let's build a business card -- but with a twist -- it can transmit a URL on tap and light up! You'll learn the basics of designing a PCB, and you can get the cards made for free, with Hack Club's OnBoard.

Make your own PCB Hacker Card



Hello!! In this Jam, you will be designing and building a web game. When you're all done, it'll look a bit like this:
(TODO video or gif of completed game)

## So how are we gonna do this?
Here are the steps we'll go through to build your own game:
1. Get started with [Glitch](https://glitch.com)
2. Start with a simple template game
3. Add more levels to the template
4. Share your game!
---
## Get set up
First, let's get started on [🎏 Glitch](https://glitch.com).
<Dropdown title="Hey, what's Glitch?">  
           Glitch is a site that makes it super simple to build web apps. You can code in your browser and see your results live.
</Dropdown>
1. Go to [glitch.com](https://glitch.com) and click `Sign Up`.
   ![Glitch.com's header, with an arrow pointing to the Sign Up button](https://cloud-ic6sx4m6w-hack-club-bot.vercel.app/0scr-20230714-psiv-3.png)
2. Choose how you'd like to sign up - you can use a GitHub account or a Google account, or if you don't have either, click `Email Magic Link` and you'll get a link and code in your email. 
3. Either click the link in the email or enter the code from the message in your browser.
4. Wahoo! You're ready to code!
---
## Start coding
Now, it's time to code!
(TODO: this is a good place for a joke gif)

Start by remixing my template. Head to https://glitch.com/~kaboom-game-template, then scroll down and click `Remix your own` below the preview. Now you've got your own code editor!

Before we go any further, let's take a look at the structure of a Kaboom game.
```js
kaboom()
```
Every Kaboom game's code will start with this - it initializes the library and gets everything set up. Here's what it looks like:
![A blank checkerboard canvas](https://cloud-6n8dlncke-hack-club-bot.vercel.app/0image.png)

Pretty boring. Let's get some action going!
```js
loadSprite("bean", "https://cdn.glitch.global/6e7edbfb-3679-4519-bb57-df3008b83592/bean.png?v=1688618964513")
```
This loads in a sprite so you can use it later. You pass in a name for the sprite (here, it's `bean`) and a URL. I've included a bunch of sample sprites in the project (check the `📦 Assets` tab in the sidebar!).

```js
add([ 
	sprite("bean"), 
	pos(80, 40), 
])
```
This adds a sprite to the screen. 
![The same background, but now there's a frog-bean-like sprite on it](https://cloud-65jcy7vy5-hack-club-bot.vercel.app/0image.png)

Right now, it doesn't do much. Let's change that!
```js
const bean = add([ 
	sprite("bean"), 
	pos(80, 40), 
	area(),
	body(),  
]);
```
In Kaboom, each *game object* is composed of multiple *components*. Each component will give the game object certain functionality.

> A game object is basically any character in the game, like the player character, an enemy, a rock, or a cloud.

For example, there might be a component to decide the shape of an object, whether gravity affects it, its color or even how much health it has. Let's take a deeper look at that sample:
- The `const bean` part saves the object we're making, so we can refer to it later. You don't always need to do this, but for parts you need to use again later, it's super useful.
- The `add()` method wraps all the components together, a bit like the tortilla of your object burrito. 
- `sprite("bean")` tells Kaboom "render this object with the `bean` sprite I loaded earlier". 
- `pos(80, 40)` gives it a position, at X=80, Y=40.
- `area()` gives it an area that can collide with other objects.
- `body()` gives it a physical body, which makes it affected by gravity and lets it jump.

Now, head back to your code. You'll notice I've left a comment in the code with some steps to make the game work better. Try to fill them in! If you need help with one, check below.

<Dropdown title="1. Making Bean more floaty">  
           Do you see anything that changes the world's gravity? Try changing the value there.
</Dropdown>
<Dropdown title="2. Making coins collectible">  
           You might need to look at the [Kaboom docs](https://kaboomjs.com) for this one. Take a look at the methods under `Game Obj`. What looks like it does what you want?
           For where to put it, try to find a place where _collisions_ are handled. What looks right?
</Dropdown>
<Dropdown title="3. Make the level bigger">  
           There's a place in the code where the level is laid out with symbols. Can you try to add more?
</Dropdown>
Once you're done, your game should look a bit like this:
(TODO gif of completed game)

> Psst.. here's a tip. Hit <kbd>F1</kbd>. See all those blue boxes? Those are the collision areas of each object in your game. Now hover over one of those objects. Now you can see every object's components! It's a bit like those [x-ray specs](https://en.wikipedia.org/wiki/X-ray_specs) that there used to be ads for in comic books, but it actually works. 
> 
> *(Did nothing happen? If you're on macOS, hold the <kbd>fn</kbd>  key as you press F1. If you're on Windows or Linux, try toggling <kbd>Fn Lock</kbd>.)*
---
## Add another level!
Now, let's add another level to our game. Find this section of the code:
```js
const levels = [
[
// Design the level layout with symbols
"@  ^ $$",
"=======",
],
// TODO add more levels
]
```
Try duplicating everything within the inner set of brackets and designing a new level! 
<Dropdown title="Done? Take a look at what it should look like.">  
	   My level looked a bit like this, but you can make yours whatever you like! Notice how I added another line to the level in order to add more stuff.
	   ```js
const levels = [
[
// Design the level layout with symbols
"@  ^ $$",
"=======",
],

[
"  $  $   ",
"@        ",
"== == ===",
],
]
```
</Dropdown>

But how does Bean get to the next level? I'll leave this as an exercise for you. 

<Dropdown title="I'm a little lost, give me some steps...">  
Here are the general steps you'll need to do in order to do this. You can pull down any of them for some guidance. (Hint: each one corresponds to about one line of code.)
<Dropdown title="1. Import a sprite to use for the goal">  
	   Go to the `📦 Assets` tab in your project and find a sprite you want to use for the goal. Click on it and choose `Copy URL`. Then find the place in the code where we load in sprites. Add your new sprite!
</Dropdown>
<Dropdown title="2. Add it to each level (except the last one)">  
	   Remember when you added some more space to the previous level? Do that again, but use a _different_ symbol.
</Dropdown>
<Dropdown title="3. Map the symbol you used to your sprite">  
	   Now take a look at the `renderNewLevel` function in the code. This function includes a dictionary of all the sprites used in each map. Go ahead and add the portal to that dictionary! 
</Dropdown>
<Dropdown title="4. Add some code to move to the next level">  
	Look at the bottom of the code. Remember when you added code to make the coin collectable? Try to copy that for the portal. When the player hits the portal: you'll want to **increase the `levelID` counter** and **render the next level**.
</Dropdown>
</Dropdown>

---
## Add more stuff!

You can also add more sprites, [some sound effects](https://kaboomjs.com/play?example=audio), or even change the look of the entire game! Check out the Kaboom [docs](https://kaboomjs.com) for documentation on how to use every feature of the library, and the [playground](https://kaboomjs.com/play) for examples! 


--- 
## Sharing your game
Now that you've made the perfect game, it's time to let others play it. Just follow these steps: (On my end, I've had issues with the "Edit project details" menu. This works a lot better for me.)
1. Click `🎏 Settings` in the top left, above the file list.
2. Click `Go to project page`
3. On that page, click `👆 Edit details`
4. Enter your new project name, then save it!
5. Click the `Edit project` button to get back to coding.

To get a link that your friends can use to play your game, click the big purple `Share` button at the top, then copy the `Live site` link.
![A screenshot of Glitch's share dialog with the "Live site" link highlighted](https://cloud-mmr3sh0b9-hack-club-bot.vercel.app/0image.png)


In this Jam, you'll be creating an awesome welcome screen for your personalOS. It will be plenty of fun and you'll have an awesome-looking one-of-a-kind product


Let's build a game (with explosions!)


<video controls style={{width: "400px"}}> <source src="https://cloud-opkznq4e6-hack-club-bot.vercel.app/1store_preview.mp4" type="video/mp4"/> </video>
<Dropdown title="psst">
here's an example of what a finished product might look like! however, your project is going to be completely unique. the feel and flow of your project should be very different ;)
</Dropdown>

* * * 

> Hacker!
> Are you awake? Hurry up; we have a boat to catch.

---

This is **Part 1** of a two-part workshop in creating your very own store on the web! You'll design everything from the products you'll sell to the colors and feel of the website. At the end, you'll get a chance to pitch your design to the workshop hosts and compete for the title of <font color="#7CFC00">Best Designer</font>!

If your website looks like something you would make, you did a great job 🎉
Otherwise, go back and brainstorm ways to make your project ✨ unique ✨

Today, we'll be designing our website using [**Figma**](https://figma.com/), a design tool to create functional and awesome user interfaces! If you're worried about code, don't worry. There isn't going to be any code yet, you'll have full artistic freedom after we explain Figma's features!

[Sample Figma Design](https://www.figma.com/file/R0x2u5Z0n1wcOAbVVekcei/The-Cow-Charm?type=design&node-id=34%3A423&mode=design&t=68QuGZqGJfs2QT92-1)
[Interactive Demo](https://www.figma.com/proto/R0x2u5Z0n1wcOAbVVekcei/The-Cow-Charm?page-id=34%3A423&type=design&node-id=34-507&viewport=535%2C362%2C0.09&t=RaHKT5mf6K7wXh1B-1&scaling=scale-down&starting-point-node-id=34%3A507&mode=design)

There are **6** important steps in this Jam! Feel free to backtrack and reference old points as you design your dream store!

#### Outline:
1. **Embark on your journey.** (create your first Figma file)
2. **Open your inventory**. (learn about the tools in your hot-bar & Figma structure)
3. **Make your first painting.** (create the landing page to your store)
4. **SO MANY DUPLICATES.** (simplify repetitive elements with components)
5. **Make it ✨ Magical ✨** (connect your pages with interactions)
6. **Your next adventure awaits...** (next steps)

Packed your things? Let's rock this.

---

## Embark on your journey. 🛶
> You made it to your home for the next hour. Time to set up camp.

### Create an Account

Head over to [Figma.com](https://www.figma.com/) and create an account! Afterwards, complete the onboarding portion of registration. Select the **Free** plan, and choose to "**Design with Figma**" first.

You should be instantly booted into a new design file!

![Figma New File](https://cloud-opkznq4e6-hack-club-bot.vercel.app/0figma_new_file.png)

> [!error]- Not there? 
> If you're redirected to the dashboard instead, just click the **+ New Design File** button!
> <video controls style={{width: "400px"}}> <source src="https://cloud-n2adyd9na-hack-club-bot.vercel.app/0file_from_dashboard.mp4" type="video/mp4"/> </video>

If you're working with a team, click the Share button in the top right and add your groupmates' emails with "Edit" permissions!

You're all set now! ≧(´▽｀)≦

---

## Open your inventory ⚒️

<Dropdown title="weirdly shaped creature takes off its hood">
Hey there. I'm Orpheus, your humble guide to Figma!

We're about to go over a lot of info, so don't worry if you forget some of it. 
I suggest you read through this section and then use it as a cheat-sheet if you ever get stuck!
</Dropdown>

It *speaks*:

Okay! So, let's go over the structure of the Figma editor.

---

![Left Sidebar](https://cloud-p4lmdd3r0-hack-club-bot.vercel.app/0pasted_image_20230716011036.png)
### Left Sidebar
Here, you'll keep track the current objects in your design (text, shapes, images), and be able to access assets & pages (we'll go over this later).


![Toolbar](https://cloud-i2t8xhz0p-hack-club-bot.vercel.app/0pasted_image_20230716011117.png)
### Toolbar
Situated at the top of your screen, this contains every tool you need to start designing, we'll break them down below :)).


![Right Sidebar](https://cloud-i2t8xhz0p-hack-club-bot.vercel.app/1pasted_image_20230716011129.png)

### Right Sidebar
This section opens properties of the currently selected layer or tool. You can edit attributes such as font size, stroke, etc. and prototype!



---

Figma relies on a layered system of groups. Think about it like you're stacking sheets on top of each other. Here are the main types of objects in Figma.

### Frame
The foundational element for your designs is called a "frame"! It acts like a top-level container for your content. We normally set these to the dimensions of a target device to see what our design might look like on it.

![](https://cloud-ki7xeojmd-hack-club-bot.vercel.app/0frame.gif)

### Group
A group combines related objects together. This is a temporary union that helps reduce the number of layers that you have to work with as you design.

You can group a selection of layers together with `Ctrl + G`!

![](https://cloud-8utwa7bc9-hack-club-bot.vercel.app/0group.gif)

### Layers
Layers are the building blocks in any Figma Design. They can be anything from images, vector objects, or text. Anytime you insert an image or create a rectangle, you're making a layer!

---

Let's have a quick rundown of the tools we'll be using in our design.

Your workshop host should have given you a cheat-sheet for Figma's tools; this is your chance to read through it!

You can view the digital copy [here](https://cloud-brvsdgazn-hack-club-bot.vercel.app/0figma_tools.pdf)

**Phew!** That was a lot of content. Like I said earlier, feel free to come back and review :D

Hacker, it's time to make your first piece of art.

---

## Make your first painting. 🖼️

Before we start designing, we always should think about what we want to design!

Take this time to think about the name of your corporation and the products you might sell. Once you've got it, continue :D

---


Let's give your project an awesome name! Click into the area which says "Untitled" and give it a name of your choosing (you can change this at any time).

![Name your Project](https://cloud-4m7ljqmox-hack-club-bot.vercel.app/0image.png)

Next, we'll make a frame for the landing page of our website. We'll do this by clicking the hashtag-esque button on the navbar, and clicking **Desktop > Macbook Pro 16"** as our size.

<video controls style={{width: "400px"}}> <source src="https://cloud-hivp3jiyp-hack-club-bot.vercel.app/02023-07-15_21-19-10.mp4" type="video/mp4"/> </video>

Note that you can always extend the height of the frame as you need.

Can you believe it? You've created your first layer in Figma. 🎉

> I really love cows. In fact, I love them so much I'd like to make a business selling cow charms. I want to name it something unique and original. I GOT IT!
> 
> ~ the cow charm ~

Inside your frame, we'll create a *text object*! Once the tool is selected, click anywhere in your frame to create a text box. You may type whatever you'd like in here.

> [!warning]+ wait a minute...
![Text is too small naurr](https://cloud-6gf9bcrd6-hack-club-bot.vercel.app/0pasted_image_20230716031051.png)


#### Quiz Time!
> [!example]- What do you think we should do?
> 
> > [!hint]-
> > Hmm... Think back to the tools we learned about earlier, maybe something in the "Move Tools" section?
> > 
> 
> ---
> 
> > [!hint]- Solution
> > Luckily we can scale this up with the **Scale Tool (K)**. Scale the text to your desired size and place it where you want on the frame.
> > 
> > We can also select it using the **Move Tool (V)** and edit the font size in the text box's properties.



Let's try adding stars to our page. We can do this by selecting the **Star Tool** and placing them as we want. If a sharp grey star isn't what I want, I can choose the *Fill Color* and the *Corner Radius* in the layer's properties after selecting it. In fact, I can also change the amount of angles and the size of each angle of the star. If you ever want to edit some property of an object, you always check the right sidebar!

> Might there be some property to smite.
> Veer your eyes to the right.


#### Quiz Time!

> [!example]- Try to find these properties yourself! (expand for solution)
> ![Needed Properties](https://cloud-6fotdvxns-hack-club-bot.vercel.app/0pasted_image_20230716203619_480.png)



Now, I'll make the background black, text white, and change the color and size of the stars!
![Initial background](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/0pasted_image_20230718011242.png)

I want the background to resemble a dark sky with a bright moon, so I'll set it to a gradient with dark shades of purple. You can find the settings of the **Fill Color**.

![Gradient](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/1pasted_image_20230718011436.png)


It's time to create the ✨ charm ✨! I'll make an Circle with the **Ellipse Tool** and import the images I want to use for the design.

![First charm](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/2pasted_image_20230718011702.png)

It's starting to come together! It would be really awesome to have it drop down from the top of the screen, but I'm not sure how to create a string.

#### Quiz Time!

> [!question]- What tool should I use to create the string?
> We have a lot of different choices, I could use the **Line** tool to make a simple straight string, or the **Pen** tool to create a more realistic, curvy, string.
> 
> I think I'll stick with the **Line** tool, thanks for your help!

This is cool, but something seems a bit off.
![String](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/3pasted_image_20230718012123.png)

There isn't a hole for the string to go through!! It would be easy to just use another circle to indicate the hole, but the gradient background makes it hard to replicate.

If only, we could cut a hole in the circle...

**WAIT NEVERMIND WE CAN YAYAYAYA**

Let's first create a circle to designate the hole, and then select both the charm and the circle destined to be a hole on top of it.

![Circle](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/4pasted_image_20230718012451.png)

At the top of your screen, you'll see an icon that looks like two overlapping rectangles; click that!

![Boolean operators](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/5pasted_image_20230718012524.png)


These are Figma's boolean operators!! 😍😍

You have four options:

1. Union selection. 
	- Merges two layers together. If the objects overlap, then the shape's outline consists of the it's sublayers not including segments that overlap.
	- Think of it as a bitwise OR operator — `A | B`
2. Subtract selection.
	- Removes a layer's intersection (and itself!) from another layer. This is the opposite of a union.
	- Think of it as `A & ~B`.
3. Intersect selection.
	- Removes everything but the intersection between the two.
	- Think of it as a bitwise AND operator — `A & B`
4. Exclude selection.
	1. Keeps everything except the intersection between the two.
	2. Think of it as a bitwise XOR operator — `A ^ B`


> [!question]- Which one do we need?
> The **Subtract** boolean operator! We want to remove the smaller circle from the larger one.
> 
> Awesome! Now we'll select both and perform that operation:
> ![Subtract](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/6pasted_image_20230718112359.png)



It's starting to look more and more like a charm!
![Charm](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/7pasted_image_20230718112519.png)

Now, I'll add some decorations and drop shadow, and we'll have a completed element!

![Charm with effects](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/8pasted_image_20230718112914.png)

If I have multiple layers that I want to fit into a circle, I can use Figma's **Mask** tool!
![Mask select](https://cloud-rh9f8bcjk-hack-club-bot.vercel.app/9pasted_image_20230718113841.png)
*Here, I've created a new circle to use as the frame and selected all the layers I want to be inside of it!*

This tool allows you to use a layer as a "cutout" for another, and we can even adjust it after masking!

Here's the result:
![Masked layers](https://cloud-f6y742j59-hack-club-bot.vercel.app/0pasted_image_20230718114047.png)

---

Looks like you've got the hang of it! Remember to look back at the tool cheat-sheet from earlier and start to build out your store.

Here are the pages you should build out **right now**:
1. **Landing Page**
2. **About Page**
3. **Product Listing Page** (can be on the landing page)
4. **Product Pages** (for each one you sell)

To make these, you can create separate frames for each page.

Good luck hacker! We'll see you on the other side.

---

## SO MANY DUPLICATES 😱

While you were designing your pages, you may have realized how many reused components are in each page. So, if you wanted to add an extra button or link, you had to go through every single page and edit it.

Fear not, Figma has a wonderful tool called: **Assets**!

These are layers that reference another layer instead of having its own value. If your familiar with pointers and references, these are basically the same thing.

### Layer
![Layer Animation](https://cloud-faklou4uh-hack-club-bot.vercel.app/0color-scheme-_remix_.gif)

### Asset
![Asset Animation](https://cloud-ghmaoucif-hack-club-bot.vercel.app/0color-scheme-_remix___1_.gif)

First, we'll create a new page so that we have our final prototype in one place. We can do this by expanding the "Page" icon on the left sidebar and clicking the '+' icon when it appears. Name this page **Assets**.

Now, we'll copy over the elements that we want to turn into components.

![Copied Elements](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/0pasted_image_20230717003414.png)

Now, select the entire asset, right click, and select "**Create Component**"

![Create Component](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/1pasted_image_20230717003457.png)

Do the same for every other asset you want to create. You'll know you've done it correctly if they appear purple in the left sidebar.

![Component layers](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/2pasted_image_20230717003601.png)

When you open the **Assets** tab in the left sidebar, you'll get the chance to drag it into your project!

![Asset sidebar](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/3pasted_image_20230717003648.png)

You did it hacker!

## Make it ✨ Magical ✨

Well we have our pages, but it doesn't feel right. What's missing?

Right. It just feels like we're scrolling through images. Let's make this an actual prototype.

You might have noticed a **Prototype** tab in the right sidebar; this tab helps us make interactions from clicking different areas of the page.

For example, if we click an element on our **About** page, we'll get options to create an interaction.

![Prototype tab](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/4pasted_image_20230717004550.png)

Let's try that!
![Interaction](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/5pasted_image_20230717004607.png)

For now, we'll just use the **On Click** trigger with the **Navigate to** response. This gives us a list of frames in our project we can jump to:
![Navigate to?](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/6pasted_image_20230717004656.png)

Select the one you want and customize the transition!
p.s. for similar pages (such as your product page), it might be more intuitive for a "**Smart Animate**" transition.

For example, I set the transition between the home and about page to "**Smart Animate**", and this is the result:
![[2023-07-18 11-49-28.gif]]

**Follow the same technique for every single clickable element!**

---

Once your finished, click the present icon on the top right corner (looks like a play button) and enjoy the show! Make sure you're on the final prototype page and not the assets page!


Splendid! Here's are my interactions in my example design:
![Final prototype](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/7pasted_image_20230717005112.png)

Hopefully, your design looks totally unique and different!

Get ready to pitch it to the hosts... 🍿

## Up for a challenge?

There's a really awesome tool in your toolbar that I haven't mentioned.
![Plugins?!](https://cloud-e1j5bcew3-hack-club-bot.vercel.app/8pasted_image_20230717005231.png)

The **Plugins** tab :00

It's a community run store with a lot of amazing pre-made components/tools to help with your Figma design.

Feel free to browse through and find something awesome for your design. One that I thought was really cool is called "*MeshFlow Gradients*".

## Your next adventure.

> You thought it was over?
> sorry 

Onward to the next island! Here we'll learn how to integrate the Shopify API with Next.JS to make our site **REAL**!

Before you head over, you should implement your design in code! (preferably in Next.JS or similar).

Check out the jam "**Wielding the Elemental Magic of the Web (not evil)**" to figure out how to implement your design in HTML and CSS! Also, try enabling "**Dev Mode**" in Figma (a switch on the top right corner) to see property values in CSS and example code for some objects! If you have no idea what Next.JS is, I suggest you check out their <a href="https://nextjs.org/docs">Official Tutorial</a> to get started.


It's been a blast jamming out with you! Catch you later :>
<video controls style={{width: "400px"}}> <source src="https://cloud-f39p2nwab-hack-club-bot.vercel.app/00718.mp4" type="video/mp4"/> </video>
<br/>
<small>"Oh, Christmas Tree" Kevin MacLeod (incompetech.com)  
Licensed under Creative Commons: By Attribution 4.0 License  
http://creativecommons.org/licenses/by/4.0/</small>

In this jam, you'll be designing your own online store with Figma! In the next jam, we'll be using the Shopify API to turn this into a real store.


Online Store Odyssey



> 50-60 minutes, intermediate difficulty. 

Hey there hacker! 👋 These are examples of what your finished web app might look like. Just remember that you'll be making your own version though, so yours WILL look completely different!

**Sample Code (with Live Demos)**: [Sample Google Colab Link](https://colab.research.google.com/drive/1vr1cypSrJizQpNprbzcPPOvuwRhgjUAf?usp=sharing)


![](https://cloud-c00uxy7uq-hack-club-bot.vercel.app/0image.png)

![](https://cloud-islsyhh9o-hack-club-bot.vercel.app/0image.png)

<Dropdown title="Can't see the live demos on Google Colab?">
    Unfortunately Google Colab has a timeout. Thus, to access shareable links, open the link and head to `Runtime` > `Run all`. Then, scroll through and wait for the live web-apps to generate.
</Dropdown>

<br />

> WOAH, but before we get started, let's show YOU how you can play around with Gradio.

Head to [www.gradio.app](https://www.gradio.app/) and scroll down until you see "Sketch Recognition". With the people around you, try to draw the following items and see if the computer can predict it correctly: `lightning`, `chair`, `smiley_face`. 

If you have some extra time (like 5 minutes), **make this a competition**! Pass one laptop around your table, and the give everyone a word to draw. If that person successfully draws that word, they get a point. Whoever has the most points at the end of the five minutes wins :) 

Anyways, this is just a glimpse of what Gradio can do. To look at the code behind the sketch recognition app, click [this link](https://huggingface.co/spaces/gradio/pictionary/blob/main/run.py).

---

We'll be building these web apps using Python completely on the web (using [Google Colab](https://colab.research.google.com/)). You'll have the freedom to code whatever you want, before deploying it as a web app.

This workshop will be split into **3** main sections:
1. Python Basics
2. Coding your own Python Function
3. Deploying your new function on Gradio


You'll also have the opportunity to customize your finished product to your heart's content ❤️, and share your creation with friends & family.

Also, don't worry if you don't have prior coding experience. We'll take you from this:
![](https://cloud-5dl29viqz-hack-club-bot.vercel.app/0200w.gif)

to this:
![](https://cloud-ns7olx1nf-hack-club-bot.vercel.app/0200.gif)

**Outline**
- **Python Basics**
    - Google Colab Overview & Setting up Google Colab 
    - Python hello world, variables, functions
- **Coding your own Python Function**
- **Deploying your new function on Gradio**
- **Bonus**: Permanant Hosting on HuggingFace

Ready to go? Let's get started :) 

## Python Basics
> 💡 We'll first start with Google Colab (where we'll be writing our code) and move into the basics of the Python code :)

### Setting up Google Colab
> 💡 Gotta do some housekeeping first, we'll first run through how to use Google Colab.

<Dropdown title="What is Google Colab?">
    Google Colab is completely free and accessible via any browswer. If you already know how to open a Python Notebook in Google Colab, please feel free to skip this section.
</Dropdown>


        Creating a Colab file | Step by step walkthrough

    
1. If you do not already have a Google account, please create one using [this link](https://support.google.com/accounts/answer/27441). 
2. Once you have a Google Account, head to Google Drive: [drive.google.com](https://drive.google.com/).
3. To create a Google Colab file, click the `+ New` button in the upper left corner. 
4. Hover over `More` and select `Google Colaboratory`. This will create a new Python Notebook for you to play around in. If you don't know what a Python Notebook is, no worries, we'll guide you through it.

**If you do not see `Google Colaboratory` under `More`, DO THIS**
This just means you need to connect Google Colab to your account!
1. Click on `Connect more apps`
2. In the popup, search for `Colaboratory`
3. Click on the first result and install it.
4. Refresh your page and jump back to #3 from the above section!

### A Tour of Colab
Once you create a new Google Colab file (AKA a Python Notebook file), you'll see the following: 

![](https://hackmd.io/_uploads/S15mp_X92.png)

I'm going to type some code into my screen and I'll explain it.

![](https://hackmd.io/_uploads/HyKiI7RO3.png)

There are three main components in a Python Notebook
1. **Markdown cells**: you don't need to worry much about these. Markdown cells just provide a place to write notes about your code. The `Deploying Python Functions As Web-Apps Using Gradio` title is written in in a markdown cell.
2. **Code cells**: write Python code here! The `print("hello world")` is written in a code cell.
3. **Output**: below each code cell is an output. For example, the `hello world` is the output from its corrosponding code cell. 

In this Jam, you'll be mainly focusing on code cells and their output.

> This jam document was originally written in markdown :)

### Hello World, Variables, Functions
> 💡 Now for the fun part. Let's dive into how to use Python (not the snake, of course).

Let's run through the basics of Python. Feel free to skip ahead to whichever portion suits your skill level. 

For all the code below, feel free to follow along by typing them into code cells, running them, and seeing the output:

<video controls style={{maxWidth: "400px"}}> <source src="https://cloud-qdpx99s9h-hack-club-bot.vercel.app/0screen_recording_2023-07-17_at_10.50.09_pm.mp4" type="video/mp4"/> </video>


<Dropdown title="Hello World">
When learning a new programming language, it's customary to create a "hello world" program (basically a piece of code in the new language that outputs "hello world"). Type the following into a Python code cell on Colab and click the run button!
    
```python
print("hello world")
```
</Dropdown>

<Dropdown title="Variables">
Variables in Python store information. For example, the `coolName` variable below stores the value 13 (because of order of operations!).
    
```python
coolName = 4 + 3 * 3
```
    
To print a variable to the output, you can use:
    
```python
print(coolName)
```
</Dropdown>



<Dropdown title="Functions">
In programming, a function is like a reusable set of instructions that performs a specific task. It's like having a recipe for a dish that you can use again and again to cook the same meal.

Imagine you want to make a sandwich. You have a list of steps you need to follow: first, you spread butter on the bread, then you add some cheese, lettuce, and tomato, and finally, you put another slice of bread on top. Instead of repeating these steps every time you want to make a sandwich, you can create a function called "make_sandwich" that contains these instructions.

Once you define the "make_sandwich" function, you can use it whenever you want to make a sandwich. You simply call the function by its name and it will execute all the steps automatically, saving you time and effort.

    
```py
def make_sandwich(meat, cheese, bread):
    print("making a sandwich with " + meat + " cheese " + " and " + bread)
```
</Dropdown>

For more Python basics practice, head to [this Colab notebook](https://colab.research.google.com/drive/1fxVQj6Tk98u4uXOf93YyoxX68C9B-3iR?usp=sharing). Additionally, [this youtube video by Programming with Mosh](https://youtu.be/kqtD5dpn9C8) is also really good.

## Make your own Python function
> 💡 Now, you'll make your own function! No copying mine hehe

Now that you know the basics of Python functions, spend 15-20 minutes to code a Python function of your choice. This can be as simple as a function and returns their sum, or as complicated as a function that runs a machine-learning sketch recognition prediction. For example, here's my Python function!

```python 
def addTwoNums(num1, num2):
    return num1 + num2
```

**Don't want to answer your English class' homework questions? Let Python do it for you!**
*Cheating on English class homework is not endorsed by Hack Club.*

```python 
from transformers import AutoModelForQuestionAnswering, AutoTokenizer, pipeline
model_name = "deepset/roberta-base-squad2"
nlp = pipeline("question-answering", model=model_name, tokenizer=model_name)

# Example data
example_context = "The Amazon rainforest, also known in English as Amazonia or the Amazon Jungle, is a moist broadleaf forest that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 square kilometres (2,700,000 sq mi), of which 5,500,000 square kilometres (2,100,000 sq mi) are covered by the rainforest. This region includes territory belonging to nine nations. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Venezuela, Ecuador, Bolivia, Guyana, Suriname and French Guiana. The Amazon represents over half of the planet's remaining rainforests, and comprises the largest and most biodiverse tract of tropical rainforest in the world, with an estimated 390 billion individual trees divided into 16,000 species."
example_question = "Which continent is the Amazon rainforest in?"

def predict(context, question):
  res = nlp({"question": question, "context": context})
  return res["answer"], res["score"]

predict(example_context, example_question) # outputs South America
```

**Want to figure out the breed of a dog? Python can also do that!**
Simply upload an image (JPG, PNG, or even a GIF)
```python
import torch
import requests
from torchvision import transforms

model = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")

def predict(inp):
  inp = transforms.ToTensor()(inp).unsqueeze(0)
  with torch.no_grad():
    prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)
    confidences = {labels[i]: float(prediction[i]) for i in range(1000)}    
  return confidences
```

Here's an example of the image classification:
![](https://cloud-jegnfq7t4-hack-club-bot.vercel.app/0image.png)


Well, it only sometimes works :)
![](https://cloud-lr70ll374-hack-club-bot.vercel.app/0image.png)



**Want your computer to figure out if some text is positive or negative?** We can do that with this sentiment analysis function (though you'll need to make your own, don't copy mine hehe)
```python
import nltk
from nltk.sentiment.vader import SentimentIntensityAnalyzer

nltk.download("vader_lexicon")
sid = SentimentIntensityAnalyzer()

def sentiment_analysis(text):
    scores = sid.polarity_scores(text)
    del scores["compound"]
    return scores


sentiment_analysis('i love this jam so much!')
```

For more examples of what Python functions you can make, head to [gradio.app/demos](https://www.gradio.app/demos)! There's a ton there, but NO COPYING.

## Let's deploy it!
> 💡 This is the moment you've been waiting for, getting a live web app for your Python function. Lucky for you, it's really easy to do!

Now for the fun part hehe. We'll be taking the Python function you just wrote and deploying it as a web-app using Gradio.

First, you'll need to install gradio onto Colab. Run the following line:

```
!pip install gradio
```

Next, we'll deploy your Python function using one line (make sure to replace the `<placeholders>` with what you need!):

```python
gradio.Interface(fn=<yourFunctionName>, inputs=["<type>"], outputs=["<type>"]).launch(share=True)
```
- the `inputs` argument should be a comma-separated Python list with the same length as your Python function. Each input represents an argument to your function.
- the `outputs` argument is a comma-separated Python list that represents what your function returns. To return multiple things from a function, use `return item1, item2` and you can have multiple items in your `outputs` list. 

For example, here's the gradio code to deploy my addTwoNums function from earlier.
```python
gradio.Interface(fn=addTwoNums, inputs=["number", "number"], outputs=["number"]).launch(share=True)
```

To deploy the **question-answering** function, we'll use this:
```python
gradio.Interface(
    predict,
    inputs=[
        gradio.inputs.Textbox(lines=7, default=context, label="Context Paragraph"),
        gradio.inputs.Textbox(lines=2, default=question, label="Question"),
    ],
    outputs=[gradio.outputs.Textbox(label="Answer"), gradio.outputs.Textbox(label="Score")],
).launch(share=True)
```
    
To deploy the **image classification** function:
```python 
demo = gr.Interface(fn=predict, 
         inputs=gr.inputs.Image(type="pil"),
         outputs=gr.outputs.Label(num_top_classes=3),
)
```


To deploy the **sentiment analysis** function, we'll use this code!
```python 
demo = gr.Interface(
    fn=sentiment_analysis, 
    inputs=gr.Textbox(placeholder="Enter a positive or negative sentence here..."), 
    outputs="label", 
    interpretation="default",
    examples=[["This is wonderful!"]]
).launch(share=True)
```
    
    
## Permanant Hosting on HuggingFace
AHA, so you want to get a permanant URL (more than just 72 hours). Well, you've come to the right place :)

1. Create an account on [huggingface.co](https://huggingface.co/)
2. After creating an account, create a Space (kind of like a GitHub repository): [hugginface.co/new-space](https://huggingface.co/new-space)
3. Give your space a name, and make sure the space SDK is set to Gradio. All other defaults will work great.
4. In the upper right hand corner, click on `Files`
5. In the upper right corner of the files table, click `Add file` > `Create a new file`
6. Name your file `requirements.txt` and type in each of the packages that you are using on a new line each. You do not need to include `gradio` in this list, as HuggingFace already has it downloaded for all spaces by default. Additionally, feel free to leave this file blank if you do not have any dependencies.
7. Commit the `requirements.txt` file to the `main` branch.
8. Create a new file called `app.py`
9. Copy and paste the code you have from Google Colab that you want deployed into `app.py`. For example, an `app.py` file for a basic Python function would be:
```python=
import random
import gradio

def greet(name):
  greetings = ["good morning", "howdy", "hellooo", "hiiii", "heyy"]
  random_greeting = random.choice(greetings)
  lets_say_this = random_greeting + " " + name
  return lets_say_this

def add(num1, num2):
  return num1 + num2

# make sure you remove `share=True` when deploying on HuggingFace
gradio.Interface(fn=greet, inputs=["text"], outputs=["text"]).launch() 
```
10. Click on the `App` tab in the upper right hand corner and wait for your app to deploy!

> If you run into any errors or copy and paste your code wrong, you'll get the error message after clicking on the `App` tab in the last step. To fix any errors, you can edit your `app.py` or `requirements.txt` file.

11. To get the permanent link for your deployed Python function, click `Use via API` on the bottom and copy the `xxxx.hf.space` link!


Learn how to take any Python function and turn it into a web application in 1 line using Gradio. You can deploy anything from a simple calculator to machine learning apps with Gradio.


Create a Machine Learning App w/ Gradio


# Introduction
![[Pasted image 20230719001827.png]]
> It's scientifically proven!

![[Pasted image 20230719002142.png]]

# The Basics
## Setting the Page Up
Every good project starts with a plan! Here, we'll link to some essential libraries and lay out the page. We'll be using basic HTML, intermediate CSS, and more advanced JavaScript, but it's really easy to figure out!

> [For a video on some HTML basics, click here!](https://www.youtube.com/watch?v=salY_Sm6mv4)

### 🦴 Add the Skeleton
While some skeletons are spooky-scary, these skeletons are actually really useful! A page skeleton is just the basic HTML that every website should have, such as a `<!DOCTYPE>`, `<html>` tags, and a `<head>`/`<body>`.

> For more information on the basics of an HTML page, watch (LINK TO BE ADDED)

### ⛓ Linking Libraries
Now, to link the `tsParticles` library.
tsParticles is available as a single file from JSDeliver. Link to it using a `<script>`  tag at `https://cdn.jsdelivr.net/npm/tsparticles@2.11.0/tsparticles.bundle.min.js`.
(Hint: `<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.11.0/tsparticles.bundle.min.js"></script>`)

### Lay it all Out
To lay out our page, we'll be using `div`'s (inside of the `<body>` tag) which allow us to split the page into separate areas. They can be nested inside of each other and stylized with CSS. Let's make a `snowglobe` div with sections `particles` and `ground`...

```html
...
<div id="snowglobe">
	<div id="particles">
	</div>
	<div id="ground">
	</div>
</div>
...
```

We'll leave these `div`'s empty, but they'll serve an important role in laying out our page.

### 🖌 Make it look ✨ fabulous ✨
CSS is a language that allows us to style HTML pages! With it, we can resize elements, change fonts, mess with colors, and even animate things!

To start, let's reset all of the spacing!

```css
* {
	padding: 0;
	margin: 0;
}
```

Next, we'll set up flex display on body. Make sure to set its `flex-direction` to `column`. Additionally, we'll make the body fill the whole viewport, set its background color (feel free to change this! this is the page background, not the snowglobe background), and make it center all the items with `justify-content` and `align-items`.

```css
body {
	/* Set up flex display */
	display: flex;
	flex-direction: column;
	
	/* Fill the whole viewport */
	width: 100vw;
	height: 100vh;
	overflow: hidden; /* Hide all overflow */
	
	/* Center the items */
	justify-content: center;
	align-items: center;
}
```

> [For more information on Flex, read this article!](https://www.w3schools.com/css/css3_flexbox.asp)

Now, we'll set up the globe itself. First, we'll want to make the globe take up as much of the screen as possible. To do this, we'll use CSS's `vmin` unit to use the smallest screen dimension as a reference. To add some margin, we'll only want to take up around 85% of this space (so... `85vmin`). Next, we'll set the background to a nice, balmy blue (`#45b3e0`, to be exact.) After that, we'll round off the snowglobe by setting `border-radius` to 100%. We'll hide the `overflow` in order to keep things within limits. Then, we'll set the `margin` to `auto` in order to make the globe flow nicely within its new home. Finally, we'll add a nice glow effect!

```css
#snowglobe {
	/* Set the sizing*/
	width: 85vmin;
	height: 85vmin;
	
	/* Nice, but temporary, background */
	background: #45b3e0;
	
	/* Make the globe round */
	border-radius: 100%;
	overflow: hidden;
	
	/* Add some nice spacing */
	margin: auto;
	
	/* And finally, add a nice glow*/
	box-shadow: 0px 0px 20px 35px #FFFFFF05;
}
```

Adding the ground and particle settings are easy at this point... we'll have the ground take up just 25% of the snowglobe and leave the rest to the sky.

```css
#particles {
  height: 75%;
  width: 100%;
}

#ground {
  height: 25%;
  width: 100%;
  background: #bebebe; /* You can change this now or later if you want */
}
```

#### Bonus: A shake animation!
If you want, we can add a fun little shake animation for whenever the snowglobe is activated! First, we'll add some springy keyframes. Then, we'll add a class called "shake" that we'll add to the snowglobe once it's activated.

```css
@keyframes shake {
	0%,
	100% {
    transform: rotate(0deg);
	}
	
	25% {
    transform: rotate(15deg);
	}
	
	50% {
    transform: rotate(-15deg);
	}
	
	75% {
    transform: rotate(10deg);
	}
}

.shake {
  animation: shake 1s;
}
```

> [Read more about CSS Animations here!](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

### Script it up!
Now, after everything else is done, let's get the dirty work done!

First, we'll add another script tag after the `snowglobe` div. Inside, we'll start writing some javascript. Let's declare some variables real quick...

```js
	// Select the globe
	let globe = document.getElementById("snowglobe");
	
	// Declare particles
	let particles;
```

Next, we'll add a function that will help us later on with activating the snowglobe when a device is shaken. This will accept an input event from the motion sensor on a device and calculate the magnitude with which the device was shaken.

```js
	// Declare function for calculating Gyro activity
	function calculateAcceleration(event) {
		const {x, y, z} = event.accelerationIncludingGravity;
		const accelerationMagnitude = Math.sqrt(x * x + y * y + z * z);
		return accelerationMagnitude;
	}
```

Finally, we'll add the function to handle shaking activation!

```js
	function shakeItUp() {
		particles.play();
		
		// Only include this code if you're making the shake animation
		globe.classList.add("shake")
		setTimeout(() => {globe.classList.remove("shake")}, 1100)
	}
```

### ↕ Choices, choices

> TODO: Add code to load particles.json

# Customization
At this point, you have a nice, amazing snowglobe. Congratulations 🎉
However, it's looking like all of these snowglobes are the same...

![[Pasted image 20230719001139.png]]

Let's fix that by spicing them up a bit!

## Setting the Setting (Adding a background)

### Adding an Image
Adding an image is super simple! If you don't have an image you'd like to use already, you can find one on a free service like [Unsplash!](https://unsplash.com/) 

![[Pasted image 20230720185932.png]]
> For example, this one.

Download the image and add it to the website folder (Err- upload it to your repl!) For simplicity, let's rename the file to `background.jpg` (or `.png`, etc.) Now, go into the CSS for the `#snowglobe` element. Let's change up that background...

```css
#snowglobe {
	background: url('/background.jpg') center/cover;
}
```

Now, if you want to change up the position of the image within the globe, just change `center` in `center/cover`  to another location such as `right`, `top`, or `bottom`.

![[Pasted image 20230720185901.png]]
> Hurrah, cool mountains!

### Adding a Gradient
To keep it simple, you can use a tool like [cssgradient.io](https://cssgradient.io/) to generate a cool gradient background. Once you're done, all you need to do is copy the part that starts with `linear-gradient`.

![[Pasted image 20230720191610.png]]
> Just the highlighted part!

Next, go into the CSS for the `#snowglobe` element. Let's change up that background...

```css
#snowglobe {
	/* You'll replace the gradient here with your own */
	background: linear-gradient(4deg, rgba(134, 100, 0, 1) 0%, rgba(121, 9, 9, 1) 32%, rgba(4, 0, 70, 1) 100%);
}
```

![[Pasted image 20230720184839.png]]
> A cool sunset made with the gradient `linear-gradient(4deg, rgba(134, 100, 0, 1) 0%, rgba(121, 9, 9, 1) 32%, rgba(4, 0, 70, 1) 100%)`

If you want an extra cool challenge, try animating it! See [the section on animation above](#### Bonus: A shake animation!) and try to figure it out for yourself!

> If you'd like to learn more about CSS Gradients, you can read this article from MDN!

## It's raining, It's pouring! (Change what's falling)

## Twinkle, Twinkle (Add some music)

This Jam leads participants through a journey of creating their very own custom digital snowglobe that can even react to device motion!


Making a Custom Digital Snowglobe


## Level 1: The Storyteller's Forge
### Create your Text-Based Adventure Game

Insert Live Tutorial here

Here is the example code of what we're going to create!: https://replit.com/@ConnemaraPony/Beginner-CYOA?v=1

Building a Choose Your Own Adventure Game is kinda like making a **pizza**! First, the base! The most important part, and the thing that holds everything up... *drum roll please...* the story line!

![[Copy of Copy of Arial.gif | 370]]

## What Makes Text Based Adventure Games SO Playable?

CYOA's are interactive experiences that transport players into imaginative worlds through text based narratives. They normally have rich storylines which make players embark on thrilling quests, solve puzzles, and make choices that shape the course of the game!

Embracing the power of imagination, these games are extremely immersive and invite players to visualize the game world and become active participants in the unfolding story. 

Moral of the story is that text adventure games have a huge emphasis on storyline and user interaction. The adventures had are timeless and engaging gaming experiences for players of all ages. 

So what's the most important part? Planning.


## Game Design

![[STORY2.gif]]

### Choosing a Theme or Setting! 


Start brainstorming different themes or settings for your story! It could be a mysterious haunted mansion, fantastical forest, or anything that sparks your imagination! Here are some ideas to get started:

- You discover a secret cave with mysterious tunnels each housing... peculiar creatures
- You and a group of friends decide to go to a haunted mansion, but things aren't at all what they seem
- You're being chased and have to escape a maze
- You're opening your own pizza shop
- You're stranded on a desert island
- You're the mayor of a small and... quiet... town
- Create a short "what  ___ am I?" quiz
- Create a realistic roleplay 
- Each person is gifted a special power... what's yours?

The best part is the sky's the limit! Keep brainstorming until you find something you want to start with.

Also consider the potential story choices, depth, and player engagement.

### Planning Game Structure!

Define what the game structure by figuring out the overall goal that players will strive to achieve. It can be finding treasure, surviving on an abandoned island, solving a mystery, or saving the world!

In this stage determine the key challenges, events, or puzzles the players will face through their journey. You can also take this time to divide your game into different chapters/levels if you would like. 

Now figure out your player's choices. Imagine a tree, and each choice is a different branch of the story. Identify these "branching off" points in the narrative where the player's choices will affect the outcome. 

### Characters!

This is also a good time to figure out any potential non-player characters (NPC's). These are characters that the player can interact with and can make the storyline richer.  

Here are some tips that can help your character become more fleshed out, relatable, and believable, hooking the user to your game:

- Make your characters have "strong" and or detailed backstories that can include their past experiences, goals, motivations, etc.
- Give your characters unique personalities! Think about their temperament, speech patterns, quirks. How do they express themselves and relate to others? 
	- When writing their dialogue pay attention to how they speak and their language; make sure it reflects their personality and background.
- These NPCs can even have a character arc through out the story, or perhaps the user's character can influence them. 
	- You could even create side quests that allow the user to strengthen their relationship with them allowing the, to unlock other levels. 
		- This can allow your player to have a more immersive experience.
- You can also make your characters complex by considering their relationships with other NPC character's in the game or the user's. 

Once you're all done writing everything up- let's start programming!


## Setting Up Replit

Before continuing further, make sure to set up or log in to your https://replit.com account. 

Once there click on 'Create a New Repl'

Pick 'Python' as your programming language. 

And name the file what you would like ex. CYOA_Part_1


### Main Game loop

To start we have to have something that will loop for the game checking if the player wants to quit or start over.  To do this we will be using a `while` loop. 

Now what is that? Why is it important?

Well we want something to loop/run through the code for an *unlimited* amount of time that checks whether or not our game will end. 

That is *exactly* what a `while` loop is! It is a repetitive loop that runs until a certain condition becomes *false*! 

Let's start by creating our game's status. We would like the game to keep running until the game's status goes from "yes" to "no". Here's an example: `gameStart == "yes"`  . 

Then we need to set our loop to continuously check that our game's status is equal to "yes". For this we will write `while` followed by our condition (`gameStart == yes`) and a colon. 

Then we have to make sure that our player can add their input to determine whether they want to play or not. Inside the while loop we will add our variable again: `gameStart` but we'll set it `=` to `input("")` and inside the `""` we can add the question of whether or not they would like to quit.

*Note: keep in mind that if they would like to restart or continue with the game it has to equal what our variable was, in this case "yes" if they input anything else the game will quit.*

Yay! We've successfully created a `while` loop that check whether or not our game has ended based on the player's input.

This is what an example of the should look like:

```py
gameStart = "yes"

while gameStart == "yes":
    gameStart = input("Would you like to restart? ")

```


## Let's Make Our Game Design Come to Life!

### Input System 

Let's say for this game we are crafting a pizza and have different choices for special edition toppings: Potatoes or Champignon Mushrooms using the `print` function.

```py
gameStart = "yes"

while gameStart == "yes":

    # this is a comment, something that will not appear in the 
      final game
    # It is great for taking notes and explaining code!
    # add all game related content inside this loop

    print("Welcome to La Mia Pizzeria Preferita!")
    print("What would you like for your toppings? Potatoes or 
          Champignon Mushrooms")

    gameStart = input("Would you like to restart? ")

```

Like earlier we would like our player to be able to *choose* what they would like to do. To do that let's create a variable to store our user's input for this particular question and name it `pizza_choice` .  Like earlier, we're going to set `pizza_choice` = to `input("")` . 

`input(" *insert text/question here* ")` prompts our player to respond, allows the program to wait for user input, and store that in the variable it is = to for further processing later on (ex. what happens when they choose different options). 

it will look something like this: `pizza_choice = input("Please choose one > ")`

### Choices (Conditionals)

But how will we use the input?

Simple! Conditionals! These are composed of `if`, `elif`, and `else` statements which enable your program to perform different actions or execute different blocks of code based on whether a condition is true or false! 

*unlike `while` loops* they do *not* run forever. 

Using our example from before: `if pizza_choice`  is `==` to `"Potatoes"` then `:` let's `print("")` "You chose" `+` `pizza_choice` `+`  "! That's delicious! Coming right up!"

But our other if/else if or in python, `elif pizza_choice` is `==` to `"Champignon Mushrooms"` then `:` let's `print("")` "You chose" `+ pizza_choice +` "! It is a fan favorite!"

But what if our user inputs something different? If we don't plan for that, then our program will have an `error` and the game will stop. So, if our player writes anything `else` or other than our option, then `:` we'll `print("")` out "Sorry we do not have that item. Come back another time."

The final code would look something like this: 
```py
gameStart = "yes"

while gameStart == "yes":

    # this is a comment, something that will not appear in the 
      final game
    # It is great for taking notes and explaining code!
    # add all game related content inside this loop

    print("Welcome to La Mia Pizzeria Preferita!")
    print("What would you like for your toppings? Potatoes or 
          Champignon Mushrooms")

    pizza_choice = input("Please choose one > ")

    if pizza_choice == "Potatoes":
        print("You chose" + pizza_choice + "! That's delicious!
              Coming right up!")

    elif pizza_choice == "Champignon Mushrooms":
	        print("You chose" + pizza_choice + "! It is a fan   
	              favorite!")

    else:
        print("Sorry we do not have that item. Come back another 
              time.")
    gameStart = input("Would you like to restart? ")

```

### Point Systems

If you are also interested in making a point system for your game start by making a variable, let's call it `points` and set it ` = 0` (or whatever number of points you want your character to start with).

Next we need to define (`def`) our function that adds the points the player gets throughout the game let's call it `add_points(number_of_points)`. Then `:` we're going to make our `points` variable `global` meaning that it can be easily accessed and changed anywhere throughout the code. 

Under that we need to say that our `points` will get combined `+=` with the `number_of_points` the player earns. 

To tell our player how many points they got let's create another `def` for our function `print_points()` then `:` say `print("You have {} points.")` and let's insert the number of points our player got by adding `.format(points)` which will change our place holder `{}` with the number of points our player has.

Here is what we should get:
```py
points = 0

def add_points(number_of_points):
  global points
  points += number_of_points

def print_points():
  print("You have {} adventure points.".format(points))
```

To add points we should call the `add_points()` function and determine in the `()` how many points to add.

To `print` how many points the player has just use the `print_points()` function. 

```py
add_points(30)
print_points()
```

With this base you can now use a combination of while loops, conditionals, print, and input functions to build fabulous tales!


## Congratulations!

You have successfully finished ***Level 1: The Storyteller's Forge***! You now have your own Adventure Game which you can publish, share with family and friends, and play! 

#### Want to take your build to the next level? 

Let's add some music and customization options (like colors and text animation!)
Go to the next level now! 

Whether you have programmed your whole life or this is your very first project, there is plenty of fun to be had with creating a Choose Your Own Adventure Game (CYOA)! This build incorporates music, interactive elements, and the ability to control all stylistic features! The most important part is to use your imagination since there is no limit to what YOU can create!


Crafting a Build Your Own Adventure Game!

In this Jam, you'll be creating an awesome unique Voxel Animation! It will be a lot of fun and you will have an awesome animation as a result!


Code Jams

Example

Jams

Wield the Power of AI wizards to Plan Your Travels

Building Your Own Social Media w/ 🔥 Firebase 🏰

Create Your Own Crypto Currency with Solidity

Example

Create INFINITE art with math (and code)

Make your own PCB Hacker Card

Let's build a game (with explosions!)

Online Store Odyssey

Create a Machine Learning App w/ Gradio

Making a Custom Digital Snowglobe

Crafting a Build Your Own Adventure Game!

Creating your own ✨ unique Voxel Animation