Responsive Design

Often we want our web pages to display/behave differently in different browsers and on different devices. On a computer monitor we have lots of room, so naturally we can display our website in a nice wide format. However, that same website on a mobile phone has a lot less room horizontally. Because of this we need to make our websites to adjust their size based on the device that they are on.

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

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

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%
}

An important thing to note is that pixel size is not the same across all screens. A standard 1920x1080 pixel monitor will have much larger pixels than a 4K monitor. This means that 100px on one will look larger on one and smaller on the other. If you want to set something to be a particular size that stays more standard across different screens you might try using "em" which gets its measurement from the current font size.

img {
width: 2em;
}

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/

Flex and CSS Grid

A more modern approach to aligning the elements of a web page is to use CSS layout techniques like Flex and CSS Grid. These allow developers to design and arrange the placement of elements in a web page efficiently and responsively.

If you have completed the page above and feel confident in your understanding, have a go at re-doing some of the tasks but this time using Flex.

https://www.w3schools.com/css/css3_flexbox_container.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-basics-and-terminology