Description

Hello fellow Pokémon coders, Professor Oak has finally received Series A funding for the first-ever Pokedex (Yes, we’re in the late 1990’s!). He would like us to create the first lo-fi prototype of the Pokedex for all the other poke coders in the world. If you haven’t already, please ensure that you have completed the Tools of the Trade – Lab before attempting this homework.

Software Requirements
● Text Editor
● Browser
● Adobe Illustrator
Instructions
1. Start by taking the drawn-out HTML mapping you did earlier in the class.
2. Translate this mapping into HTML code. If you didn’t already do so, try to be as semantic as possible when choosing element types.
4. Elements Types – you should use each of these element types at least once in your code:
a. div (division)
b. Span
c. h1-h6 (headers)
d. p (paragraph)
e. a (anchor)
f. ol & ul (ordered and unordered lists)
g. img (image)
h. button
i. nav
j. header
k. section
l. article
m. footer 5. For images:
a. Copy and paste the text content from the illustrator file and png images in the “assets” folder into your code.
i. Create new paragraph elements for each new paragraph of text.
ii. For images, save the image to your own working directory.
6. For buttons:
a. Where you have buttons, create navigation links that navigate to different paragraphs throughout the article.
i. Give the paragraphs you choose IDs that you can use when defining the ‘href’ attribute of the navigation link.
ii. It’s not important which paragraphs you choose to link to – the point is to practice linking to different parts of the article using fragments.
7. Styling:
a. Style your Pokedex similar to how the illustrator/png files look
▪ Use id and class selectors at a minimum (if you’re up to it, try to use descendant and combination selectors as well!)
▪ Apply at least 15 CSS rules
b. Your page does not require any horizontal scrolling at any viewport size

Tips
● You can check your work by opening the HTML file in your browser – dragging the file into your browser usually does the trick for this.
● Save your HTML file – we’ll be using it again in the next class.

Extra Credit (1 point)
1. Create two more html documents: ‘map.html’ and ‘area.html’
2. From your home page, link the ‘map’ button to ‘map.html’ and ‘area’ button to
‘area.html’
a. Your ‘map.html’ page should link to both your home page and ‘area.html’
b. Your ‘area.html’ page should link to both your home page and ‘map.html’

Submitting Your Homework via Github
You are going to submit this homework assignment via Git.

Below are the steps that you will follow each time you are required to submit a lab or a homework.

1. For each homework/lab, we will provide a GitHub repository to you. As you can see for this homework you have
https://github.com/parvsondhi/FullStack_Info_HW01
2. Navigate to the repository online and click on Fork
3. Once you have forked, you will be redirected to your github account with a fork of our repo. Make sure you are on your GitHub repo
4. After you confirm you are on your repo. Click on the button “Clone or download” and copy the url for your repo
5. Open terminal and change to the directory where you will want to have all your class homework and labs. Once in that directory, clone your repo with the following command git clone <the url you copied>
6. This will now have created a folder on your desktop.
7. After you have completed your HW – You can submit by running the following commands: git add .
git commit –m “your comments go here” git push origin master
8. Navigate back to github via your forked repository on github. Now it’s time to make a pull request. Click on ‘New pull request’
9. Make sure that you are creating a pull request from your ‘head fork’ into the ‘base fork’ of parvsondhi. Now you should be able to start the process of creating a pull request via ‘Create pull request’.
10. Github will make sure that you are able to successfully merge. Write a comment that lets us know what changes you are making.
11. The open tag lets you know that you have successfully created a pull request.

Complete Screenshots and Steps to submit the homework are available in the first lab: Lab01 – Terminal and Git

** The reason for turning in your code in this manner is because it allows to give you pointed feedback on your code inline. This is a common practice in the industry and is formalized through a process called a code review. If you are interested, you can read more about it here: http://blog.codeship.com/github-code-review/.