You can download the slides here.

Pokémon Page Directions:

1. Create a folder on your computer to store your files in. (Make sure you remember where you saved it.)


2. Open VS Code.


3. On the page that comes up, under "Start" click "Open folder" or use the toolbar in the top to click "File" then "Open."




4. In the popup that appears, find the folder you just created, and click it to open it in VS Code.


5. Click the first button at the top of the left column, right underneath the name of your folder, to create a new file. (Hint: It says "New File" when you hover over it.)




6. Name your file pokemon.html. Make sure to manually type in the ".html" part and not just the name.


7. Create a webpage based on the following criteria:


• Have a title to show on the tab


• Have a heading (level 1) that says "Pokémon" on top of the page


• Have a section that a user can read about pokémon:


• Have it be split up with a header to describe the title of the subject and a paragraph


• The paragraph should state, “Pokémon is a series of video games developed by Game Freak and published by Nintendo and The Pokémon Company as part of the Pokémon media franchise.”


• Have an ordered list of types of pokémon:


• Normal, Fire, Water, Grass, & Ground


• Have an unordered list of the original three starter pokémon:


• Squirtle, Charmander, & Bulbasaur

Bonus:

• Add text formats, like italics or strong, to your web page to give more meaning to the content.


• Research and find another way to add something we have not learned to your web page. Like a few links, images, tables, or colors.

Food Page Directions:

1. Create a folder on your computer to store your files in. (Make sure you remember where you saved it.)


2. Open VS Code.


3. On the page that comes up, under "Start" click "Open folder" or use the toolbar in the top to click "File" then "Open."




4. In the popup that appears, find the folder you just created, and click it to open it in VS Code.


5. Click the first button at the top of the left column, right underneath the name of your folder, to create a new file. (Hint: It says "New File" when you hover over it.)




6. Name your file based on the food you have been assigned. (Example: meat.html)


7. Create a webpage based on the following criteria:


• Use correct syntax and tags.


• Be sure to use headers and paragraphs.


• Make use of ordered and unordered lists.


• Use the following text to populate your page depending on what food you were assigned.



Vegetables	Meat	Fruit
What are vegetables?	What is meat?	What is fruit?
Vegetables are parts of plants that are consumed by humans as food as part of a meal.	Meat is animal flesh that is eaten as food.	In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.
What else is there about vegetables?	What else is there about meat?	What else is there about fruit?
Originally, vegetables were collected from the wild by hunter-gatherers and entered cultivation in several parts of the world, probably during the period 10,000 BC to 7,000 BC.	Humans have hunted and killed animals for meat since prehistoric times. The advent of civilization allowed the domestication of animals such as chickens, sheep, rabbits, pigs and cattle. This eventually led to their use in meat production on an industrial scale with the aid of slaughterhouses.	Many hundreds of fruits, including fleshy fruits (like apple, kiwifruit, mango, peach, pear, and watermelon) are commercially valuable as human food, eaten both fresh and as jams. They are also used in manufactured foods and beverages.
Ordered list of most popular vegetables:	Ordered list of most popular meat:	Ordered list of most popular fruit:
Potatoes Tomatoes Onions Carrots	Beef Chicken Pork Duck	Achene (Strawberry) Capsule (Brazil Nut) cypsela (Coconut, Walnut) Legume (Bean, Pea, Peanut)
Unordered list of vegetable dishies:	Unordered list of meat dishies:	Unordered list of furit dishies:
Vegetable Stir Fry Veggie Gumbo Eggplant Parmesan	Beef Stew Fried Chicken BBQ Pork Bun	Apple Pie Mango Sorbet Coconut Curry




Your webpage should look like this:






8. Upload your web page to GitHub using the instructions in the next box.


9. Submit your web page to the CodeSquad Activity Tracker under the Food Page tab. Make sure to also mark your status as done and the date completed.

Bonus:

• Change the colors of the headers.


• Change the size an/or style of the text.


• Try to add a button to the page. Extra bonus if the button takes a user to another page when it's clicked.

GitHub Directions:

1. Login to GitHub.


