Advanced HTML page authoring using modern CSS features

Who are we?

Speakers

Eiji Kitamura

Eiji is a Developer Advocate for Chrome at Google works closely with web application developers. Before joining Google, he has been specialized in SocialWeb technologies.

Alex Danilo

Alex is a Chrome Developer Advocate. He has been actively involved with web standards and development for many years. His passion is the Open Web.

Who are we?

Teaching Assistants

Brett Morgan
Ernest Delgado
Luke Mahe
Scott Rowe
Takuya Oikawa
Tarjei Vassbotn

Lesson 1:
Learning HTML5 slide layout

How HTML5 slide deck works

slide architecture

Locating slides to the center

centering

Exercise: Learning HTML5 slide layout

Distributing visible slides using CSS 2d transform

Using "transform: translate", you can distribute slides.

transform: translateX(10px); // horizontally move DOM
transform: translateY(20px); // vertically move DOM
transform: translate(10px, 20px); // set X and Y at once

CSS 2d transform

Enabling animated motion effect using CSS transition

By using "transition", you can animate slides on transition.

transition-property: margin; // name of property to animate
transition-duration: 0.3s; // duration of the animation to finish
transition-timing-function: ease-out; // how the animation flow over time
transition-delay: // delay to start the animation

CSS transition

Exercise: Learning HTML5 slide layout

Lesson 2:
Designing Slides

Reviewing basic CSS features

WebFonts

WebFonts brings fonts that are not installed onto your system.

CSS gradients

Gradients can be applied to any values that accept images.

background: linear-gradient(top, black, white);
background: radial-gradient(black, white)

Exercise: Designing slides

Add eye candies to enrich the slide.

Lesson 3:
Adding Dimension

Understanding 3D and Filter on CSS

Adding Z axis

CSS3 can change appearance of DOM element as 3D object. Using Z axis, you can represent perspective to the 2D display.

What is perspective

Depth of your view can be defined by using perspective property. The value represents how far from you to the original position.

CSS Filters

Exercise: Adding dimension

Give slides 3D feeling to add depth.

Lesson 4:
CSS Multi Column

Lesson 5:
CSS Flexbox

Lesson 6:
CSS Regions

Thanks!