Compare commits
10 Commits
464ede379c
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
106459fe0f | ||
|
|
96a60369d6 | ||
|
|
5b7e0b9500 | ||
|
|
c7362c88c7 | ||
|
|
c30e7ebacd | ||
|
|
d2e721ef36 | ||
|
|
2f5c825527 | ||
|
|
f60921bbc2 | ||
|
|
d3efc9d204 | ||
|
|
adaf86a91b |
21
README.md
21
README.md
@@ -1,23 +1,24 @@
|
||||
# Intro to Programming
|
||||
#### Forest Hill High School > Mr. James
|
||||
This is a very brief introduction to programming. We will spend 2 days on HTML, 1 day on CSS, and 2 days on Python. We'll use HTML and CSS to create a simple web page. We'll learn how to add links, images, header text, tables and forms to our page. Then we'll use CSS to improve the styling. Python is a general purpose programming language, and we'll learn very basic programming skills including math functions, for loops, if-else statements, lists, dictionaries and simple functions.
|
||||
Most of the code is already written for you, so you only need to copy and paste it, then click Run. You will make minor changes to the code to complete the worksheet.
|
||||
This is a very brief introduction to programming. We will spend 2 days on HTML, 1 day on CSS, and 2 days on Python. We'll use HTML and CSS to create a simple web page. We'll learn how to add links, images, header text, tables and forms to our page. Then we'll use CSS to improve the styling. We'll use jsfiddle.net to edit and run our HTML and CSS code.
|
||||
Python is a general purpose programming language, and we'll learn very basic programming skills including math functions, for loops, if-else statements, lists, dictionaries and simple functions. We'll use repl.it to edit and run our Python code.
|
||||
The code is already written for you, so you only need to copy and paste it, then click Run. You will make minor changes to the code to complete the worksheets.
|
||||
### Resources
|
||||
- Go to [jsfiddle](http://www.jsfiddle.net)
|
||||
- Online HTML and CSS editor [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/)
|
||||
- The [GitHub html](http://www.github.com/joeyajames/jps/html) folder, [GitHub css](https://github.com/joeyajames/jps/tree/master/css) folder, and [GitHub python](https://github.com/joeyajames/jps/tree/master/python) folder with a bunch of different starter code.
|
||||
You can copy and paste the HTML and CSS into the jsfiddle boxes one at a time, or retype them.
|
||||
You should get output in the bottom right box. You can run the Python code in a repl window.
|
||||
- Online python interpreter, [repl.it](https://repl.it). Click +New Repl button, then select Python. We'll use this window to type in our Python code, run it, and view the output.
|
||||
### Instructions: HTML part 1
|
||||
- Complete the HTML-1 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.
|
||||
- Copy and paste the HTML code from each of the HTML files into the jsfiddle and run it to see what it does.
|
||||
**Do files in order: 1. text, 2. images, 3. tables, 3. lists**
|
||||
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.
|
||||
### Instructions: HTML part 2
|
||||
@@ -25,8 +26,12 @@ Try modifying the code to see how the output changes. Add an extra block of text
|
||||
- **Do files in order: 1. html forms, 2. menu bar, 3. page template, 4. 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 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.
|
||||
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, then right-click the image and copy url. You may need to resize the images e.g.
|
||||
```html
|
||||
<img src="my-url" width=300px height=200px>
|
||||
```
|
||||
Put things you like on your homepage.
|
||||
- If you want to save your homepage so others can view it on the web you can create a free GitHub account and follow these [instructions](http://jmcglone.com/guides/github-pages/). I can help you with this.
|
||||
### Instructions: CSS
|
||||
- Open a jsfiddle window, the GitHub css folder, and w3schools in separate tabs in your browser.
|
||||
- Go 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.
|
||||
|
||||
Reference in New Issue
Block a user