HTML Recap

class: middle center

# ~ quick recap from last week's class ~

---
class: middle center

## ~ `terminal` commands ~

---
class: middle

## `cd` = `c`hange `d`irectory
The `cd` command is what you use to move around your computer on the command line:
```shell
$ cd /Users/mark/Documents/
```
or more concisely
```shell
$ cd ~/Documents/
```
*the tilde (~) is a shortcut for the home directory e.g. `/Users/<user>`*

---
class: middle

## `ls` = `l`ist files
The `ls` command shows you all the files that are in the current directory you are in.
```shell
$ ls
assets          hii.jpg          index.html          test.html
```

---
class: middle center

## ~ `git` commands ~

---
class: middle

## The `status` command
The `status` command is kind of similar to the `ls` command, except it only shows you files that git hasn't seen before or that have
changed since git last saw them:
```shell
$ git status
```

???
Open code editor, crate a new file, and then run git status

---
class: middle

## The `add` command
The `add` command tells git to add the files or changes to files that you specify to your git project.

Git will then know to look for those files in the future, and see if there are any changes to them.
```shell
$ git add index.html
```

---
class: middle

## The `commit` command
The `commit` command saves the files that you've added — or the changes to files that you've added previously — to the repository.

```shell
$ git commit -m"Add index.html"
```
**note:** the `-m"<message>"` command is important to include, this is the `commit` message, that will help you understand in the future what
  the files or changes you're saving are. It's important to always specify a message, even if it's simple: `-m"Fixed a bug"`

---
class: middle

## The `push` command
This command sends the work we've done locally to the hosted repository on github.com. This is an important step to both back up
your work, and allow for others to use your code.
```shell
$ git push
```

---
class: middle

## The `diff` command
The diff command shows you what changes you've made if any to the files that are tracked by git.
```shell
$ git diff
```
If you've made a lot of changes, it can be helpful to look at them one at a time by using `status` and `diff` together:
```shell
$ git status
```
to see what files have changed, and then:
```shell
$ git diff index.html
```

---
class: middle center

# ~ CSS Recap ~

---
class: middle
background-image: url(assets/waterfallorgasm-large.gif)

## `CSS ~ cascading style sheets`

.footnote[GIF by Faith Holland]

---
class: middle

## How do you add styles to html documents?
There are several ways to apply css styles to html pages:
- inline
- embedded style tags
- linked stylesheets

---
class: middle

#### inline
```html
<a href="profile.html" style="color: red;">my profile</a>
```

Recall that inline styles take one of the highest precedence in the `cascade`, so they are the least ideal.

---
class: middle

#### embedded
```html
<head>
  <style>
    p {
      color: turquoise;
    }
  </style>
</head>
```
Embedded styles are good for quick experimentation, but become hard to maintain as the amount of styles you create grows

---
class: middle

#### linked
```html
<head>
  <link rel="stylesheet" href="/css/styles.css">
</head>
```
The optimal way to include your styles is to use the link tag to include from a separate file.

---
class: middle

## How to apply styles to elements
There are various ways to target elements in order to apply styles to them, called `selectors`.

---
class: middle

#### ids
There can only be one id on a page, so ids are usually for singular or foundational elements

```CSS
#profile {
  background: blue;
}
```
```html
<div id="profile">...</div>
```

#### classes
Classes are great for items that often repeat or that can compound styles
```CSS
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
```
```html
<span class="red bold">danger!</span>
```

---
class: middle

#### element selectors
Or you can select for tags broadly

```CSS
p {
  color: grey;
}
```
```html
<p>...</p>
```

---
class: middle

The `cascade` in css refers to the priority in which style rules are applied to a html document

several factors to determine priority, loosely from greatest to least:
1.  the `!important` flag on a css property (e.g. `color: red !important;`)
1.  inline styles (e.g. `style="color: red;"`)
1.  `#[id]` ID selectors (e.g. `#first-pg { color: red; }`)
1.  `.[class]` class selectors (e.g. `.graph { color: red; }`)
1.  type selectors (e.g. `p { color: red; }`)

---
class: middle

## Getting specific with `selectors`
You can also select the children — the elements within elements — with css
```html
<style type="text/css">
  #root p {
    color: #333;
  }
</style>

<article id="root">
  <img src="assets/300px-River_of_Blue.jpg" alt="Photo demonstrating crown shyness">
  <h1>The phenomenon of crown shyness</h1>
  
  <p>
    Crown Shyness is a phenomenon observed in some tree species, in which the
    crowns of fully stocked trees do not touch each other, forming a canopy
    with channel-like gaps.
  </p>
</article>
<footer>
  
  <p>Please support our blog!</p>
</footer>
```

---
class: middle

## pseduo-classes
pseduo-classes are keywords added to the end of selectors to target a special state of selected elements.

For example, we can use pseudo-classes to style the various different states of an anchor tag:
```html
<style type="text/css">
  a:link {
    color: black;
  }
  a:visited {
    color: black;
  }
  a:hover {
    color: blue;
  }
  a:active {
    color: blue;
  }
</style>

<a href="profile.html">Go to profile</a>
```
<a href="#22" class="example-link">Go to profile</a>

