# HTML, CSS, Flexbox Notes

## Pair Programming Workflow

---

## From Morning Review

### You can't nest a `div` inside a `p` even though they are both blocks.

When I said, "it worked before", it was because I used a different element. And I also didn't read the hierarchy correctly in the dev tools.
After looking at it again, it showed that the `div` was a sibling of `p` even though I nested it.
Replace with `span` and it achieves what we want!

- [W3 Schools: Block and inline elements](https://www.w3schools.com/html/html_blocks.asp)
- [W3 Docs on `divs`](https://www.w3docs.com/learn-html/html-div-tag.html)

From W3 Docs:

> The `<div>` tag can NOT be inside `<p>` tag, because the paragraph will be broken at the point, where the `<div>` tag is entered.

### `align-self`

This is a child (item) level property!

In the code from this morning, change the `.child.three` selector to look like this:

.child.three {
    background: magenta;
    align-self: start;
    /* top: 20px;
    right: 20px; */
    /* What happens if we use absolute or relative? */
    /* position: absolute; */
}

And it should look like this

## Exit Ticket Solutions

**You should be able to:**

- Create a basic HTML document using common elements (`div`, `p`, `h1`, `ul`, `button`, etc)
- Add some basic styling to an HTML document
- Navigate the browser developer tools (console, elements, network)
- Style a page using Flexbox

## Which of the following selects any anchor with the class "small" that's within a paragraph?

- **`p a.small`** ☑️
- `p > a.small`
- `p#small > a`
- `p.small > a`

## Which of the following is the most specific CSS selector?

- `p.another-thing`
- `.other-thing`
- `#thing` ☑️
- `div`

## Where do you define "display: flex" in your CSS?

- At the container (parent) level ☑️
- At the item (child) level

## What does "flex-grow" expect as input?

- Number representing the pixel size of the element
- Percentage representing how much space the element should take up
- A true or false value representing whether to dynamically increase the element's size if the window gets bigger
- A unit-less value representing the proportion of space the element should take up ☑️

## Why would you diagram a webpage on a whiteboard or piece of paper?

Diagramming facilitates "iterative cognition" or a fancy way of saying: A series a small thoughts/insights add up to the full idea. Identifying the various boxes in the page helps us create a hierarchy of our page (parent-child relationships) that will make it easier to translate into code later.

## When to Use Combinators

As mentioned yesterday, our code demos are smaller, and foundational to help you get started on the exercises. But you will start to build larger and larger projects, and the projects and codebases in industry are monstrous. You may or may not be doing plain CSS - that's determined by job (and you, if you choose a job like that). Let's take another smaller example below:

<div>
  <h1>2101-FSA-RM-WEB-FT</h1>
  <ul>      
     <li>
       <div>
          <h2>Stone</h2>
          <ul>
             <li>DOM Homework Score: 100</li>
          </ul>           
        </div>
     </li>
  </ul>
</div>

This works just fine for what it does. But what if we wanted to add more folks from the cohort? What if we wanted to keep track of other cohorts like Grace Hopper, WDF, or Cyber? What if we wanted to keep track of more than just grades? You can add classes and IDs everywhere, but then it becomes harder and harder to manage and may limit flexibility as the app gets larger.

Another example:

From yesterday's workshop, if you flexed `div`, you might have gotten past the first few sections of the workshop. However, as you get more into the detail of say, the staffing section, suddenly, flexing ALL the `divs` proved to make your lives more difficult

### Related: More on IDs (and Classes)

- [MDN: IDs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)
- [MDN: Fragment Identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)

IDs play a special role in the browser. This is the “#” in the URL. If you have a URL like https://iamcool.com#comments, the browser will attempt to locate the element with an ID of “comments”. In fact, take a look at this example, put in your VS Code in an `index.html` file and open it up, and click. For me, it's: http://localhost:52330/index.html#see-me

<div class="some-link">
    <a id="unique" href=#see-me>Hello</a>
</div>

Something even coolor, is to go to your cohort repo, and click on the side of one of the Days (there's a little link that leads to that specific section). Right click it, and inspect. It follows above format.

## Uses cases for `row-reverse` or `column-reverse`?

The one I can think of off the top of my head is sorting elements without using JavaScript

## Does having so many IDs affect perfomance?

I said, probably not, but wasn't sure.

Here's an [article](https://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/) from some research I did

## `flex-basis` vs `width`

We went over this yesterday, but here are notes on it:

- `flex-basis` only applies to flex items
- `flex-basis` only works on main axis so, if you're flexing columns, you'd need to use `width`
- When flexing `row`, `flex-basis` controls width
- When flexing `column`, `flex-basis` controls height

## Things that happen when we `display: flex`

- Treats that parent as a flex container
- Treats all direct children as flex items
- Flex items will be laid out horizontally from the left in source order
- Flex items will be sized based on width properties if declared (Remember, it only takes up the space it needs)
- If there is not enough space, they are given permission to shrink horizontally until they all fit

---

## CSS Newspaper Solutions

### Part 1

<style>
  article h1 {
    /* Solution */
    font-size: 3rem;
    text-decoration: underline;
    font-family: Courier;
    text-transform: uppercase;
    /* Solution */
  }
</style>

### Part 2

<style>
  article {
    font-family: Courier;
  }
  article p {
    /* Solution */
    line-height: 1.5;
    text-indent: 1.5rem
    /* Solution */
  }
</style>

### Part 3

<style>
  * { box-sizing: border-box; }

  main {
    font-family: Courier;
    text-align: center;
  }
  section.sports {
    width: 100%;
    height: 25%;
    border: 10px dashed blue; /* Solution */
  }
  section.leisure {
    width: 100%;
    height: 75%;
    border-top: 2rem solid gold; /* Solution */
  }
</style>

### Part 4

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    margin: 1rem; /* Solution */
  }
</style>

### Part 5

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    padding: 1rem; /* Solution */
  }
</style>

### Part 6

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    padding: 1rem;
    /* Solution */
    margin: 1rem;
    background-color: white;
    /* Solution */
  }
