Update README.md
This commit is contained in:
27
README.md
27
README.md
@@ -12,20 +12,22 @@ You should get output in the bottom right box.
|
|||||||
W3schools has comprehensive explanations of all HTML tags.
|
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/)
|
- 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: HTML part 1
|
### Instructions: HTML part 1
|
||||||
- Complete the HTML worksheet as you go.
|
- Complete the HTML-1 worksheet as you go.
|
||||||
- Open a jsfiddle window, the GitHub html folder, and w3schools in separate tabs in your browser.
|
- 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.
|
||||||
**Do files in order: 1. text, 2. images, 3. tables, 3. lists, 4. html forms**
|
**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 or your own form.
|
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
|
||||||
|
- Complete the HTML-2 worksheet as you go.
|
||||||
|
- **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).
|
- 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, 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.
|
Put things you like on your homepage.
|
||||||
### Instructions: HTML part 2
|
|
||||||
- **Do files in order: 1. menu bar, 2. page template, 3. homepage.**
|
|
||||||
- lkjlkj
|
|
||||||
### Instructions: CSS
|
### Instructions: CSS
|
||||||
- Open a jsfiddle window, the GitHub css folder, and w3schools in separate tabs in your browser.
|
- 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. **Do files in this order: 1. text, 2. table, 3. forms.**
|
- 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.
|
||||||
|
- **Do files in this order: 1. text, 2. table, 3. forms.**
|
||||||
- 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.
|
- 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.
|
- 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?
|
- 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?
|
||||||
@@ -37,17 +39,16 @@ Put things you like on your homepage.
|
|||||||
- What character indicates a comment?
|
- What character indicates a comment?
|
||||||
- What types of data can a list hold? Try integers, floating point numbers (decimals), and strings (text).
|
- 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 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).
|
- 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?
|
|
||||||
### Instructions: Python part 2
|
### Instructions: Python part 2
|
||||||
- **Do in this order: 1. dictionaries, 2. functions.**
|
- **Do in this order: 1. dictionaries, 2. functions.**
|
||||||
- ljlkj
|
- How are dictionaries different from lists?
|
||||||
|
- What kinds of things could functions be used for?
|
||||||
### Definitions
|
### Definitions
|
||||||
- HTML is hypertext markup language, which is a formatted text that web browsers can understand and decode to show you formatted content.
|
- 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.
|
- 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 the most widely used web programming language that can execute in the browser when you click on an element. Many browser-based games are written in Javascript.
|
- Javascript is the most widely used web programming language that can execute in the browser when you click on an element. Many browser-based games are written in Javascript.
|
||||||
-- Form is a web page where the user is required to enter data and click a submit button. There are a variety of different form fields for different types of data input (e.g. check boxes, text fields, drop-down lists). Normally the form itself is written in HTML, and when you click the submit button a Javascript is executed to process the data.
|
- Form is a web page where the user is required to enter data and click a submit button. There are a variety of different form fields for different types of data input (e.g. check boxes, text fields, drop-down lists). Normally the form itself is written in HTML, and when you click the submit button a Javascript is executed to process the data.
|
||||||
- Python is one of the most popular programming language for web development, machine learning, data analysis, and a variety of other things.
|
- Python is one of the most popular programming language for web development, machine learning, data analysis, and a variety of other things.
|
||||||
-- List is a data structure in Python that stores an array of items. Most other programming languages call this an array. Python lists can store any type of objects: integers, decimal numbers, text strings, or other.
|
- List is a data structure in Python that stores an array of items. Most other programming languages call this an array. Python lists can store any type of objects: integers, decimal numbers, text strings, or other.
|
||||||
-- Dictionary is a data structure that uses key-value pairs to store data. For example, 1:Bob, 2:Jenny, 3:Frank. Or, Caylus:6135728097, Howard:6137892854.
|
- Dictionary is a data structure that uses key-value pairs to store data. For example, 1:Bob, 2:Jenny, 3:Frank. Or, Caylus:6135728097, Howard:6137892854.
|
||||||
|
|||||||
Reference in New Issue
Block a user