Exam 98-375: HTML5 Application Development Fundamentals/Format the User Interface by Using CSS

This lesson covers Format the User Interface by Using CSS. It looks at CSS concepts, layout, text flow, and graphics.

Activity 1 - Understand the Core CSS Concepts

This objective may include but is not limited to: separating presentation from content – create content with HTML and style content with CSS; managing content flow - inline vs. block flow; managing positioning of individual elements – float vs. absolute positioning; managing content overflow – scrolling, visible, and hidden; basic CSS styling.

1. Read Internet Explorer® Learning.
2. Read Cascading Style Sheets.
3. Read W3Schools CSS.

Activity 2 - Arrange User Interface (UI) Content by Using CSS

This objective may include but is not limited to: using flexible box and grid layouts to establish content alignment, direction, and orientation; proportional scaling and use of “free scale” for elements within a flexible box or grid; ordering and arranging content; concepts for using flex box for simple layouts and grid for complex layouts; grid content properties for rows and columns; using application templates.

1. Read HTML Rocks.
2. Read http://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx Flexible box (“Flexbox”) Layout].
3. Read W3Schools Flexbox.

Activity 3 - Manage the Flow of Text Content by Using CSS

This objective may include but is not limited to: regions and using regions to flow text content between multiple sections – content source, content container, dynamic flow, flow-into, flow-from, msRegionUpdate, msRegionOverflow, msGetRegionContent(); columns and hyphenation and using these CSS settings to optimize the readability of text; using “positioned floats” to create text flow around a floating object.

1. Read Regions, Hyphenation, Multi-Column Layout.
2. Read Windows Dev Center Positioned Floats.
3. Read W3Schools Multicol.

Activity 4 - Manage the Graphical Interface by Using CSS

This objective may include but is not limited to: graphics effects - rounded corners, shadows, transparency, background gradients, typography, and Web Open Font Format; 2D and 3D transformations – translate, scale, rotate, skew, and 3D perspective transitions and animations; SVG filter effects; Canvas.

1. Read Microsoft Typography.
2. Read How to Add Rounded Corners with CSS.
3. Read W3Schools CSS3.

References

• Exam 98-375 HTML5 Development Fundamentals Student Study Guide
• Microsoft: HTML5 Application Development Fundamentals