(Skill Swap Weekend) HTML5 & CSS3

I talk I gave during SkillSwap Weekend on front-end web development.

https://github.com/ryhan/Calculator
https://github.com/ryhan/Bounce

Transcript

1. HTML5 & CSS3 advanced
2. @ ryhan hassan SCS 2014
3. Expectation Familiar with HTML & CSS
4. push limits
5. HTML Semantic Tags header, footer, section, aside, article, nav... Media Content video, audio, and canvas tags Input Specify placeholders, min, max, autofocus, and regex validation. Also, input types for email, url, date and time. Data Attributes Add meta-data to elements without toggling classes and the like.
6. Selective CSS MediaQueries Trigger CSS based on device properties like screen-width, type of screen, and more. Scoped Styles Use <element><style type=”text/css” scoped=”scoped”> ... to limit a style to a parent element. CSS calc() Evaluate expressions in CSS to calculate mixed-unit values. For example, width: calc(50% - 40px); *, :not, nth-child, last-child, cycle Match all, anything but, an n-th element, a final element, or just cycle through CSS properties.
7. Drawing DOM Elements Canvas + WebGL SVG
8. Canvas Render bitmaps using Javascript Supports 3D rendering via WebGL
9. SVG Scalable Vector Graphic SVG DOM is represented as XML
10. Canvas vs. SVG Canvas is generally faster. SVG is easier to manipulate.
11. Sphere Let’s draw a 3D looking sphere Rounded <div> element .ball{ background-color: #900 // Red border-radius: 100px; height: 100px; width: 100px; }
12. Sphere Let’s draw a 3D looking sphere Rounded <div> element Add radial gradient // background: -webkit-radial-gradient( x, y, rx, ry, color1, color2); background: -webkit-radial-gradient( 30px 30px, 60px 60px, #F00, #900);
13. Sphere Let’s draw a 3D looking sphere Rounded <div> element Add radial gradient Add glow using :before .ball:before{ content: ‘ ‘; // CSS for light circle }
14. :before & :after Add content before or after another element.
16. Animation CSS Keyframes
17. Keyframe Animation Syntax @keyframes myAnimationName{ 0% { // CSS at beginning} n% { // CSS at any given point in time } 100% { // CSS at end of animation } } .someClass{ animation: myAnimationName [duration (s)]; }
18. Hands-On Project #1 Animate a Bouncing Ball 1. Download the starter code from github.com/ryhan/bounce 2. Open up index.html in Chrome, and bounce.CSS in a text editor. 3. Try adding another keyframe to the animation in bounce.CSS
19. Sample Animation @keyframes bounce{ 0% { opacity: 1; } 50% { opacity: 1; -webkit-transform:scale(2); } 100% { opacity: 1;} }
20. CSS Colors rgb, rgba, hsl, and opacity Box-Shadow, Box-reflect, & Outline box-shadow: 0 0 5px color 1; Linear & Radial Gradients background: -linear-gradient( top, color 1, color 2); Box-sizing: border-box; Width attribute takes into consideration padding and borders.
21. Typography font-face Embed fonts within a page. Also check out Google Web Fonts and Typekit. text-shadow Make text appear to be carved/pressed-in. text-shadow: [xOffset] [yOffset] [shadow color]; text-overflow: ellipsis; word-wrap: break-word;
22. User Interfaces CSS3 Buttons
23. Bootstrap, by Twitter Default primary button
24. Web 2.0-ish Buttons :active state (clicked state) background: -linear-gradient box-shadow, text-shadow
25. Hands-On Project #2 Design a button 1. Download the starter code from github.com/ryhan/Calculator 2. Open up index.html in Chrome, and calculator.CSS in a text editor. 3. Try changing the button colors, particularly the yellow button (.button.alt)
26. Cool Beans WebWorkers Run heavy scripts in the background independent of user-interface scripts. MathML XML format for embedding LaTeX style equations in HTML. APIs Accelerometer API, Camera API, File API, Geolocation, Speech, and much more.
27. Storage webStorage Better known as localStorage & sessionStorage, only stores strings. Unlike cookies, data isn’t included with server requests. WebSQL Supported by Chrome & Safari, Mozilla won’t implement indexeddb Supported by Firefox and Chrome, but not Safari.
28. @ ryhan hassan