2. On the left hand side look for the "Repositories" section. Click the green "New" button. You will be sent to a new page.


3. Type in a name for your repository.


4. Click the green “Create repository” button at the bottom of the page.


5. A new page will open. Under "Quick setup — if you’ve done this kind of thing before," click "uploading an existing file."


6. A new page will open. Drag and drop the file you want to upload, or click "choose your files."


7. Once you’ve uploaded all files, scroll to the bottom of the page and click the green “Commit changes” button.


8. The files will upload and you will be sent to the new repository’s page.


• Your repo’s URL is the page you are on now. Copy it from the address bar if needed.


• Paste the URL for your repo into the Activity Tracker under the correct tab. Make sure to also mark your status as done and the date completed.

Quiz Directions:

Complete this quiz by clicking this link to the Google Form. Press submit at the bottom of the form when you are finished.

You can download the slides here.

Food Page Update Directions:

1. Open VS Code.


2. On the page that comes up, under "Start," click "Open folder."


3. Find the folder where you created your food page last night, and click it to open it in VS Code.


4. Add an image to your food page under the first section explaining what your food is.


• Vegetable: https://benlivermore.github.io/vegetables.jpg


• Meat: https://benlivermore.github.io/meat.jpg


• Fruit: https://benlivermore.github.io/fruit.jpg


5. Add a header at the bottom of the page that says "Sources"


6. Add a list of links of the sources for your page.


• Vegetables:


• https://en.wikipedia.org/wiki/Vegetable


• https://www.pma.com/content/articles/2017/05/top-20-fruits-and-vegetables-sold-in-the-us


• Meat:


• https://en.wikipedia.org/wiki/Meat


• https://www.pma.com/content/articles/2017/05/top-20-fruits-and-vegetables-sold-in-the-us


• Fruit:


• https://en.wikipedia.org/wiki/Fruit


• https://www.statista.com/statistics/477475/us-most-consumed-fruit-and-fruit-products-by-type/

Your webpage should look like this:




7. Upload your changes to GitHub:


• Sign into GitHub.


• Find the repository that you submitted yesterday, and click it.


• Click the "Add file" button.


• Choose "Upload files" and locate the file you have just updated.


• Click the green "Commit changes" button at the bottom of the page.

Bonus:

• Make the image smaller on the page. This page has some info on how to do this.


• Make the links open in a new tab/page. Do a Google search and you'll find lots of sites that will teach you how.

Adding Pages Directions:

1. Go to the Activity Tracker, and make sure you're on the Food Page tab.


2. Find two people who did different food web pages than you, and click their GitHub links.


3. Download their web pages from their GitHub accounts by clicking the green "Code" button and choosing "Download ZIP"





4. You will have to unzip the downloaded zip files to see each html food page.


5. Put each of the downloaded web page files in the same folder as your own web page.

Note: You should have a folder designated for this foods website project. It should only contain the files for this project. For example, do not leave your html files in your dowloads folder or have all your html files in a generic location like "My Documents."

Making a Homepage Directions:

1. Create a new html document called index.html and save it in the same folder as your other web pages.


2. The homepage should have an attention grabbing header like "All About Food"


3. The homepage should have links to each of the individual food web pages which should also be in the same folder as the index.html file.

Your homepage should look like this:




4. Upload your changes to GitHub in a new repository.


• Login to GitHub.


• On the left hand side look for the "Repositories" section. Click the green "New" button. You will be sent to a new page.


• Type in a name for your repository.


• Click the green “Create repository” button at the bottom of the page.


• A new page will open. Under "Quick setup — if you’ve done this kind of thing before," click "uploading an existing file."


• A new page will open. Drag and drop the file you want to upload, or click "choose your files."


• Once you’ve uploaded all files, scroll to the bottom of the page and click the green “Commit changes” button.


• The files will upload and you will be sent to the new repository’s page.


• Your repo’s URL is the page you are on now. Copy it from the address bar if needed.


• Paste the URL for your repo into the Activity Tracker on the Food Website tabe. Make sure to also mark your status as done and the date completed.

Bonus:

• Make a link on each food page that goes back to the home page.


• Make links to all the other pages from each page.