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 ConceptsEdit
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.
Activity 2 - Arrange User Interface (UI) Content by Using CSSEdit
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.
- Read HTML Rocks.
- Read http://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx Flexible box (“Flexbox”) Layout].
- Read W3Schools Flexbox.
Activity 3 - Manage the Flow of Text Content by Using CSSEdit
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.
Activity 4 - Manage the Graphical Interface by Using CSSEdit
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.