jps/README.md

# Intro to Web Development
#### Forest Hill High School > Mr. James  
### Resources
- Go to [jsfiddle](http://www.jsfiddle.net)   
In the HTML square type Hello World, then click the Run button.  
You should see the output in the bottom right box.  
Use jsfiddle for all our HTML and CSS exercises.  
- Go to [the GitHub html folder](http://www.github.com/joeyajames/jps/html) to find a bunch of different HTML starter code.  
You can copy and paste these into the jsfiddle HTML box one at a time, or retype them.  
You should get output in the bottom right box.  
- See detailed documentation on each HTML tag at [w3schools](https://www.w3schools.com/html/default.asp).  
W3schools has comprehensive explanations of all HTML tags.  
- HTML [standard colors](https://www.w3schools.com/cssref/css_colors.asp), HTML [custom hex colors](https://www.w3schools.com/colors/colors_picker.asp), and [color schemes](https://coolors.co/)
### Instructions, Day 1: HTML
- Complete the HTML worksheet as you go.  
- Open a jsfiddle window, the GitHub html folder, and w3schools in separate tabs in your browser.
- Copy and paste the HTML code from each of the HTML files into the jsfiddle and run it.  
Do files in order: 1. text, 2. images, 3. tables, 3. lists, 4. html forms, 5. menu bar, 6. page template, 7. homepage.  
Try modifying the code to see how the output changes. Add an extra block of text, or an extra form field. Put your own message in. Try making your own table or your own form. 
- After you get familiar with each of the files in the html folder, try building up your own personal webpage, similar to mine (homepage_2.html).  
Add images you find on the web. You just need the image url to put the image into your webpage. You can do a google image search, the right-click the image and copy url. You may need to resize the images using width=wwwpx height=hhhpx. 
Put things you like on your homepage.  
### Instructions, Day 2: CSS
- Open a jsfiddle window, the GitHub css folder, and w3schools in separate tabs in your browser.
- To to the css folder. Copy and paste the HTML code from each of the HTML files and the css code from the corresponding CSS file into the jsfiddle and run it.  
Try modifying the code to see how the output changes. Go to [w3schools](https://www.w3schools.com/cssref/css_colors.asp) color picker and pick colors you like. There's a big selection of named colors, and you can also enter a hex color code (eg. #a355c4). You can use an html color picker to find a hex code for any color you like.
- Experiment with different font sizes. Try bigger and smaller font sizes using 14px or 25px. You can also use % for font sizes, where 125% is 25% bigger than normal.
- Try the mouse-over styles by changing the a:hover css. What happens when you add a p:hover style or an h3:hover style?
- Copy and paste my table styles into the jsfiddle css window and run it. Then try editing it to make your own style for tables by setting different values for table, tr, td, and th tags. What happens when you add a td:hover style?
### Instructions, Day 3: Python
- Open two browser tabs: one tab with the GitHub python folder, and another go to [repl.it](http://www.repl.it)
- Copy and paste the python code in each of the files from GitHub into the repl, and run.
- What character indicates a comment?
- What types of data can a list hold? Try integers, floating point numbers (decimals), and strings (text). 
- How do you access individual items in a list?
- How are dictionaries different from lists?
- Try writing your own for loop to do an operation on each item in a list (eg. add 5 to each number).
- What kinds of things could functions be used for?
### Definitions
- HTML is hypertext markup language, which is a formatted text that web browsers can understand and decode to show you formatted content.
- CSS means cascading style sheets. This allows web developers to customize styles for different elements across a whole website. Even if you have 500 different webpages on your site, you can change the paragraph font size by only changing the CSS document in 1 place, so it saves a lot of time and makes the whole site consistent.
- Javascript is a popular web programming language that can execute in the browser when you click on an element. Many browser-based games are written in Javascript.