`) +- `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 (`
`). 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. \ No newline at end of file diff --git a/personal_website/13.md b/personal_website/13.md new file mode 100644 index 0000000..f8134cd --- /dev/null +++ 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 (`
`) and closing (``) tags. +```html + + + + + +Coder Dino + Will code for food
+ + +``` +--- +[for speaker]<> +Go ahead and add your name in a heading tag, and your description in a paragraph tag, in between the opening (``) and closing (``) tags. Here is Prophet Orpheus's name and description: \ No newline at end of file diff --git a/personal_website/14.md b/personal_website/14.md new file mode 100644 index 0000000..1ea1118 --- /dev/null +++ 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 ``. + +```html + + + + + +Coder Dino
+Will code for food
+ + +``` +--- +[for speaker]<> +If your description was a few paragraphs, or had line breaks, you may have noticed that one `` 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 ``. + +Run your `index.html` and refresh the Live Preview. Yay! \ No newline at end of file diff --git a/personal_website/15.md b/personal_website/15.md new file mode 100644 index 0000000..fc3eee9 --- /dev/null +++ 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". \ No newline at end of file diff --git a/personal_website/16.md b/personal_website/16.md new file mode 100644 index 0000000..c172939 --- /dev/null +++ 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 `
+```
+
+---
+[for speaker]<>
+Images are included in HTML via the image tag, or `
+ Coder Dino
+Will code for food
+ + +``` +- `
+ Coder Dino
+Will code for food
+ + +``` + +--- +[for speaker]<> +Our HTML file now looks like so: \ No newline at end of file diff --git a/personal_website/23.md b/personal_website/23.md new file mode 100644 index 0000000..db379b9 --- /dev/null +++ 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. \ No newline at end of file diff --git a/personal_website/24.md b/personal_website/24.md new file mode 100644 index 0000000..6cd7b89 --- /dev/null +++ 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. \ No newline at end of file diff --git a/personal_website/25.md b/personal_website/25.md new file mode 100644 index 0000000..14fca7f --- /dev/null +++ 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 \ No newline at end of file diff --git a/personal_website/26.md b/personal_website/26.md new file mode 100644 index 0000000..bf9a7f3 --- /dev/null +++ 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. \ No newline at end of file diff --git a/personal_website/27.md b/personal_website/27.md new file mode 100644 index 0000000..2593df5 --- /dev/null +++ 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. + + + + +--- +[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 new file mode 100644 index 0000000..b6830e5 --- /dev/null +++ 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 + + +--- +[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 \ No newline at end of file diff --git a/personal_website/29.md b/personal_website/29.md new file mode 100644 index 0000000..8a42e1d --- /dev/null +++ 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. + + + +--- +[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. \ No newline at end of file diff --git a/personal_website/3.md b/personal_website/3.md new file mode 100644 index 0000000..76693b7 --- /dev/null +++ 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. \ No newline at end of file diff --git a/personal_website/30.md b/personal_website/30.md new file mode 100644 index 0000000..11b2b39 --- /dev/null +++ b/personal_website/30.md @@ -0,0 +1,16 @@ +_type: Center img outline_ + +_title: Publishing_ +# Publishing + +- Press Enter to confirm your changes (or Escape to cancel your name change) + +- Your website is now published at the domain `PROJECTNAME--USERNAME.repl.co` + + + +--- +[for speaker]<> +Once you're happy with the name you've given it, press Enter to confirm your changes (or Escape 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! \ No newline at end of file diff --git a/personal_website/31.md b/personal_website/31.md new file mode 100644 index 0000000..7c8b03f --- /dev/null +++ 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! \ No newline at end of file diff --git a/personal_website/32.md b/personal_website/32.md new file mode 100644 index 0000000..d3e592e --- /dev/null +++ b/personal_website/32.md @@ -0,0 +1,8 @@ +_type: Centered text_ + +_title: Personalize Your Website_ +# Personalize Your Website +- Want to use a different font? Google it! +- Want to add more pictures? Google it! +- Want to add more text? Your entire life story? +- Background image? Background music? Video? More pages? Google it! diff --git a/personal_website/33.md b/personal_website/33.md new file mode 100644 index 0000000..526478d --- /dev/null +++ b/personal_website/33.md @@ -0,0 +1,15 @@ +_type: Centered text_ + +_title: Websites Made by Other Hack Club Hackers_ +# Websites Made by Other Hack Club Hackers + +- [Kat Huang](https://katmh.com) +- [Theo Bleier](https://tmb.sh/) +- [Megan Cui](https://megancui.com/) +- [Matthew Stanciu](https://matthewstanciu.me/) +- [Sophie Huang](https://sohuang.github.io/) +- [Jevin Sidhu](http://jevinsidhu.com/) + +--- +[for speaker]<> +A good way to get ideas for what to add to your website is to look at other people's websites. Find a website that you like, either from the below list or from somewhere else on the internet, pick one aspect of that website that you would like on your own website, and Google for ways to make it happen! \ No newline at end of file diff --git a/personal_website/34.md b/personal_website/34.md new file mode 100644 index 0000000..837663e --- /dev/null +++ b/personal_website/34.md @@ -0,0 +1,13 @@ +_type: Centered text_ + +_title: Websites Made by Professionals_ +# Websites Made by Professionals + +- [Melody Starling](https://melody.dev/) +- [Eel Slap](http://eelslap.com) +- [Lynn Fisher](https://lynnandtonic.com) +- [Tatiana Mac](https://tatianamac.com) +- [Mina Markham](http://mina.codes/) +- [Robb Owen](https://robbowen.digital) +- [Alice Lee](http://byalicelee.com) +- [Yaron Schoen](http://yaronschoen.com) \ No newline at end of file diff --git a/personal_website/35.md b/personal_website/35.md new file mode 100644 index 0000000..6dd08ab --- /dev/null +++ b/personal_website/35.md @@ -0,0 +1,11 @@ +_type: Centered text_ + +_title: Additional Resources_ +# Additional Resources + +- [HTML Dog](http://www.htmldog.com/guides/html/beginner/): _Very beginner focused. If you're not sure which one to choose, pick this one._ +- [Free Code Camp](http://www.freecodecamp.com/map): _Interactive and very methodical._ +- [Treehouse](https://teamtreehouse.com/library/html/introduction/): _Their videos are extremely comprehensive and thorough._ + +--- +[for speaker]<> These are some additional resources that you can use to make your site even better! \ No newline at end of file diff --git a/personal_website/36.md b/personal_website/36.md new file mode 100644 index 0000000..c4385a9 --- /dev/null +++ b/personal_website/36.md @@ -0,0 +1,15 @@ +_type: Centered text_ + +_title: Part VI: Sharing with the Community_ + +# Part VI: Sharing with the Community + +1. In a new tab, open and follow [these directions][slack] to signup for our Slack. +2. Then, post the link to the [`#ship`](https://hackclub.slack.com/messages/ship) channel to share it with everyone! + +[slack]: https://slack.hackclub.com/ + +--- +[for speaker]<> Now that you have finished building a website, you should share your beautiful creation—because your site is on the internet, you can share it with anyone who is also online! Remember, it's as easy as giving them your URL! + +You probably know the best ways to get in touch with your friends and family, but if you want to share your project with the world wide Hack Club community there is no better place to do that than on Slack. \ No newline at end of file diff --git a/personal_website/4.md b/personal_website/4.md new file mode 100644 index 0000000..997894c --- /dev/null +++ b/personal_website/4.md @@ -0,0 +1,10 @@ +_type: Center img outline_ + +_title:Go to [https://repl.it/languages/html](https://repl.it/languages/html)._ + +## Go to [https://repl.it/languages/html](https://repl.it/languages/html). + + + +--- +[for speaker]<> To get started, go to [https://repl.it/languages/html](https://repl.it/languages/html). Your coding environment will spin up in just a few seconds! \ No newline at end of file diff --git a/personal_website/5.md b/personal_website/5.md new file mode 100644 index 0000000..db9470b --- /dev/null +++ b/personal_website/5.md @@ -0,0 +1,11 @@ +_type: text + img_ + +_title: Part II: The HTML File_ +# Part II: The HTML File +HTML stands for Hypertext Markup Language. Every website from the New York Times to Twitch uses HTML to display content on the web. + + + + +--- +[for speaker]<> You should have the `index.html` file open, and a bunch of text with `<` & `>` symbols. That's HTML! \ No newline at end of file diff --git a/personal_website/6.md b/personal_website/6.md new file mode 100644 index 0000000..346921e --- /dev/null +++ b/personal_website/6.md @@ -0,0 +1,17 @@ +_type: code steps1_ + +_title: HTML_ +# HTML +- Delete everything in the `index.html` file +- **Type** in the following. +```html + + + + + + + +``` +--- +[for speaker]<> Repl.it gives us some code to start out with, but we're going to start from scratch. Go ahead and delete everything in the `index.html` file then **type** in the following. **DO NOT COPY AND PASTE.** \ No newline at end of file diff --git a/personal_website/7.md b/personal_website/7.md new file mode 100644 index 0000000..3f803ef --- /dev/null +++ b/personal_website/7.md @@ -0,0 +1,13 @@ +_type: text + img_ + +_title: HTML Structure_ +# HTML Structure +- Right click on any web page, +- Click "View page source" (or "Inspect" ) + + + + + +--- +[for speaker]<> This structure is common to all HTML pages. In fact, you can take a look for yourself! Just right click on any web page,and click "View page source" (sometimes called "Inspect" depending on your browser) to see what's going on behind the scenes. You'll find each of these elements on every page – the doctype, and an HTML tag wrapped around a head and body. \ No newline at end of file diff --git a/personal_website/8.md b/personal_website/8.md new file mode 100644 index 0000000..4663496 --- /dev/null +++ b/personal_website/8.md @@ -0,0 +1,19 @@ +_type:Centered text_ + +_title: HTML_ +# HTML +- HTML works by storing information inside tags. +- Inside ``, we've placed two other sets of tags: `` and `` + +- `` wraps around the "body". It holds everything you would see in the actual tab/window when you open the page, + +- ``wraps around the "head". It conveys information about the page to the browser. + +- `` tells the browser what version of HTML to expect. + +--- +[for speaker]<> Before proceeding, we'll briefly go over what our template means. + +HTML works by storing information inside tags. `` is an example of one such tag. Inside ``, we've placed two other sets of tags: `` (which wraps around the "head") and `` (which wraps around the "body"). The body holds everything you would see in the actual tab/window when you open the page, while the head conveys information about the page to the browser. + +`` tells the browser what version of HTML to expect. Since it is a language, HTML is constantly growing and updating, so there are multiple versions. In our case, we are going to use HTML5, the latest version. \ No newline at end of file diff --git a/personal_website/9.md b/personal_website/9.md new file mode 100644 index 0000000..8fa274d --- /dev/null +++ b/personal_website/9.md @@ -0,0 +1,10 @@ +_type: Center img large_ + +_title: Previewing the Page_ +# Previewing the Page +- Click on the **Run** button above the editor or press Ctrl + Enter (Command + Enter on Mac). + + + +--- +[for speaker]<> Let's check out what our HTML file looks like in Live Preview! To do this, click on the **Run** button above the editor or press Ctrl + Enter (Command + Enter on Mac). \ No newline at end of file diff --git a/personal_website/README.md b/personal_website/README.md new file mode 100755 index 0000000..650ba9b --- /dev/null +++ b/personal_website/README.md @@ -0,0 +1,312 @@ +--- +name: 'Personal Website' +description: 'Making your first website from scratch' +author: '@MaxWofford' +group: 'start' +order: 1 +--- + +# Personal Website + +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: + + + +Here's the [live demo][final_live_demo] and [final code][final_code] (see `index.html` and `style.css`). + +This workshop should take around 45 minutes. + +[final_live_demo]: https://website--prophetorpheus.repl.co +[final_code]: https://repl.it/@prophetorpheus/website + +## Part I: Setup + +### Getting ready to repl it on Repl.it + +[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. + +To get started, go to [https://repl.it/languages/html](https://repl.it/languages/html). Your coding environment will spin up in just a few seconds! + + + +## Part II: The HTML File + +### 1) The HTML file + +HTML stands for Hypertext Markup Language. Every website from the New York Times to Twitch uses HTML to display content on the web. + +You should have the `index.html` file open, and a bunch of text with `<` & `>` symbols. That's HTML! + + + +Repl.it gives us some code to start out with, but we're going to start from scratch. Go ahead and delete everything in the `index.html` file then **type** in the following. **DO NOT COPY AND PASTE.** + +```html + + + + + + + +``` + +This structure is common to all HTML pages. In fact, you can take a look for yourself! Just right click on any web page, including this one, and click "View page source" (sometimes called "Inspect" depending on your browser) to see what's going on behind the scenes. You'll find each of these elements on every page – the doctype, and an HTML tag wrapped around a head and body. + + + + + +Before proceeding, we'll briefly go over what our template means. + +HTML works by storing information inside tags. `` is an example of one such tag. Inside ``, we've placed two other sets of tags: `` (which wraps around the "head") and `` (which wraps around the "body"). The body holds everything you would see in the actual tab/window when you open the page, while the head conveys information about the page to the browser. + +`` tells the browser what version of HTML to expect. Since it is a language, HTML is constantly growing and updating, so there are multiple versions. In our case, we are going to use HTML5, the latest version. + +### 2) Previewing the Page + +Let's check out what our HTML file looks like in Live Preview! To do this, click on the **Run** button above the editor or press Ctrl + Enter (Command + Enter on Mac). + + + +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 + + + +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 + + + +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! + +### 3) Adding Text to the Body + +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 (``). 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. + +Go ahead and add your name in a heading tag, and your description in a paragraph tag, in between the opening (`
`) and closing (``) tags. Here is Prophet Orpheus's name and description: + +```html + + + + + +Coder Dino + Will code for food
+ + +``` + +If your description was a few paragraphs, or had line breaks, you may have noticed that one `` 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 ``. + +```html + + + + + +Coder Dino
+Will code for food
+ + +``` + +Run your `index.html` and refresh the Live Preview. Yay! + +### 4) Adding Images to the Body + +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". + +Images are included in HTML via the image tag, or `
+```
+
+You may have noticed that the image tag doesn't have a closing tag like `` or ``. 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:
+
+```html
+
+
+
+
+
+
+ Coder Dino
+Will code for food
+ + +``` + + + +Remember, you need to **Run** your program every time you want to see your updated website. + +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. + +## Part III: The CSS File + +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. + +### 1) Using CSS + +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). + + + +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 `` and ``), because the head is where we tell information about the page to the browser. + +```html + +``` + +`` 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 `>`. + +Our HTML file now looks like so: + +```html + + + + + + +
+ Coder Dino
+Will code for food
+ + +``` + +### 2) Adding Styles to the Stylesheet + +Now that we've linked our CSS file to our HTML file, let's write some CSS to resize the image. + +Open up `style.css` and type the following: + +```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". + +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. + +Next, we're going to center-align the entire body section. + +We'll add + +```css +body { + text-align: center; +} +``` + +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. + +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: + +```css +body { + text-align: center; + font-family: 'Arial'; +} +``` + +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. + +```css +body { + text-align: center; + font-family: 'Arial'; + background: azure; + color: purple; +} +``` + +Now be sure to **Run** to get the most recent version of your website. Ah, it is truly beautiful to behold. + + + +## Part IV: Publishing + +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. + + + +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 + + + +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. + + + +Once you're happy with the name you've given it, press Enter to confirm your changes (or Escape 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! + + + +## Part V: Hacking + +In this section, your challenge is to add additional features to your website to make it your own! + +Want to use a different font? Google it! +Want to add more pictures? Google it! +Want to add more text? Your entire life story? Background image? Background music? Video? More pages? Google it! + +A good way to get ideas for what to add to your website is to look at other people's websites. Find a website that you like, either from the below list or from somewhere else on the internet, pick one aspect of that website that you would like on your own website, and Google for ways to make it happen! + +**Websites Made by Other Hack Club Hackers:** + +- [Kat Huang](https://katmh.com) +- [Theo Bleier](https://tmb.sh/) +- [Megan Cui](https://megancui.com/) +- [Matthew Stanciu](https://matthewstanciu.me/) +- [Sophie Huang](https://sohuang.github.io/) +- [Jevin Sidhu](http://jevinsidhu.com/) + +**Websites Made by Professionals:** + +- [Melody Starling](https://melody.dev/) +- [Eel Slap](http://eelslap.com) +- [Lynn Fisher](https://lynnandtonic.com) +- [Tatiana Mac](https://tatianamac.com) +- [Mina Markham](http://mina.codes/) +- [Robb Owen](https://robbowen.digital) +- [Alice Lee](http://byalicelee.com) +- [Yaron Schoen](http://yaronschoen.com) + +### Additional Resources + +These are some additional resources that you can use to make your site even better! + +- [HTML Dog](http://www.htmldog.com/guides/html/beginner/): _Very beginner focused. If you're not sure which one to choose, pick this one._ +- [Free Code Camp](http://www.freecodecamp.com/map): _Interactive and very methodical._ +- [Treehouse](https://teamtreehouse.com/library/html/introduction/): _Their videos are extremely comprehensive and thorough._ + +## Part VI: Sharing with the Community + +Now that you have finished building a website, you should share your beautiful creation—because your site is on the internet, you can share it with anyone who is also online! Remember, it's as easy as giving them your URL! + +You probably know the best ways to get in touch with your friends and family, but if you want to share your project with the world wide Hack Club community there is no better place to do that than on Slack. + +1. In a new tab, open and follow [these directions][slack] to signup for our Slack. +2. Then, post the link to the [`#ship`](https://hackclub.slack.com/messages/ship) channel to share it with everyone! + +[slack]: https://slack.hackclub.com/ diff --git a/personal_website/img/celebrate_harry_potter.gif b/personal_website/img/celebrate_harry_potter.gif new file mode 100755 index 0000000..7b303f0 Binary files /dev/null and b/personal_website/img/celebrate_harry_potter.gif differ diff --git a/personal_website/img/celebrate_rush_hour.gif b/personal_website/img/celebrate_rush_hour.gif new file mode 100755 index 0000000..33778e6 Binary files /dev/null and b/personal_website/img/celebrate_rush_hour.gif differ diff --git a/personal_website/img/dino_site.png b/personal_website/img/dino_site.png new file mode 100755 index 0000000..897ab7e Binary files /dev/null and b/personal_website/img/dino_site.png differ diff --git a/personal_website/img/edit_name.png b/personal_website/img/edit_name.png new file mode 100755 index 0000000..e6c7625 Binary files /dev/null and b/personal_website/img/edit_name.png differ diff --git a/personal_website/img/elements-panel.png b/personal_website/img/elements-panel.png new file mode 100755 index 0000000..12a8088 Binary files /dev/null and b/personal_website/img/elements-panel.png differ diff --git a/personal_website/img/email.png b/personal_website/img/email.png new file mode 100755 index 0000000..09c3bd1 Binary files /dev/null and b/personal_website/img/email.png differ diff --git a/personal_website/img/html_repl.gif b/personal_website/img/html_repl.gif new file mode 100755 index 0000000..ff9e7c4 Binary files /dev/null and b/personal_website/img/html_repl.gif differ diff --git a/personal_website/img/html_repl.png b/personal_website/img/html_repl.png new file mode 100755 index 0000000..b43cc4e Binary files /dev/null and b/personal_website/img/html_repl.png differ diff --git a/personal_website/img/index_css.png b/personal_website/img/index_css.png new file mode 100755 index 0000000..192b3b4 Binary files /dev/null and b/personal_website/img/index_css.png differ diff --git a/personal_website/img/inspect.png b/personal_website/img/inspect.png new file mode 100755 index 0000000..d7b152c Binary files /dev/null and b/personal_website/img/inspect.png differ diff --git a/personal_website/img/new_repl.png b/personal_website/img/new_repl.png new file mode 100755 index 0000000..b4d8019 Binary files /dev/null and b/personal_website/img/new_repl.png differ diff --git a/personal_website/img/no_css.png b/personal_website/img/no_css.png new file mode 100755 index 0000000..781bb75 Binary files /dev/null and b/personal_website/img/no_css.png differ diff --git a/personal_website/img/preview.gif b/personal_website/img/preview.gif new file mode 100755 index 0000000..bec3d82 Binary files /dev/null and b/personal_website/img/preview.gif differ diff --git a/personal_website/img/run.png b/personal_website/img/run.png new file mode 100755 index 0000000..ee1ea87 Binary files /dev/null and b/personal_website/img/run.png differ diff --git a/personal_website/img/signup.png b/personal_website/img/signup.png new file mode 100755 index 0000000..7c3ddaa Binary files /dev/null and b/personal_website/img/signup.png differ diff --git a/personal_website/img/url.png b/personal_website/img/url.png new file mode 100755 index 0000000..fb73ed8 Binary files /dev/null and b/personal_website/img/url.png differ