</style>

### Part 7

<style>
  body {
    font-family: Courier;
  }
  header, h5 {
    text-align: center;
  }
  h5 {
    font-size: 2rem;
    margin: 0;
  }
  section {
    /* Solution */
    width: 50%;
    position: absolute;
    /* Solution */
  }
  .cat {
    border-top: 10px solid gold;
    right: 0; /* Solution */
  }
  .dog {
    border-top: 10px solid red;
    left: 0; /* Solution */
  }
</style>

### Part 8

<style>
  h1 {
    font-family: Courier;
    color: white;
    text-align: center;
    font-size: 2rem;
  }
  header {
    height: 40%;
    /* Solution */
    background-image: url("catstronaut.jpg");
    background-size: cover;
    background-position: top right;
    /* Solution */
  }
</style>

### Part 9

<style>
  article {
    font-family: Courier;
  }
  #paragraph-one img {
    margin: 0 1rem; /* Solution */
  }
  #paragraph-two img {
    float: right;
    margin: 0 1rem; /* Solution */
  }
  img {
    width: 150px;
    height: 150px;
    float: left; /* Solution */
  }
</style>

### Part 10

<style>
  article {
    font-family: Courier
  }
  #red {
    left: 0;
    background-color: red; /* Solution */
  }
  #blue {
    right: 0;
    background-color: blue; /* Solution */
  }
  .box {
    width: 75%;
    height: 25%;
    position: absolute;
    opacity: 50%; /* Solution */
  }
</style>

## CSS Dinner Solutions

### **Level 1 of 12**
**Prompt –** Select the plates (Type Selector)
- `table.html`

  <div class="table">
    <plate />
    <plate />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate {
      /* Styles would go here. */
    }

</details>

