HTML - Responsive Design/Industry Standards

 Initial Task: Website in Review

Using these three resources:
https://www.w3schools.com/css/css_templates.asp
https://www.w3schools.com/css/css_navbar_horizontal.asp
https://year12digitech.weebly.com/htmlcss-advanced.html


Create a multi-page website on one of the following topics:
- How to get gud at a video game.
- Different types of socks
​- Breakfast foods
​
Ensure you have a header and footer

Element and Class Selectors

.Elements
In HTML we use CSS to change specific Elements

For example

p {
    color: black;
}

Would change the colour of paragraph fonts to black.
Classes
But we can use custom classes to select certain parts of text or certain elements to change only them e.g.

.redtext {
  color:red
}
ID's
We can also use ID's to change things e.g.

#underlined {
   text-decoration: underline
}

What is the difference and why care?

Element Tags = Will update every element that is the same i.e. All paragraph text will be black

Class Tags = Will update every element that has that class in it. e.g. both paragraph and heading text has a red class. Therefore both will be red. Classes can be used multiple times.

ID Tags = Should only be used for one Element tag. ID tags can only technically be used once. They are usually used for java script forms

TASK: Using the information on the right recreate the text using classes, elements and ID's

Pseudo Selectors

We have already used Pseudo Selectors

Pseudo selectors are used to highlight certain elements under certain conditions.

For example a:hover will change the condition of a link when the mouse is hovered over it.

Task: Give it a go
Try to figure out what these selectors are for.
a:hover
a:visited
a:link

Try to make it so visited links appear different from unvisited links. 
Try to make it so colours change when hovering over links
Task 2: Use pseudo selectors with classes to make this.
https://www.w3schools.com/css/css_pseudo_classes.asp

Percentage Sizing

Often at times a website is viewed on multiple different devices.

We need to develop websites that can cater to different screen size.

So rather then sizing things in pixels we size them in percentages
img {
  width: 300px;
}
​img {
  width: 30%
}

Media Queries - Printing, mobile phones and tablets

Task: Review Different Sizes and printing
 
1.) Go to www.mightyape.co.nz 
2.) Search for an Item and click on it.
3.) Change the width of your browser, does anything change?
Take note of font size, picture size, placement of prices.
​4.) Click the  print button on your browser
What is gone? What still exists?

We use different media queries in order to change fonts and colours as per printing or different sized monitors.

Task 1: Read through this
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Task 2: Edit the website you made at the start of your program so that if the screen is smaller there are at least 3 different changes

Task 3: Edit the website you made earlier so that the header and footer disappear when you go to print
https://benfrain.com/create-print-styles-using-css3-media-queries/ 

​​