web toolshtml & css flexbox, multi-column layout and css grid microformats and semantic markup...
TRANSCRIPT
![Page 2: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/2.jpg)
What is in your toolkit?
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 8: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/8.jpg)
What is the nature of the web?
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 16: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/16.jpg)
HTML & CSSFlexbox, multi-column layout and CSS GridMicroformats and semantic markup
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 17: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/17.jpg)
![Page 18: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/18.jpg)
<nav class="ucla-c-topic-nav"><ul> <li><a href="#climate-change">Climate Change</a></li> <li><a href="#energy">Energy</a></li> <li><a href="#policy-law-regulation">Policy, Law & Regulation</a></li> <li><a href="#economics-corporate-sustainability">Economics & Corporate Sustainability</a></li></ul></nav>
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 20: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/20.jpg)
.ucla-c-topic-nav ul { display: flex; flex-direction: column; list-style: none;}
@media screen and (min-width: 30em) { .ucla-c-topic-nav ul { display: flex; flex-direction: row; flex-wrap: wrap; }}
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 21: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/21.jpg)
![Page 22: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/22.jpg)
<h2><a id="climate-change"></a>Climate Change</h2>
<div class="ucla-c-faculty-advisors">
<ul> <li><a href="#">Alan Barreca</a></li> <li><a href="#">Alex Hall</a></li> <li><a href="#">Peter Kareiva</a></li> <li><a href="#">Liz Koslov</a></li></ul>
</div>
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 24: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/24.jpg)
@media screen and (min-width: 30em) { .ucla-c-faculty-advisors > ul { column-count: 3; column-gap: 1em; }}
@media screen and (min-width: 60em) { .ucla-c-faculty-advisors > ul { column-count: 5; column-gap: 1em; }}
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 25: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/25.jpg)
![Page 26: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/26.jpg)
Microformats and HTML5
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 27: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/27.jpg)
<div class="ucla-c-people-grid">
<article class="h-card"> <a class="u-url" href="#"> <h2 class="fn p-name">Jane Kitty Doe</h2> <img class="u-photo" src="https://placekitten.com/300/400" alt="kitten photo" /> <p class="p-job-title">Assistant Professor</p> <small class="p-org">Institute of the Environment and Sustainability</small> </a></article>
<article class="h-card"> ...</article></div>
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 28: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/28.jpg)
<div class="ucla-c-people-grid">
<article class="h-card"> <a class="u-url" href="#"> <figure> <img class="u-photo" src="https://placekitten.com/300/400" alt="kitten photo" /> <figcaption> <h2 class="fn p-name">Kitty Doe</h2> <p class="p-job-title">Assistant Professor</p> <small class="p-org">Institute of the Environment and Sustainability</small> </figcaption> </figure> </a> </article>
</div>
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 30: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/30.jpg)
![Page 31: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/31.jpg)
![Page 32: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/32.jpg)
![Page 33: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/33.jpg)
![Page 35: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/35.jpg)
.ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto;}
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 36: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/36.jpg)
/* fall back if no grid support */.ucla-c-people-grid > article { display: inline-block; margin: 1em; vertical-align: top; width: 300px;}
.ucla-c-people-grid > img { height: auto; width: 200px;}
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 37: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/37.jpg)
@supports (display: grid) {
.ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; }
/* reset properties */ .ucla-c-people-grid > article { margin: initial; width: initial; }}
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
![Page 39: Web ToolsHTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019](https://reader034.vdocuments.mx/reader034/viewer/2022042612/5f40d05e7efe021a041a1633/html5/thumbnails/39.jpg)
Art Direction for the Web.Thank you.
speaking.scottgruber.me @ UC Tech Santa Barbara 2019