bitprj · lazyplatypus · Feb 25, 2020 · Feb 29, 2020
diff --git a/personal_website/1.md b/personal_website/1.md
@@ -0,0 +1,4 @@
+_type: Title slide_
+
+_title: Personal Website_
+# Personal Website
diff --git a/personal_website/10.md b/personal_website/10.md
@@ -0,0 +1,10 @@
+_type: Center img outline_
+
+_title: Previewing the Page_
+#  Previewing the Page
+- The URL above the website preview is the live URL for your website
+
+![](img/url.png)
+
+---
+[for speaker]<> From there, the live preview to the right of the editor should show what your website looks like. If you want to view it in a new tab, the URL above the website preview is the live URL for your website
diff --git a/personal_website/11.md b/personal_website/11.md
@@ -0,0 +1,12 @@
+_type:Center img large_
+
+_title: Previewing the Page_
+#  Previewing the Page
+- Clicking the icon that looks like a box with an arrow. 
+
+![](img/preview.gif)
+
+---
+[for speaker]<> You can also open the external live preview by clicking the icon that looks like a box with an arrow. This will open live preview in a new tab at the aforementioned URL
+
+[for speaker]<> As you can see, the page is blank. This is because we haven't added anything to the `body` section yet. Let's add some content!
diff --git a/personal_website/12.md b/personal_website/12.md
@@ -0,0 +1,12 @@
+_type: Centered text_
+
+_title: Adding Text to the Body_
+#  Adding Text to the Body
+- All information is wrapped in tags
+- Tags are predefined in the language
+- Two basic tags: h1 tag (`<h1>`) and paragraph tag (`<p>`)
+- `h1` being the highest ranking, and `h6` being the lowest ranking.
+
+---
+[for speaker]<> 
+As mentioned before, all information is wrapped in tags. Tags are predefined in the language; think of them as the words in the language. For text, HTML provides a number of tags to store text. We'll be using two of the most basic ones: the h1 tag (`<h1>`) and the paragraph tag (`<p>`). The h1 tag is the first in a series of heading tags, with `h1` being the highest ranking, and `h6` being the lowest ranking. Just as with the other tags, you can place information within the these tags by surrounding your content with an opening and closing tag.
diff --git a/personal_website/13.md b/personal_website/13.md
@@ -0,0 +1,21 @@
+_type:Code steps2_
+
+_title: Adding Text to the Body_
+# Adding Text to the Body
+-  Add your name in a heading tag,
+-  Add your description in a paragraph tag, in between the opening (`<body>`) and closing (`</body>`) tags. 
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <h1>Prophet Orpheus</h1>
+    <p>Coder Dino
+    Will code for food</p>
+  </body>
+</html>
+```
+---
+[for speaker]<> 
+Go ahead and add your name in a heading tag, and your description in a paragraph tag, in between the opening (`<body>`) and closing (`</body>`) tags. Here is Prophet Orpheus's name and description:
diff --git a/personal_website/14.md b/personal_website/14.md
@@ -0,0 +1,23 @@
+_type:Code steps3_
+
+_title: Adding Text to the Body_
+# Adding Text to the Body
+If your description was a few paragraphs, or had line breaks, cut them by placing each paragraph in its own `<p></p>`.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <h1>Prophet Orpheus</h1>
+    <p>Coder Dino</p>
+    <p>Will code for food</p>
+  </body>
+</html>
+```
+---
+[for speaker]<> 
+If your description was a few paragraphs, or had line breaks, you may have noticed that one `<p></p>` doesn't quite cut it. Adding extra blank lines or spaces between words in HTML does not change the spacing of the content. We can solve this by placing each paragraph in its own `<p></p>`.
+
+Run your `index.html` and refresh the Live Preview. Yay!
diff --git a/personal_website/15.md b/personal_website/15.md
@@ -0,0 +1,9 @@
+_type: Centered text_
+
+_title: Adding Images to the Body_
+# Adding Images to the Body
+- Find an image 
+- Right click and select "Copy Image Address"
+
+---
+[for speaker]<> First, find an image you would like to include in your page. You can find something on Google Images, Facebook, or Imgur. We'll need the source URL of the image, so right click and select "Copy Image Address".
diff --git a/personal_website/16.md b/personal_website/16.md
@@ -0,0 +1,14 @@
+_type: Code steps4_
+
+_title: Adding Images to the Body_
+# Adding Images to the Body
+- Images are included in HTML via the image tag `<img>`. 
+- `src` will hold the _source_ URL of the image you want to display. 
+
+```html
+<img src="https://github.com/hackclub/dinosaurs/raw/master/smart_dinosaur_docs.png">
+```
+
+---
+[for speaker]<> 
+Images are included in HTML via the image tag, or `<img>`. The image tag has an attribute called `src`, which will hold the _source_ URL of the image you want to display. As an example, if I were to add this picture of Prophet Orpheus, I would right click it and get the source URL, which in this case is https://github.com/hackclub/dinosaurs/raw/master/smart_dinosaur_docs.png, and put it in an image tag like so:
diff --git a/personal_website/17.md b/personal_website/17.md
@@ -0,0 +1,23 @@
+_type: Code steps5_
+
+_title: Adding Images to the Body_
+# Adding Images to the Body
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <img src="https://github.com/hackclub/dinosaurs/raw/master/smart_dinosaur_docs.png">
+    <h1>Prophet Orpheus</h1>
+    <p>Coder Dino</p>
+    <p>Will code for food</p>
+  </body>
+</html>
+```
+- `<img>` is a [void element](https://www.w3.org/TR/html-markup/syntax.html#syntax-elements), no closing tag
+---
+[for speaker]<> You may have noticed that the image tag doesn't have a closing tag like `<h1></h1>` or `<body></body>`. That's because it is a [void element](https://www.w3.org/TR/html-markup/syntax.html#syntax-elements), meaning that it doesn't have any contents.
+
+Go ahead and add this into your `index.html` now. I put my picture before my heading, and my code looks like this:
diff --git a/personal_website/18.md b/personal_website/18.md
@@ -0,0 +1,12 @@
+_type: Center img outline_
+
+_title: Previewing the Page_
+# Previewing the Page
+![](img/no_css.png)
+
+### Remember, you need to **Run** your program every time you want to see your updated website.
+
+
+---
+[for speaker]<> 
+Though our website has some text on it and exists on the _internet_, we're not done. Our webpage is fully functional, but needs a little help in the look-and-feel department. Fret not. CSS will allow you to manipulate the styling of your page in all your needs.
diff --git a/personal_website/19.md b/personal_website/19.md
@@ -0,0 +1,12 @@
+_type: Centered text_
+
+_title: Part III: The CSS File_
+# Part III: The CSS File
+- CSS, also known as Cascading Style Sheets, is a language used for styling the tags (or "elements") on a web page.
+
+- CSS is how you'll specify how you'd like your content to look—with it you can set things like colors, spacing, and more.
+
+---
+[for speaker]<> So what is CSS? CSS, also known as Cascading Style Sheets, is a language used for styling the tags (or "elements") on a web page.
+
+While HTML oversees the content and the way it's structured, CSS is how you'll specify how you'd like your content to look—with it you can set things like colors, spacing, and more.
diff --git a/personal_website/2.md b/personal_website/2.md
@@ -0,0 +1,8 @@
+_type: Center img Large_
+
+_title: Personal Website_
+# Personal Website
+![](img/dino_site.png)
+
+---
+[for speaker]<> Prophet Orpheus, [our mascot](https://hackclub.com/workshops/orpheus), is here to guide you through making your own personal website.It will look something like this
diff --git a/personal_website/20.md b/personal_website/20.md
@@ -0,0 +1,10 @@
+_type: Centered img large_
+
+_title: Using CSS_
+# Using CSS
+
+- `style.css` is called an external style sheet because the CSS file is external to the HTML file 
+
+![](img/index_css.png)
+---
+[for speaker]<> We already have an `style.css` in the file tree and this is called an external style sheet because the CSS file is external to the HTML file (i.e., the stylesheet is not inside the HTML file).
diff --git a/personal_website/21.md b/personal_website/21.md
@@ -0,0 +1,22 @@
+_type: small code snipet_
+
+_title: Link the CSS file in the HTML_
+# Link the CSS file in the HTML
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+- Type this into the head of `index.html` (between `<head>` and `</head>`)
+
+- `<link />` is the link tag, which describes relationships between the current file and some external file.
+
+- `rel="stylesheet"` specifies what this relationship is,
+- `href` (hypertext reference) specifies where the file can be found 
+
+
+---
+[for speaker]<> Although we have a CSS file, until we explicitly tell the HTML file to use the CSS file, it will not use it. We must explicitly link the CSS file in the HTML. We'll do this by typing the following into the head of `index.html` (between `<head>` and `</head>`), because the head is where we tell information about the page to the browser.
+
+`<link />` is the link tag, which describes relationships between the current file (in this case, `index.html`), and some external file (`style.css`). In our example, `rel="stylesheet"` specifies what this relationship is, i.e., that `style.css` is a stylesheet, and `href` (hypertext reference) specifies where the file can be found (in this case, it's just the filename `style.css`). The link tag, similar to the image tag, is a self-closing tag, once again denoted by the `/` that precedes the `>`.
+
+
diff --git a/personal_website/22.md b/personal_website/22.md
@@ -0,0 +1,23 @@
+_type: large code_
+
+_title: Link the CSS file in the HTML_
+# Link the CSS file in the HTML. 
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <img src="https://github.com/hackclub/dinosaurs/raw/master/smart_dinosaur_docs.png">
+    <h1>Prophet Orpheus</h1>
+    <p>Coder Dino</p>
+    <p>Will code for food</p>
+  </body>
+</html>
+```
+
+---
+[for speaker]<> 
+Our HTML file now looks like so:
diff --git a/personal_website/23.md b/personal_website/23.md
@@ -0,0 +1,19 @@
+_type: Code steps1_
+
+_title: Adding Styles to the Stylesheet_
+# Adding Styles to the Stylesheet
+### Resize the Image
+
+```css
+img {
+  width: 200px;
+}
+```
+
+- A CSS stylesheet contains "rules," each of which consists of a selector, and attributes and values within brackets, known as a "declaration block".
+
+
+---
+[for speaker]<> Now that we've linked our CSS file to our HTML file, let's write some CSS to resize the image.
+
+In our case, the selector is `img`. This merely selects all image tags (and thus, all images). The rule then says to set the `width` (width) of all things selected (in our case, all the images) to `200px`. `px` refers to pixels, which are a unit of measurement on the screen. When this rule is applied, all the images on our page will have a width of 200 pixels.
diff --git a/personal_website/24.md b/personal_website/24.md
@@ -0,0 +1,16 @@
+_type: Code steps2_
+
+_title: center-align the entire body section_
+# center-align the entire body section
+
+```css
+body {
+  text-align: center;
+}
+```
+
+- Every `body` tag should have a `text-align` attribute of `center`. 
+---
+[for speaker]<> Next, we're going to center-align the entire body section.
+
+As with resizing the image, this rule specifies that every `body` tag should have a `text-align` attribute of `center`. This centers everything on our page because all of the content in our HTML file is written inside the body tag.
diff --git a/personal_website/25.md b/personal_website/25.md
@@ -0,0 +1,14 @@
+_type: Code steps3_
+
+_title:change the font of our text_
+# change the font of our text
+
+```css
+body {
+  text-align: center;
+  font-family: 'Arial';
+}
+```
+
+---
+[for speaker]<> Now let's change the font of our text. We'll add another attribute, `font-family`, to the `body` rule, and set the value to `"Arial"`. Now it will look like this
diff --git a/personal_website/26.md b/personal_website/26.md
@@ -0,0 +1,20 @@
+_type: Code steps4_
+
+_title: Adding colors_
+#  Adding colors
+- The attribute `color` **(spelled without a u)** allows you to set the text color
+- `background-color` allows you to set a background color. 
+- You can find a list of supported color names over at [W3Schools](https://www.w3schools.com/colors/colors_names.asp).
+
+```css
+body {
+  text-align: center;
+  font-family: 'Arial';
+  background: azure;
+  color: purple;
+}
+```
+---
+[for speaker]<> You can take this even further by adding a bit of color to the page! The attribute `color` **(spelled without a u)** allows you to set the text color, and `background-color` allows you to set a background color. You can find a list of supported color names over at [W3Schools](https://www.w3schools.com/colors/colors_names.asp). Keep in mind that it's a good idea to pick a combination of colors will keep the text readable.
+
+Now be sure to **Run** to get the most recent version of your website. Ah, it is truly beautiful to behold.
diff --git a/personal_website/27.md b/personal_website/27.md
@@ -0,0 +1,15 @@
+_type: Center img outline_
+
+_title: Part IV: Publishing_
+
+# Part IV: Publishing
+
+#### Create an account on Repl.it.
+
+
+![](img/signup.png)
+
+---
+[for speaker]<> To actually save your website and be able to come back to it in the future you'll need to create an account on Repl.it.
+
+To create an account, click on the sign up prompt in the top right corner.
diff --git a/personal_website/28.md b/personal_website/28.md
@@ -0,0 +1,9 @@
+_type: Center img large_
+
+_title: Create an account on Repl.it._
+# Create an account on Repl.it.
+### Once finished, click on the link they send you by email
+
+![](img/email.png)
+---
+[for speaker]<> Once you've filled out the fields (or signed up with another account), go ahead and click on the link they send you by email
diff --git a/personal_website/29.md b/personal_website/29.md
@@ -0,0 +1,10 @@
+_type: Center img large_
+
+_title: Publishing_
+# Publishing
+### Change the name of your repl by clicking on the pencil next to it.
+
+![](img/edit_name.png)
+
+---
+[for speaker]<> Now that you have your account set up, all you need to do to change the name of your repl is click on the pencil next to it.
diff --git a/personal_website/3.md b/personal_website/3.md
@@ -0,0 +1,8 @@
+_type: Main point_
+
+_title: Part I: Setup_
+# Part I: Setup
+
+## Getting ready to repl it on Repl.it
+---
+[for speaker]<> [Repl.it](https://repl.it) is an online code editor. It's similar to Google Docs, but has some important features that make it much better for typing code than a regular text editor.
diff --git a/personal_website/30.md b/personal_website/30.md
@@ -0,0 +1,16 @@
+_type: Center img outline_
+
+_title: Publishing_
+# Publishing
+
+- Press <kbd>Enter</kbd> to confirm your changes (or <kbd>Escape</kbd> to cancel your name change)
+
+- Your website is now published at the domain `PROJECTNAME--USERNAME.repl.co` 
+
+![](img/celebrate_rush_hour.gif)
+
+---
+[for speaker]<>
+Once you're happy with the name you've given it, press <kbd>Enter</kbd> to confirm your changes (or <kbd>Escape</kbd> to cancel your name change)
+
+And just like that your website is now published at the domain `PROJECTNAME--USERNAME.repl.co` (that's two dashes before your username) on the internet for all your friends to see!
diff --git a/personal_website/31.md b/personal_website/31.md
@@ -0,0 +1,10 @@
+_type: Main point_
+
+_title: Part V: Hacking_
+
+# Part V: Hacking
+
+### Add additional features to your website to make it your own!
+
+---
+[for speaker]<> In this section, your challenge is to add additional features to your website to make it your own!