| |
|
|
| |
EVENT DETAILS |
In this training youll learn how to use CSS for more complex page layouts. Youll learn about best practices as you gain a deeper understanding of CSS selectors and the various CSS properties available.
Youll create multi-column layouts using floats and inline-block. Gain a deeper understanding of how block and inline elements work. Master the positioning of elements (relative, absolute, fixed) and target elements with advanced CSS selectors. Learn about newer CSS3 transitions, transforms, and animations as well as create parallax scrolling effects using only CSS.
The course workbook can be completed in any code editor. In class, you can use either Sublime Text or Dreamweaver in Code View.
What Youll Learn
Section 1
Minimalist Blog: The Box Model
Topics
Using normalize.css
Setting page defaults with CSS
Scaling down hi-res images to fit the browser width
Constraining the width of content
The box model: adding padding, margins, & borders
Visualizing the box model in Chromes DevTools
Fixing spacing issues around images
Minimalist Blog: Streamlined CSS
Topics
Setting a scalable default line-height using a ratio
Grouping selectors using a comma separator
Numeric font-weight: beyond normal & bold
Adding a background image to the h1
Using shorthand with three values
Creating Columns with Float
Topics
Creating a 2-column layout with float
Solution #1: using the clear property
Adding a border between the columns
Solution #2: setting the overflow property to hidden
Introduction to Media Queries
Topics
Finding an appropriate breakpoint
Anatomy of a media query
Using a media query to create an alternate layout
Max-width media queries
Sizing down the headings on smaller screens
Section 2
The Display Property: A Deep Dive
Topics
Display types: block, inline, & inline-block
Styling the header & footer navigation the DRY way
Changing the display property to increase tappable area
Displaying the navigation side-by-side on wider screens
Using inline-block as an alternative to float
The Position Property: The Key to Complex Layouts
Topics
The static value & the normal document flow
A nostalgic wanderer: the relative value
The absolute value
The dynamic duo: relative parent, absolute child
The fixed value
Creating a Fixed Header
Topics
Moving the Contact list item to the navbars far right
Creating a fixed header on wider screens
Positioning a background image next to the FAQ
Image Replacement
Topics
Replacing HTML text with CSS background images
Removing text with negative text-indent value
Using overflow: hidden;
Removing text with a zero height
Creating a fluid image container by using proportional top padding
Section 3
CSS Sprites
Topics
What are Sprites?
Creating Sprites
Image Replacement
Background Gradients & Transparent Colors
Topics
Specifying colors are RGB
Adding transparency (alpha) to colored backgrounds with RGBA
CSS background gradients
Multi-Column Layout
Topics
3-column layout using inline-block
Nested CSS Selectors
CSS Selectors
Topics
adjacent
first-of-type
first-child
last-child
last-of-type
nth-child
child selector
:before and :after
Section 4
Attribute Selectors
Topics
Attribute selector syntax
Caret (^) Operator
Dollar ($) Operator
Asterisk (*) Operator
Form Styling
Topics
Using an attribute selector to target inputs
Overriding default form element styling
Clearing Floats
Topics
The CSS Clearfix class
Sizing Typography
Topics
Working with REM
REM versus EM
Section 5
CSS3 Shadows
Topics
Box shadow
Text shadow
z-index
Hiding & Showing Elements
Topics
display: none;
Visibility
Opacity
CSS Transitions
Topics
Transition-Property
Transition-Duration
Transition Shorthand & the Transition Stack
CSS Transforms
Topics
The Scale Transform
The Rotation Transform
Transitioning Transforms
Section 6
You are Here Indicator
Topics
Navigation page marker
CSS Shapes
CSS Responsive Scrolling Techniques Part 1
Topics
Initial Page Styling
CSS Responsive Scrolling Techniques Part 2
Topics
Creating an animated CSS transition for a YouTube video
CSS Responsive Scrolling Techniques Part 3
Topics
Animating the panorama
Making the layout responsive
|
|
|
|
|
|
