1. CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design

2. HTML Head Elements Title & Meta – Important for SEO Link & Style – Call Style sheets – CSS in head Scripts Template – Load template via JavaScript

3. NEW HTML5 Embed Elements Video Audio Source – Alternative media depending on browser SVG (vectorial image) Math (formulas) Canvas – Graphs, game graphics, visual images on the fly

4. NEW HTML5 Section Elements Replaces generic “div” Allows for cleaner layout and “labeled” sections – Nav, Header, Section, Footer Label Page Content – Article – Address Most Important Content – Main (only one per doc)

5. Basics of CSS Box-Model Width = width + padding-left + padding-right + border-left + border-right Height = height + padding-top + padding-bottom + border-top + border-bottom Undeclared values (padding and border) are set to zero (css reset) or a browser default (which probably won’t be zero). Undeclared width of block-level elements will be 100%. Floated & Absolute element widths will be only as wide as the content inside them.

6. Basics of CSS Layout CSS Reset – Resets all browser-specific defaults – http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/ Fluid v. Fixed – Percentages vs. Fixed Pixel All Floating Elements Floating + Block Elements All Block Elements

7. Popular CSS3 Styles & Tricks Randy Jensen’s CSS3 Generator – Shows Example & Creates Code – Rounded Corners – Drop Shadow – Text Shadow – Gradients – Transform Scale, Rotate, Translate, Skew – Transition Background, Color, Height, Width, Outline http://css3generator.com/

8. Popular CSS3 Pseudo-classes Gives control over dynamically created content without adding class or id – :hover, :active, :visited ex. links – :first-child, :last-child ex. Add a top or bottom border – :nth-child(odd), :nth-child(even) ex. Table striping – :enabled, :disabled, :checked

9. Responsive Design Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly.

10. CSS3 Media Queries Extra small devices (phones, up to 480px) Small devices (tablets, 768px and up) Medium devices (big landscape tablets, laptops, and desktops, 992px and up) Large devices (large desktops, 1200px and up) Allows content rendering to adapt to conditions such as screen resolution. It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.

11. 2 Popular Responsive Design Frameworks Twitter Bootstrap Utilizes LESSS CSS & compiled via Node behave great in the latest desktop browsers (as well as IE7!), tablet and smartphone browsers. Skeleton A small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

12. Bootstrap Responsive Frameworks 12-column responsive grid As this is a 12-column grid, each.span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). EX:.span4 +.span8 = 12 total columns. Includes Base CSS, JavaScript Plugins & Form Controls

13. Bootstrap Responsive Break Points

14. Skeleton Responsive Frameworks Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phone. Full Width Column Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

15. Skeleton Responsive Break Points

16. 2014 Web Design Trends “The frontend curious continue to push the bounds of the modern interface this year, combining HTML5/CSS and JavaScript.” “Parallax scrolling websites - The mouse, tablet, touch, and pinch will be the future for how we experience things.” “With Flash going extinct, JavaScript is bleeding into both front and back-end now. Frameworks will continue to pop out of the woodworks - If something can be built in JavaScript, it will be.” 11 web design trends I'd like to see in 2014 Pete Sena, 2/14/14 CreativeBloq.com