### **Level 2 of 12**
**Prompt –** Select the bento boxes (Type Selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
    <bento />
  </div>

<details><summary>Solution</summary>

`style.css`

    bento {
      /* Styles would go here. */
    }

</details>

### **Level 3 of 12**
**Prompt –** Select the fancy plate (ID Selector)
- `table.html`

  <div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
  </div>

<details><summary>Solution</summary>

`style.css`

    #fancy {
      /* Styles would go here. */
    }

</details>

### **Level 4 of 12**
**Prompt –** Select the apple on the plate (Descendant Selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
      <apple />
    </plate>
    <apple />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate apple {
      /* Styles would go here. */
    }

</details>

### **Level 5 of 12**
**Prompt –** Select the pickle on the fancy plate (Combine the Descendant & ID Selectors)
- `table.html`

  <div class="table">
    <bento>
      <orange />
    </bento>
    <plate id="fancy">
      <pickle />
    </plate>
    <plate>
      <pickle />
    </plate>
  </div>

<details><summary>Solution</summary>

`style.css`

    #fancy pickle {
      /* Styles would go here. */
    }

</details>

### **Level 6 of 12**
**Prompt –** Select the small apples (Class Selector)
- `table.html`

  <div class="table">
    <apple />
    <apple class="small" />
    <plate>
      <apple class="small" />
    </plate>
    <plate />
  </div>

<details><summary>Solution</summary>

`style.css`

    .small {
      /* Styles would go here. */
    }

    /* OR */

    apple.small {
      /* Styles would go here. */
    }

</details>

### **Level 7 of 12**
**Prompt –** Select the small oranges (Combine the Class Selector)
- `table.html`

  <div class="table">
    <apple />
    <apple class="small" />
    <bento>
      <orange class="small" />
    </bento>
    <plate>
      <orange />
    </plate>
    <plate>
      <orange class="small" />
    </plate>
  </div>

<details><summary>Solution</summary>

`style.css`

    orange.small {
      /* Styles would go here. */
    }

</details>

### **Level 8 of 12**
**Prompt –** Extra Credit: Select the small oranges in the bentos
- `table.html`

  <div class="table">
    <bento>
      <orange />
    </bento>
    <orange class="small" />
    <bento>
      <orange class="small" />
    </bento>
    <bento>
      <apple class="small" />
    </bento>
    <bento>
      <orange class="small" />
    </bento>
  </div>

<details><summary>Solution</summary>

`style.css`

    bento orange.small {
      /* Styles would go here. */
    }

</details>

### **Level 9 of 12**
**Prompt –** Extra Credit: Select all the things! (Universal Selector)
- `table.html`

  <div class="table">
    <apple />
    <plate>
      <orange class="small">
    </plate>
    <bento />
    <bento>
      <orange />
    </bento>
    <plate id="fancy" />
  </div>

<details><summary>Solution</summary>

`style.css`

    * {
      /* Styles would go here. */
    }

</details>

### **Level 10 of 12**
**Prompt –** Extra Credit: Select the apple directly on a plate (Child Selector)
- `table.html`

  <div class="table">
    <plate>
      <bento>
        <apple />
      </bento>
    </plate>
    <plate>
      <apple />
    </plate>
    <plate />
    <apple />
    <apple class="small" />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate>apple {
      /* Styles would go here. */
    }

</details>

### **Level 11 of 12**
**Prompt –** Extra Credit: Select the top orange (First Child Pseudo-selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
    <plate>
      <orange />
      <orange />
      <orange />
    </plate>
    <pickle class="small" />
  </div>

<details><summary>Solution</summary>

`style.css`

    orange:first-child {
      /* Styles would go here. */
    }

    /* OR */

    plate orange:first-child {
      /* Styles would go here. */
    }

</details>

### **Level 12 of 12**
**Prompt –** Extra Credit: Select the 3rd plate (Nth Child Pseudo-selector)
- `table.html`

  <div class="table">
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate:nth-child(3) {
      /* Styles would go here. */
    }

</details>