---
class: middle

## the box model
Html elements are represented as a boxes, and these boxes have several properties you can
manipulate with css. The `padding`, `margin`, and `border` control how these boxes interact with neighboring elements.
![box model](assets/box-model.png)

---
class: middle

#### box model demo
```html
<style type="text/css">
  #box1 {
    margin: 15px;
    border: dashed 1px green;
  }
  #box2 {
    padding: 15px;
    border: solid 1px orange;
  }
  .box {
    color: blue;
  }
</style>
...
<div id="box1">box 1</div>
<div id="box2">box 2</div>

<span class="box">box a</span>
<span class="box">box b</span>
```

---
class: middle

## units & sizing
Sizing and the units you choose to use with css can become a complex topic.
There are a few simple units we can use to get started:

`px` = Pixels, `%` = percentage of container

```html
<style media="screen">
  #box4 {
    border: solid 1px #ccc;
    width: 300px;
    padding: 15px 0 15px 0; /* this is top, right, bottom, left */
  }

#box4 h2 {
    border-bottom: solid 2px green;
    width: 25%;
    margin: 0 auto; /* like padding above, but condensed top/bottom, left/right */
    text-align: center;
  }
</style>

---
class: middle

## Sidebar about `auto`
With the last example, we used `auto` to have the browser determine the margin for us.

When an element has a defined width `auto` can be used to have the browser calculate the
available space and fill it out.

---
class: middle

## Aligning text
You can control the alignment of text within an element by using the [text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) css property
```html
<style type="text/css">
  h1 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
</style>

<h1>My Blog</h1>
<p>This is a little post introducing you all to my blog : )</p>
```
<div id="alignment-example">
  <h1>My Blog</h1>
  <p>This is a little post introducing you all to my blog : )</p>
</div>
---
class: middle

## Positioning
You can alter the positioning of elements within the page by using the [position](https://www.w3schools.com/cssref/pr_class_position.asp) property

`position` has several possible values, but the most commonly used are `relative`, `absolute`, `fixed`, and `sticky`

---
class: middle

## Position `absolute` and `relative`
position `aboslute` will position an element absolutely to the nearest `relative` positioned containing element

```html
<style type="text/css">
  #notice {
    display: inline-block;
    position: relative;
    padding: 50px;
    background: rgb(245, 187, 127);
  }
  .x-icon {
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>

<span class="x-icon">x</span>
<div id="notice">
  <span class="x-icon">x</span>
  This is a notice!
</div>
```

<span class="x-icon">x</span>
<div id="notice">
  <span class="x-icon">x</span>
  This is a notice!
</div>

---
class: middle

## position `fixed`
Fixed position locks the element within the browser viewport regardless of scroll position

```html
<style type="text/css">
  nav {
    position: fixed;
    top: 0;
  }
</style>
<nav>
  <a href="/home">Home</a>
  <a href="/blog">blog</a>
</nav>
```

---
class: middle

## Adding basic interactivity to css
pesduo-classes can also be applied to elements to add interactivity

```html
<style type="text/css">

/* set the initial box color to green */
  #box5 {
    width: 50px;
    height: 50px;
    background-color: green;
  }
  /* and then use the :hover keyword to change it to orange */
  #box5:hover {
    background-color: orange;
  }
</style>

---
class: center middle

# demo

---
class: middle center

## ~ Working with Fonts ~

---
class: middle

## Web safe fonts
A small set of fonts are universally available and called "web safe"
+ Arial
+ Courier
+ Georgia
+ Times New Roman
+ Trebuchet MS
+ Verdana

Note that it might appear a custom font works on your site when viewing it locally..

Thats because the browser was able to locate it on your computer, but this won't happen for all your visitors!

---
class: middle

## applying fonts
Fonts are applied via the `font-family` property
```css
p {
  font-family: Courier;
}
```

---
class: middle

## Supplying your own fonts
Fortunately with css you can also load custom fonts to use with your sites, via `@font-face`

```css
@font-face {
  font-family: "myCustomFont"; /* this will be the name you envoke with font-family */
  src: url("myCustomFont.ttf"); /* the actual font file to be loaded by the browser */
}
```
Fonts usually come in multiple formats to support different browsers and devices, these multiple formats
can be supplied like so:
```css
@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}
```
The last two lines enable you to define multiple weights/styles of the same font.

---
class: middle

## Using 3rd party font services
You can also use 3rd party services like fonts.google.com or typekit

They usually make it easy to quickly choose and integrate a font, but there are drawbacks

![fonts.google.com](assets/fonts.google.com.png)

https://fonts.google.com

---
class: middle

## Open source fonts
There's a community of designers and artists making open source fonts that are worth exploring:

https://are.na/laurel-schwulst/open-source-web-fonts

---
class: middle

## let's style our profiles

explore css properties ~> https://w3schools.com/cssref/

### 1) choose at least two fonts to use on your profile page:
+ https://fonts.google.com
+ https://are.na/laurel-schwulst/open-source-web-fonts
+ https://fonts.adobe.com/

### 2) style the link to your classmates with fixed position into the top right corner of the page

we'll use git to commit and push our work before the end of class