Advanced HTML & CSS

Section 1

Normalize.css, Default Box Model, & More

• Using normalize.css
• Grouping CSS selectors using a comma separator
• Fluid, hi-res images
• Constraining the width of content
• Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
• Fixing spacing issues around images
• CSS shorthand for the background property

Font-Weight, Font-Style, & Unitless Line-Height

• Adding custom web fonts from Google Fonts
• Using font-weight & font-style
• Unitless line-height

Box Model: Content-Box vs. Border-Box

• How border-box is different than content-box
• Best practice for applying border-box to everything

Intro to SVG (Scalable Vector Graphics)

• Adding SVG to a webpage
• Sizing SVG
• Web Servers: Configuring a .htaccess file for SVG & gzip

Section 2

Embedding SVG

• Embedding SVG (instead of linking)
• Styling SVG using CSS
• Using currentColor

SVG Sprites

• Defining the SVG sprite
• Using a sprite
• Styling sprites

CSS Position Property

• The static value & the normal document flow
• The relative value
• The absolute value
• The dynamic duo: relative parent, absolute child
• The fixed value

Creating a Fixed Navbar & RGBA Color

• Creating a fixed navbar on wider screens
• RGBA color

Section 3

CSS Background Gradients & Gradient Patterns

• CSS background gradients
• Creating a striped background using gradients

Multiple Backgrounds & Viewport Sizing Units (vw)

• Multiple backgrounds on a single element
• Colorizing a photo by overlaying a transparent gradient
• Using viewport sizing units (vw)

Creating Columns with Inline-Block & Calc()

• Displaying content as columns using inline-block
• Using CSS calc()

CSS Variables (Custom Properties)

• Defining & using CSS variables
• The power of inheritance

Section 4

Relational Selectors

• Adjacent selectors
• Using first-child & last-child
• Using first-of-type
• Using nth-child
• Direct child/descendant selectors

Pseudo-Elements & the Content Property

• Using pseudo-elements
• The content property
• Seeing pseudo-elements in Chrome’s DevTools

Attribute Selectors

• Adding link icons with attribute selectors
• “Ends with” attribute selector
• “Begins with” attribute selector
• “Contains” attribute selector

Styling Forms with Attribute Selectors

• Styling form elements
• Targeting inputs with attribute selectors
• The ::placeholder pseudo element

Relative Sizes: Em and Rem

• Em units
• Rem units

Section 5

Flix: Creating a Scrollable Area

• Creating a horizontal scrollable area
• Optimizing the scrolling for iOS touch devices

Flix: Media Queries for Retina/HiDPI Graphics

• Using media queries to load hi-res images for Retina/HiDPI displays

Responsive Images

• Img srcset
• The picture element

Off-Screen Side Nav Using Only CSS

• Responsive off-screen navigation
• Toggling the navigation with a checkbox
• CSS transitions

Section 6

Box-Shadow, Text-Shadow, & Z-Index

• Using the CSS box-shadow property
• Changing an element’s default stack order with position and z-index
• Inset shadows
• Adding drop shadows to text with CSS text-shadow
• Layering multiple text-shadows for a detached outline effect

Hiding & Showing: Display, Visibility, & Opacity

• Removing an element from the normal document flow with display: none
• Hiding/showing elements with visibility
• Hiding/showing elements with opacity
• How display, visibility, & opacity differ

CSS Transitions

• Transition-property & transition-duration
• Transition shorthand & the all keyword
• Transitioning position coordinates
• Adding easing with transition-timing-function
• Custom easing with Ceaser

CSS Transforms with Transitions

• Testing transforms using the DevTools
• Adding a scale transform & transitioning it
• Transform origin
• Rotate & skew transforms
• Using the translate transform to nudge elements