2009-GHP-NY Cookie Jar: HTML & CSS, Box Diagramming, Flexbox

# 2009-GHP-NY Cookie Jar: HTML & CSS, Box Diagramming, Flexbox ## Lecture: Intro to HTML & CSS ### When you have `<link rel="stylesheet" href=... />`, how does the HTML "know" to execute the content on that link and add it to the style rules? Is it because it's in the head? Or something else? ***Answer:*** - **Let's start by reviewing `link` tags:** - `link` tags only occur in the HTML's `head` tag - `link` tags are used to relate the HTML document to _another_ document - the `rel` attribute defines the _type_ of relationship; for now, the only relationship you'll use is the "stylesheet" attribute value - the `href` attribute describes the _location_ of the other document - When an HTML document is loaded into the browser, each line is "processed" one-by-one. When a stylesheet's `link` tag is being read, there will be a **request** sent from the browser to the path listed as the `href`'s value (e.g. `styles.css`). That file is then loaded into the browser and, in this case, the styles are applied to the HTML document. - **Note:** We will cover this more during the "Lecture: Intro to SPA & AJAX" on the first day of Week 3 (October 5). ### Can you go over the `z-index`? ***Answer:*** > In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. **The z-index attribute lets you adjust the order of the layering of objects when rendering content.** I'm going to point you to the MDN documentation (and CSS-Tricks) to check out their sandbox example and dive deeper: - [MDN: z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) - Re: the "CSS Demo: z-index" sandbox example, observe the changes to the yellow box with the text "Change my z-index" when clicking the other declarations (e.g. `z-index: 5;`) in relation to the other boxes (e.g. blue rectangles with z-index values of 6, 4 and 2). - [MDN: Understanding CSS z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index) - [MDN: Stacking without the z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) - [MDN: Using z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index) - [CSS-Tricks: z-index](https://css-tricks.com/almanac/properties/z/z-index/) - [CSS-Tricks: How z-index Works](https://css-tricks.com/video-screencasts/40-how-z-index-works/) ### Regarding the specifity of this [foundations' example](https://codepen.io/FullstackAcademy/pen/zJKmqM) where the `p span` styles override `.main` styles. In my understanding, the _class_ selector should be more specific. Can you explain why the `p span` styles win? ***Answer:*** The properties in the `p span` rule are **only** applied if they do ***not*** conflict with the other selector rules (i.e. `.main` and `p`) (and the HTML exists). Thus, `p span` is _more_ specific about the styling of a **`span` tag that is a [descendant](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) of a `p` tag** _than_ styling that has been applied to a `p` tag's class, and the `span` elements (nested within `p` elements) take on `font-size: 44px`, `text-decoration: underline dotted red;`, etc. **Note:** I added the referenced code to the Cohort repo [here](https://github.com/FullstackAcademy/2009-GHP-NY-WEB-FT/tree/master/01-junior-phase/02-html-css/demo-foundations-specificity) to "mess around with it." Please schedule an office hour with an Instructor or Fellow to go over this in more depth if it's still cloudy. ### Can we please go over the `calc()` used in the CSS workshop? ***Answer:*** > The `calc()` CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed. > > The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: > - `+` Addition > - `-` Subtraction > - `*` Multiplication (at least one of the arguments must be a `<number>`) > - `/` Division (the right-hand side must be a `<number>`) I'm going to point you to the MDN documentation to check out their sandbox example, ***CSS Demo: calc()***, and dive deeper: [MDN: calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc). ### When do we use the different align properties (`align-content` vs `align-items`)? ***Answer:*** Check out this [Stackoverflow response](https://stackoverflow.com/a/34944673) regarding `align-content` vs `align-items` (incl. great visuals and sample codepen links)! Also, as linked in the [***Extra Resources***](https://github.com/FullstackAcademy/2009-GHP-NY-WEB-FT#day-2-html-css-box-diagramming-flexbox) section in the cohort repo, the [Flexbox Froggy](http://flexboxfroggy.com/) game will clarify this in the best way – by practicing! At Level 21, you will find the answer to your question. ### Can you review CSS media queries? ***Answer:*** This CSS-Tricks walkthrough is really good: [CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/). Additionally, CSS-Tricks has a page that lists a ton of different devices and media queries that would specifically target that device, which I find super useful: [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/). ## Lecture: Intro to Boxing ### Is "hero" a general term for HTML? Or just for personal webpages? ***Answer:*** **It is a _general_ term.** Please see [Optimizely](https://www.optimizely.com/optimization-glossary/hero-image/)'s two cents on what a "hero" is below: > A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user’s first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width. **Advantages of a Hero image design:** - Visual appeal - Text readability - Interactivity - Storytelling ***References:*** - [Optimizely: Hero Image](https://www.optimizely.com/optimization-glossary/hero-image/) - Envato's [Exploring the Hero Image Trend in Web Design](https://envato.com/blog/hero-image-trend-in-web-design/) - UX Planet's [Hero Image Website Design: 21 Best Examples & Templates for Your Inspiration](https://uxplanet.org/hero-image-website-design-21-best-examples-templates-for-your-inspiration-56cd3d79c688) ## Lecture: Flexbox No questions.